@openvoxproject/voxblocks 0.12.0 → 0.14.0

package/dist/voxblocks.js

@@ -1,40 +1,40 @@
-import { css as d, LitElement as h, html as l, svg as c, nothing as v } from "lit";
-import { property as n, customElement as p, state as Z, query as rt } from "lit/decorators.js";
-import { classMap as Et } from "lit/directives/class-map.js";
-import { ifDefined as E } from "lit/directives/if-defined.js";
-import { live as Mt } from "lit/directives/live.js";
-var At = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, V = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ht(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 && At(t, a, e), e;
+import { css as d, LitElement as p, html as l, svg as c, nothing as v } from "lit";
+import { property as n, customElement as h, state as De, query as Qe } from "lit/decorators.js";
+import { classMap as Oo } from "lit/directives/class-map.js";
+import { ifDefined as L } from "lit/directives/if-defined.js";
+import { live as go } from "lit/directives/live.js";
+var ko = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, O = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Po(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 && ko(o, a, e), e;
 };
-let g = class extends h {
+let f = class extends p {
   constructor() {
     super(...arguments), this.variant = "brand", this.size = "md", this.type = "button", this.disabled = !1;
   }
   render() {
-    const o = Et({
+    const t = Oo({
       button: !0,
       [this.variant]: !0,
       [this.size]: !0
     });
     return this.href !== void 0 && !this.disabled ? l`
         <a
-          class=${o}
+          class=${t}
           href=${this.href}
-          target=${E(this.target)}
-          rel=${E(this.target === "_blank" ? "noreferrer" : void 0)}
+          target=${L(this.target)}
+          rel=${L(this.target === "_blank" ? "noreferrer" : void 0)}
         >
           <slot></slot>
         </a>
       ` : l`
-      <button class=${o} type=${this.type} ?disabled=${this.disabled}>
+      <button class=${t} type=${this.type} ?disabled=${this.disabled}>
         <slot></slot>
       </button>
     `;
   }
 };
-g.styles = d`
+f.styles = d`
     :host {
       display: inline-block;
     }
@@ -142,33 +142,33 @@ g.styles = d`
       border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
     }
   `;
-V([
+O([
   n()
-], g.prototype, "variant", 2);
-V([
+], f.prototype, "variant", 2);
+O([
   n()
-], g.prototype, "size", 2);
-V([
+], f.prototype, "size", 2);
+O([
   n()
-], g.prototype, "href", 2);
-V([
+], f.prototype, "href", 2);
+O([
   n()
-], g.prototype, "target", 2);
-V([
+], f.prototype, "target", 2);
+O([
   n()
-], g.prototype, "type", 2);
-V([
+], f.prototype, "type", 2);
+O([
   n({ type: Boolean, reflect: !0 })
-], g.prototype, "disabled", 2);
-g = V([
-  p("vox-button")
-], g);
-var Bt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, at = (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 && Bt(t, a, e), e;
+], f.prototype, "disabled", 2);
+f = O([
+  h("vox-button")
+], f);
+var Lo = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Ye = (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 && Lo(o, a, e), e;
 };
-let K = class extends h {
+let T = class extends p {
   constructor() {
     super(...arguments), this.href = "#";
   }
@@ -184,7 +184,7 @@ let K = class extends h {
     `;
   }
 };
-K.styles = d`
+T.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -221,60 +221,60 @@ K.styles = d`
       transform: translateX(3px);
     }
   `;
-at([
+Ye([
   n()
-], K.prototype, "href", 2);
-at([
+], T.prototype, "href", 2);
+Ye([
   n()
-], K.prototype, "target", 2);
-K = at([
-  p("vox-cta")
-], K);
-var Tt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, Ne = (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 = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Tt(t, a, e), e;
+], T.prototype, "target", 2);
+T = Ye([
+  h("vox-cta")
+], T);
+var jo = Object.defineProperty, zo = Object.getOwnPropertyDescriptor, Ee = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? zo(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;
 };
-const yt = "vox-theme", Oe = "data-vox-theme";
-let A = class extends h {
+const fo = "vox-theme", we = "data-vox-theme";
+let V = class extends p {
   constructor() {
-    super(...arguments), this.lightLabel = "Switch to dark theme", this.darkLabel = "Switch to light theme", this.dark = !1, this.media = window.matchMedia("(prefers-color-scheme: dark)"), this.handleSystemChange = (o) => {
-      localStorage.getItem(yt) || document.documentElement.setAttribute(Oe, o.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 = (t) => {
+      localStorage.getItem(fo) || document.documentElement.setAttribute(we, t.matches ? "dark" : "light");
     };
   }
   connectedCallback() {
     super.connectedCallback(), this.syncFromDocument(), this.observer = new MutationObserver(() => this.syncFromDocument()), this.observer.observe(document.documentElement, {
       attributes: !0,
-      attributeFilter: [Oe]
+      attributeFilter: [we]
     }), this.media.addEventListener("change", this.handleSystemChange);
   }
   disconnectedCallback() {
-    var o;
-    super.disconnectedCallback(), (o = this.observer) == null || o.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
+    var t;
+    super.disconnectedCallback(), (t = this.observer) == null || t.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
   }
   syncFromDocument() {
-    const o = document.documentElement.getAttribute(Oe) === "dark";
-    this.dark = o, this.toggleAttribute("dark", o);
+    const t = document.documentElement.getAttribute(we) === "dark";
+    this.dark = t, this.toggleAttribute("dark", t);
   }
   handleClick() {
-    const o = this.dark ? "light" : "dark";
-    document.documentElement.setAttribute(Oe, o), localStorage.setItem(yt, o), this.dispatchEvent(
+    const t = this.dark ? "light" : "dark";
+    document.documentElement.setAttribute(we, t), localStorage.setItem(fo, t), this.dispatchEvent(
       new CustomEvent("vox-theme-change", {
-        detail: { theme: o },
+        detail: { theme: t },
         bubbles: !0,
         composed: !0
       })
     );
   }
   render() {
-    const o = this.dark ? this.darkLabel : this.lightLabel;
+    const t = this.dark ? this.darkLabel : this.lightLabel;
     return l`
       <button
         type="button"
         role="switch"
         aria-checked=${this.dark}
-        aria-label=${o}
-        title=${o}
+        aria-label=${t}
+        title=${t}
         @click=${this.handleClick}
       >
         <span class="track">
@@ -291,7 +291,7 @@ let A = class extends h {
     `;
   }
 };
-A.styles = d`
+V.styles = d`
     :host {
       display: inline-flex;
     }
@@ -350,19 +350,19 @@ A.styles = d`
       transform: translateX(20px);
     }
   `;
-Ne([
+Ee([
   n({ attribute: "light-label" })
-], A.prototype, "lightLabel", 2);
-Ne([
+], V.prototype, "lightLabel", 2);
+Ee([
   n({ attribute: "dark-label" })
-], A.prototype, "darkLabel", 2);
-Ne([
-  Z()
-], A.prototype, "dark", 2);
-A = Ne([
-  p("vox-theme-toggle")
-], A);
-const y = {
+], V.prototype, "darkLabel", 2);
+Ee([
+  De()
+], V.prototype, "dark", 2);
+V = Ee([
+  h("vox-theme-toggle")
+], V);
+const m = {
   // Phase 1: shared UI baseline -----------------------------------------
   search: c`<circle cx="21" cy="21" r="13"/><path d="M30.5 30.5 L41 41"/>`,
   close: c`<path d="M14 14 L34 34 M34 14 L14 34"/>`,
@@ -450,18 +450,18 @@ const y = {
   accessibility: c`<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: c`<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 It = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, Te = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Rt(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;
+var Do = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, He = (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 = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Do(o, a, e), e;
 };
-let H = class extends h {
+let j = class extends p {
   constructor() {
     super(...arguments), this.name = "info", this.size = "md";
   }
   render() {
-    const o = y[this.name];
-    return o ? l`
+    const t = m[this.name];
+    return t ? l`
       <svg
         viewBox="0 0 48 48"
         fill="none"
@@ -473,12 +473,12 @@ let H = class extends h {
         aria-hidden=${this.label ? v : "true"}
         aria-label=${this.label ?? v}
       >
-        ${o}
+        ${t}
       </svg>
     ` : v;
   }
 };
-H.styles = d`
+j.styles = d`
     :host {
       display: inline-flex;
       flex: none;
@@ -509,24 +509,24 @@ H.styles = d`
       height: 48px;
     }
   `;
-Te([
+He([
   n()
-], H.prototype, "name", 2);
-Te([
+], j.prototype, "name", 2);
+He([
   n({ reflect: !0 })
-], H.prototype, "size", 2);
-Te([
+], j.prototype, "size", 2);
+He([
   n()
-], H.prototype, "label", 2);
-H = Te([
-  p("vox-icon")
-], H);
-var Zt = Object.defineProperty, xe = (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 && Zt(t, a, e), e;
+], j.prototype, "label", 2);
+j = He([
+  h("vox-icon")
+], j);
+var Ho = Object.defineProperty, ce = (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 && Ho(o, a, e), e;
 };
-const bt = class bt extends h {
+const xo = class xo extends p {
   constructor() {
     super(), this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
   }
@@ -546,12 +546,12 @@ const bt = class bt extends h {
     return this.internals.reportValidity();
   }
   /** Mirror a native inner control's validity onto the host element. */
-  syncValidity(t) {
-    this.internals.setValidity(t.validity, t.validationMessage, t);
+  syncValidity(o) {
+    this.internals.setValidity(o.validity, o.validationMessage, o);
   }
-  renderLabel(t) {
+  renderLabel(o) {
     return this.label ? l`
-      <label class="label" for=${t}>
+      <label class="label" for=${o}>
         ${this.label}${this.required ? l`<span class="required-mark" aria-hidden="true"> *</span>` : v}
       </label>
     ` : v;
@@ -560,24 +560,24 @@ const bt = class bt extends h {
     return this.note ? l`<p class="note">${this.note}</p>` : v;
   }
 };
-bt.formAssociated = !0;
-let x = bt;
-xe([
+xo.formAssociated = !0;
+let x = xo;
+ce([
   n()
 ], x.prototype, "name");
-xe([
+ce([
   n()
 ], x.prototype, "label");
-xe([
+ce([
   n()
 ], x.prototype, "note");
-xe([
+ce([
   n({ type: Boolean, reflect: !0 })
 ], x.prototype, "disabled");
-xe([
+ce([
   n({ type: Boolean, reflect: !0 })
 ], x.prototype, "required");
-const ue = d`
+const de = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -644,7 +644,7 @@ const ue = d`
   :host([data-vox-group='end']) .control {
     border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
   }
-`, Ot = d`
+`, bo = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -673,12 +673,12 @@ const ue = d`
     margin: 0;
   }
 `;
-var Ft = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, st = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ut(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 && Ft(t, a, e), e;
+var So = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, eo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ao(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 && So(o, a, e), e;
 };
-let G = class extends x {
+let R = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -692,8 +692,8 @@ let G = class extends x {
       this.renderRoot.querySelector("input") ?? void 0
     );
   }
-  handleChange(o) {
-    this.checked = o.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  handleChange(t) {
+    this.checked = t.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
     return l`
@@ -714,8 +714,8 @@ let G = class extends x {
     `;
   }
 };
-G.styles = [
-  Ot,
+R.styles = [
+  bo,
   d`
       .box {
         flex: none;
@@ -755,21 +755,21 @@ G.styles = [
       }
     `
 ];
-st([
+eo([
   n({ type: Boolean, reflect: !0 })
-], G.prototype, "checked", 2);
-st([
+], R.prototype, "checked", 2);
+eo([
   n()
-], G.prototype, "value", 2);
-G = st([
-  p("vox-checkbox")
-], G);
-var Kt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, F = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Gt(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 && Kt(t, a, e), e;
+], R.prototype, "value", 2);
+R = eo([
+  h("vox-checkbox")
+], R);
+var Bo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, I = (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 && Bo(o, a, e), e;
 };
-let m = class extends x {
+let g = class extends x {
   constructor() {
     super(...arguments), this.multiple = !1, this.buttonLabel = "Choose a file", this.fileNames = [];
   }
@@ -777,12 +777,12 @@ let m = class extends x {
     this.fileNames = [], this.inputEl && (this.inputEl.value = ""), this.internals.setFormValue(null);
   }
   handleChange() {
-    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.internals.setValidity(
-      this.required && o.length === 0 ? { valueMissing: !0 } : {},
+    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 } : {},
       "Please select a file.",
       this.inputEl
     ), this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -795,7 +795,7 @@ let m = class extends x {
           <input
             id="file"
             type="file"
-            accept=${E(this.accept)}
+            accept=${L(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
             @change=${this.handleChange}
@@ -812,8 +812,8 @@ let m = class extends x {
     `;
   }
 };
-m.styles = [
-  ue,
+g.styles = [
+  de,
   d`
       input {
         position: absolute;
@@ -862,30 +862,30 @@ m.styles = [
       }
     `
 ];
-F([
+I([
   n()
-], m.prototype, "accept", 2);
-F([
+], g.prototype, "accept", 2);
+I([
   n({ type: Boolean })
-], m.prototype, "multiple", 2);
-F([
+], g.prototype, "multiple", 2);
+I([
   n({ attribute: "button-label" })
-], m.prototype, "buttonLabel", 2);
-F([
-  Z()
-], m.prototype, "fileNames", 2);
-F([
-  rt("input")
-], m.prototype, "inputEl", 2);
-m = F([
-  p("vox-file-input")
-], m);
-var Yt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, U = (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 && Yt(t, a, e), e;
+], g.prototype, "buttonLabel", 2);
+I([
+  De()
+], g.prototype, "fileNames", 2);
+I([
+  Qe("input")
+], g.prototype, "inputEl", 2);
+g = I([
+  h("vox-file-input")
+], g);
+var Io = Object.defineProperty, No = Object.getOwnPropertyDescriptor, N = (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 && Io(o, a, e), e;
 };
-let w = class extends x {
+let b = class extends x {
   constructor() {
     super(...arguments), this.type = "text", this.value = "", this.readonly = !1;
   }
@@ -894,15 +894,15 @@ let w = class extends x {
   }
   updated() {
     this.internals.setFormValue(this.value);
-    const o = this.renderRoot.querySelector("input");
-    o && this.syncValidity(o);
+    const t = this.renderRoot.querySelector("input");
+    t && this.syncValidity(t);
   }
-  focus(o) {
-    var t;
-    (t = this.renderRoot.querySelector("input")) == null || t.focus(o);
+  focus(t) {
+    var o;
+    (o = this.renderRoot.querySelector("input")) == null || o.focus(t);
   }
-  handleInput(o) {
-    this.value = o.target.value;
+  handleInput(t) {
+    this.value = t.target.value;
   }
   handleChange() {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -915,9 +915,9 @@ let w = class extends x {
           id="input"
           class="control"
           type=${this.type}
-          .value=${Mt(this.value)}
-          placeholder=${E(this.placeholder)}
-          autocomplete=${E(this.autocomplete)}
+          .value=${go(this.value)}
+          placeholder=${L(this.placeholder)}
+          autocomplete=${L(this.autocomplete)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
@@ -930,35 +930,35 @@ let w = class extends x {
     `;
   }
 };
-w.styles = ue;
-U([
+b.styles = de;
+N([
   n()
-], w.prototype, "type", 2);
-U([
+], b.prototype, "type", 2);
+N([
   n()
-], w.prototype, "value", 2);
-U([
+], b.prototype, "value", 2);
+N([
   n()
-], w.prototype, "placeholder", 2);
-U([
+], b.prototype, "placeholder", 2);
+N([
   n()
-], w.prototype, "autocomplete", 2);
-U([
+], b.prototype, "autocomplete", 2);
+N([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "readonly", 2);
-w = U([
-  p("vox-input")
-], w);
-var Wt = Object.getOwnPropertyDescriptor, Jt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Wt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
-    (i = o[s]) && (e = i(e) || e);
+], b.prototype, "readonly", 2);
+b = N([
+  h("vox-input")
+], b);
+var To = Object.getOwnPropertyDescriptor, Ro = (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 = i(e) || e);
   return e;
 };
-let Ye = 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";
+let Fe = class extends p {
+  handleSlotChange(t) {
+    const o = t.target.assignedElements();
+    o.forEach((a, r) => {
+      const e = r === 0 ? "start" : r === o.length - 1 ? "end" : "middle";
       a.setAttribute("data-vox-group", e);
     });
   }
@@ -970,7 +970,7 @@ let Ye = class extends h {
     `;
   }
 };
-Ye.styles = d`
+Fe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1012,15 +1012,15 @@ Ye.styles = d`
       border-left: none;
     }
   `;
-Ye = Jt([
-  p("vox-input-group")
-], Ye);
-var Qt = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, qe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? eo(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;
+Fe = Ro([
+  h("vox-input-group")
+], Fe);
+var Fo = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, Se = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Zo(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 && Fo(o, a, e), e;
 };
-let B = class extends h {
+let z = class extends p {
   constructor() {
     super(...arguments), this.value = "", this.checked = !1, this.disabled = !1;
   }
@@ -1029,8 +1029,8 @@ let B = class extends h {
       new CustomEvent("vox-radio-select", { bubbles: !0, composed: !0 })
     );
   }
-  handleKeydown(o) {
-    (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.select());
+  handleKeydown(t) {
+    (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.select());
   }
   render() {
     return l`
@@ -1049,7 +1049,7 @@ let B = class extends h {
     `;
   }
 };
-B.styles = d`
+z.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1098,24 +1098,24 @@ B.styles = d`
       outline-offset: 2px;
     }
   `;
-qe([
+Se([
   n()
-], B.prototype, "value", 2);
-qe([
+], z.prototype, "value", 2);
+Se([
   n({ type: Boolean, reflect: !0 })
-], B.prototype, "checked", 2);
-qe([
+], z.prototype, "checked", 2);
+Se([
   n({ type: Boolean, reflect: !0 })
-], B.prototype, "disabled", 2);
-B = qe([
-  p("vox-radio")
-], B);
-var to = Object.defineProperty, oo = Object.getOwnPropertyDescriptor, kt = (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 && to(t, a, e), e;
+], z.prototype, "disabled", 2);
+z = Se([
+  h("vox-radio")
+], z);
+var Ko = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, mo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Uo(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 && Ko(o, a, e), e;
 };
-let Pe = class extends x {
+let $e = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1133,32 +1133,32 @@ let Pe = class extends x {
     ), this.syncRadios();
   }
   syncRadios() {
-    const o = this.radios, t = o.some((a) => a.value === this.value && this.value !== "");
-    o.forEach((a, r) => {
+    const t = this.radios, o = t.some((a) => a.value === this.value && this.value !== "");
+    t.forEach((a, r) => {
       var s, i;
       a.checked = this.value !== "" && a.value === this.value;
-      const e = t ? a.checked : r === 0;
+      const e = o ? a.checked : r === 0;
       (i = (s = a.shadowRoot) == null ? void 0 : s.querySelector(".radio")) == null || i.setAttribute("tabindex", e ? "0" : "-1");
     });
   }
-  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 }))));
+  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 }))));
   }
-  handleKeydown(o) {
-    var _, Me;
+  handleKeydown(t) {
+    var ye, uo;
     const a = {
       ArrowDown: 1,
       ArrowRight: 1,
       ArrowUp: -1,
       ArrowLeft: -1
-    }[o.key];
+    }[t.key];
     if (!a) return;
-    o.preventDefault();
-    const r = this.radios.filter((Ge) => !Ge.disabled);
+    t.preventDefault();
+    const r = this.radios.filter((Re) => !Re.disabled);
     if (r.length === 0) return;
-    const e = r.findIndex((Ge) => Ge.checked), s = (Math.max(e, 0) + a + r.length) % r.length, i = r[s];
-    i.select(), (Me = (_ = i.shadowRoot) == null ? void 0 : _.querySelector(".radio")) == null || Me.focus();
+    const e = r.findIndex((Re) => Re.checked), s = (Math.max(e, 0) + a + r.length) % r.length, i = r[s];
+    i.select(), (uo = (ye = i.shadowRoot) == null ? void 0 : ye.querySelector(".radio")) == null || uo.focus();
   }
   render() {
     return l`
@@ -1178,8 +1178,8 @@ let Pe = class extends x {
     `;
   }
 };
-Pe.styles = [
-  ue,
+$e.styles = [
+  de,
   d`
       .options {
         display: flex;
@@ -1189,18 +1189,18 @@ Pe.styles = [
       }
     `
 ];
-kt([
+mo([
   n()
-], Pe.prototype, "value", 2);
-Pe = kt([
-  p("vox-radio-group")
-], Pe);
-var ro = Object.defineProperty, ao = Object.getOwnPropertyDescriptor, it = (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 && ro(t, a, e), e;
+], $e.prototype, "value", 2);
+$e = mo([
+  h("vox-radio-group")
+], $e);
+var Go = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, oo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Xo(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 && Go(o, a, e), e;
 };
-let Y = class extends x {
+let F = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1212,9 +1212,9 @@ let Y = class extends x {
   }
   syncOptions() {
     if (!this.selectEl) return;
-    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))
+    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))
     ), this.value && (this.selectEl.value = this.value), this.value = this.selectEl.value);
   }
   handleChange() {
@@ -1237,8 +1237,8 @@ let Y = class extends x {
     `;
   }
 };
-Y.styles = [
-  ue,
+F.styles = [
+  de,
   d`
       select.control {
         appearance: none;
@@ -1250,21 +1250,21 @@ Y.styles = [
       }
     `
 ];
-it([
+oo([
   n()
-], Y.prototype, "value", 2);
-it([
-  rt("select")
-], Y.prototype, "selectEl", 2);
-Y = it([
-  p("vox-select")
-], Y);
-var so = Object.defineProperty, io = Object.getOwnPropertyDescriptor, nt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? io(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;
+], F.prototype, "value", 2);
+oo([
+  Qe("select")
+], F.prototype, "selectEl", 2);
+F = oo([
+  h("vox-select")
+], F);
+var Jo = Object.defineProperty, Wo = Object.getOwnPropertyDescriptor, to = (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 && Jo(o, a, e), e;
 };
-let X = class extends x {
+let Z = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -1274,8 +1274,8 @@ let X = class extends x {
   updated() {
     this.internals.setFormValue(this.checked ? this.value : null);
   }
-  handleChange(o) {
-    this.checked = o.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  handleChange(t) {
+    this.checked = t.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
     return l`
@@ -1293,8 +1293,8 @@ let X = class extends x {
     `;
   }
 };
-X.styles = [
-  Ot,
+Z.styles = [
+  bo,
   d`
       .track {
         flex: none;
@@ -1333,21 +1333,21 @@ X.styles = [
       }
     `
 ];
-nt([
+to([
   n({ type: Boolean, reflect: !0 })
-], X.prototype, "checked", 2);
-nt([
+], Z.prototype, "checked", 2);
+to([
   n()
-], X.prototype, "value", 2);
-X = nt([
-  p("vox-switch")
-], X);
-var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, fe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? lo(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 && no(t, a, e), e;
+], Z.prototype, "value", 2);
+Z = to([
+  h("vox-switch")
+], Z);
+var Qo = Object.defineProperty, Yo = Object.getOwnPropertyDescriptor, he = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Yo(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;
 };
-let C = class extends x {
+let y = class extends x {
   constructor() {
     super(...arguments), this.value = "", this.rows = 4, this.readonly = !1;
   }
@@ -1356,15 +1356,15 @@ let C = class extends x {
   }
   updated() {
     this.internals.setFormValue(this.value);
-    const o = this.renderRoot.querySelector("textarea");
-    o && this.syncValidity(o);
+    const t = this.renderRoot.querySelector("textarea");
+    t && this.syncValidity(t);
   }
-  focus(o) {
-    var t;
-    (t = this.renderRoot.querySelector("textarea")) == null || t.focus(o);
+  focus(t) {
+    var o;
+    (o = this.renderRoot.querySelector("textarea")) == null || o.focus(t);
   }
-  handleInput(o) {
-    this.value = o.target.value;
+  handleInput(t) {
+    this.value = t.target.value;
   }
   handleChange() {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -1377,8 +1377,8 @@ let C = class extends x {
           id="textarea"
           class="control"
           rows=${this.rows}
-          .value=${Mt(this.value)}
-          placeholder=${E(this.placeholder)}
+          .value=${go(this.value)}
+          placeholder=${L(this.placeholder)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
@@ -1390,8 +1390,8 @@ let C = class extends x {
     `;
   }
 };
-C.styles = [
-  ue,
+y.styles = [
+  de,
   d`
       textarea.control {
         resize: vertical;
@@ -1399,27 +1399,27 @@ C.styles = [
       }
     `
 ];
-fe([
+he([
   n()
-], C.prototype, "value", 2);
-fe([
+], y.prototype, "value", 2);
+he([
   n()
-], C.prototype, "placeholder", 2);
-fe([
+], y.prototype, "placeholder", 2);
+he([
   n({ type: Number })
-], C.prototype, "rows", 2);
-fe([
+], y.prototype, "rows", 2);
+he([
   n({ type: Boolean, reflect: !0 })
-], C.prototype, "readonly", 2);
-C = fe([
-  p("vox-textarea")
-], C);
-var co = Object.defineProperty, po = Object.getOwnPropertyDescriptor, ge = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? po(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;
+], y.prototype, "readonly", 2);
+y = he([
+  h("vox-textarea")
+], y);
+var et = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, pe = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ot(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 && et(o, a, e), e;
 };
-let M = class extends h {
+let w = class extends p {
   constructor() {
     super(...arguments), this.alt = "", this.initials = "", this.size = "md";
   }
@@ -1431,7 +1431,7 @@ let M = class extends h {
     `;
   }
 };
-M.styles = d`
+w.styles = d`
     :host {
       display: inline-block;
     }
@@ -1479,33 +1479,33 @@ M.styles = d`
       font-size: 28px;
     }
   `;
-ge([
+pe([
   n()
-], M.prototype, "src", 2);
-ge([
+], w.prototype, "src", 2);
+pe([
   n()
-], M.prototype, "alt", 2);
-ge([
+], w.prototype, "alt", 2);
+pe([
   n()
-], M.prototype, "initials", 2);
-ge([
+], w.prototype, "initials", 2);
+pe([
   n({ reflect: !0 })
-], M.prototype, "size", 2);
-M = ge([
-  p("vox-avatar")
-], M);
-var ho = Object.defineProperty, vo = Object.getOwnPropertyDescriptor, lt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? vo(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 && ho(t, a, e), e;
+], w.prototype, "size", 2);
+w = pe([
+  h("vox-avatar")
+], w);
+var tt = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, ro = (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;
 };
-let W = class extends h {
+let K = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.reverse = !1, this.hasActions = !1;
   }
-  handleActionsSlotChange(o) {
-    const t = o.target;
-    this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleActionsSlotChange(t) {
+    const o = t.target;
+    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return l`
@@ -1522,7 +1522,7 @@ let W = class extends h {
     `;
   }
 };
-W.styles = d`
+K.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1584,21 +1584,21 @@ W.styles = d`
       display: none;
     }
   `;
-lt([
+ro([
   n()
-], W.prototype, "heading", 2);
-lt([
+], K.prototype, "heading", 2);
+ro([
   n({ type: Boolean, reflect: !0 })
-], W.prototype, "reverse", 2);
-W = lt([
-  p("vox-billboard")
-], W);
-var xo = Object.getOwnPropertyDescriptor, uo = (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 = i(e) || e);
+], K.prototype, "reverse", 2);
+K = ro([
+  h("vox-billboard")
+], K);
+var at = Object.getOwnPropertyDescriptor, st = (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 = i(e) || e);
   return e;
 };
-let Xe = class extends h {
+let Ze = class extends p {
   render() {
     return l`
       <nav aria-label="Breadcrumbs">
@@ -1607,7 +1607,7 @@ let Xe = class extends h {
     `;
   }
 };
-Xe.styles = d`
+Ze.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1641,21 +1641,21 @@ Xe.styles = d`
       color: var(--vox-color-text-3);
     }
   `;
-Xe = uo([
-  p("vox-breadcrumbs")
-], Xe);
-var fo = Object.defineProperty, go = Object.getOwnPropertyDescriptor, Ie = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? go(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 && fo(t, a, e), e;
+Ze = st([
+  h("vox-breadcrumbs")
+], Ze);
+var it = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, Ae = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? nt(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 && it(o, a, e), e;
 };
-let N = class extends h {
+let D = class extends p {
   constructor() {
-    super(...arguments), this.siteTitle = "", this.href = "/", this.mobileOpen = !1, this.handleOutsideClick = (o) => {
-      this.mobileOpen && !o.composedPath().includes(this) && (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());
+    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());
     }, this.toggleMobileMenu = () => {
       this.mobileOpen = !this.mobileOpen;
     }, this.closeMobileMenu = () => {
@@ -1693,7 +1693,7 @@ let N = class extends h {
             stroke-linejoin="round"
             aria-hidden="true"
           >
-            ${this.mobileOpen ? y.close : y.menu}
+            ${this.mobileOpen ? m.close : m.menu}
           </svg>
         </button>
         <div id="nav-wrap" class="nav-wrap${this.mobileOpen ? " open" : ""}">
@@ -1708,7 +1708,7 @@ let N = class extends h {
     `;
   }
 };
-N.styles = d`
+D.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1838,24 +1838,24 @@ N.styles = d`
       }
     }
   `;
-Ie([
+Ae([
   n({ attribute: "site-title" })
-], N.prototype, "siteTitle", 2);
-Ie([
+], D.prototype, "siteTitle", 2);
+Ae([
   n()
-], N.prototype, "href", 2);
-Ie([
-  Z()
-], N.prototype, "mobileOpen", 2);
-N = Ie([
-  p("vox-header")
-], N);
-var bo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, be = (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 && bo(t, a, e), e;
+], D.prototype, "href", 2);
+Ae([
+  De()
+], D.prototype, "mobileOpen", 2);
+D = Ae([
+  h("vox-header")
+], D);
+var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ve = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ct(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 && lt(o, a, e), e;
 };
-let O = class extends h {
+let $ = class extends p {
   constructor() {
     super(...arguments), this.previousLabel = "", this.nextLabel = "";
   }
@@ -1878,7 +1878,7 @@ let O = class extends h {
     `;
   }
 };
-O.styles = d`
+$.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1928,37 +1928,37 @@ O.styles = d`
       color: var(--vox-color-brand-1);
     }
   `;
-be([
+ve([
   n({ attribute: "previous-href" })
-], O.prototype, "previousHref", 2);
-be([
+], $.prototype, "previousHref", 2);
+ve([
   n({ attribute: "previous-label" })
-], O.prototype, "previousLabel", 2);
-be([
+], $.prototype, "previousLabel", 2);
+ve([
   n({ attribute: "next-href" })
-], O.prototype, "nextHref", 2);
-be([
+], $.prototype, "nextHref", 2);
+ve([
   n({ attribute: "next-label" })
-], O.prototype, "nextLabel", 2);
-O = be([
-  p("vox-series-nav")
-], O);
-var mo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, f = (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 && mo(t, a, e), e;
+], $.prototype, "nextLabel", 2);
+$ = ve([
+  h("vox-series-nav")
+], $);
+var dt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, u = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ht(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;
 };
-let T = class extends h {
+let E = class extends p {
   constructor() {
-    super(...arguments), this.label = "Section", this.toggleLabel = "Menu", this.mobileOpen = !1, this.handleOutsideClick = (o) => {
-      this.mobileOpen && !o.composedPath().includes(this) && (this.mobileOpen = !1);
-    }, this.handleKeydown = (o) => {
-      var t;
-      o.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (t = this.renderRoot.querySelector(".toggle")) == null || t.focus());
+    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());
     }, this.toggleMobile = () => {
       this.mobileOpen = !this.mobileOpen;
-    }, this.handleNavClick = (o) => {
-      o.composedPath().some((t) => t instanceof HTMLAnchorElement) && (this.mobileOpen = !1);
+    }, this.handleNavClick = (t) => {
+      t.composedPath().some((o) => o instanceof HTMLAnchorElement) && (this.mobileOpen = !1);
     };
   }
   connectedCallback() {
@@ -1987,7 +1987,7 @@ let T = class extends h {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${this.mobileOpen ? y.close : y.menu}
+          ${this.mobileOpen ? m.close : m.menu}
         </svg>
       </button>
       <nav
@@ -2001,7 +2001,7 @@ let T = class extends h {
     `;
   }
 };
-T.styles = d`
+E.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2061,19 +2061,19 @@ T.styles = d`
       }
     }
   `;
-f([
+u([
   n()
-], T.prototype, "label", 2);
-f([
+], E.prototype, "label", 2);
+u([
   n({ attribute: "toggle-label" })
-], T.prototype, "toggleLabel", 2);
-f([
-  Z()
-], T.prototype, "mobileOpen", 2);
-T = f([
-  p("vox-sidenav")
-], T);
-let J = class extends h {
+], E.prototype, "toggleLabel", 2);
+u([
+  De()
+], E.prototype, "mobileOpen", 2);
+E = u([
+  h("vox-sidenav")
+], E);
+let U = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1;
   }
@@ -2096,7 +2096,7 @@ let J = class extends h {
     `;
   }
 };
-J.styles = d`
+U.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2153,22 +2153,22 @@ J.styles = d`
       display: flex;
     }
   `;
-f([
+u([
   n()
-], J.prototype, "heading", 2);
-f([
+], U.prototype, "heading", 2);
+u([
   n({ type: Boolean, reflect: !0 })
-], J.prototype, "open", 2);
-J = f([
-  p("vox-sidenav-group")
-], J);
-let Q = class extends h {
+], U.prototype, "open", 2);
+U = u([
+  h("vox-sidenav-group")
+], U);
+let G = class extends p {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasIcon = !1;
   }
-  handleIconSlotChange(o) {
-    const t = o.target;
-    this.hasIcon = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleIconSlotChange(t) {
+    const o = t.target;
+    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return l`
@@ -2181,7 +2181,7 @@ let Q = class extends h {
     `;
   }
 };
-Q.styles = d`
+G.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2225,21 +2225,21 @@ Q.styles = d`
       display: none;
     }
   `;
-f([
+u([
   n()
-], Q.prototype, "href", 2);
-f([
+], G.prototype, "href", 2);
+u([
   n({ type: Boolean, reflect: !0 })
-], Q.prototype, "current", 2);
-Q = f([
-  p("vox-sidenav-item")
-], Q);
-var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, Lt = (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;
+], G.prototype, "current", 2);
+G = u([
+  h("vox-sidenav-item")
+], G);
+var pt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, yo = (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;
 };
-let Ve = class extends h {
+let _e = class extends p {
   constructor() {
     super(...arguments), this.label = "Secondary";
   }
@@ -2251,7 +2251,7 @@ let Ve = class extends h {
     `;
   }
 };
-Ve.styles = d`
+_e.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2286,18 +2286,18 @@ Ve.styles = d`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-Lt([
+yo([
   n()
-], Ve.prototype, "label", 2);
-Ve = Lt([
-  p("vox-subnav")
-], Ve);
-var Co = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, j = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Mo(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;
+], _e.prototype, "label", 2);
+_e = yo([
+  h("vox-subnav")
+], _e);
+var xt = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, k = (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 && xt(o, a, e), e;
 };
-let We = class extends h {
+let Ke = class extends p {
   get tabs() {
     return [...this.querySelectorAll("vox-tab")];
   }
@@ -2305,27 +2305,27 @@ let We = class extends h {
     return [...this.querySelectorAll("vox-tab-panel")];
   }
   sync() {
-    const o = this.tabs;
-    o.length > 0 && !o.some((a) => a.selected) && (o[0].selected = !0);
-    const t = o.find((a) => a.selected);
+    const t = this.tabs;
+    t.length > 0 && !t.some((a) => a.selected) && (t[0].selected = !0);
+    const o = t.find((a) => a.selected);
     this.panels.forEach((a) => {
-      a.active = a.name === (t == null ? void 0 : t.panel);
+      a.active = a.name === (o == null ? void 0 : o.panel);
     });
   }
-  handleSelect(o) {
-    const t = o.target;
-    t.tagName === "VOX-TAB" && (this.tabs.forEach((a) => a.selected = a === t), this.sync(), this.dispatchEvent(
+  handleSelect(t) {
+    const o = t.target;
+    o.tagName === "VOX-TAB" && (this.tabs.forEach((a) => a.selected = a === o), this.sync(), this.dispatchEvent(
       new CustomEvent("vox-tab-change", {
-        detail: { panel: t.panel },
+        detail: { panel: o.panel },
         bubbles: !0,
         composed: !0
       })
     ));
   }
-  handleKeydown(o) {
-    const a = { ArrowRight: 1, ArrowLeft: -1 }[o.key];
+  handleKeydown(t) {
+    const a = { ArrowRight: 1, ArrowLeft: -1 }[t.key];
     if (!a) return;
-    o.preventDefault();
+    t.preventDefault();
     const r = this.tabs, e = r.findIndex((i) => i.selected), s = r[(e + a + r.length) % r.length];
     s.select(), s.focusTab();
   }
@@ -2343,7 +2343,7 @@ let We = class extends h {
     `;
   }
 };
-We.styles = d`
+Ke.styles = d`
     :host {
       display: block;
     }
@@ -2354,10 +2354,10 @@ We.styles = d`
       border-bottom: 1px solid var(--vox-color-divider);
     }
   `;
-We = j([
-  p("vox-tabs")
-], We);
-let ee = class extends h {
+Ke = k([
+  h("vox-tabs")
+], Ke);
+let X = class extends p {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1;
   }
@@ -2367,8 +2367,8 @@ let ee = class extends h {
     );
   }
   focusTab() {
-    var o;
-    (o = this.renderRoot.querySelector(".tab")) == null || o.focus();
+    var t;
+    (t = this.renderRoot.querySelector(".tab")) == null || t.focus();
   }
   render() {
     return l`
@@ -2384,7 +2384,7 @@ let ee = class extends h {
     `;
   }
 };
-ee.styles = d`
+X.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2419,16 +2419,16 @@ ee.styles = d`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-j([
+k([
   n()
-], ee.prototype, "panel", 2);
-j([
+], X.prototype, "panel", 2);
+k([
   n({ type: Boolean, reflect: !0 })
-], ee.prototype, "selected", 2);
-ee = j([
-  p("vox-tab")
-], ee);
-let te = class extends h {
+], X.prototype, "selected", 2);
+X = k([
+  h("vox-tab")
+], X);
+let J = class extends p {
   constructor() {
     super(...arguments), this.name = "", this.active = !1;
   }
@@ -2436,7 +2436,7 @@ let te = class extends h {
     return l`<div role="tabpanel"><slot></slot></div>`;
   }
 };
-te.styles = d`
+J.styles = d`
     :host {
       display: none;
       font-family: var(--vox-font-family-base);
@@ -2450,21 +2450,21 @@ te.styles = d`
       display: block;
     }
   `;
-j([
+k([
   n()
-], te.prototype, "name", 2);
-j([
+], J.prototype, "name", 2);
+k([
   n({ type: Boolean, reflect: !0 })
-], te.prototype, "active", 2);
-te = j([
-  p("vox-tab-panel")
-], te);
-var Oo = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, ye = (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 && Oo(t, a, e), e;
+], J.prototype, "active", 2);
+J = k([
+  h("vox-tab-panel")
+], J);
+var ft = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, xe = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? gt(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;
 };
-let je = class extends h {
+let Ce = class extends p {
   constructor() {
     super(...arguments), this.heading = "On this page";
   }
@@ -2477,7 +2477,7 @@ let je = class extends h {
     `;
   }
 };
-je.styles = d`
+Ce.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2498,19 +2498,19 @@ je.styles = d`
       border-left: 1px solid var(--vox-color-divider);
     }
   `;
-ye([
+xe([
   n()
-], je.prototype, "heading", 2);
-je = ye([
-  p("vox-toc")
-], je);
-let oe = class extends h {
+], Ce.prototype, "heading", 2);
+Ce = xe([
+  h("vox-toc")
+], Ce);
+let W = class extends p {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasChildren = !1;
   }
-  handleChildrenSlotChange(o) {
-    const t = o.target;
-    this.hasChildren = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleChildrenSlotChange(t) {
+    const o = t.target;
+    this.hasChildren = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return l`
@@ -2523,7 +2523,7 @@ let oe = class extends h {
     `;
   }
 };
-oe.styles = d`
+W.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2569,21 +2569,21 @@ oe.styles = d`
       display: none;
     }
   `;
-ye([
+xe([
   n()
-], oe.prototype, "href", 2);
-ye([
+], W.prototype, "href", 2);
+xe([
   n({ type: Boolean, reflect: !0 })
-], oe.prototype, "current", 2);
-oe = ye([
-  p("vox-toc-item")
-], oe);
-var Lo = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, me = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Po(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;
+], W.prototype, "current", 2);
+W = xe([
+  h("vox-toc-item")
+], W);
+var bt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, ue = (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 && bt(o, a, e), e;
 };
-let k = class extends h {
+let _ = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1, this.lightDismiss = !1, this.hasFooter = !1;
   }
@@ -2601,12 +2601,12 @@ let k = class extends h {
       new CustomEvent("vox-close", { bubbles: !0, composed: !0 })
     );
   }
-  handleClick(o) {
-    this.lightDismiss && o.target === this.dialogEl && this.close();
+  handleClick(t) {
+    this.lightDismiss && t.target === this.dialogEl && this.close();
   }
-  handleFooterSlotChange(o) {
-    const t = o.target;
-    this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleFooterSlotChange(t) {
+    const o = t.target;
+    this.hasFooter = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return l`
@@ -2631,7 +2631,7 @@ let k = class extends h {
     `;
   }
 };
-k.styles = d`
+_.styles = d`
     dialog {
       box-sizing: border-box;
       width: min(90vw, 480px);
@@ -2718,27 +2718,27 @@ k.styles = d`
       margin-bottom: 0;
     }
   `;
-me([
+ue([
   n()
-], k.prototype, "heading", 2);
-me([
+], _.prototype, "heading", 2);
+ue([
   n({ type: Boolean })
-], k.prototype, "open", 2);
-me([
+], _.prototype, "open", 2);
+ue([
   n({ type: Boolean, attribute: "light-dismiss" })
-], k.prototype, "lightDismiss", 2);
-me([
-  rt("dialog")
-], k.prototype, "dialogEl", 2);
-k = me([
-  p("vox-dialog")
-], k);
-var Vo = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, ct = (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;
+], _.prototype, "lightDismiss", 2);
+ue([
+  Qe("dialog")
+], _.prototype, "dialogEl", 2);
+_ = ue([
+  h("vox-dialog")
+], _);
+var yt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, ao = (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 && yt(o, a, e), e;
 };
-let re = class extends h {
+let Q = class extends p {
   constructor() {
     super(...arguments), this.summary = "Show details", this.open = !1;
   }
@@ -2765,7 +2765,7 @@ let re = class extends h {
     `;
   }
 };
-re.styles = d`
+Q.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2817,35 +2817,35 @@ re.styles = d`
       display: none;
     }
   `;
-ct([
+ao([
   n()
-], re.prototype, "summary", 2);
-ct([
+], Q.prototype, "summary", 2);
+ao([
   n({ type: Boolean, reflect: !0 })
-], re.prototype, "open", 2);
-re = ct([
-  p("vox-disclosure")
-], re);
-var zo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, dt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Do(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 && zo(t, a, e), e;
+], Q.prototype, "open", 2);
+Q = ao([
+  h("vox-disclosure")
+], Q);
+var $t = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, so = (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;
 };
-let ae = class extends h {
+let Y = class extends p {
   constructor() {
-    super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (o) => {
-      this.open && !o.composedPath().includes(this) && (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();
+    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();
         return;
       }
-      if ((o.key === "ArrowDown" || o.key === "ArrowUp") && this.open) {
-        o.preventDefault();
+      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 = o.key === "ArrowDown" ? 1 : -1;
+        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();
       }
     };
@@ -2878,10 +2878,16 @@ let ae = class extends h {
     `;
   }
 };
-ae.styles = d`
+Y.styles = d`
     :host {
       position: relative;
       display: inline-block;
+      /* Without this, a flex/grid container's default stretch alignment
+         grows the host to fill the cross axis while the trigger button
+         inside stays content-sized — and since the menu's "top: 100%" is
+         measured against the host's own box, it then opens far below the
+         trigger instead of right under it. */
+      align-self: flex-start;
       font-family: var(--vox-font-family-base);
     }
 
@@ -2977,30 +2983,188 @@ ae.styles = d`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-dt([
+so([
   n()
-], ae.prototype, "label", 2);
-dt([
+], Y.prototype, "label", 2);
+so([
   n({ type: Boolean, reflect: !0 })
-], ae.prototype, "open", 2);
-ae = dt([
-  p("vox-dropdown")
-], ae);
-var So = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, we = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Eo(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;
+], Y.prototype, "open", 2);
+Y = so([
+  h("vox-dropdown")
+], Y);
+var Ct = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, Be = (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;
+};
+let H = class extends p {
+  constructor() {
+    super(...arguments), this.placement = "bottom-end", this.open = !1, this.handleOutsideClick = (t) => {
+      this.open && !t.composedPath().includes(this) && this.close();
+    }, this.handleKeydown = (t) => {
+      var o;
+      if (t.key === "Escape" && this.open) {
+        this.close(), (o = this.renderRoot.querySelector(".trigger")) == null || o.focus();
+        return;
+      }
+      if ((t.key === "ArrowDown" || t.key === "ArrowUp") && this.open) {
+        t.preventDefault();
+        const a = [...this.querySelectorAll("a, button")].filter(
+          (ye) => ye.slot !== "trigger"
+        );
+        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();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
+  }
+  toggle() {
+    this.open ? this.close() : this.open = !0;
+  }
+  close() {
+    this.open && (this.open = !1, this.dispatchEvent(new CustomEvent("vox-close", { bubbles: !0, composed: !0 })));
+  }
+  render() {
+    return l`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-haspopup="true"
+        aria-label=${this.label ?? v}
+        @click=${this.toggle}
+      >
+        <slot name="trigger"></slot>
+      </button>
+      <div class="menu" role="menu">
+        <slot @click=${() => this.close()}></slot>
+      </div>
+    `;
+  }
+};
+H.styles = d`
+    :host {
+      position: relative;
+      display: inline-block;
+      /* Without this, a flex/grid container's default stretch alignment
+         grows the host to fill the cross axis (e.g. a tall sibling, or a
+         container given a min-height for layout purposes) while the
+         trigger button inside stays content-sized — and since the menu's
+         "top: 100%" is measured against the host's own box, it then opens
+         far below the trigger instead of right under it. */
+      align-self: flex-start;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      background: none;
+      border: none;
+      padding: 0;
+      border-radius: var(--vox-radius-md);
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      z-index: 10;
+      min-width: 180px;
+      display: none;
+      flex-direction: column;
+      padding: var(--vox-space-2);
+      background-color: var(--vox-color-bg-elv);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      box-shadow: var(--vox-shadow-2);
+    }
+
+    :host([placement='bottom-start']) .menu {
+      left: 0;
+    }
+
+    :host([placement='bottom-end']) .menu {
+      right: 0;
+    }
+
+    :host([open]) .menu {
+      display: flex;
+    }
+
+    ::slotted(a),
+    ::slotted(button) {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      text-align: left;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    ::slotted(a:hover),
+    ::slotted(button:hover),
+    ::slotted(a:focus-visible),
+    ::slotted(button:focus-visible) {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      outline: none;
+    }
+
+    ::slotted(hr) {
+      width: 100%;
+      margin: var(--vox-space-1) 0;
+      border: none;
+      border-top: 1px solid var(--vox-color-divider);
+    }
+  `;
+Be([
+  n()
+], H.prototype, "label", 2);
+Be([
+  n({ reflect: !0 })
+], H.prototype, "placement", 2);
+Be([
+  n({ type: Boolean, reflect: !0 })
+], H.prototype, "open", 2);
+H = Be([
+  h("vox-menu")
+], H);
+var Ot = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, fe = (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;
 };
-let ze = class extends h {
+let Me = class extends p {
   constructor() {
     super(...arguments), this.single = !1;
   }
-  handleToggle(o) {
+  handleToggle(t) {
     if (!this.single) return;
-    const t = o.target;
-    t.open && this.querySelectorAll("vox-accordion-item").forEach(
+    const o = t.target;
+    o.open && this.querySelectorAll("vox-accordion-item").forEach(
       (a) => {
-        a !== t && (a.open = !1);
+        a !== o && (a.open = !1);
       }
     );
   }
@@ -3008,7 +3172,7 @@ let ze = class extends h {
     return l`<slot @vox-toggle=${this.handleToggle}></slot>`;
   }
 };
-ze.styles = d`
+Me.styles = d`
     :host {
       display: block;
       border: 1px solid var(--vox-color-divider);
@@ -3020,13 +3184,13 @@ ze.styles = d`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-we([
+fe([
   n({ type: Boolean })
-], ze.prototype, "single", 2);
-ze = we([
-  p("vox-accordion")
-], ze);
-let se = class extends h {
+], Me.prototype, "single", 2);
+Me = fe([
+  h("vox-accordion")
+], Me);
+let ee = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1;
   }
@@ -3055,7 +3219,7 @@ let se = class extends h {
     `;
   }
 };
-se.styles = d`
+ee.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3117,27 +3281,27 @@ se.styles = d`
       margin-bottom: 0;
     }
   `;
-we([
+fe([
   n()
-], se.prototype, "heading", 2);
-we([
+], ee.prototype, "heading", 2);
+fe([
   n({ type: Boolean, reflect: !0 })
-], se.prototype, "open", 2);
-se = we([
-  p("vox-accordion-item")
-], se);
-var Ao = Object.defineProperty, Ho = Object.getOwnPropertyDescriptor, $e = (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 && Ao(t, a, e), e;
+], ee.prototype, "open", 2);
+ee = fe([
+  h("vox-accordion-item")
+], ee);
+var Pt = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, ge = (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 && Pt(o, a, e), e;
 };
-const Bo = {
+const Vt = {
   info: "info",
   success: "check-circle",
   warning: "warning",
   danger: "x-circle"
 };
-let L = class extends h {
+let C = class extends p {
   constructor() {
     super(...arguments), this.variant = "info", this.heading = "", this.dismissible = !1, this.open = !0;
   }
@@ -3159,7 +3323,7 @@ let L = class extends h {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${y[Bo[this.variant]]}
+          ${m[Vt[this.variant]]}
         </svg>
         <div class="body">
           ${this.heading ? l`<p class="heading">${this.heading}</p>` : v}
@@ -3176,7 +3340,7 @@ let L = class extends h {
     `;
   }
 };
-L.styles = d`
+C.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3295,27 +3459,27 @@ L.styles = d`
       margin-bottom: 0;
     }
   `;
-$e([
+ge([
   n()
-], L.prototype, "variant", 2);
-$e([
+], C.prototype, "variant", 2);
+ge([
   n()
-], L.prototype, "heading", 2);
-$e([
+], C.prototype, "heading", 2);
+ge([
   n({ type: Boolean })
-], L.prototype, "dismissible", 2);
-$e([
+], C.prototype, "dismissible", 2);
+ge([
   n({ type: Boolean, reflect: !0 })
-], L.prototype, "open", 2);
-L = $e([
-  p("vox-alert")
-], L);
-var No = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Pt = (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 && No(t, a, e), e;
+], C.prototype, "open", 2);
+C = ge([
+  h("vox-alert")
+], C);
+var jt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, wo = (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 && jt(o, a, e), e;
 };
-let De = class extends h {
+let Oe = class extends p {
   constructor() {
     super(...arguments), this.variant = "brand";
   }
@@ -3323,7 +3487,7 @@ let De = class extends h {
     return l`<span class="badge ${this.variant}"><slot></slot></span>`;
   }
 };
-De.styles = d`
+Oe.styles = d`
     :host {
       display: inline-block;
     }
@@ -3365,23 +3529,23 @@ De.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Pt([
+wo([
   n()
-], De.prototype, "variant", 2);
-De = Pt([
-  p("vox-badge")
-], De);
-var qo = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, pt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Io(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;
+], Oe.prototype, "variant", 2);
+Oe = wo([
+  h("vox-badge")
+], Oe);
+var Dt = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, io = (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 && Dt(o, a, e), e;
 };
-let ie = class extends h {
+let oe = class extends p {
   constructor() {
     super(...arguments), this.date = "";
   }
   render() {
-    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() : "–";
+    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() : "–";
     return l`
       <time class="tile" datetime=${this.date}>
         <span class="month">${a}</span>
@@ -3390,7 +3554,7 @@ let ie = class extends h {
     `;
   }
 };
-ie.styles = d`
+oe.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -3426,32 +3590,32 @@ ie.styles = d`
       color: var(--vox-color-text-1);
     }
   `;
-pt([
+io([
   n()
-], ie.prototype, "date", 2);
-pt([
+], oe.prototype, "date", 2);
+io([
   n()
-], ie.prototype, "locale", 2);
-ie = pt([
-  p("vox-calendar-tile")
-], ie);
-var Ro = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, ht = (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;
+], oe.prototype, "locale", 2);
+oe = io([
+  h("vox-calendar-tile")
+], oe);
+var Ht = Object.defineProperty, St = Object.getOwnPropertyDescriptor, no = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? St(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;
 };
-const Fo = {
+const At = {
   info: "Info",
   tip: "Tip",
   warning: "Warning",
   danger: "Danger"
-}, Uo = {
+}, Bt = {
   info: "info",
   tip: "check-circle",
   warning: "warning",
   danger: "x-circle"
 };
-let ne = class extends h {
+let te = class extends p {
   constructor() {
     super(...arguments), this.variant = "info";
   }
@@ -3468,17 +3632,17 @@ let ne = class extends h {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${y[Uo[this.variant]]}
+          ${m[Bt[this.variant]]}
         </svg>
         <div class="content">
-          <p class="heading">${this.heading ?? Fo[this.variant]}</p>
+          <p class="heading">${this.heading ?? At[this.variant]}</p>
           <slot></slot>
         </div>
       </div>
     `;
   }
 };
-ne.styles = d`
+te.styles = d`
     :host {
       display: block;
     }
@@ -3561,38 +3725,38 @@ ne.styles = d`
       margin-bottom: 0;
     }
   `;
-ht([
+no([
   n()
-], ne.prototype, "variant", 2);
-ht([
+], te.prototype, "variant", 2);
+no([
   n()
-], ne.prototype, "heading", 2);
-ne = ht([
-  p("vox-callout")
-], ne);
-var Ko = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, Re = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Go(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 && Ko(t, a, e), e;
+], te.prototype, "heading", 2);
+te = no([
+  h("vox-callout")
+], te);
+var qt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, qe = (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 && qt(o, a, e), e;
 };
-let q = class extends h {
+let S = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.hasIcon = !1, this.hasBadge = !1, this.hasFooter = !1;
   }
-  handleIconSlotChange(o) {
-    const t = o.target;
-    this.hasIcon = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleIconSlotChange(t) {
+    const o = t.target;
+    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleBadgeSlotChange(o) {
-    const t = o.target;
-    this.hasBadge = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleBadgeSlotChange(t) {
+    const o = t.target;
+    this.hasBadge = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleFooterSlotChange(o) {
-    const t = o.target;
-    this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleFooterSlotChange(t) {
+    const o = t.target;
+    this.hasFooter = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const o = l`
+    const t = l`
       <div class="badge ${this.hasBadge ? "has-badge" : ""}">
         <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
       </div>
@@ -3605,10 +3769,10 @@ let q = class extends h {
         <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
       </div>
     `;
-    return this.href !== void 0 ? l`<a class="card" href=${this.href} target=${this.target ?? v}>${o}</a>` : l`<div class="card">${o}</div>`;
+    return this.href !== void 0 ? l`<a class="card" href=${this.href} target=${this.target ?? v}>${t}</a>` : l`<div class="card">${t}</div>`;
   }
 };
-q.styles = d`
+S.styles = d`
     :host {
       display: block;
     }
@@ -3693,673 +3857,34 @@ q.styles = d`
       display: none;
     }
   `;
-Re([
+qe([
   n()
-], q.prototype, "heading", 2);
-Re([
+], S.prototype, "heading", 2);
+qe([
   n()
-], q.prototype, "href", 2);
-Re([
+], S.prototype, "href", 2);
+qe([
   n()
-], q.prototype, "target", 2);
-q = Re([
-  p("vox-card")
-], q);
-function Vt(o, t) {
-  let a = t;
-  for (; a < o.length && (o[a] === " " || o[a] === "	"); ) a++;
-  return a;
-}
-function z(o, t) {
-  return {
-    re: o,
-    type: (a, r, e) => t.has(a) ? "keyword" : r[Vt(r, e)] === "(" ? "function" : "plain"
-  };
-}
-function Je(o) {
-  return {
-    re: o,
-    type: (t, a, r) => a[Vt(a, r)] === ":" ? "property" : "string"
-  };
-}
-const _e = /-?\b\d+\.?\d*(?:[eE][+-]?\d+)?\b/y, $ = /"(?:\\.|[^"\\])*"/y, D = /'(?:\\.|[^'\\])*'/y, Ze = /#.*/y, Yo = /\/\/.*/y, jt = /\/\*[\s\S]*?\*\//y;
-function mt(o, t, a) {
-  const r = o[o.length - 1];
-  r && r.type === t ? r.text += a : o.push({ type: t, text: a });
-}
-function Xo(o, t) {
-  const a = [];
-  let r = 0;
-  for (; r < o.length; ) {
-    let e = !1;
-    for (const s of t) {
-      s.re.lastIndex = r;
-      const i = s.re.exec(o);
-      if (i && i.index === r && i[0].length > 0) {
-        const _ = i[0], Me = typeof s.type == "function" ? s.type(_, o, r + _.length) : s.type;
-        mt(a, Me, _), r += _.length, e = !0;
-        break;
-      }
-    }
-    e || (mt(a, "plain", o[r]), r++);
-  }
-  return a;
-}
-const Wo = /* @__PURE__ */ new Set([
-  "if",
-  "then",
-  "elif",
-  "else",
-  "fi",
-  "for",
-  "while",
-  "until",
-  "do",
-  "done",
-  "case",
-  "esac",
-  "in",
-  "function",
-  "select",
-  "time",
-  "return",
-  "exit",
-  "break",
-  "continue",
-  "local",
-  "export",
-  "readonly",
-  "declare",
-  "unset",
-  "shift",
-  "eval",
-  "exec",
-  "trap",
-  "set",
-  "source",
-  "alias",
-  "unalias",
-  "true",
-  "false"
-]), ke = [
-  { re: Ze, type: "comment" },
-  { re: /\$\{[^}]*\}|\$[A-Za-z_]\w*|\$[0-9@#?$!*_-]/y, type: "function" },
-  { re: $, type: "string" },
-  { re: D, type: "string" },
-  { re: _e, type: "number" },
-  z(/[A-Za-z_][\w-]*/y, Wo)
-], Jo = /* @__PURE__ */ new Set([
-  "true",
-  "false",
-  "yes",
-  "no",
-  "null",
-  "on",
-  "off",
-  "True",
-  "False",
-  "Yes",
-  "No",
-  "Null",
-  "On",
-  "Off",
-  "TRUE",
-  "FALSE",
-  "YES",
-  "NO",
-  "NULL",
-  "ON",
-  "OFF"
-]), wt = [
-  { re: Ze, type: "comment" },
-  Je($),
-  Je(D),
-  { re: /[A-Za-z_][\w .-]*?(?=:(\s|$))/y, type: "property" },
-  { re: /[&*!][A-Za-z_][\w:.]*/y, type: "function" },
-  { re: _e, type: "number" },
-  z(/[A-Za-z_][\w-]*/y, Jo)
-], Qo = [
-  Je($),
-  { re: _e, type: "number" },
-  z(/[A-Za-z_]\w*/y, /* @__PURE__ */ new Set(["true", "false", "null"]))
-], er = /* @__PURE__ */ new Set([
-  "const",
-  "let",
-  "var",
-  "function",
-  "return",
-  "if",
-  "else",
-  "for",
-  "while",
-  "do",
-  "switch",
-  "case",
-  "default",
-  "break",
-  "continue",
-  "class",
-  "extends",
-  "super",
-  "new",
-  "this",
-  "import",
-  "export",
-  "from",
-  "as",
-  "async",
-  "await",
-  "try",
-  "catch",
-  "finally",
-  "throw",
-  "typeof",
-  "instanceof",
-  "in",
-  "of",
-  "yield",
-  "static",
-  "get",
-  "set",
-  "void",
-  "delete",
-  "null",
-  "undefined",
-  "true",
-  "false",
-  "public",
-  "private",
-  "protected",
-  "readonly",
-  "interface",
-  "type",
-  "enum",
-  "implements",
-  "namespace",
-  "declare",
-  "abstract",
-  "keyof",
-  "satisfies"
-]), Le = [
-  { re: Yo, type: "comment" },
-  { re: jt, type: "comment" },
-  { re: $, type: "string" },
-  { re: D, type: "string" },
-  { re: /`(?:\\.|[^`\\])*`/y, type: "string" },
-  { re: /-?\b0[xXbBoO][0-9a-fA-F]+\b|-?\b\d+\.?\d*(?:[eE][+-]?\d+)?\b/y, type: "number" },
-  z(/[A-Za-z_$][\w$]*/y, er)
-], tr = [
-  { re: jt, type: "comment" },
-  { re: $, type: "string" },
-  { re: D, type: "string" },
-  { re: /@[\w-]+/y, type: "keyword" },
-  { re: /!important/y, type: "keyword" },
-  { re: /#[0-9a-fA-F]{3,8}\b/y, type: "number" },
-  { re: /-?\b\d+\.?\d*[a-zA-Z%]*\b/y, type: "number" },
-  { re: /[a-zA-Z-]+(?=\s*:)/y, type: "property" },
-  z(/[a-zA-Z-]+/y, /* @__PURE__ */ new Set())
-], $t = [
-  { re: /<!--[\s\S]*?-->/y, type: "comment" },
-  { re: /<\/?[a-zA-Z][\w:-]*/y, type: "tag" },
-  { re: /[a-zA-Z-][\w-]*(?=\s*=)/y, type: "property" },
-  { re: $, type: "string" },
-  { re: D, type: "string" },
-  { re: /&[\w#]+;/y, type: "keyword" }
-], or = /* @__PURE__ */ new Set([
-  "def",
-  "end",
-  "if",
-  "elsif",
-  "else",
-  "unless",
-  "while",
-  "until",
-  "for",
-  "in",
-  "do",
-  "class",
-  "module",
-  "begin",
-  "rescue",
-  "ensure",
-  "raise",
-  "return",
-  "yield",
-  "break",
-  "next",
-  "redo",
-  "retry",
-  "case",
-  "when",
-  "then",
-  "and",
-  "or",
-  "not",
-  "nil",
-  "true",
-  "false",
-  "self",
-  "super",
-  "require",
-  "require_relative",
-  "include",
-  "extend",
-  "attr_accessor",
-  "attr_reader",
-  "attr_writer",
-  "private",
-  "protected",
-  "public",
-  "lambda",
-  "proc",
-  "new"
-]), _t = [
-  { re: Ze, type: "comment" },
-  { re: /:[A-Za-z_]\w*[?!]?/y, type: "string" },
-  { re: /@{1,2}[A-Za-z_]\w*|\$[A-Za-z_]\w*/y, type: "function" },
-  { re: $, type: "string" },
-  { re: D, type: "string" },
-  { re: _e, type: "number" },
-  { re: /[A-Z]\w*/y, type: "property" },
-  z(/[a-z_]\w*[?!]?/y, or)
-], rr = /* @__PURE__ */ new Set([
-  "class",
-  "define",
-  "node",
-  "inherits",
-  "if",
-  "elsif",
-  "else",
-  "unless",
-  "case",
-  "and",
-  "or",
-  "in",
-  "undef",
-  "true",
-  "false",
-  "default",
-  "import",
-  "include",
-  "require",
-  "contain",
-  "function",
-  "type",
-  "application",
-  "produces",
-  "consumes",
-  "private",
-  "return",
-  "break",
-  "next",
-  "each",
-  "map",
-  "filter",
-  "reduce",
-  "with",
-  "String",
-  "Integer",
-  "Boolean",
-  "Array",
-  "Hash",
-  "Optional",
-  "Enum",
-  "Variant",
-  "Numeric",
-  "Float",
-  "Undef",
-  "Any",
-  "Pattern",
-  "Regexp",
-  "Sensitive",
-  "Struct",
-  "Tuple",
-  "Type",
-  "Callable",
-  "Data",
-  "Scalar"
-]), Ct = [
-  { re: Ze, type: "comment" },
-  { re: $, type: "string" },
-  { re: D, type: "string" },
-  { re: /\$[\w:]+/y, type: "function" },
-  { re: /[a-zA-Z_][\w:]*(?=\s*\{)/y, type: "tag" },
-  { re: /[a-z_]\w*(?=\s*=>)/y, type: "property" },
-  { re: _e, type: "number" },
-  z(/[A-Za-z_][\w:]*/y, rr)
-], ar = {
-  bash: ke,
-  sh: ke,
-  shell: ke,
-  zsh: ke,
-  yaml: wt,
-  yml: wt,
-  json: Qo,
-  javascript: Le,
-  js: Le,
-  typescript: Le,
-  ts: Le,
-  css: tr,
-  html: $t,
-  xml: $t,
-  ruby: _t,
-  rb: _t,
-  puppet: Ct,
-  pp: Ct
-}, sr = {
-  bash: "Bash",
-  sh: "Shell",
-  shell: "Shell",
-  zsh: "Zsh",
-  yaml: "YAML",
-  yml: "YAML",
-  json: "JSON",
-  javascript: "JavaScript",
-  js: "JavaScript",
-  typescript: "TypeScript",
-  ts: "TypeScript",
-  css: "CSS",
-  html: "HTML",
-  xml: "XML",
-  ruby: "Ruby",
-  rb: "Ruby",
-  puppet: "Puppet",
-  pp: "Puppet",
-  plaintext: "Plain Text",
-  text: "Plain Text"
+], S.prototype, "target", 2);
+S = qe([
+  h("vox-card")
+], S);
+var Nt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, $o = (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 && Nt(o, a, e), e;
 };
-function ir(o, t) {
-  const a = ar[t];
-  return a ? Xo(o, a) : [{ type: "plain", text: o }];
-}
-var nr = Object.defineProperty, lr = Object.getOwnPropertyDescriptor, b = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? lr(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 && nr(t, a, e), e;
-};
-function cr(o) {
-  const t = o.split(`
-`);
-  for (; t.length && t[0].trim() === ""; ) t.shift();
-  for (; t.length && t[t.length - 1].trim() === ""; ) t.pop();
-  const a = t.filter((e) => e.trim() !== "").map((e) => {
-    var s;
-    return ((s = e.match(/^[ \t]*/)) == null ? void 0 : s[0].length) ?? 0;
-  }), r = a.length ? Math.min(...a) : 0;
-  return t.map((e) => e.slice(r)).join(`
-`);
-}
-function dr(o) {
-  const t = [[]];
-  for (const a of o)
-    a.text.split(`
-`).forEach((r, e) => {
-      e > 0 && t.push([]), r && t[t.length - 1].push({ type: a.type, text: r });
-    });
-  return t;
-}
-let u = class extends h {
-  constructor() {
-    super(...arguments), this.language = "", this.filename = "", this.lineNumbers = !1, this.noCopy = !1, this.noHeader = !1, this.noBorder = !1, this._code = "", this._copied = !1;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), clearTimeout(this._copyResetTimer);
-  }
-  _handleSlotChange(o) {
-    const a = o.target.assignedNodes({ flatten: !0 }).map((r) => r.textContent ?? "").join("");
-    this._code = cr(a);
-  }
-  async _copy() {
-    var o;
-    try {
-      await navigator.clipboard.writeText(this._code);
-    } catch {
-      const t = document.createElement("textarea");
-      t.value = this._code, t.style.position = "fixed", t.style.opacity = "0", (o = this.shadowRoot) == null || o.appendChild(t), t.select(), document.execCommand("copy"), t.remove();
-    }
-    this._copied = !0, clearTimeout(this._copyResetTimer), this._copyResetTimer = setTimeout(() => {
-      this._copied = !1;
-    }, 1500);
-  }
-  render() {
-    const o = sr[this.language] ?? this.language, t = dr(ir(this._code, this.language));
-    return l`
-      <div class="block">
-        ${this.noHeader ? v : l`
-              <div class="header">
-                <span class="meta">
-                  ${this.filename ? l`<span class="filename">${this.filename}</span>` : v}
-                  ${o ? l`<span class="lang">${o}</span>` : v}
-                </span>
-                ${this.noCopy ? v : l`
-                      <button
-                        class="copy"
-                        type="button"
-                        @click=${this._copy}
-                        aria-label=${this._copied ? "Copied" : "Copy code"}
-                      >
-                        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                          ${y[this._copied ? "check" : "copy"]}
-                        </svg>
-                      </button>
-                    `}
-              </div>
-            `}
-        <pre tabindex="0"><code>${t.map(
-      (a) => l`<span class="line">${a.map(
-        (r) => r.type === "plain" ? r.text : l`<span class="tok-${r.type}">${r.text}</span>`
-      )}</span>`
-    )}</code></pre>
-        <span class="visually-hidden" aria-live="polite">${this._copied ? "Copied to clipboard" : ""}</span>
-      </div>
-      <slot @slotchange=${this._handleSlotChange}></slot>
-    `;
-  }
-};
-u.styles = d`
-    :host {
-      display: block;
-      font-family: var(--vox-font-family-base);
-    }
-
-    .block {
-      border: 1px solid var(--vox-color-border);
-      border-radius: var(--vox-radius-md);
-      background-color: var(--vox-color-bg-alt);
-      overflow: hidden;
-    }
-
-    :host([no-border]) .block {
-      border: none;
-    }
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--vox-space-3);
-      padding: var(--vox-space-2) var(--vox-space-2) var(--vox-space-2) var(--vox-space-4);
-      border-bottom: 1px solid var(--vox-color-divider);
-      font-size: 12px;
-    }
-
-    .meta {
-      display: flex;
-      align-items: baseline;
-      gap: var(--vox-space-3);
-      min-width: 0;
-      overflow: hidden;
-      color: var(--vox-color-text-2);
-    }
-
-    .filename {
-      color: var(--vox-color-text-1);
-      font-family: var(--vox-font-family-mono);
-      font-weight: 600;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .lang {
-      flex: none;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
-
-    .copy {
-      flex: none;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 28px;
-      height: 28px;
-      padding: 0;
-      border: none;
-      border-radius: var(--vox-radius-sm);
-      background: none;
-      color: var(--vox-color-text-2);
-      cursor: pointer;
-    }
-
-    .copy:hover {
-      background-color: var(--vox-color-brand-soft);
-      color: var(--vox-color-brand-1);
-    }
-
-    .copy:focus-visible {
-      outline: 2px solid var(--vox-color-brand-1);
-      outline-offset: 2px;
-    }
-
-    .copy svg {
-      width: 15px;
-      height: 15px;
-    }
-
-    pre {
-      margin: 0;
-      padding: var(--vox-space-4);
-      overflow-x: auto;
-      white-space: pre;
-      tab-size: 2;
-    }
-
-    pre:focus-visible {
-      outline: 2px solid var(--vox-color-brand-1);
-      outline-offset: -2px;
-    }
-
-    code {
-      font-family: var(--vox-font-family-mono);
-      font-size: 13px;
-      line-height: 1.7;
-      color: var(--vox-color-text-1);
-    }
-
-    .line {
-      display: block;
-    }
-
-    :host([line-numbers]) code {
-      counter-reset: line;
-    }
-
-    :host([line-numbers]) .line {
-      padding-left: 3.5ch;
-      position: relative;
-    }
-
-    :host([line-numbers]) .line::before {
-      counter-increment: line;
-      content: counter(line);
-      position: absolute;
-      left: 0;
-      width: 2.5ch;
-      text-align: right;
-      color: var(--vox-color-text-3);
-      user-select: none;
-    }
-
-    .tok-comment {
-      color: var(--vox-code-comment);
-      font-style: italic;
-    }
-    .tok-keyword {
-      color: var(--vox-code-keyword);
-    }
-    .tok-string {
-      color: var(--vox-code-string);
-    }
-    .tok-number {
-      color: var(--vox-code-number);
-    }
-    .tok-function {
-      color: var(--vox-code-function);
-    }
-    .tok-property {
-      color: var(--vox-code-property);
-    }
-    .tok-tag {
-      color: var(--vox-code-tag);
-    }
-
-    slot {
-      display: none;
-    }
-
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      white-space: nowrap;
-    }
-  `;
-b([
-  n()
-], u.prototype, "language", 2);
-b([
-  n()
-], u.prototype, "filename", 2);
-b([
-  n({ type: Boolean, attribute: "line-numbers", reflect: !0 })
-], u.prototype, "lineNumbers", 2);
-b([
-  n({ type: Boolean, attribute: "no-copy" })
-], u.prototype, "noCopy", 2);
-b([
-  n({ type: Boolean, attribute: "no-header" })
-], u.prototype, "noHeader", 2);
-b([
-  n({ type: Boolean, attribute: "no-border", reflect: !0 })
-], u.prototype, "noBorder", 2);
-b([
-  Z()
-], u.prototype, "_code", 2);
-b([
-  Z()
-], u.prototype, "_copied", 2);
-u = b([
-  p("vox-code-block")
-], u);
-var pr = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, zt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? hr(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 && pr(t, a, e), e;
-};
-let Se = class extends h {
+let ke = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.hasBody = !1, this.hasActions = !1;
   }
-  handleBodySlotChange(o) {
-    const t = o.target;
-    this.hasBody = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleBodySlotChange(t) {
+    const o = t.target;
+    this.hasBody = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleActionsSlotChange(o) {
-    const t = o.target;
-    this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleActionsSlotChange(t) {
+    const o = t.target;
+    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return l`
@@ -4375,7 +3900,7 @@ let Se = class extends h {
     `;
   }
 };
-Se.styles = d`
+ke.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4430,18 +3955,79 @@ Se.styles = d`
       display: none;
     }
   `;
-zt([
+$o([
+  n()
+], ke.prototype, "heading", 2);
+ke = $o([
+  h("vox-cta-band")
+], ke);
+var Rt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, _o = (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 && Rt(o, a, e), e;
+};
+let Pe = class extends p {
+  constructor() {
+    super(...arguments), this.name = "", this.hasIcon = !1;
+  }
+  handleIconSlotChange(t) {
+    const o = t.target;
+    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <span class="icon ${this.hasIcon ? "has-icon" : ""}">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+      </span>
+      ${this.name ? l`<span class="sr-only">${this.name}: </span>` : v}
+      <slot></slot>
+    `;
+  }
+};
+Pe.styles = d`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-1);
+      font-family: var(--vox-font-family-base);
+      font-size: 13px;
+      color: var(--vox-color-text-2);
+    }
+
+    .icon {
+      display: flex;
+      flex: none;
+      color: var(--vox-color-text-3);
+    }
+
+    .icon:not(.has-icon) {
+      display: none;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `;
+_o([
   n()
-], Se.prototype, "heading", 2);
-Se = zt([
-  p("vox-cta-band")
-], Se);
-var vr = Object.defineProperty, xr = Object.getOwnPropertyDescriptor, Dt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? xr(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 && vr(t, a, e), e;
+], Pe.prototype, "name", 2);
+Pe = _o([
+  h("vox-datum")
+], Pe);
+var Zt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, Co = (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 && Zt(o, a, e), e;
 };
-let Ee = class extends h {
+let Le = class extends p {
   constructor() {
     super(...arguments), this.heading = "";
   }
@@ -4456,7 +4042,7 @@ let Ee = class extends h {
     `;
   }
 };
-Ee.styles = d`
+Le.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4500,18 +4086,18 @@ Ee.styles = d`
       margin-top: var(--vox-space-4);
     }
   `;
-Dt([
+Co([
   n()
-], Ee.prototype, "heading", 2);
-Ee = Dt([
-  p("vox-empty-state")
-], Ee);
-var ur = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, vt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? fr(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 && ur(t, a, e), e;
+], Le.prototype, "heading", 2);
+Le = Co([
+  h("vox-empty-state")
+], Le);
+var Ut = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, lo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Gt(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;
 };
-let Qe = class extends h {
+let Ue = class extends p {
   render() {
     return l`
       <footer>
@@ -4523,7 +4109,7 @@ let Qe = class extends h {
     `;
   }
 };
-Qe.styles = d`
+Ue.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4551,10 +4137,10 @@ Qe.styles = d`
       color: var(--vox-color-text-3);
     }
   `;
-Qe = vt([
-  p("vox-footer")
-], Qe);
-let Ae = class extends h {
+Ue = lo([
+  h("vox-footer")
+], Ue);
+let Ve = class extends p {
   constructor() {
     super(...arguments), this.heading = "";
   }
@@ -4565,7 +4151,7 @@ let Ae = class extends h {
     `;
   }
 };
-Ae.styles = d`
+Ve.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4597,18 +4183,18 @@ Ae.styles = d`
       text-decoration: underline;
     }
   `;
-vt([
+lo([
   n()
-], Ae.prototype, "heading", 2);
-Ae = vt([
-  p("vox-footer-column")
-], Ae);
-var gr = Object.defineProperty, br = Object.getOwnPropertyDescriptor, Fe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? br(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 && gr(t, a, e), e;
+], Ve.prototype, "heading", 2);
+Ve = lo([
+  h("vox-footer-column")
+], Ve);
+var Xt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, Ie = (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 && Xt(o, a, e), e;
 };
-let I = class extends h {
+let A = class extends p {
   constructor() {
     super(...arguments), this.cols = 0, this.min = "240px", this.gap = "md";
   }
@@ -4619,7 +4205,7 @@ let I = class extends h {
     return l`<slot></slot>`;
   }
 };
-I.styles = d`
+A.styles = d`
     :host {
       display: grid;
     }
@@ -4636,30 +4222,30 @@ I.styles = d`
       gap: var(--vox-space-6);
     }
   `;
-Fe([
+Ie([
   n({ type: Number })
-], I.prototype, "cols", 2);
-Fe([
+], A.prototype, "cols", 2);
+Ie([
   n()
-], I.prototype, "min", 2);
-Fe([
+], A.prototype, "min", 2);
+Ie([
   n({ reflect: !0 })
-], I.prototype, "gap", 2);
-I = Fe([
-  p("vox-grid")
-], I);
-var yr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, xt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? mr(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 && yr(t, a, e), e;
+], A.prototype, "gap", 2);
+A = Ie([
+  h("vox-grid")
+], A);
+var Wt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, co = (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 && Wt(o, a, e), e;
 };
-let le = class extends h {
+let re = class extends p {
   constructor() {
     super(...arguments), this.eyebrow = "", this.heading = "", this.hasActions = !1;
   }
-  handleActionsSlotChange(o) {
-    const t = o.target;
-    this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleActionsSlotChange(t) {
+    const o = t.target;
+    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return l`
@@ -4674,7 +4260,7 @@ let le = class extends h {
     `;
   }
 };
-le.styles = d`
+re.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4731,42 +4317,42 @@ le.styles = d`
       display: none;
     }
   `;
-xt([
+co([
   n()
-], le.prototype, "eyebrow", 2);
-xt([
+], re.prototype, "eyebrow", 2);
+co([
   n()
-], le.prototype, "heading", 2);
-le = xt([
-  p("vox-hero")
-], le);
-var wr = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, Ue = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? $r(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 && wr(t, a, e), e;
+], re.prototype, "heading", 2);
+re = co([
+  h("vox-hero")
+], re);
+var Yt = Object.defineProperty, er = Object.getOwnPropertyDescriptor, Ne = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? er(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;
 };
-let et = class extends h {
+let Ge = class extends p {
   render() {
     return l`<slot></slot>`;
   }
 };
-et.styles = d`
+Ge.styles = d`
     :host {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
       gap: var(--vox-space-4);
     }
   `;
-et = Ue([
-  p("vox-link-hub")
-], et);
-let ce = class extends h {
+Ge = Ne([
+  h("vox-link-hub")
+], Ge);
+let ae = class extends p {
   constructor() {
     super(...arguments), this.href = "#", this.heading = "", this.hasIcon = !1;
   }
-  handleIconSlotChange(o) {
-    const t = o.target;
-    this.hasIcon = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleIconSlotChange(t) {
+    const o = t.target;
+    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return l`
@@ -4786,7 +4372,7 @@ let ce = class extends h {
     `;
   }
 };
-ce.styles = d`
+ae.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4847,21 +4433,21 @@ ce.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Ue([
+Ne([
   n()
-], ce.prototype, "href", 2);
-Ue([
+], ae.prototype, "href", 2);
+Ne([
   n()
-], ce.prototype, "heading", 2);
-ce = Ue([
-  p("vox-link-hub-item")
-], ce);
-var _r = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, ut = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Cr(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 && _r(t, a, e), e;
+], ae.prototype, "heading", 2);
+ae = Ne([
+  h("vox-link-hub-item")
+], ae);
+var or = Object.defineProperty, tr = Object.getOwnPropertyDescriptor, ho = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? tr(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 && or(o, a, e), e;
 };
-let de = class extends h {
+let se = class extends p {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
@@ -4874,7 +4460,7 @@ let de = class extends h {
     `;
   }
 };
-de.styles = d`
+se.styles = d`
     :host {
       display: inline-block;
     }
@@ -4927,21 +4513,21 @@ de.styles = d`
       white-space: nowrap;
     }
   `;
-ut([
+ho([
   n({ reflect: !0 })
-], de.prototype, "size", 2);
-ut([
+], se.prototype, "size", 2);
+ho([
   n()
-], de.prototype, "label", 2);
-de = ut([
-  p("vox-loader")
-], de);
-var Mr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, St = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Or(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 && Mr(t, a, e), e;
+], se.prototype, "label", 2);
+se = ho([
+  h("vox-loader")
+], se);
+var rr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, Mo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ar(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 && rr(o, a, e), e;
 };
-let He = class extends h {
+let je = class extends p {
   constructor() {
     super(...arguments), this.label = "Pagination";
   }
@@ -4953,7 +4539,7 @@ let He = class extends h {
     `;
   }
 };
-He.styles = d`
+je.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4993,18 +4579,18 @@ He.styles = d`
       font-weight: 600;
     }
   `;
-St([
+Mo([
   n()
-], He.prototype, "label", 2);
-He = St([
-  p("vox-pagination")
-], He);
-var kr = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, ft = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Lr(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 && kr(t, a, e), e;
+], je.prototype, "label", 2);
+je = Mo([
+  h("vox-pagination")
+], je);
+var sr = Object.defineProperty, ir = Object.getOwnPropertyDescriptor, po = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ir(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 && sr(o, a, e), e;
 };
-let pe = class extends h {
+let ie = class extends p {
   constructor() {
     super(...arguments), this.attribution = "", this.detail = "";
   }
@@ -5022,7 +4608,7 @@ let pe = class extends h {
     `;
   }
 };
-pe.styles = d`
+ie.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5064,27 +4650,245 @@ pe.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-ft([
+po([
   n()
-], pe.prototype, "attribution", 2);
-ft([
+], ie.prototype, "attribution", 2);
+po([
   n()
-], pe.prototype, "detail", 2);
-pe = ft([
-  p("vox-quote")
-], pe);
-var Pr = Object.defineProperty, Vr = Object.getOwnPropertyDescriptor, S = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Vr(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 && Pr(t, a, e), e;
+], ie.prototype, "detail", 2);
+ie = po([
+  h("vox-quote")
+], ie);
+var nr = Object.defineProperty, lr = Object.getOwnPropertyDescriptor, be = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? lr(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 && nr(o, a, e), e;
+};
+let Xe = class extends p {
+  render() {
+    return l`<slot></slot>`;
+  }
 };
-let Be = class extends h {
+Xe.styles = d`
+    :host {
+      display: grid;
+      grid-template-columns: repeat(3, max-content) 1fr;
+      column-gap: var(--vox-space-4);
+    }
+  `;
+Xe = be([
+  h("vox-record-list")
+], Xe);
+let B = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.size = "md", this.hasMeta = !1, this.hasEnd = !1;
+  }
+  handleMetaSlotChange(t) {
+    const o = t.target;
+    this.hasMeta = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  handleEndSlotChange(t) {
+    const o = t.target;
+    this.hasEnd = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    if (this.size === "sm") {
+      const t = l`
+        <span class="meta ${this.hasMeta ? "has-meta" : ""}">
+          <slot @slotchange=${this.handleMetaSlotChange}></slot>
+        </span>
+      `;
+      return l`
+        ${this.href ? l`<a class="cell" href=${this.href}>${this.heading}</a>` : l`<span class="cell">${this.heading}</span>`}
+        ${this.hasMeta && this.href ? l`<a class="cell" href=${this.href}>${t}</a>` : l`<span class="cell">${t}</span>`}
+        <span class="cell">
+          <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
+        </span>
+      `;
+    }
+    return l`
+      <div class="row">
+        <div class="main">
+          ${this.href ? l`<a class="heading" href=${this.href}>${this.heading}</a>` : l`<span class="heading">${this.heading}</span>`}
+          <div class="meta ${this.hasMeta ? "has-meta" : ""}">
+            <slot @slotchange=${this.handleMetaSlotChange}></slot>
+          </div>
+        </div>
+        <span class="end ${this.hasEnd ? "has-end" : ""}">
+          <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
+        </span>
+        ${this.href ? l`
+              <a class="arrow" href=${this.href} aria-label="View ${this.heading}">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12h14" />
+                  <path d="m13 6 6 6-6 6" />
+                </svg>
+              </a>
+            ` : v}
+      </div>
+    `;
+  }
+};
+B.styles = d`
+    :host {
+      display: block;
+      grid-column: 1 / -1;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-4);
+      padding: var(--vox-space-4) 0;
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    :host(:last-child) .row {
+      border-bottom: none;
+    }
+
+    .main {
+      display: flex;
+      flex-direction: column;
+      gap: var(--vox-space-1);
+      min-width: 0;
+    }
+
+    .heading {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.4;
+    }
+
+    a.heading {
+      color: var(--vox-color-brand-1);
+      text-decoration: none;
+    }
+
+    a.heading:hover,
+    a.heading:focus-visible {
+      text-decoration: underline;
+    }
+
+    a.heading:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    span.heading {
+      color: var(--vox-color-text-1);
+    }
+
+    .meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--vox-space-4);
+    }
+
+    .meta:not(.has-meta) {
+      display: none;
+    }
+
+    .arrow {
+      display: flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: var(--vox-radius-full);
+      background-color: var(--vox-color-bg-soft);
+      color: var(--vox-color-brand-1);
+      text-decoration: none;
+      transition: background-color var(--vox-transition-fast);
+    }
+
+    .arrow:hover {
+      background-color: var(--vox-color-brand-soft);
+    }
+
+    .arrow:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .arrow svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .end:not(.has-end) {
+      display: none;
+    }
+
+    /* Small size: heading, meta, and end each become their own subgrid
+       column, aligned against the same column in every other size="sm"
+       row in the parent <vox-record-list> — the arrow drops out since
+       there's no room for it at this density, and the whole "row" is
+       really 3 separate grid cells rather than one box, so heading and
+       the meta cell each link to href individually. */
+    :host([size='sm']) {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-column: 1 / -1;
+      align-items: baseline;
+      column-gap: var(--vox-space-4);
+      padding: var(--vox-space-2) 0;
+      border-bottom: 1px solid var(--vox-color-divider);
+      font-size: 13px;
+    }
+
+    :host([size='sm']:last-child) {
+      border-bottom: none;
+    }
+
+    :host([size='sm']) .meta {
+      flex-wrap: nowrap;
+      gap: var(--vox-space-2);
+    }
+
+    .cell {
+      color: var(--vox-color-text-2);
+      text-decoration: none;
+    }
+
+    a.cell:hover,
+    a.cell:focus-visible {
+      text-decoration: underline;
+    }
+
+    a.cell:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+  `;
+be([
+  n()
+], B.prototype, "heading", 2);
+be([
+  n()
+], B.prototype, "href", 2);
+be([
+  n({ reflect: !0 })
+], B.prototype, "size", 2);
+B = be([
+  h("vox-record-list-item")
+], B);
+var cr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, P = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? dr(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 && cr(o, a, e), e;
+};
+let ze = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.hasDescription = !1;
   }
-  handleDescriptionSlotChange(o) {
-    const t = o.target;
-    this.hasDescription = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleDescriptionSlotChange(t) {
+    const o = t.target;
+    this.hasDescription = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return l`
@@ -5101,7 +4905,7 @@ let Be = class extends h {
     `;
   }
 };
-Be.styles = d`
+ze.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5133,22 +4937,22 @@ Be.styles = d`
       margin-top: var(--vox-space-6);
     }
   `;
-S([
+P([
   n()
-], Be.prototype, "heading", 2);
-Be = S([
-  p("vox-sponsor-tier")
-], Be);
-let P = class extends h {
+], ze.prototype, "heading", 2);
+ze = P([
+  h("vox-sponsor-tier")
+], ze);
+let M = class extends p {
   constructor() {
     super(...arguments), this.name = "", this.hasBody = !1;
   }
-  handleBodySlotChange(o) {
-    const t = o.target;
-    this.hasBody = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleBodySlotChange(t) {
+    const o = t.target;
+    this.hasBody = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const o = l`
+    const t = l`
       <div class="logo ${this.logo ? "has-logo" : ""}">
         ${this.logo ? l`<img src=${this.logo} alt=${this.name} />` : v}
       </div>
@@ -5161,11 +4965,11 @@ let P = class extends h {
           class="sponsor"
           href=${this.href}
           target=${this.target ?? v}
-          >${o}</a
-        >` : l`<div class="sponsor">${o}</div>`;
+          >${t}</a
+        >` : l`<div class="sponsor">${t}</div>`;
   }
 };
-P.styles = d`
+M.styles = d`
     :host {
       display: block;
     }
@@ -5231,27 +5035,27 @@ P.styles = d`
       display: none;
     }
   `;
-S([
+P([
   n()
-], P.prototype, "name", 2);
-S([
+], M.prototype, "name", 2);
+P([
   n()
-], P.prototype, "href", 2);
-S([
+], M.prototype, "href", 2);
+P([
   n()
-], P.prototype, "logo", 2);
-S([
+], M.prototype, "logo", 2);
+P([
   n()
-], P.prototype, "target", 2);
-P = S([
-  p("vox-sponsor")
-], P);
-var jr = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, gt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? zr(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 && jr(t, a, e), e;
+], M.prototype, "target", 2);
+M = P([
+  h("vox-sponsor")
+], M);
+var hr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, vo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? pr(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 && hr(o, a, e), e;
 };
-let he = class extends h {
+let ne = class extends p {
   constructor() {
     super(...arguments), this.value = "", this.label = "";
   }
@@ -5263,7 +5067,7 @@ let he = class extends h {
     `;
   }
 };
-he.styles = d`
+ne.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5290,24 +5094,24 @@ he.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-gt([
+vo([
   n()
-], he.prototype, "value", 2);
-gt([
+], ne.prototype, "value", 2);
+vo([
   n()
-], he.prototype, "label", 2);
-he = gt([
-  p("vox-stat")
-], he);
-var Dr = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, Ce = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Sr(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 && Dr(t, a, e), e;
+], ne.prototype, "label", 2);
+ne = vo([
+  h("vox-stat")
+], ne);
+var vr = Object.defineProperty, xr = Object.getOwnPropertyDescriptor, me = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? xr(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 && vr(o, a, e), e;
 };
-let tt = class extends h {
+let Je = class extends p {
   numberSteps() {
-    this.querySelectorAll("vox-step").forEach((o, t) => {
-      o.number = t + 1;
+    this.querySelectorAll("vox-step").forEach((t, o) => {
+      t.number = o + 1;
     });
   }
   render() {
@@ -5318,7 +5122,7 @@ let tt = class extends h {
     `;
   }
 };
-tt.styles = d`
+Je.styles = d`
     :host {
       display: block;
     }
@@ -5332,10 +5136,10 @@ tt.styles = d`
       flex: 1 1 0;
     }
   `;
-tt = Ce([
-  p("vox-step-indicator")
-], tt);
-let R = class extends h {
+Je = me([
+  h("vox-step-indicator")
+], Je);
+let q = class extends p {
   constructor() {
     super(...arguments), this.label = "", this.state = "upcoming", this.number = 1;
   }
@@ -5356,7 +5160,7 @@ let R = class extends h {
     `;
   }
 };
-R.styles = d`
+q.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5430,37 +5234,37 @@ R.styles = d`
       color: var(--vox-color-text-1);
     }
   `;
-Ce([
+me([
   n()
-], R.prototype, "label", 2);
-Ce([
+], q.prototype, "label", 2);
+me([
   n({ reflect: !0 })
-], R.prototype, "state", 2);
-Ce([
+], q.prototype, "state", 2);
+me([
   n({ type: Number })
-], R.prototype, "number", 2);
-R = Ce([
-  p("vox-step")
-], R);
-var Er = Object.defineProperty, Ar = Object.getOwnPropertyDescriptor, Ke = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ar(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;
+], q.prototype, "number", 2);
+q = me([
+  h("vox-step")
+], q);
+var ur = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, Te = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? fr(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 && ur(o, a, e), e;
 };
-let ot = class extends h {
+let We = class extends p {
   render() {
     return l`<slot></slot>`;
   }
 };
-ot.styles = d`
+We.styles = d`
     :host {
       display: block;
     }
   `;
-ot = Ke([
-  p("vox-timeline")
-], ot);
-let ve = class extends h {
+We = Te([
+  h("vox-timeline")
+], We);
+let le = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.date = "";
   }
@@ -5475,7 +5279,7 @@ let ve = class extends h {
     `;
   }
 };
-ve.styles = d`
+le.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5525,70 +5329,73 @@ ve.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Ke([
+Te([
   n()
-], ve.prototype, "heading", 2);
-Ke([
+], le.prototype, "heading", 2);
+Te([
   n()
-], ve.prototype, "date", 2);
-ve = Ke([
-  p("vox-timeline-item")
-], ve);
+], le.prototype, "date", 2);
+le = Te([
+  h("vox-timeline-item")
+], le);
 export {
-  ze as VoxAccordion,
-  se as VoxAccordionItem,
-  L as VoxAlert,
-  M as VoxAvatar,
-  De as VoxBadge,
-  W as VoxBillboard,
-  Xe as VoxBreadcrumbs,
-  g as VoxButton,
-  ie as VoxCalendarTile,
-  ne as VoxCallout,
-  q as VoxCard,
-  G as VoxCheckbox,
-  u as VoxCodeBlock,
-  K as VoxCta,
-  Se as VoxCtaBand,
-  k as VoxDialog,
-  re as VoxDisclosure,
-  ae as VoxDropdown,
-  Ee as VoxEmptyState,
-  m as VoxFileInput,
-  Qe as VoxFooter,
-  Ae as VoxFooterColumn,
-  I as VoxGrid,
-  N as VoxHeader,
-  le as VoxHero,
-  H as VoxIcon,
-  w as VoxInput,
-  Ye as VoxInputGroup,
-  et as VoxLinkHub,
-  ce as VoxLinkHubItem,
-  de as VoxLoader,
-  He as VoxPagination,
-  pe as VoxQuote,
-  B as VoxRadio,
-  Pe as VoxRadioGroup,
-  Y as VoxSelect,
-  O as VoxSeriesNav,
-  T as VoxSidenav,
-  J as VoxSidenavGroup,
-  Q as VoxSidenavItem,
-  P as VoxSponsor,
-  Be as VoxSponsorTier,
-  he as VoxStat,
-  R as VoxStep,
-  tt as VoxStepIndicator,
-  Ve as VoxSubnav,
-  X as VoxSwitch,
-  ee as VoxTab,
-  te as VoxTabPanel,
-  We as VoxTabs,
-  C as VoxTextarea,
-  A as VoxThemeToggle,
-  ot as VoxTimeline,
-  ve as VoxTimelineItem,
-  je as VoxToc,
-  oe as VoxTocItem
+  Me as VoxAccordion,
+  ee as VoxAccordionItem,
+  C as VoxAlert,
+  w as VoxAvatar,
+  Oe as VoxBadge,
+  K as VoxBillboard,
+  Ze as VoxBreadcrumbs,
+  f as VoxButton,
+  oe as VoxCalendarTile,
+  te as VoxCallout,
+  S as VoxCard,
+  R as VoxCheckbox,
+  T as VoxCta,
+  ke as VoxCtaBand,
+  Pe as VoxDatum,
+  _ as VoxDialog,
+  Q as VoxDisclosure,
+  Y as VoxDropdown,
+  Le as VoxEmptyState,
+  g as VoxFileInput,
+  Ue as VoxFooter,
+  Ve as VoxFooterColumn,
+  A as VoxGrid,
+  D as VoxHeader,
+  re as VoxHero,
+  j as VoxIcon,
+  b as VoxInput,
+  Fe as VoxInputGroup,
+  Ge as VoxLinkHub,
+  ae as VoxLinkHubItem,
+  se as VoxLoader,
+  H as VoxMenu,
+  je as VoxPagination,
+  ie as VoxQuote,
+  z as VoxRadio,
+  $e as VoxRadioGroup,
+  Xe as VoxRecordList,
+  B as VoxRecordListItem,
+  F as VoxSelect,
+  $ as VoxSeriesNav,
+  E as VoxSidenav,
+  U as VoxSidenavGroup,
+  G as VoxSidenavItem,
+  M as VoxSponsor,
+  ze as VoxSponsorTier,
+  ne as VoxStat,
+  q as VoxStep,
+  Je as VoxStepIndicator,
+  _e as VoxSubnav,
+  Z as VoxSwitch,
+  X as VoxTab,
+  J as VoxTabPanel,
+  Ke as VoxTabs,
+  y as VoxTextarea,
+  V as VoxThemeToggle,
+  We as VoxTimeline,
+  le as VoxTimelineItem,
+  Ce as VoxToc,
+  W as VoxTocItem
 };