@openvoxproject/voxblocks 0.12.0 → 0.15.0

package/dist/voxblocks.js

@@ -1,19 +1,19 @@
 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--)
+import { property as n, customElement as p, state as $, query as J } from "lit/decorators.js";
+import { classMap as Vt } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { live as Fe } from "lit/directives/live.js";
+var qt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, B = (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 && At(t, a, e), e;
+  return r && e && qt(t, a, e), e;
 };
-let g = class extends h {
+let C = class extends h {
   constructor() {
     super(...arguments), this.variant = "brand", this.size = "md", this.type = "button", this.disabled = !1;
   }
   render() {
-    const o = Et({
+    const o = Vt({
       button: !0,
       [this.variant]: !0,
       [this.size]: !0
@@ -22,8 +22,8 @@ let g = class extends h {
         <a
           class=${o}
           href=${this.href}
-          target=${E(this.target)}
-          rel=${E(this.target === "_blank" ? "noreferrer" : void 0)}
+          target=${u(this.target)}
+          rel=${u(this.target === "_blank" ? "noreferrer" : void 0)}
         >
           <slot></slot>
         </a>
@@ -34,7 +34,7 @@ let g = class extends h {
     `;
   }
 };
-g.styles = d`
+C.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([
+B([
   n()
-], g.prototype, "variant", 2);
-V([
+], C.prototype, "variant", 2);
+B([
   n()
-], g.prototype, "size", 2);
-V([
+], C.prototype, "size", 2);
+B([
   n()
-], g.prototype, "href", 2);
-V([
+], C.prototype, "href", 2);
+B([
   n()
-], g.prototype, "target", 2);
-V([
+], C.prototype, "target", 2);
+B([
   n()
-], g.prototype, "type", 2);
-V([
+], C.prototype, "type", 2);
+B([
   n({ type: Boolean, reflect: !0 })
-], g.prototype, "disabled", 2);
-g = V([
+], C.prototype, "disabled", 2);
+C = B([
   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--)
+], C);
+var Tt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, dt = (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 && Bt(t, a, e), e;
+  return r && e && Tt(t, a, e), e;
 };
-let K = class extends h {
+let te = class extends h {
   constructor() {
     super(...arguments), this.href = "#";
   }
@@ -184,7 +184,7 @@ let K = class extends h {
     `;
   }
 };
-K.styles = d`
+te.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -221,31 +221,31 @@ K.styles = d`
       transform: translateX(3px);
     }
   `;
-at([
+dt([
   n()
-], K.prototype, "href", 2);
-at([
+], te.prototype, "href", 2);
+dt([
   n()
-], K.prototype, "target", 2);
-K = at([
+], te.prototype, "target", 2);
+te = dt([
   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--)
+], te);
+var Zt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, Ke = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ft(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Tt(t, a, e), e;
+  return r && e && Zt(t, a, e), e;
 };
-const yt = "vox-theme", Oe = "data-vox-theme";
-let A = class extends h {
+const Ct = "vox-theme", je = "data-vox-theme";
+let Z = class extends h {
   constructor() {
     super(...arguments), this.lightLabel = "Switch to dark theme", this.darkLabel = "Switch to light theme", this.dark = !1, this.media = window.matchMedia("(prefers-color-scheme: dark)"), this.handleSystemChange = (o) => {
-      localStorage.getItem(yt) || document.documentElement.setAttribute(Oe, o.matches ? "dark" : "light");
+      localStorage.getItem(Ct) || document.documentElement.setAttribute(je, o.matches ? "dark" : "light");
     };
   }
   connectedCallback() {
     super.connectedCallback(), this.syncFromDocument(), this.observer = new MutationObserver(() => this.syncFromDocument()), this.observer.observe(document.documentElement, {
       attributes: !0,
-      attributeFilter: [Oe]
+      attributeFilter: [je]
     }), this.media.addEventListener("change", this.handleSystemChange);
   }
   disconnectedCallback() {
@@ -253,12 +253,12 @@ let A = class extends h {
     super.disconnectedCallback(), (o = this.observer) == null || o.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
   }
   syncFromDocument() {
-    const o = document.documentElement.getAttribute(Oe) === "dark";
+    const o = document.documentElement.getAttribute(je) === "dark";
     this.dark = o, this.toggleAttribute("dark", o);
   }
   handleClick() {
     const o = this.dark ? "light" : "dark";
-    document.documentElement.setAttribute(Oe, o), localStorage.setItem(yt, o), this.dispatchEvent(
+    document.documentElement.setAttribute(je, o), localStorage.setItem(Ct, o), this.dispatchEvent(
       new CustomEvent("vox-theme-change", {
         detail: { theme: o },
         bubbles: !0,
@@ -291,7 +291,7 @@ let A = class extends h {
     `;
   }
 };
-A.styles = d`
+Z.styles = d`
     :host {
       display: inline-flex;
     }
@@ -350,19 +350,19 @@ A.styles = d`
       transform: translateX(20px);
     }
   `;
-Ne([
+Ke([
   n({ attribute: "light-label" })
-], A.prototype, "lightLabel", 2);
-Ne([
+], Z.prototype, "lightLabel", 2);
+Ke([
   n({ attribute: "dark-label" })
-], A.prototype, "darkLabel", 2);
-Ne([
-  Z()
-], A.prototype, "dark", 2);
-A = Ne([
+], Z.prototype, "darkLabel", 2);
+Ke([
+  $()
+], Z.prototype, "dark", 2);
+Z = Ke([
   p("vox-theme-toggle")
-], A);
-const y = {
+], Z);
+const O = {
   // 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,17 +450,17 @@ 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--)
+var Kt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, Ue = (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 && It(t, a, e), e;
+  return r && e && Kt(t, a, e), e;
 };
-let H = class extends h {
+let F = class extends h {
   constructor() {
     super(...arguments), this.name = "info", this.size = "md";
   }
   render() {
-    const o = y[this.name];
+    const o = O[this.name];
     return o ? l`
       <svg
         viewBox="0 0 48 48"
@@ -478,7 +478,7 @@ let H = class extends h {
     ` : v;
   }
 };
-H.styles = d`
+F.styles = d`
     :host {
       display: inline-flex;
       flex: none;
@@ -509,24 +509,24 @@ H.styles = d`
       height: 48px;
     }
   `;
-Te([
+Ue([
   n()
-], H.prototype, "name", 2);
-Te([
+], F.prototype, "name", 2);
+Ue([
   n({ reflect: !0 })
-], H.prototype, "size", 2);
-Te([
+], F.prototype, "size", 2);
+Ue([
   n()
-], H.prototype, "label", 2);
-H = Te([
+], F.prototype, "label", 2);
+F = Ue([
   p("vox-icon")
-], H);
-var Zt = Object.defineProperty, xe = (o, t, a, r) => {
+], F);
+var Gt = Object.defineProperty, we = (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;
+  return e && Gt(t, a, e), e;
 };
-const bt = class bt extends h {
+const _t = class _t extends h {
   constructor() {
     super(), this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
   }
@@ -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([
+_t.formAssociated = !0;
+let x = _t;
+we([
   n()
 ], x.prototype, "name");
-xe([
+we([
   n()
 ], x.prototype, "label");
-xe([
+we([
   n()
 ], x.prototype, "note");
-xe([
+we([
   n({ type: Boolean, reflect: !0 })
 ], x.prototype, "disabled");
-xe([
+we([
   n({ type: Boolean, reflect: !0 })
 ], x.prototype, "required");
-const ue = d`
+const I = 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`
+`, zt = 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--)
+var Yt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, pt = (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 = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Ft(t, a, e), e;
+  return r && e && Yt(t, a, e), e;
 };
-let G = class extends x {
+let oe = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -714,8 +714,8 @@ let G = class extends x {
     `;
   }
 };
-G.styles = [
-  Ot,
+oe.styles = [
+  zt,
   d`
       .box {
         flex: none;
@@ -755,21 +755,320 @@ G.styles = [
       }
     `
 ];
-st([
+pt([
   n({ type: Boolean, reflect: !0 })
-], G.prototype, "checked", 2);
-st([
+], oe.prototype, "checked", 2);
+pt([
   n()
-], G.prototype, "value", 2);
-G = st([
+], oe.prototype, "value", 2);
+oe = pt([
   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--)
+], oe);
+var Xt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, m = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Jt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Kt(t, a, e), e;
+  return r && e && Xt(t, a, e), e;
+};
+let g = class extends x {
+  constructor() {
+    super(...arguments), this.value = "", this.allowCustom = !1, this.emptyText = "No matches", this.query = "", this.open = !1, this.activeIndex = -1, this.options = [];
+  }
+  get filtered() {
+    const o = this.query.trim().toLowerCase();
+    return !o || o === this.selectedLabel.toLowerCase() ? this.options : this.options.filter((t) => t.label.toLowerCase().includes(o));
+  }
+  get selectedLabel() {
+    var o;
+    return ((o = this.options.find((t) => t.value === this.value)) == null ? void 0 : o.label) ?? "";
+  }
+  willUpdate(o) {
+    var t;
+    o.has("value") && ((t = this.shadowRoot) == null ? void 0 : t.activeElement) === null && (this.query = this.selectedLabel);
+  }
+  formResetCallback() {
+    this.value = "", this.query = "", this.close();
+  }
+  updated() {
+    this.internals.setFormValue(this.value || null), this.internals.setValidity(
+      this.required && !this.value ? { valueMissing: !0 } : {},
+      "Please select an option.",
+      this.inputEl
+    );
+  }
+  focus(o) {
+    var t;
+    (t = this.inputEl) == null || t.focus(o);
+  }
+  readOptions() {
+    this.options = [...this.querySelectorAll("option")].map((o) => {
+      var t;
+      return {
+        value: o.value,
+        label: ((t = o.textContent) == null ? void 0 : t.trim()) ?? "",
+        disabled: o.disabled
+      };
+    }), this.value && !this.query && (this.query = this.selectedLabel);
+  }
+  openList() {
+    if (this.open || this.disabled) return;
+    this.open = !0;
+    const o = this.filtered.findIndex((t) => t.value === this.value);
+    this.activeIndex = o;
+  }
+  close() {
+    this.open = !1, this.activeIndex = -1;
+  }
+  select(o) {
+    o.disabled || (this.value = o.value, this.query = o.label, this.close(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+  }
+  moveActive(o) {
+    const t = this.filtered;
+    if (t.length === 0 || t.filter((e) => !e.disabled).length === 0) return;
+    let r = this.activeIndex;
+    for (let e = 0; e < t.length && (r = (r + o + t.length) % t.length, !!t[r].disabled); e++)
+      ;
+    this.activeIndex = r, this.scrollActiveIntoView();
+  }
+  scrollActiveIntoView() {
+    this.updateComplete.then(() => {
+      var o, t;
+      (t = (o = this.listboxEl) == null ? void 0 : o.querySelector("[data-active]")) == null || t.scrollIntoView({ block: "nearest" });
+    });
+  }
+  handleInput(o) {
+    this.query = o.target.value, this.openList(), this.activeIndex = -1, this.allowCustom && (this.value = this.query);
+  }
+  handleKeydown(o) {
+    switch (o.key) {
+      case "ArrowDown":
+        o.preventDefault(), this.open ? this.moveActive(1) : (this.openList(), this.activeIndex === -1 && this.moveActive(1));
+        break;
+      case "ArrowUp":
+        o.preventDefault(), this.open || (this.openList(), this.activeIndex = this.filtered.length), this.moveActive(-1);
+        break;
+      case "Home":
+        if (!this.open) return;
+        o.preventDefault(), this.activeIndex = -1, this.moveActive(1);
+        break;
+      case "End":
+        if (!this.open) return;
+        o.preventDefault(), this.activeIndex = this.filtered.length, this.moveActive(-1);
+        break;
+      case "Enter": {
+        if (!this.open) return;
+        const t = this.filtered[this.activeIndex];
+        t && (o.preventDefault(), this.select(t));
+        break;
+      }
+      case "Escape":
+        o.preventDefault(), this.open ? this.close() : (this.value || this.query) && (this.query = "", this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })));
+        break;
+      case "Tab":
+        this.close();
+        break;
+    }
+  }
+  handleBlur() {
+    if (this.close(), !this.allowCustom) {
+      if (this.query === "") {
+        this.value && (this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })));
+        return;
+      }
+      this.query = this.selectedLabel;
+    }
+  }
+  optionId(o) {
+    return `option-${o}`;
+  }
+  render() {
+    const o = this.filtered, t = this.open && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : void 0;
+    return l`
+      <div class="field">
+        ${this.renderLabel("combobox")}
+        <div class="combo">
+          <input
+            id="combobox"
+            class="control"
+            type="text"
+            role="combobox"
+            .value=${Fe(this.query)}
+            placeholder=${u(this.placeholder)}
+            autocomplete="off"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-controls="listbox"
+            aria-autocomplete="list"
+            aria-activedescendant=${u(t)}
+            aria-label=${this.label ? v : "combobox"}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeydown}
+            @blur=${this.handleBlur}
+            @mousedown=${this.openList}
+          />
+          <ul
+            class="listbox"
+            id="listbox"
+            role="listbox"
+            aria-label=${this.label || "options"}
+            ?hidden=${!this.open}
+          >
+            ${o.length === 0 ? l`<li class="empty" role="presentation">${this.emptyText}</li>` : o.map(
+      (a, r) => l`
+                    <li
+                      id=${this.optionId(r)}
+                      class=${Vt({ option: !0 })}
+                      role="option"
+                      aria-selected=${a.value === this.value ? "true" : "false"}
+                      aria-disabled=${a.disabled ? "true" : "false"}
+                      ?data-active=${r === this.activeIndex}
+                      @mousedown=${(e) => {
+        e.preventDefault(), this.select(a);
+      }}
+                    >
+                      ${a.label}
+                    </li>
+                  `
+    )}
+          </ul>
+        </div>
+        ${this.renderNote()}
+        <span class="sr-only" role="status" aria-live="polite">
+          ${this.open ? `${o.length} ${o.length === 1 ? "option" : "options"} available` : ""}
+        </span>
+      </div>
+      <div hidden><slot @slotchange=${this.readOptions}></slot></div>
+    `;
+  }
+};
+g.styles = [
+  I,
+  d`
+      /*
+       * The popup anchors to this shell, not to .field: an absolutely
+       * positioned child of a flex container takes its static position from
+       * the container's content-box origin, which would put it over the label.
+       */
+      .combo {
+        position: relative;
+      }
+
+      .control {
+        padding-right: var(--vox-space-8);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right var(--vox-space-3) center;
+      }
+
+      .listbox {
+        position: absolute;
+        z-index: 20;
+        top: calc(100% + var(--vox-space-1));
+        left: 0;
+        right: 0;
+        margin: 0;
+        padding: var(--vox-space-1);
+        max-height: 15rem;
+        overflow-y: auto;
+        list-style: none;
+        background-color: var(--vox-color-bg-elv);
+        border: 1px solid var(--vox-color-border);
+        border-radius: var(--vox-radius-md);
+        box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
+      }
+
+      .option {
+        padding: var(--vox-space-2) var(--vox-space-3);
+        border-radius: var(--vox-radius-sm);
+        font-size: 14px;
+        line-height: 1.5;
+        color: var(--vox-color-text-1);
+        cursor: pointer;
+      }
+
+      /*
+       * Focus stays on the input, so the active option is styled rather than
+       * focused. Colour alone can't carry it (WCAG 1.4.1) — the selected
+       * option also gets a check mark.
+       */
+      .option[data-active] {
+        background-color: var(--vox-color-brand-soft);
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: -2px;
+      }
+
+      .option[aria-selected='true'] {
+        font-weight: 600;
+      }
+
+      .option[aria-selected='true']::after {
+        content: ' ✓';
+        color: var(--vox-color-brand-1);
+      }
+
+      .option[aria-disabled='true'] {
+        color: var(--vox-color-text-3);
+        cursor: not-allowed;
+      }
+
+      .empty {
+        padding: var(--vox-space-2) var(--vox-space-3);
+        font-size: 14px;
+        color: var(--vox-color-text-2);
+      }
+
+      /* Announced, never shown. */
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+    `
+];
+m([
+  n()
+], g.prototype, "value", 2);
+m([
+  n()
+], g.prototype, "placeholder", 2);
+m([
+  n({ type: Boolean, attribute: "allow-custom" })
+], g.prototype, "allowCustom", 2);
+m([
+  n({ attribute: "empty-text" })
+], g.prototype, "emptyText", 2);
+m([
+  $()
+], g.prototype, "query", 2);
+m([
+  $()
+], g.prototype, "open", 2);
+m([
+  $()
+], g.prototype, "activeIndex", 2);
+m([
+  $()
+], g.prototype, "options", 2);
+m([
+  J("input")
+], g.prototype, "inputEl", 2);
+m([
+  J(".listbox")
+], g.prototype, "listboxEl", 2);
+g = m([
+  p("vox-combobox")
+], g);
+var Qt = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, Q = (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;
 };
-let m = class extends x {
+let M = class extends x {
   constructor() {
     super(...arguments), this.multiple = !1, this.buttonLabel = "Choose a file", this.fileNames = [];
   }
@@ -795,7 +1094,7 @@ let m = class extends x {
           <input
             id="file"
             type="file"
-            accept=${E(this.accept)}
+            accept=${u(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
             @change=${this.handleChange}
@@ -812,8 +1111,8 @@ let m = class extends x {
     `;
   }
 };
-m.styles = [
-  ue,
+M.styles = [
+  I,
   d`
       input {
         position: absolute;
@@ -862,33 +1161,50 @@ m.styles = [
       }
     `
 ];
-F([
+Q([
   n()
-], m.prototype, "accept", 2);
-F([
+], M.prototype, "accept", 2);
+Q([
   n({ type: Boolean })
-], m.prototype, "multiple", 2);
-F([
+], M.prototype, "multiple", 2);
+Q([
   n({ attribute: "button-label" })
-], m.prototype, "buttonLabel", 2);
-F([
-  Z()
-], m.prototype, "fileNames", 2);
-F([
-  rt("input")
-], m.prototype, "inputEl", 2);
-m = F([
+], M.prototype, "buttonLabel", 2);
+Q([
+  $()
+], M.prototype, "fileNames", 2);
+Q([
+  J("input")
+], M.prototype, "inputEl", 2);
+M = Q([
   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--)
+], M);
+var to = Object.defineProperty, oo = Object.getOwnPropertyDescriptor, b = (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 && Yt(t, a, e), e;
+  return r && e && to(t, a, e), e;
 };
-let w = class extends x {
+const ro = {
+  text: "text input",
+  email: "email address",
+  number: "number",
+  password: "password",
+  search: "search",
+  tel: "telephone number",
+  url: "web address",
+  date: "date",
+  time: "time",
+  "datetime-local": "date and time",
+  month: "month",
+  week: "week"
+};
+let f = class extends x {
   constructor() {
     super(...arguments), this.type = "text", this.value = "", this.readonly = !1;
   }
+  get accessibleName() {
+    return ro[this.type] ?? `${this.type} input`;
+  }
   formResetCallback() {
     this.value = "";
   }
@@ -915,13 +1231,20 @@ let w = class extends x {
           id="input"
           class="control"
           type=${this.type}
-          .value=${Mt(this.value)}
-          placeholder=${E(this.placeholder)}
-          autocomplete=${E(this.autocomplete)}
+          min=${u(this.min)}
+          max=${u(this.max)}
+          step=${u(this.step)}
+          .value=${Fe(this.value)}
+          placeholder=${u(this.placeholder)}
+          autocomplete=${u(this.autocomplete)}
+          pattern=${u(this.pattern)}
+          minlength=${u(this.minlength)}
+          maxlength=${u(this.maxlength)}
+          inputmode=${u(this.inputmode)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          aria-label=${this.label ? v : "text input"}
+          aria-label=${this.label ? v : this.accessibleName}
           @input=${this.handleInput}
           @change=${this.handleChange}
         />
@@ -930,31 +1253,52 @@ let w = class extends x {
     `;
   }
 };
-w.styles = ue;
-U([
+f.styles = I;
+b([
   n()
-], w.prototype, "type", 2);
-U([
+], f.prototype, "type", 2);
+b([
   n()
-], w.prototype, "value", 2);
-U([
+], f.prototype, "value", 2);
+b([
   n()
-], w.prototype, "placeholder", 2);
-U([
+], f.prototype, "placeholder", 2);
+b([
   n()
-], w.prototype, "autocomplete", 2);
-U([
+], f.prototype, "autocomplete", 2);
+b([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "readonly", 2);
-w = U([
+], f.prototype, "readonly", 2);
+b([
+  n()
+], f.prototype, "min", 2);
+b([
+  n()
+], f.prototype, "max", 2);
+b([
+  n()
+], f.prototype, "step", 2);
+b([
+  n()
+], f.prototype, "pattern", 2);
+b([
+  n()
+], f.prototype, "minlength", 2);
+b([
+  n()
+], f.prototype, "maxlength", 2);
+b([
+  n()
+], f.prototype, "inputmode", 2);
+f = b([
   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--)
+], f);
+var ao = Object.getOwnPropertyDescriptor, so = (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 = i(e) || e);
   return e;
 };
-let Ye = class extends h {
+let ot = class extends h {
   handleSlotChange(o) {
     const t = o.target.assignedElements();
     t.forEach((a, r) => {
@@ -970,7 +1314,7 @@ let Ye = class extends h {
     `;
   }
 };
-Ye.styles = d`
+ot.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1012,15 +1356,15 @@ Ye.styles = d`
       border-left: none;
     }
   `;
-Ye = Jt([
+ot = so([
   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--)
+], ot);
+var io = Object.defineProperty, no = Object.getOwnPropertyDescriptor, Ge = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? no(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Qt(t, a, e), e;
+  return r && e && io(t, a, e), e;
 };
-let B = class extends h {
+let K = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.checked = !1, this.disabled = !1;
   }
@@ -1049,7 +1393,7 @@ let B = class extends h {
     `;
   }
 };
-B.styles = d`
+K.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1098,24 +1442,24 @@ B.styles = d`
       outline-offset: 2px;
     }
   `;
-qe([
+Ge([
   n()
-], B.prototype, "value", 2);
-qe([
+], K.prototype, "value", 2);
+Ge([
   n({ type: Boolean, reflect: !0 })
-], B.prototype, "checked", 2);
-qe([
+], K.prototype, "checked", 2);
+Ge([
   n({ type: Boolean, reflect: !0 })
-], B.prototype, "disabled", 2);
-B = qe([
+], K.prototype, "disabled", 2);
+K = Ge([
   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--)
+], K);
+var lo = Object.defineProperty, co = Object.getOwnPropertyDescriptor, jt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? co(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && to(t, a, e), e;
+  return r && e && lo(t, a, e), e;
 };
-let Pe = class extends x {
+let Ae = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1146,7 +1490,7 @@ let Pe = class extends x {
     !(t instanceof HTMLElement) || t.tagName !== "VOX-RADIO" || (o.stopPropagation(), this.value !== t.value && (this.value = t.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
   }
   handleKeydown(o) {
-    var _, Me;
+    var z, ze;
     const a = {
       ArrowDown: 1,
       ArrowRight: 1,
@@ -1155,10 +1499,10 @@ let Pe = class extends x {
     }[o.key];
     if (!a) return;
     o.preventDefault();
-    const r = this.radios.filter((Ge) => !Ge.disabled);
+    const r = this.radios.filter((tt) => !tt.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((tt) => tt.checked), s = (Math.max(e, 0) + a + r.length) % r.length, i = r[s];
+    i.select(), (ze = (z = i.shadowRoot) == null ? void 0 : z.querySelector(".radio")) == null || ze.focus();
   }
   render() {
     return l`
@@ -1178,8 +1522,8 @@ let Pe = class extends x {
     `;
   }
 };
-Pe.styles = [
-  ue,
+Ae.styles = [
+  I,
   d`
       .options {
         display: flex;
@@ -1189,36 +1533,239 @@ Pe.styles = [
       }
     `
 ];
-kt([
+jt([
   n()
-], Pe.prototype, "value", 2);
-Pe = kt([
+], Ae.prototype, "value", 2);
+Ae = jt([
   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--)
+], Ae);
+var po = Object.defineProperty, ho = Object.getOwnPropertyDescriptor, P = (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 && ro(t, a, e), e;
+  return r && e && po(t, a, e), e;
 };
-let Y = class extends x {
+let w = class extends x {
   constructor() {
-    super(...arguments), this.value = "";
+    super(...arguments), this.value = "", this.min = "0", this.max = "100", this.step = "1", this.showValue = !1, this.unit = "", this.defaultValue = "";
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.value === "") {
+      const o = (Number(this.min) + Number(this.max)) / 2;
+      this.value = String(Number.isFinite(o) ? o : this.min);
+    }
+    this.defaultValue = this.value;
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  updated() {
+    this.internals.setFormValue(this.value), this.inputEl && this.syncValidity(this.inputEl);
+  }
+  focus(o) {
+    var t;
+    (t = this.inputEl) == null || t.focus(o);
+  }
+  handleInput(o) {
+    this.value = o.target.value;
+  }
+  handleChange() {
+    this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    const o = this.unit ? `${this.value}${this.unit}` : this.value;
+    return l`
+      <div class="field">
+        ${this.renderLabel("range")}
+        <div class="row">
+          <input
+            id="range"
+            class="control"
+            type="range"
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            .value=${Fe(this.value)}
+            ?disabled=${this.disabled}
+            aria-label=${this.label ? v : "slider"}
+            aria-valuetext=${u(this.unit ? o : void 0)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+          ${this.showValue ? l`<span class="readout" aria-hidden="true">${o}</span>` : v}
+        </div>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+w.styles = [
+  I,
+  d`
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--vox-space-3);
+      }
+
+      .readout {
+        flex: none;
+        min-width: 3.5ch;
+        font-size: 14px;
+        font-variant-numeric: tabular-nums;
+        color: var(--vox-color-text-2);
+        text-align: right;
+      }
+
+      input.control {
+        appearance: none;
+        -webkit-appearance: none;
+        padding: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        /* Room for the thumb's focus ring at both ends of the track. */
+        height: 24px;
+      }
+
+      input.control:focus {
+        outline: none;
+        border: none;
+        box-shadow: none;
+      }
+
+      input.control:disabled {
+        cursor: not-allowed;
+      }
+
+      /*
+       * Track and thumb need vendor-prefixed selectors, and a browser drops
+       * the whole rule if it doesn't recognise one — so no grouping here.
+       */
+      input.control::-webkit-slider-runnable-track {
+        height: 6px;
+        border-radius: var(--vox-radius-full);
+        /* 3:1 against the page background, per WCAG 1.4.11. */
+        background-color: var(--vox-color-border);
+      }
+
+      input.control::-moz-range-track {
+        height: 6px;
+        border-radius: var(--vox-radius-full);
+        background-color: var(--vox-color-border);
+      }
+
+      input.control::-webkit-slider-thumb {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 20px;
+        height: 20px;
+        margin-top: -7px;
+        border: 2px solid var(--vox-color-bg);
+        border-radius: var(--vox-radius-full);
+        background-color: var(--vox-color-brand-1);
+        transition: box-shadow var(--vox-transition-fast);
+      }
+
+      input.control::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--vox-color-bg);
+        border-radius: var(--vox-radius-full);
+        background-color: var(--vox-color-brand-1);
+        transition: box-shadow var(--vox-transition-fast);
+      }
+
+      input.control:focus-visible::-webkit-slider-thumb {
+        box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
+      }
+
+      input.control:focus-visible::-moz-range-thumb {
+        box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        input.control::-webkit-slider-thumb,
+        input.control::-moz-range-thumb {
+          transition: none;
+        }
+      }
+    `
+];
+P([
+  n()
+], w.prototype, "value", 2);
+P([
+  n()
+], w.prototype, "min", 2);
+P([
+  n()
+], w.prototype, "max", 2);
+P([
+  n()
+], w.prototype, "step", 2);
+P([
+  n({ type: Boolean, attribute: "show-value" })
+], w.prototype, "showValue", 2);
+P([
+  n()
+], w.prototype, "unit", 2);
+P([
+  J("input")
+], w.prototype, "inputEl", 2);
+w = P([
+  p("vox-range")
+], w);
+var vo = Object.defineProperty, uo = Object.getOwnPropertyDescriptor, ee = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? uo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && vo(t, a, e), e;
+};
+let L = class extends x {
+  constructor() {
+    super(...arguments), this.value = "", this.multiple = !1, this.values = [];
   }
   formResetCallback() {
-    this.value = "", this.syncOptions();
+    this.value = "", this.values = [], this.syncOptions();
   }
   updated() {
-    this.internals.setFormValue(this.value), this.selectEl && this.syncValidity(this.selectEl);
+    this.internals.setFormValue(this.multiple ? this.formData() : this.value), this.selectEl && this.syncValidity(this.selectEl);
+  }
+  focus(o) {
+    var t;
+    (t = this.selectEl) == null || t.focus(o);
+  }
+  /**
+   * A multi-select submits one entry per selection, which only FormData can
+   * express. Without a `name` there is nothing to key them on, so submit
+   * nothing — matching a native select with no name.
+   */
+  formData() {
+    if (!this.name) return null;
+    const o = new FormData();
+    for (const t of this.values) o.append(this.name, t);
+    return o;
   }
   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))
-    ), this.value && (this.selectEl.value = this.value), this.value = this.selectEl.value);
+    if (o) {
+      if (this.selectEl.replaceChildren(
+        ...o.assignedElements().filter((t) => t instanceof HTMLOptionElement || t instanceof HTMLOptGroupElement).map((t) => t.cloneNode(!0))
+      ), this.multiple) {
+        const t = new Set(this.values);
+        for (const a of this.selectEl.options)
+          a.selected = t.has(a.value);
+        this.values = this.selected();
+        return;
+      }
+      this.value && (this.selectEl.value = this.value), this.value = this.selectEl.value;
+    }
+  }
+  selected() {
+    return [...this.selectEl.selectedOptions].map((o) => o.value);
   }
   handleChange() {
-    this.value = this.selectEl.value, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+    this.multiple ? (this.values = this.selected(), this.value = this.values[0] ?? "") : this.value = this.selectEl.value, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
     return l`
@@ -1227,8 +1774,11 @@ let Y = class extends x {
         <select
           id="select"
           class="control"
+          ?multiple=${this.multiple}
+          size=${u(this.multiple ? this.size ?? 4 : void 0)}
           ?required=${this.required}
           ?disabled=${this.disabled}
+          aria-label=${this.label ? v : "options"}
           @change=${this.handleChange}
         ></select>
         ${this.renderNote()}
@@ -1237,8 +1787,8 @@ let Y = class extends x {
     `;
   }
 };
-Y.styles = [
-  ue,
+L.styles = [
+  I,
   d`
       select.control {
         appearance: none;
@@ -1248,23 +1798,44 @@ Y.styles = [
         background-position: right var(--vox-space-3) center;
         cursor: pointer;
       }
+
+      /* A list box has no collapsed affordance, so drop the chevron. */
+      :host([multiple]) select.control {
+        appearance: none;
+        padding-right: var(--vox-space-3);
+        background-image: none;
+        cursor: default;
+      }
+
+      :host([multiple]) select.control option {
+        padding: var(--vox-space-1) var(--vox-space-2);
+      }
     `
 ];
-it([
+ee([
   n()
-], Y.prototype, "value", 2);
-it([
-  rt("select")
-], Y.prototype, "selectEl", 2);
-Y = it([
+], L.prototype, "value", 2);
+ee([
+  n({ type: Boolean, reflect: !0 })
+], L.prototype, "multiple", 2);
+ee([
+  n({ type: Number })
+], L.prototype, "size", 2);
+ee([
+  n({ type: Array })
+], L.prototype, "values", 2);
+ee([
+  J("select")
+], L.prototype, "selectEl", 2);
+L = ee([
   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--)
+], L);
+var xo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, ht = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? fo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && so(t, a, e), e;
+  return r && e && xo(t, a, e), e;
 };
-let X = class extends x {
+let re = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -1293,8 +1864,8 @@ let X = class extends x {
     `;
   }
 };
-X.styles = [
-  Ot,
+re.styles = [
+  zt,
   d`
       .track {
         flex: none;
@@ -1333,21 +1904,21 @@ X.styles = [
       }
     `
 ];
-nt([
+ht([
   n({ type: Boolean, reflect: !0 })
-], X.prototype, "checked", 2);
-nt([
+], re.prototype, "checked", 2);
+ht([
   n()
-], X.prototype, "value", 2);
-X = nt([
+], re.prototype, "value", 2);
+re = ht([
   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--)
+], re);
+var go = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, $e = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? bo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && no(t, a, e), e;
+  return r && e && go(t, a, e), e;
 };
-let C = class extends x {
+let j = class extends x {
   constructor() {
     super(...arguments), this.value = "", this.rows = 4, this.readonly = !1;
   }
@@ -1377,8 +1948,8 @@ let C = class extends x {
           id="textarea"
           class="control"
           rows=${this.rows}
-          .value=${Mt(this.value)}
-          placeholder=${E(this.placeholder)}
+          .value=${Fe(this.value)}
+          placeholder=${u(this.placeholder)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
@@ -1390,8 +1961,8 @@ let C = class extends x {
     `;
   }
 };
-C.styles = [
-  ue,
+j.styles = [
+  I,
   d`
       textarea.control {
         resize: vertical;
@@ -1399,27 +1970,27 @@ C.styles = [
       }
     `
 ];
-fe([
+$e([
   n()
-], C.prototype, "value", 2);
-fe([
+], j.prototype, "value", 2);
+$e([
   n()
-], C.prototype, "placeholder", 2);
-fe([
+], j.prototype, "placeholder", 2);
+$e([
   n({ type: Number })
-], C.prototype, "rows", 2);
-fe([
+], j.prototype, "rows", 2);
+$e([
   n({ type: Boolean, reflect: !0 })
-], C.prototype, "readonly", 2);
-C = fe([
+], j.prototype, "readonly", 2);
+j = $e([
   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--)
+], j);
+var yo = Object.defineProperty, mo = Object.getOwnPropertyDescriptor, _e = (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;
+  return r && e && yo(t, a, e), e;
 };
-let M = class extends h {
+let E = class extends h {
   constructor() {
     super(...arguments), this.alt = "", this.initials = "", this.size = "md";
   }
@@ -1431,7 +2002,7 @@ let M = class extends h {
     `;
   }
 };
-M.styles = d`
+E.styles = d`
     :host {
       display: inline-block;
     }
@@ -1479,27 +2050,27 @@ M.styles = d`
       font-size: 28px;
     }
   `;
-ge([
+_e([
   n()
-], M.prototype, "src", 2);
-ge([
+], E.prototype, "src", 2);
+_e([
   n()
-], M.prototype, "alt", 2);
-ge([
+], E.prototype, "alt", 2);
+_e([
   n()
-], M.prototype, "initials", 2);
-ge([
+], E.prototype, "initials", 2);
+_e([
   n({ reflect: !0 })
-], M.prototype, "size", 2);
-M = ge([
+], E.prototype, "size", 2);
+E = _e([
   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--)
+], E);
+var wo = Object.defineProperty, $o = Object.getOwnPropertyDescriptor, vt = (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 && ho(t, a, e), e;
+  return r && e && wo(t, a, e), e;
 };
-let W = class extends h {
+let ae = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.reverse = !1, this.hasActions = !1;
   }
@@ -1522,7 +2093,7 @@ let W = class extends h {
     `;
   }
 };
-W.styles = d`
+ae.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1584,21 +2155,21 @@ W.styles = d`
       display: none;
     }
   `;
-lt([
+vt([
   n()
-], W.prototype, "heading", 2);
-lt([
+], ae.prototype, "heading", 2);
+vt([
   n({ type: Boolean, reflect: !0 })
-], W.prototype, "reverse", 2);
-W = lt([
+], ae.prototype, "reverse", 2);
+ae = vt([
   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--)
+], ae);
+var _o = Object.getOwnPropertyDescriptor, Co = (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 = i(e) || e);
   return e;
 };
-let Xe = class extends h {
+let rt = class extends h {
   render() {
     return l`
       <nav aria-label="Breadcrumbs">
@@ -1607,7 +2178,7 @@ let Xe = class extends h {
     `;
   }
 };
-Xe.styles = d`
+rt.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1641,15 +2212,15 @@ Xe.styles = d`
       color: var(--vox-color-text-3);
     }
   `;
-Xe = uo([
+rt = Co([
   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--)
+], rt);
+var ko = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, Ye = (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 && fo(t, a, e), e;
+  return r && e && ko(t, a, e), e;
 };
-let N = class extends h {
+let U = class extends h {
   constructor() {
     super(...arguments), this.siteTitle = "", this.href = "/", this.mobileOpen = !1, this.handleOutsideClick = (o) => {
       this.mobileOpen && !o.composedPath().includes(this) && (this.mobileOpen = !1);
@@ -1693,7 +2264,7 @@ let N = class extends h {
             stroke-linejoin="round"
             aria-hidden="true"
           >
-            ${this.mobileOpen ? y.close : y.menu}
+            ${this.mobileOpen ? O.close : O.menu}
           </svg>
         </button>
         <div id="nav-wrap" class="nav-wrap${this.mobileOpen ? " open" : ""}">
@@ -1708,7 +2279,7 @@ let N = class extends h {
     `;
   }
 };
-N.styles = d`
+U.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1838,24 +2409,24 @@ N.styles = d`
       }
     }
   `;
-Ie([
+Ye([
   n({ attribute: "site-title" })
-], N.prototype, "siteTitle", 2);
-Ie([
+], U.prototype, "siteTitle", 2);
+Ye([
   n()
-], N.prototype, "href", 2);
-Ie([
-  Z()
-], N.prototype, "mobileOpen", 2);
-N = Ie([
+], U.prototype, "href", 2);
+Ye([
+  $()
+], U.prototype, "mobileOpen", 2);
+U = Ye([
   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--)
+], U);
+var Mo = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, Ce = (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 && bo(t, a, e), e;
+  return r && e && Mo(t, a, e), e;
 };
-let O = class extends h {
+let D = class extends h {
   constructor() {
     super(...arguments), this.previousLabel = "", this.nextLabel = "";
   }
@@ -1878,7 +2449,7 @@ let O = class extends h {
     `;
   }
 };
-O.styles = d`
+D.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1928,27 +2499,27 @@ O.styles = d`
       color: var(--vox-color-brand-1);
     }
   `;
-be([
+Ce([
   n({ attribute: "previous-href" })
-], O.prototype, "previousHref", 2);
-be([
+], D.prototype, "previousHref", 2);
+Ce([
   n({ attribute: "previous-label" })
-], O.prototype, "previousLabel", 2);
-be([
+], D.prototype, "previousLabel", 2);
+Ce([
   n({ attribute: "next-href" })
-], O.prototype, "nextHref", 2);
-be([
+], D.prototype, "nextHref", 2);
+Ce([
   n({ attribute: "next-label" })
-], O.prototype, "nextLabel", 2);
-O = be([
+], D.prototype, "nextLabel", 2);
+D = Ce([
   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--)
+], D);
+var Po = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, _ = (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 && mo(t, a, e), e;
+  return r && e && Po(t, a, e), e;
 };
-let T = class extends h {
+let G = class extends h {
   constructor() {
     super(...arguments), this.label = "Section", this.toggleLabel = "Menu", this.mobileOpen = !1, this.handleOutsideClick = (o) => {
       this.mobileOpen && !o.composedPath().includes(this) && (this.mobileOpen = !1);
@@ -1987,7 +2558,7 @@ let T = class extends h {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${this.mobileOpen ? y.close : y.menu}
+          ${this.mobileOpen ? O.close : O.menu}
         </svg>
       </button>
       <nav
@@ -2001,7 +2572,7 @@ let T = class extends h {
     `;
   }
 };
-T.styles = d`
+G.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2061,19 +2632,19 @@ T.styles = d`
       }
     }
   `;
-f([
+_([
   n()
-], T.prototype, "label", 2);
-f([
+], G.prototype, "label", 2);
+_([
   n({ attribute: "toggle-label" })
-], T.prototype, "toggleLabel", 2);
-f([
-  Z()
-], T.prototype, "mobileOpen", 2);
-T = f([
+], G.prototype, "toggleLabel", 2);
+_([
+  $()
+], G.prototype, "mobileOpen", 2);
+G = _([
   p("vox-sidenav")
-], T);
-let J = class extends h {
+], G);
+let se = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1;
   }
@@ -2096,7 +2667,7 @@ let J = class extends h {
     `;
   }
 };
-J.styles = d`
+se.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2153,16 +2724,16 @@ J.styles = d`
       display: flex;
     }
   `;
-f([
+_([
   n()
-], J.prototype, "heading", 2);
-f([
+], se.prototype, "heading", 2);
+_([
   n({ type: Boolean, reflect: !0 })
-], J.prototype, "open", 2);
-J = f([
+], se.prototype, "open", 2);
+se = _([
   p("vox-sidenav-group")
-], J);
-let Q = class extends h {
+], se);
+let ie = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasIcon = !1;
   }
@@ -2181,7 +2752,7 @@ let Q = class extends h {
     `;
   }
 };
-Q.styles = d`
+ie.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2225,21 +2796,21 @@ Q.styles = d`
       display: none;
     }
   `;
-f([
+_([
   n()
-], Q.prototype, "href", 2);
-f([
+], ie.prototype, "href", 2);
+_([
   n({ type: Boolean, reflect: !0 })
-], Q.prototype, "current", 2);
-Q = f([
+], ie.prototype, "current", 2);
+ie = _([
   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--)
+], ie);
+var zo = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, Et = (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 && $o(t, a, e), e;
+  return r && e && zo(t, a, e), e;
 };
-let Ve = class extends h {
+let Se = class extends h {
   constructor() {
     super(...arguments), this.label = "Secondary";
   }
@@ -2251,7 +2822,7 @@ let Ve = class extends h {
     `;
   }
 };
-Ve.styles = d`
+Se.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2286,18 +2857,18 @@ Ve.styles = d`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-Lt([
+Et([
   n()
-], Ve.prototype, "label", 2);
-Ve = Lt([
+], Se.prototype, "label", 2);
+Se = Et([
   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--)
+], Se);
+var Eo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, q = (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 && Co(t, a, e), e;
+  return r && e && Eo(t, a, e), e;
 };
-let We = class extends h {
+let at = class extends h {
   get tabs() {
     return [...this.querySelectorAll("vox-tab")];
   }
@@ -2343,7 +2914,7 @@ let We = class extends h {
     `;
   }
 };
-We.styles = d`
+at.styles = d`
     :host {
       display: block;
     }
@@ -2354,10 +2925,10 @@ We.styles = d`
       border-bottom: 1px solid var(--vox-color-divider);
     }
   `;
-We = j([
+at = q([
   p("vox-tabs")
-], We);
-let ee = class extends h {
+], at);
+let ne = class extends h {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1;
   }
@@ -2384,7 +2955,7 @@ let ee = class extends h {
     `;
   }
 };
-ee.styles = d`
+ne.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2419,16 +2990,16 @@ ee.styles = d`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-j([
+q([
   n()
-], ee.prototype, "panel", 2);
-j([
+], ne.prototype, "panel", 2);
+q([
   n({ type: Boolean, reflect: !0 })
-], ee.prototype, "selected", 2);
-ee = j([
+], ne.prototype, "selected", 2);
+ne = q([
   p("vox-tab")
-], ee);
-let te = class extends h {
+], ne);
+let le = class extends h {
   constructor() {
     super(...arguments), this.name = "", this.active = !1;
   }
@@ -2436,7 +3007,7 @@ let te = class extends h {
     return l`<div role="tabpanel"><slot></slot></div>`;
   }
 };
-te.styles = d`
+le.styles = d`
     :host {
       display: none;
       font-family: var(--vox-font-family-base);
@@ -2450,21 +3021,21 @@ te.styles = d`
       display: block;
     }
   `;
-j([
+q([
   n()
-], te.prototype, "name", 2);
-j([
+], le.prototype, "name", 2);
+q([
   n({ type: Boolean, reflect: !0 })
-], te.prototype, "active", 2);
-te = j([
+], le.prototype, "active", 2);
+le = q([
   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--)
+], le);
+var Ao = Object.defineProperty, So = Object.getOwnPropertyDescriptor, ke = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? So(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Oo(t, a, e), e;
+  return r && e && Ao(t, a, e), e;
 };
-let je = class extends h {
+let He = class extends h {
   constructor() {
     super(...arguments), this.heading = "On this page";
   }
@@ -2477,7 +3048,7 @@ let je = class extends h {
     `;
   }
 };
-je.styles = d`
+He.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2498,13 +3069,13 @@ je.styles = d`
       border-left: 1px solid var(--vox-color-divider);
     }
   `;
-ye([
+ke([
   n()
-], je.prototype, "heading", 2);
-je = ye([
+], He.prototype, "heading", 2);
+He = ke([
   p("vox-toc")
-], je);
-let oe = class extends h {
+], He);
+let ce = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasChildren = !1;
   }
@@ -2523,7 +3094,7 @@ let oe = class extends h {
     `;
   }
 };
-oe.styles = d`
+ce.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2569,21 +3140,21 @@ oe.styles = d`
       display: none;
     }
   `;
-ye([
+ke([
   n()
-], oe.prototype, "href", 2);
-ye([
+], ce.prototype, "href", 2);
+ke([
   n({ type: Boolean, reflect: !0 })
-], oe.prototype, "current", 2);
-oe = ye([
+], ce.prototype, "current", 2);
+ce = ke([
   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--)
+], ce);
+var Ho = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, Oe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Bo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Lo(t, a, e), e;
+  return r && e && Ho(t, a, e), e;
 };
-let k = class extends h {
+let A = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1, this.lightDismiss = !1, this.hasFooter = !1;
   }
@@ -2631,7 +3202,7 @@ let k = class extends h {
     `;
   }
 };
-k.styles = d`
+A.styles = d`
     dialog {
       box-sizing: border-box;
       width: min(90vw, 480px);
@@ -2718,27 +3289,27 @@ k.styles = d`
       margin-bottom: 0;
     }
   `;
-me([
+Oe([
   n()
-], k.prototype, "heading", 2);
-me([
+], A.prototype, "heading", 2);
+Oe([
   n({ type: Boolean })
-], k.prototype, "open", 2);
-me([
+], A.prototype, "open", 2);
+Oe([
   n({ type: Boolean, attribute: "light-dismiss" })
-], k.prototype, "lightDismiss", 2);
-me([
-  rt("dialog")
-], k.prototype, "dialogEl", 2);
-k = me([
+], A.prototype, "lightDismiss", 2);
+Oe([
+  J("dialog")
+], A.prototype, "dialogEl", 2);
+A = Oe([
   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--)
+], A);
+var Io = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, ut = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? qo(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;
+  return r && e && Io(t, a, e), e;
 };
-let re = class extends h {
+let de = class extends h {
   constructor() {
     super(...arguments), this.summary = "Show details", this.open = !1;
   }
@@ -2765,7 +3336,7 @@ let re = class extends h {
     `;
   }
 };
-re.styles = d`
+de.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2817,21 +3388,21 @@ re.styles = d`
       display: none;
     }
   `;
-ct([
+ut([
   n()
-], re.prototype, "summary", 2);
-ct([
+], de.prototype, "summary", 2);
+ut([
   n({ type: Boolean, reflect: !0 })
-], re.prototype, "open", 2);
-re = ct([
+], de.prototype, "open", 2);
+de = ut([
   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--)
+], de);
+var No = Object.defineProperty, To = Object.getOwnPropertyDescriptor, xt = (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 && zo(t, a, e), e;
+  return r && e && No(t, a, e), e;
 };
-let ae = class extends h {
+let pe = class extends h {
   constructor() {
     super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (o) => {
       this.open && !o.composedPath().includes(this) && (this.open = !1);
@@ -2878,7 +3449,7 @@ let ae = class extends h {
     `;
   }
 };
-ae.styles = d`
+pe.styles = d`
     :host {
       position: relative;
       display: inline-block;
@@ -2977,21 +3548,21 @@ ae.styles = d`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-dt([
+xt([
   n()
-], ae.prototype, "label", 2);
-dt([
+], pe.prototype, "label", 2);
+xt([
   n({ type: Boolean, reflect: !0 })
-], ae.prototype, "open", 2);
-ae = dt([
+], pe.prototype, "open", 2);
+pe = xt([
   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--)
+], pe);
+var Ro = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, Me = (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 && So(t, a, e), e;
+  return r && e && Ro(t, a, e), e;
 };
-let ze = class extends h {
+let Be = class extends h {
   constructor() {
     super(...arguments), this.single = !1;
   }
@@ -3008,7 +3579,7 @@ let ze = class extends h {
     return l`<slot @vox-toggle=${this.handleToggle}></slot>`;
   }
 };
-ze.styles = d`
+Be.styles = d`
     :host {
       display: block;
       border: 1px solid var(--vox-color-divider);
@@ -3020,13 +3591,13 @@ ze.styles = d`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-we([
+Me([
   n({ type: Boolean })
-], ze.prototype, "single", 2);
-ze = we([
+], Be.prototype, "single", 2);
+Be = Me([
   p("vox-accordion")
-], ze);
-let se = class extends h {
+], Be);
+let he = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1;
   }
@@ -3055,7 +3626,7 @@ let se = class extends h {
     `;
   }
 };
-se.styles = d`
+he.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3117,27 +3688,27 @@ se.styles = d`
       margin-bottom: 0;
     }
   `;
-we([
+Me([
   n()
-], se.prototype, "heading", 2);
-we([
+], he.prototype, "heading", 2);
+Me([
   n({ type: Boolean, reflect: !0 })
-], se.prototype, "open", 2);
-se = we([
+], he.prototype, "open", 2);
+he = Me([
   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--)
+], he);
+var Fo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, Le = (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 && Ao(t, a, e), e;
+  return r && e && Fo(t, a, e), e;
 };
-const Bo = {
+const Uo = {
   info: "info",
   success: "check-circle",
   warning: "warning",
   danger: "x-circle"
 };
-let L = class extends h {
+let S = class extends h {
   constructor() {
     super(...arguments), this.variant = "info", this.heading = "", this.dismissible = !1, this.open = !0;
   }
@@ -3159,7 +3730,7 @@ let L = class extends h {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${y[Bo[this.variant]]}
+          ${O[Uo[this.variant]]}
         </svg>
         <div class="body">
           ${this.heading ? l`<p class="heading">${this.heading}</p>` : v}
@@ -3176,7 +3747,7 @@ let L = class extends h {
     `;
   }
 };
-L.styles = d`
+S.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3295,27 +3866,27 @@ L.styles = d`
       margin-bottom: 0;
     }
   `;
-$e([
+Le([
   n()
-], L.prototype, "variant", 2);
-$e([
+], S.prototype, "variant", 2);
+Le([
   n()
-], L.prototype, "heading", 2);
-$e([
+], S.prototype, "heading", 2);
+Le([
   n({ type: Boolean })
-], L.prototype, "dismissible", 2);
-$e([
+], S.prototype, "dismissible", 2);
+Le([
   n({ type: Boolean, reflect: !0 })
-], L.prototype, "open", 2);
-L = $e([
+], S.prototype, "open", 2);
+S = Le([
   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--)
+], S);
+var Go = Object.defineProperty, Yo = Object.getOwnPropertyDescriptor, Dt = (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 && No(t, a, e), e;
+  return r && e && Go(t, a, e), e;
 };
-let De = class extends h {
+let Ie = class extends h {
   constructor() {
     super(...arguments), this.variant = "brand";
   }
@@ -3323,7 +3894,7 @@ let De = class extends h {
     return l`<span class="badge ${this.variant}"><slot></slot></span>`;
   }
 };
-De.styles = d`
+Ie.styles = d`
     :host {
       display: inline-block;
     }
@@ -3365,18 +3936,18 @@ De.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Pt([
+Dt([
   n()
-], De.prototype, "variant", 2);
-De = Pt([
+], Ie.prototype, "variant", 2);
+Ie = Dt([
   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--)
+], Ie);
+var Wo = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, ft = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Xo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && qo(t, a, e), e;
+  return r && e && Wo(t, a, e), e;
 };
-let ie = class extends h {
+let ve = class extends h {
   constructor() {
     super(...arguments), this.date = "";
   }
@@ -3390,7 +3961,7 @@ let ie = class extends h {
     `;
   }
 };
-ie.styles = d`
+ve.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -3426,32 +3997,32 @@ ie.styles = d`
       color: var(--vox-color-text-1);
     }
   `;
-pt([
+ft([
   n()
-], ie.prototype, "date", 2);
-pt([
+], ve.prototype, "date", 2);
+ft([
   n()
-], ie.prototype, "locale", 2);
-ie = pt([
+], ve.prototype, "locale", 2);
+ve = ft([
   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--)
+], ve);
+var Jo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, gt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Qo(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;
+  return r && e && Jo(t, a, e), e;
 };
-const Fo = {
+const er = {
   info: "Info",
   tip: "Tip",
   warning: "Warning",
   danger: "Danger"
-}, Uo = {
+}, tr = {
   info: "info",
   tip: "check-circle",
   warning: "warning",
   danger: "x-circle"
 };
-let ne = class extends h {
+let ue = class extends h {
   constructor() {
     super(...arguments), this.variant = "info";
   }
@@ -3468,17 +4039,17 @@ let ne = class extends h {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${y[Uo[this.variant]]}
+          ${O[tr[this.variant]]}
         </svg>
         <div class="content">
-          <p class="heading">${this.heading ?? Fo[this.variant]}</p>
+          <p class="heading">${this.heading ?? er[this.variant]}</p>
           <slot></slot>
         </div>
       </div>
     `;
   }
 };
-ne.styles = d`
+ue.styles = d`
     :host {
       display: block;
     }
@@ -3561,21 +4132,21 @@ ne.styles = d`
       margin-bottom: 0;
     }
   `;
-ht([
+gt([
   n()
-], ne.prototype, "variant", 2);
-ht([
+], ue.prototype, "variant", 2);
+gt([
   n()
-], ne.prototype, "heading", 2);
-ne = ht([
+], ue.prototype, "heading", 2);
+ue = gt([
   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--)
+], ue);
+var or = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, We = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? rr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Ko(t, a, e), e;
+  return r && e && or(t, a, e), e;
 };
-let q = class extends h {
+let Y = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasIcon = !1, this.hasBadge = !1, this.hasFooter = !1;
   }
@@ -3608,7 +4179,7 @@ let q = class extends h {
     return this.href !== void 0 ? l`<a class="card" href=${this.href} target=${this.target ?? v}>${o}</a>` : l`<div class="card">${o}</div>`;
   }
 };
-q.styles = d`
+Y.styles = d`
     :host {
       display: block;
     }
@@ -3693,41 +4264,41 @@ q.styles = d`
       display: none;
     }
   `;
-Re([
+We([
   n()
-], q.prototype, "heading", 2);
-Re([
+], Y.prototype, "heading", 2);
+We([
   n()
-], q.prototype, "href", 2);
-Re([
+], Y.prototype, "href", 2);
+We([
   n()
-], q.prototype, "target", 2);
-q = Re([
+], Y.prototype, "target", 2);
+Y = We([
   p("vox-card")
-], q);
-function Vt(o, t) {
+], Y);
+function At(o, t) {
   let a = t;
   for (; a < o.length && (o[a] === " " || o[a] === "	"); ) a++;
   return a;
 }
-function z(o, t) {
+function N(o, t) {
   return {
     re: o,
-    type: (a, r, e) => t.has(a) ? "keyword" : r[Vt(r, e)] === "(" ? "function" : "plain"
+    type: (a, r, e) => t.has(a) ? "keyword" : r[At(r, e)] === "(" ? "function" : "plain"
   };
 }
-function Je(o) {
+function st(o) {
   return {
     re: o,
-    type: (t, a, r) => a[Vt(a, r)] === ":" ? "property" : "string"
+    type: (t, a, r) => a[At(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 Pe = /-?\b\d+\.?\d*(?:[eE][+-]?\d+)?\b/y, V = /"(?:\\.|[^"\\])*"/y, T = /'(?:\\.|[^'\\])*'/y, Xe = /#.*/y, ar = /\/\/.*/y, St = /\/\*[\s\S]*?\*\//y;
+function kt(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) {
+function sr(o, t) {
   const a = [];
   let r = 0;
   for (; r < o.length; ) {
@@ -3736,16 +4307,16 @@ function Xo(o, 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;
+        const z = i[0], ze = typeof s.type == "function" ? s.type(z, o, r + z.length) : s.type;
+        kt(a, ze, z), r += z.length, e = !0;
         break;
       }
     }
-    e || (mt(a, "plain", o[r]), r++);
+    e || (kt(a, "plain", o[r]), r++);
   }
   return a;
 }
-const Wo = /* @__PURE__ */ new Set([
+const ir = /* @__PURE__ */ new Set([
   "if",
   "then",
   "elif",
@@ -3781,14 +4352,14 @@ const Wo = /* @__PURE__ */ new Set([
   "unalias",
   "true",
   "false"
-]), ke = [
-  { re: Ze, type: "comment" },
+]), Ee = [
+  { re: Xe, 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([
+  { re: V, type: "string" },
+  { re: T, type: "string" },
+  { re: Pe, type: "number" },
+  N(/[A-Za-z_][\w-]*/y, ir)
+], nr = /* @__PURE__ */ new Set([
   "true",
   "false",
   "yes",
@@ -3810,19 +4381,19 @@ const Wo = /* @__PURE__ */ new Set([
   "NULL",
   "ON",
   "OFF"
-]), wt = [
-  { re: Ze, type: "comment" },
-  Je($),
-  Je(D),
+]), Ot = [
+  { re: Xe, type: "comment" },
+  st(V),
+  st(T),
   { 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([
+  { re: Pe, type: "number" },
+  N(/[A-Za-z_][\w-]*/y, nr)
+], lr = [
+  st(V),
+  { re: Pe, type: "number" },
+  N(/[A-Za-z_]\w*/y, /* @__PURE__ */ new Set(["true", "false", "null"]))
+], cr = /* @__PURE__ */ new Set([
   "const",
   "let",
   "var",
@@ -3880,32 +4451,32 @@ const Wo = /* @__PURE__ */ new Set([
   "abstract",
   "keyof",
   "satisfies"
-]), Le = [
-  { re: Yo, type: "comment" },
-  { re: jt, type: "comment" },
-  { re: $, type: "string" },
-  { re: D, type: "string" },
+]), De = [
+  { re: ar, type: "comment" },
+  { re: St, type: "comment" },
+  { re: V, type: "string" },
+  { re: T, 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" },
+  N(/[A-Za-z_$][\w$]*/y, cr)
+], dr = [
+  { re: St, type: "comment" },
+  { re: V, type: "string" },
+  { re: T, 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 = [
+  N(/[a-zA-Z-]+/y, /* @__PURE__ */ new Set())
+], Mt = [
   { 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: V, type: "string" },
+  { re: T, type: "string" },
   { re: /&[\w#]+;/y, type: "keyword" }
-], or = /* @__PURE__ */ new Set([
+], pr = /* @__PURE__ */ new Set([
   "def",
   "end",
   "if",
@@ -3953,16 +4524,16 @@ const Wo = /* @__PURE__ */ new Set([
   "lambda",
   "proc",
   "new"
-]), _t = [
-  { re: Ze, type: "comment" },
+]), Lt = [
+  { re: Xe, 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: V, type: "string" },
+  { re: T, type: "string" },
+  { re: Pe, type: "number" },
   { re: /[A-Z]\w*/y, type: "property" },
-  z(/[a-z_]\w*[?!]?/y, or)
-], rr = /* @__PURE__ */ new Set([
+  N(/[a-z_]\w*[?!]?/y, pr)
+], hr = /* @__PURE__ */ new Set([
   "class",
   "define",
   "node",
@@ -4018,35 +4589,35 @@ const Wo = /* @__PURE__ */ new Set([
   "Callable",
   "Data",
   "Scalar"
-]), Ct = [
-  { re: Ze, type: "comment" },
-  { re: $, type: "string" },
-  { re: D, type: "string" },
+]), Pt = [
+  { re: Xe, type: "comment" },
+  { re: V, type: "string" },
+  { re: T, 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 = {
+  { re: Pe, type: "number" },
+  N(/[A-Za-z_][\w:]*/y, hr)
+], vr = {
+  bash: Ee,
+  sh: Ee,
+  shell: Ee,
+  zsh: Ee,
+  yaml: Ot,
+  yml: Ot,
+  json: lr,
+  javascript: De,
+  js: De,
+  typescript: De,
+  ts: De,
+  css: dr,
+  html: Mt,
+  xml: Mt,
+  ruby: Lt,
+  rb: Lt,
+  puppet: Pt,
+  pp: Pt
+}, ur = {
   bash: "Bash",
   sh: "Shell",
   shell: "Shell",
@@ -4068,16 +4639,16 @@ const Wo = /* @__PURE__ */ new Set([
   plaintext: "Plain Text",
   text: "Plain Text"
 };
-function ir(o, t) {
-  const a = ar[t];
-  return a ? Xo(o, a) : [{ type: "plain", text: o }];
+function xr(o, t) {
+  const a = vr[t];
+  return a ? sr(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--)
+var fr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, k = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? gr(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;
+  return r && e && fr(t, a, e), e;
 };
-function cr(o) {
+function br(o) {
   const t = o.split(`
 `);
   for (; t.length && t[0].trim() === ""; ) t.shift();
@@ -4089,7 +4660,7 @@ function cr(o) {
   return t.map((e) => e.slice(r)).join(`
 `);
 }
-function dr(o) {
+function yr(o) {
   const t = [[]];
   for (const a of o)
     a.text.split(`
@@ -4098,7 +4669,7 @@ function dr(o) {
     });
   return t;
 }
-let u = class extends h {
+let y = 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;
   }
@@ -4107,7 +4678,7 @@ let u = class extends h {
   }
   _handleSlotChange(o) {
     const a = o.target.assignedNodes({ flatten: !0 }).map((r) => r.textContent ?? "").join("");
-    this._code = cr(a);
+    this._code = br(a);
   }
   async _copy() {
     var o;
@@ -4122,7 +4693,7 @@ let u = class extends h {
     }, 1500);
   }
   render() {
-    const o = sr[this.language] ?? this.language, t = dr(ir(this._code, this.language));
+    const o = ur[this.language] ?? this.language, t = yr(xr(this._code, this.language));
     return l`
       <div class="block">
         ${this.noHeader ? v : l`
@@ -4139,7 +4710,7 @@ let u = class extends h {
                         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"]}
+                          ${O[this._copied ? "check" : "copy"]}
                         </svg>
                       </button>
                     `}
@@ -4156,7 +4727,7 @@ let u = class extends h {
     `;
   }
 };
-u.styles = d`
+y.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4317,39 +4888,39 @@ u.styles = d`
       white-space: nowrap;
     }
   `;
-b([
+k([
   n()
-], u.prototype, "language", 2);
-b([
+], y.prototype, "language", 2);
+k([
   n()
-], u.prototype, "filename", 2);
-b([
+], y.prototype, "filename", 2);
+k([
   n({ type: Boolean, attribute: "line-numbers", reflect: !0 })
-], u.prototype, "lineNumbers", 2);
-b([
+], y.prototype, "lineNumbers", 2);
+k([
   n({ type: Boolean, attribute: "no-copy" })
-], u.prototype, "noCopy", 2);
-b([
+], y.prototype, "noCopy", 2);
+k([
   n({ type: Boolean, attribute: "no-header" })
-], u.prototype, "noHeader", 2);
-b([
+], y.prototype, "noHeader", 2);
+k([
   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([
+], y.prototype, "noBorder", 2);
+k([
+  $()
+], y.prototype, "_code", 2);
+k([
+  $()
+], y.prototype, "_copied", 2);
+y = k([
   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--)
+], y);
+var mr = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, Ht = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? wr(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;
+  return r && e && mr(t, a, e), e;
 };
-let Se = class extends h {
+let qe = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasBody = !1, this.hasActions = !1;
   }
@@ -4375,7 +4946,7 @@ let Se = class extends h {
     `;
   }
 };
-Se.styles = d`
+qe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4430,18 +5001,18 @@ Se.styles = d`
       display: none;
     }
   `;
-zt([
+Ht([
   n()
-], Se.prototype, "heading", 2);
-Se = zt([
+], qe.prototype, "heading", 2);
+qe = Ht([
   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--)
+], qe);
+var $r = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, Bt = (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 && vr(t, a, e), e;
+  return r && e && $r(t, a, e), e;
 };
-let Ee = class extends h {
+let Ne = class extends h {
   constructor() {
     super(...arguments), this.heading = "";
   }
@@ -4456,7 +5027,7 @@ let Ee = class extends h {
     `;
   }
 };
-Ee.styles = d`
+Ne.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4500,18 +5071,18 @@ Ee.styles = d`
       margin-top: var(--vox-space-4);
     }
   `;
-Dt([
+Bt([
   n()
-], Ee.prototype, "heading", 2);
-Ee = Dt([
+], Ne.prototype, "heading", 2);
+Ne = Bt([
   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--)
+], Ne);
+var Cr = Object.defineProperty, kr = Object.getOwnPropertyDescriptor, bt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? kr(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;
+  return r && e && Cr(t, a, e), e;
 };
-let Qe = class extends h {
+let it = class extends h {
   render() {
     return l`
       <footer>
@@ -4523,7 +5094,7 @@ let Qe = class extends h {
     `;
   }
 };
-Qe.styles = d`
+it.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4551,10 +5122,10 @@ Qe.styles = d`
       color: var(--vox-color-text-3);
     }
   `;
-Qe = vt([
+it = bt([
   p("vox-footer")
-], Qe);
-let Ae = class extends h {
+], it);
+let Te = class extends h {
   constructor() {
     super(...arguments), this.heading = "";
   }
@@ -4565,7 +5136,7 @@ let Ae = class extends h {
     `;
   }
 };
-Ae.styles = d`
+Te.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4597,18 +5168,18 @@ Ae.styles = d`
       text-decoration: underline;
     }
   `;
-vt([
+bt([
   n()
-], Ae.prototype, "heading", 2);
-Ae = vt([
+], Te.prototype, "heading", 2);
+Te = bt([
   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--)
+], Te);
+var Or = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, Je = (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 && gr(t, a, e), e;
+  return r && e && Or(t, a, e), e;
 };
-let I = class extends h {
+let W = class extends h {
   constructor() {
     super(...arguments), this.cols = 0, this.min = "240px", this.gap = "md";
   }
@@ -4619,7 +5190,7 @@ let I = class extends h {
     return l`<slot></slot>`;
   }
 };
-I.styles = d`
+W.styles = d`
     :host {
       display: grid;
     }
@@ -4636,24 +5207,24 @@ I.styles = d`
       gap: var(--vox-space-6);
     }
   `;
-Fe([
+Je([
   n({ type: Number })
-], I.prototype, "cols", 2);
-Fe([
+], W.prototype, "cols", 2);
+Je([
   n()
-], I.prototype, "min", 2);
-Fe([
+], W.prototype, "min", 2);
+Je([
   n({ reflect: !0 })
-], I.prototype, "gap", 2);
-I = Fe([
+], W.prototype, "gap", 2);
+W = Je([
   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--)
+], W);
+var Lr = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, yt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Pr(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;
+  return r && e && Lr(t, a, e), e;
 };
-let le = class extends h {
+let xe = class extends h {
   constructor() {
     super(...arguments), this.eyebrow = "", this.heading = "", this.hasActions = !1;
   }
@@ -4674,7 +5245,7 @@ let le = class extends h {
     `;
   }
 };
-le.styles = d`
+xe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4731,36 +5302,36 @@ le.styles = d`
       display: none;
     }
   `;
-xt([
+yt([
   n()
-], le.prototype, "eyebrow", 2);
-xt([
+], xe.prototype, "eyebrow", 2);
+yt([
   n()
-], le.prototype, "heading", 2);
-le = xt([
+], xe.prototype, "heading", 2);
+xe = yt([
   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--)
+], xe);
+var Vr = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, Qe = (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 && wr(t, a, e), e;
+  return r && e && Vr(t, a, e), e;
 };
-let et = class extends h {
+let nt = class extends h {
   render() {
     return l`<slot></slot>`;
   }
 };
-et.styles = d`
+nt.styles = d`
     :host {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
       gap: var(--vox-space-4);
     }
   `;
-et = Ue([
+nt = Qe([
   p("vox-link-hub")
-], et);
-let ce = class extends h {
+], nt);
+let fe = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.heading = "", this.hasIcon = !1;
   }
@@ -4786,7 +5357,7 @@ let ce = class extends h {
     `;
   }
 };
-ce.styles = d`
+fe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4847,21 +5418,21 @@ ce.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Ue([
+Qe([
   n()
-], ce.prototype, "href", 2);
-Ue([
+], fe.prototype, "href", 2);
+Qe([
   n()
-], ce.prototype, "heading", 2);
-ce = Ue([
+], fe.prototype, "heading", 2);
+fe = Qe([
   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--)
+], fe);
+var jr = Object.defineProperty, Er = Object.getOwnPropertyDescriptor, mt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Er(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;
+  return r && e && jr(t, a, e), e;
 };
-let de = class extends h {
+let ge = class extends h {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
@@ -4874,7 +5445,7 @@ let de = class extends h {
     `;
   }
 };
-de.styles = d`
+ge.styles = d`
     :host {
       display: inline-block;
     }
@@ -4927,21 +5498,21 @@ de.styles = d`
       white-space: nowrap;
     }
   `;
-ut([
+mt([
   n({ reflect: !0 })
-], de.prototype, "size", 2);
-ut([
+], ge.prototype, "size", 2);
+mt([
   n()
-], de.prototype, "label", 2);
-de = ut([
+], ge.prototype, "label", 2);
+ge = mt([
   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--)
+], ge);
+var Dr = Object.defineProperty, Ar = Object.getOwnPropertyDescriptor, It = (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 && Mr(t, a, e), e;
+  return r && e && Dr(t, a, e), e;
 };
-let He = class extends h {
+let Re = class extends h {
   constructor() {
     super(...arguments), this.label = "Pagination";
   }
@@ -4953,7 +5524,7 @@ let He = class extends h {
     `;
   }
 };
-He.styles = d`
+Re.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4993,18 +5564,18 @@ He.styles = d`
       font-weight: 600;
     }
   `;
-St([
+It([
   n()
-], He.prototype, "label", 2);
-He = St([
+], Re.prototype, "label", 2);
+Re = It([
   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--)
+], Re);
+var Sr = Object.defineProperty, Hr = Object.getOwnPropertyDescriptor, wt = (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 && kr(t, a, e), e;
+  return r && e && Sr(t, a, e), e;
 };
-let pe = class extends h {
+let be = class extends h {
   constructor() {
     super(...arguments), this.attribution = "", this.detail = "";
   }
@@ -5022,7 +5593,7 @@ let pe = class extends h {
     `;
   }
 };
-pe.styles = d`
+be.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5064,21 +5635,21 @@ pe.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-ft([
+wt([
   n()
-], pe.prototype, "attribution", 2);
-ft([
+], be.prototype, "attribution", 2);
+wt([
   n()
-], pe.prototype, "detail", 2);
-pe = ft([
+], be.prototype, "detail", 2);
+be = wt([
   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--)
+], be);
+var Br = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, R = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ir(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;
+  return r && e && Br(t, a, e), e;
 };
-let Be = class extends h {
+let Ze = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasDescription = !1;
   }
@@ -5101,7 +5672,7 @@ let Be = class extends h {
     `;
   }
 };
-Be.styles = d`
+Ze.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5133,13 +5704,13 @@ Be.styles = d`
       margin-top: var(--vox-space-6);
     }
   `;
-S([
+R([
   n()
-], Be.prototype, "heading", 2);
-Be = S([
+], Ze.prototype, "heading", 2);
+Ze = R([
   p("vox-sponsor-tier")
-], Be);
-let P = class extends h {
+], Ze);
+let H = class extends h {
   constructor() {
     super(...arguments), this.name = "", this.hasBody = !1;
   }
@@ -5165,7 +5736,7 @@ let P = class extends h {
         >` : l`<div class="sponsor">${o}</div>`;
   }
 };
-P.styles = d`
+H.styles = d`
     :host {
       display: block;
     }
@@ -5231,27 +5802,27 @@ P.styles = d`
       display: none;
     }
   `;
-S([
+R([
   n()
-], P.prototype, "name", 2);
-S([
+], H.prototype, "name", 2);
+R([
   n()
-], P.prototype, "href", 2);
-S([
+], H.prototype, "href", 2);
+R([
   n()
-], P.prototype, "logo", 2);
-S([
+], H.prototype, "logo", 2);
+R([
   n()
-], P.prototype, "target", 2);
-P = S([
+], H.prototype, "target", 2);
+H = R([
   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--)
+], H);
+var qr = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, $t = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Nr(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;
+  return r && e && qr(t, a, e), e;
 };
-let he = class extends h {
+let ye = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.label = "";
   }
@@ -5263,7 +5834,7 @@ let he = class extends h {
     `;
   }
 };
-he.styles = d`
+ye.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5290,21 +5861,21 @@ he.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-gt([
+$t([
   n()
-], he.prototype, "value", 2);
-gt([
+], ye.prototype, "value", 2);
+$t([
   n()
-], he.prototype, "label", 2);
-he = gt([
+], ye.prototype, "label", 2);
+ye = $t([
   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--)
+], ye);
+var Tr = Object.defineProperty, Rr = Object.getOwnPropertyDescriptor, Ve = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Rr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Dr(t, a, e), e;
+  return r && e && Tr(t, a, e), e;
 };
-let tt = class extends h {
+let lt = class extends h {
   numberSteps() {
     this.querySelectorAll("vox-step").forEach((o, t) => {
       o.number = t + 1;
@@ -5318,7 +5889,7 @@ let tt = class extends h {
     `;
   }
 };
-tt.styles = d`
+lt.styles = d`
     :host {
       display: block;
     }
@@ -5332,10 +5903,10 @@ tt.styles = d`
       flex: 1 1 0;
     }
   `;
-tt = Ce([
+lt = Ve([
   p("vox-step-indicator")
-], tt);
-let R = class extends h {
+], lt);
+let X = class extends h {
   constructor() {
     super(...arguments), this.label = "", this.state = "upcoming", this.number = 1;
   }
@@ -5356,7 +5927,7 @@ let R = class extends h {
     `;
   }
 };
-R.styles = d`
+X.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5430,37 +6001,37 @@ R.styles = d`
       color: var(--vox-color-text-1);
     }
   `;
-Ce([
+Ve([
   n()
-], R.prototype, "label", 2);
-Ce([
+], X.prototype, "label", 2);
+Ve([
   n({ reflect: !0 })
-], R.prototype, "state", 2);
-Ce([
+], X.prototype, "state", 2);
+Ve([
   n({ type: Number })
-], R.prototype, "number", 2);
-R = Ce([
+], X.prototype, "number", 2);
+X = Ve([
   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--)
+], X);
+var Zr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, et = (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 && Er(t, a, e), e;
+  return r && e && Zr(t, a, e), e;
 };
-let ot = class extends h {
+let ct = class extends h {
   render() {
     return l`<slot></slot>`;
   }
 };
-ot.styles = d`
+ct.styles = d`
     :host {
       display: block;
     }
   `;
-ot = Ke([
+ct = et([
   p("vox-timeline")
-], ot);
-let ve = class extends h {
+], ct);
+let me = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.date = "";
   }
@@ -5475,7 +6046,7 @@ let ve = class extends h {
     `;
   }
 };
-ve.styles = d`
+me.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5525,70 +6096,72 @@ ve.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Ke([
+et([
   n()
-], ve.prototype, "heading", 2);
-Ke([
+], me.prototype, "heading", 2);
+et([
   n()
-], ve.prototype, "date", 2);
-ve = Ke([
+], me.prototype, "date", 2);
+me = et([
   p("vox-timeline-item")
-], ve);
+], me);
 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
+  Be as VoxAccordion,
+  he as VoxAccordionItem,
+  S as VoxAlert,
+  E as VoxAvatar,
+  Ie as VoxBadge,
+  ae as VoxBillboard,
+  rt as VoxBreadcrumbs,
+  C as VoxButton,
+  ve as VoxCalendarTile,
+  ue as VoxCallout,
+  Y as VoxCard,
+  oe as VoxCheckbox,
+  y as VoxCodeBlock,
+  g as VoxCombobox,
+  te as VoxCta,
+  qe as VoxCtaBand,
+  A as VoxDialog,
+  de as VoxDisclosure,
+  pe as VoxDropdown,
+  Ne as VoxEmptyState,
+  M as VoxFileInput,
+  it as VoxFooter,
+  Te as VoxFooterColumn,
+  W as VoxGrid,
+  U as VoxHeader,
+  xe as VoxHero,
+  F as VoxIcon,
+  f as VoxInput,
+  ot as VoxInputGroup,
+  nt as VoxLinkHub,
+  fe as VoxLinkHubItem,
+  ge as VoxLoader,
+  Re as VoxPagination,
+  be as VoxQuote,
+  K as VoxRadio,
+  Ae as VoxRadioGroup,
+  w as VoxRange,
+  L as VoxSelect,
+  D as VoxSeriesNav,
+  G as VoxSidenav,
+  se as VoxSidenavGroup,
+  ie as VoxSidenavItem,
+  H as VoxSponsor,
+  Ze as VoxSponsorTier,
+  ye as VoxStat,
+  X as VoxStep,
+  lt as VoxStepIndicator,
+  Se as VoxSubnav,
+  re as VoxSwitch,
+  ne as VoxTab,
+  le as VoxTabPanel,
+  at as VoxTabs,
+  j as VoxTextarea,
+  Z as VoxThemeToggle,
+  ct as VoxTimeline,
+  me as VoxTimelineItem,
+  He as VoxToc,
+  ce as VoxTocItem
 };