@openvoxproject/voxblocks 0.9.0 → 0.10.0

package/dist/voxblocks.js

@@ -1,40 +1,40 @@
-import { css as c, LitElement as v, html as l, nothing as p } from "lit";
-import { property as n, customElement as d, state as to, query as qe } from "lit/decorators.js";
-import { classMap as po } from "lit/directives/class-map.js";
-import { ifDefined as j } from "lit/directives/if-defined.js";
-import { live as ro } from "lit/directives/live.js";
-var ho = Object.defineProperty, xo = Object.getOwnPropertyDescriptor, O = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? xo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+import { css as d, LitElement as v, html as c, svg as l, nothing as h } from "lit";
+import { property as n, customElement as p, state as Le, query as Ze } from "lit/decorators.js";
+import { classMap as mo } from "lit/directives/class-map.js";
+import { ifDefined as P } from "lit/directives/if-defined.js";
+import { live as po } from "lit/directives/live.js";
+var yo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, O = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? wo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && ho(o, a, e), e;
+  return r && e && yo(o, a, e), e;
 };
-let x = class extends v {
+let f = class extends v {
   constructor() {
     super(...arguments), this.variant = "brand", this.size = "md", this.type = "button", this.disabled = !1;
   }
   render() {
-    const t = po({
+    const t = mo({
       button: !0,
       [this.variant]: !0,
       [this.size]: !0
     });
-    return this.href !== void 0 && !this.disabled ? l`
+    return this.href !== void 0 && !this.disabled ? c`
         <a
           class=${t}
           href=${this.href}
-          target=${j(this.target)}
-          rel=${j(this.target === "_blank" ? "noreferrer" : void 0)}
+          target=${P(this.target)}
+          rel=${P(this.target === "_blank" ? "noreferrer" : void 0)}
         >
           <slot></slot>
         </a>
-      ` : l`
+      ` : c`
       <button class=${t} type=${this.type} ?disabled=${this.disabled}>
         <slot></slot>
       </button>
     `;
   }
 };
-x.styles = c`
+f.styles = d`
     :host {
       display: inline-block;
     }
@@ -144,36 +144,36 @@ x.styles = c`
   `;
 O([
   n()
-], x.prototype, "variant", 2);
+], f.prototype, "variant", 2);
 O([
   n()
-], x.prototype, "size", 2);
+], f.prototype, "size", 2);
 O([
   n()
-], x.prototype, "href", 2);
+], f.prototype, "href", 2);
 O([
   n()
-], x.prototype, "target", 2);
+], f.prototype, "target", 2);
 O([
   n()
-], x.prototype, "type", 2);
+], f.prototype, "type", 2);
 O([
   n({ type: Boolean, reflect: !0 })
-], x.prototype, "disabled", 2);
-x = O([
-  d("vox-button")
-], x);
-var uo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, Le = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? fo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], f.prototype, "disabled", 2);
+f = O([
+  p("vox-button")
+], f);
+var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, Ke = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? _o(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && uo(o, a, e), e;
+  return r && e && $o(o, a, e), e;
 };
-let A = class extends v {
+let N = class extends v {
   constructor() {
     super(...arguments), this.href = "#";
   }
   render() {
-    return l`
+    return c`
       <a href=${this.href} target=${this.target ?? ""}>
         <slot></slot>
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -184,7 +184,7 @@ let A = class extends v {
     `;
   }
 };
-A.styles = c`
+N.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -221,31 +221,31 @@ A.styles = c`
       transform: translateX(3px);
     }
   `;
-Le([
+Ke([
   n()
-], A.prototype, "href", 2);
-Le([
+], N.prototype, "href", 2);
+Ke([
   n()
-], A.prototype, "target", 2);
-A = Le([
-  d("vox-cta")
-], A);
-var bo = Object.defineProperty, go = Object.getOwnPropertyDescriptor, $e = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? go(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], N.prototype, "target", 2);
+N = Ke([
+  p("vox-cta")
+], N);
+var Co = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, Pe = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Mo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && bo(o, a, e), e;
+  return r && e && Co(o, a, e), e;
 };
-const oo = "vox-theme", ve = "data-vox-theme";
-let D = class extends v {
+const co = "vox-theme", ge = "data-vox-theme";
+let V = class extends v {
   constructor() {
     super(...arguments), this.lightLabel = "Switch to dark theme", this.darkLabel = "Switch to light theme", this.dark = !1, this.media = window.matchMedia("(prefers-color-scheme: dark)"), this.handleSystemChange = (t) => {
-      localStorage.getItem(oo) || document.documentElement.setAttribute(ve, t.matches ? "dark" : "light");
+      localStorage.getItem(co) || document.documentElement.setAttribute(ge, t.matches ? "dark" : "light");
     };
   }
   connectedCallback() {
     super.connectedCallback(), this.syncFromDocument(), this.observer = new MutationObserver(() => this.syncFromDocument()), this.observer.observe(document.documentElement, {
       attributes: !0,
-      attributeFilter: [ve]
+      attributeFilter: [ge]
     }), this.media.addEventListener("change", this.handleSystemChange);
   }
   disconnectedCallback() {
@@ -253,12 +253,12 @@ let D = class extends v {
     super.disconnectedCallback(), (t = this.observer) == null || t.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
   }
   syncFromDocument() {
-    const t = document.documentElement.getAttribute(ve) === "dark";
+    const t = document.documentElement.getAttribute(ge) === "dark";
     this.dark = t, this.toggleAttribute("dark", t);
   }
   handleClick() {
     const t = this.dark ? "light" : "dark";
-    document.documentElement.setAttribute(ve, t), localStorage.setItem(oo, t), this.dispatchEvent(
+    document.documentElement.setAttribute(ge, t), localStorage.setItem(co, t), this.dispatchEvent(
       new CustomEvent("vox-theme-change", {
         detail: { theme: t },
         bubbles: !0,
@@ -268,7 +268,7 @@ let D = class extends v {
   }
   render() {
     const t = this.dark ? this.darkLabel : this.lightLabel;
-    return l`
+    return c`
       <button
         type="button"
         role="switch"
@@ -291,7 +291,7 @@ let D = class extends v {
     `;
   }
 };
-D.styles = c`
+V.styles = d`
     :host {
       display: inline-flex;
     }
@@ -350,24 +350,183 @@ D.styles = c`
       transform: translateX(20px);
     }
   `;
-$e([
+Pe([
   n({ attribute: "light-label" })
-], D.prototype, "lightLabel", 2);
-$e([
+], V.prototype, "lightLabel", 2);
+Pe([
   n({ attribute: "dark-label" })
-], D.prototype, "darkLabel", 2);
-$e([
-  to()
-], D.prototype, "dark", 2);
-D = $e([
-  d("vox-theme-toggle")
-], D);
-var mo = Object.defineProperty, te = (t, o, a, r) => {
+], V.prototype, "darkLabel", 2);
+Pe([
+  Le()
+], V.prototype, "dark", 2);
+V = Pe([
+  p("vox-theme-toggle")
+], V);
+const m = {
+  // Phase 1: shared UI baseline -----------------------------------------
+  search: l`<circle cx="21" cy="21" r="13"/><path d="M30.5 30.5 L41 41"/>`,
+  close: l`<path d="M14 14 L34 34 M34 14 L14 34"/>`,
+  menu: l`<path d="M8 14 H40 M8 24 H40 M8 34 H40"/>`,
+  "chevron-up": l`<path d="M14 28 L24 18 L34 28"/>`,
+  "chevron-down": l`<path d="M14 20 L24 30 L34 20"/>`,
+  "chevron-left": l`<path d="M28 14 L18 24 L28 34"/>`,
+  "chevron-right": l`<path d="M20 14 L30 24 L20 34"/>`,
+  "external-link": l`<path d="M36 26 V38 A4 4 0 0 1 32 42 H10 A4 4 0 0 1 6 38 V16 A4 4 0 0 1 10 12 H22"/><path d="M30 6 H42 V18"/><path d="M20 28 L42 6"/>`,
+  copy: l`<rect x="8" y="14" width="24" height="24" rx="3"/><path d="M16 14 V10 A2 2 0 0 1 18 8 H38 A2 2 0 0 1 40 10 V30 A2 2 0 0 1 38 32 H34"/>`,
+  check: l`<path d="M10 25 L20 35 L38 13"/>`,
+  warning: l`<path d="M24 8 L44 40 H4 Z"/><path d="M24 20 V28"/><circle cx="24" cy="34" r="1.6" fill="currentColor" stroke="none"/>`,
+  info: l`<circle cx="24" cy="24" r="17"/><path d="M24 22 V33"/><circle cx="24" cy="15.5" r="1.8" fill="currentColor" stroke="none"/>`,
+  add: l`<path d="M24 10 V38 M10 24 H38"/>`,
+  remove: l`<path d="M10 24 H38"/>`,
+  edit: l`<path d="M30 8 L40 18 L18 40 L7 41 L8 30 Z"/><path d="M26 12 L36 22"/>`,
+  delete: l`<path d="M10 14 H38"/><path d="M17 14 V9 A2 2 0 0 1 19 7 H29 A2 2 0 0 1 31 9 V14"/><path d="M13 14 L15 40 A2 2 0 0 0 17 42 H31 A2 2 0 0 0 33 40 L35 14"/><path d="M20 21 V35 M28 21 V35"/>`,
+  filter: l`<path d="M6 10 H42 L28 26 V38 L20 42 V26 Z"/>`,
+  sort: l`<path d="M14 30 V10 M14 10 L8 16 M14 10 L20 16"/><path d="M34 18 V38 M34 38 L28 32 M34 38 L40 32"/>`,
+  calendar: l`<rect x="6" y="10" width="36" height="32" rx="3"/><path d="M6 20 H42"/><path d="M15 6 V14 M33 6 V14"/><circle cx="15" cy="28" r="1.6" fill="currentColor" stroke="none"/><circle cx="24" cy="28" r="1.6" fill="currentColor" stroke="none"/><circle cx="33" cy="28" r="1.6" fill="currentColor" stroke="none"/>`,
+  clock: l`<circle cx="24" cy="24" r="17"/><path d="M24 14 V24 L32 29"/>`,
+  person: l`<circle cx="24" cy="16" r="8"/><path d="M8 42 C8 31 15 26 24 26 C33 26 40 31 40 42"/>`,
+  people: l`<circle cx="17" cy="16" r="7"/><circle cx="33" cy="18" r="6"/><path d="M4 41 C4 31 10 27 17 27 C21 27 24 28.3 26.3 30.5"/><path d="M24 41 C24 32 29 28 37 28 C43 28 44 32 44 41"/>`,
+  lock: l`<rect x="10" y="21" width="28" height="21" rx="3"/><path d="M16 21 V15 A8 8 0 0 1 32 15 V21"/><circle cx="24" cy="31" r="2.2" fill="currentColor" stroke="none"/>`,
+  eye: l`<path d="M4 24 C10 12 20 8 24 8 C28 8 38 12 44 24 C38 36 28 40 24 40 C20 40 10 36 4 24 Z"/><circle cx="24" cy="24" r="6"/>`,
+  "eye-slash": l`<path d="M4 24 C10 12 20 8 24 8 C28 8 38 12 44 24 C38 36 28 40 24 40 C20 40 10 36 4 24 Z"/><circle cx="24" cy="24" r="6"/><path d="M6 6 L42 42"/>`,
+  refresh: l`<path d="M46 8 L46 20 L34 20"/><path d="M2 40 L2 28 L14 28"/><path d="M7.02 18 A18 18 0 0 1 36.72 11.28 L46 20"/><path d="M2 28 L11.28 36.72 A18 18 0 0 0 40.98 30"/>`,
+  // Phase 2: OpenVox marketing site --------------------------------------
+  community: l`<circle cx="24" cy="10" r="5"/><circle cx="10" cy="34" r="5"/><circle cx="38" cy="34" r="5"/><path d="M24 15 L14 30 M24 15 L34 30 M15 34 H33"/>`,
+  book: l`<path d="M24 12 C20 8 12 7 6 9 V37 C12 35 20 36 24 40 C28 36 36 35 42 37 V9 C36 7 28 8 24 12 Z"/><path d="M24 12 V40"/>`,
+  terminal: l`<rect x="6" y="9" width="36" height="30" rx="3"/><path d="M14 19 L21 24 L14 29"/><path d="M25 30 H33"/>`,
+  shield: l`<path d="M24 6 L40 12 V22 C40 33 33 40 24 43 C15 40 8 33 8 22 V12 Z"/><path d="M17 23 L22 28 L32 17"/>`,
+  roadmap: l`<path d="M6 38 C14 38 14 26 22 26 C30 26 30 14 38 14"/><circle cx="6" cy="38" r="3" fill="currentColor" stroke="none"/><circle cx="22" cy="26" r="3" fill="currentColor" stroke="none"/><circle cx="38" cy="14" r="3" fill="currentColor" stroke="none"/>`,
+  help: l`<circle cx="24" cy="24" r="17"/><path d="M18 18 C18 13 30 13 30 19 C30 24 24 23 24 29"/><circle cx="24" cy="35" r="1.8" fill="currentColor" stroke="none"/>`,
+  repository: l`<rect x="7" y="10" width="34" height="28" rx="3"/><path d="M18 20 L13 24 L18 28 M30 20 L35 24 L30 28"/>`,
+  star: l`<path d="M24 6 L29 19 L43 19 L32 28 L36 42 L24 34 L12 42 L16 28 L5 19 L19 19 Z"/>`,
+  chat: l`<path d="M8 10 H40 A2 2 0 0 1 42 12 V30 A2 2 0 0 1 40 32 H20 L12 40 V32 H8 A2 2 0 0 1 6 30 V12 A2 2 0 0 1 8 10 Z"/><path d="M14 18 H34 M14 24 H28"/>`,
+  heart: l`<path d="M24 41 C10 32 4 23 4 15.5 C4 9 9 5 15 5 C19.5 5 22.5 7.5 24 11 C25.5 7.5 28.5 5 33 5 C39 5 44 9 44 15.5 C44 23 38 32 24 41 Z"/>`,
+  // Phase 3: module registry (Forge replacement) -------------------------
+  module: l`<rect x="8" y="16" width="32" height="24" rx="3"/><path d="M8 24 H40"/><path d="M20 16 L24 24 L28 16"/>`,
+  tag: l`<path d="M6 10 H26 L42 26 L26 42 H6 Z"/><circle cx="15" cy="19" r="3" fill="currentColor" stroke="none"/>`,
+  dependency: l`<rect x="6" y="19" width="20" height="10" rx="5"/><rect x="22" y="19" width="20" height="10" rx="5"/>`,
+  verified: l`<path d="M24 5 L31 10 L39 9 L40 17 L46 24 L40 31 L39 39 L31 38 L24 43 L17 38 L9 39 L8 31 L2 24 L8 17 L9 9 L17 10 Z"/><path d="M16 24 L21 29 L32 18"/>`,
+  archived: l`<rect x="6" y="6" width="36" height="10" rx="2"/><rect x="10" y="16" width="28" height="26" rx="2"/><path d="M20 26 H28"/>`,
+  publish: l`<path d="M24 6 V28 M24 6 L16 14 M24 6 L32 14"/><path d="M8 32 V38 A2 2 0 0 0 10 40 H38 A2 2 0 0 0 40 38 V32"/>`,
+  changelog: l`<path d="M10 6 H28 L36 14 V42 H10 Z"/><path d="M28 6 V14 H36"/><path d="M16 24 H24"/><circle cx="34" cy="34" r="7"/><path d="M34 30 V34 L37 36"/>`,
+  vulnerability: l`<path d="M24 6 L40 12 V22 C40 33 33 40 24 43 C15 40 8 33 8 22 V12 Z"/><path d="M24 16 V26"/><circle cx="24" cy="32" r="1.8" fill="currentColor" stroke="none"/>`,
+  gauge: l`<path d="M6 34 A18 18 0 0 1 42 34"/><path d="M24 34 L34 20"/><circle cx="24" cy="34" r="2.2" fill="currentColor" stroke="none"/>`,
+  "file-tree": l`<path d="M6 12 H18 L22 17 H42 V38 H6 Z"/><path d="M26 24 H36 M26 30 H36"/>`,
+  "check-circle": l`<circle cx="24" cy="24" r="17"/><path d="M15 24 L21 30 L33 17"/>`,
+  "x-circle": l`<circle cx="24" cy="24" r="17"/><path d="M18 18 L30 30 M30 18 L18 30"/>`,
+  fork: l`<circle cx="14" cy="10" r="4"/><circle cx="34" cy="10" r="4"/><circle cx="24" cy="38" r="4"/><path d="M14 14 V22 L24 32 M34 14 V22 L24 32 M24 32 V34"/>`,
+  trending: l`<path d="M6 34 L18 22 L26 28 L42 10"/><path d="M32 10 H42 V20"/>`,
+  collection: l`<rect x="10" y="6" width="28" height="10" rx="2"/><rect x="6" y="19" width="36" height="10" rx="2"/><rect x="10" y="32" width="28" height="10" rx="2"/>`,
+  // Phase 4: fleet console (Puppet Enterprise replacement) ---------------
+  dashboard: l`<rect x="6" y="6" width="18" height="14" rx="2"/><rect x="28" y="6" width="14" height="8" rx="2"/><rect x="28" y="18" width="14" height="14" rx="2"/><rect x="6" y="24" width="18" height="18" rx="2"/>`,
+  node: l`<rect x="10" y="14" width="28" height="20" rx="3"/><path d="M16 22 H22 M16 27 H22"/><circle cx="32" cy="24" r="2" fill="currentColor" stroke="none"/>`,
+  "node-group": l`<rect x="6" y="10" width="24" height="9" rx="2"/><rect x="12" y="21" width="24" height="9" rx="2"/><rect x="18" y="32" width="24" height="9" rx="2"/>`,
+  pulse: l`<path d="M4 24 H14 L19 12 L27 36 L32 24 H44"/>`,
+  compliance: l`<rect x="9" y="6" width="30" height="36" rx="3"/><path d="M16 16 L19 19 L26 12 M16 26 L19 29 L26 22 M16 36 H30"/>`,
+  report: l`<path d="M10 6 H28 L36 14 V42 H10 Z"/><path d="M28 6 V14 H36"/><path d="M16 34 V28 M22 34 V24 M28 34 V30"/>`,
+  "activity-log": l`<path d="M14 8 V40"/><circle cx="14" cy="12" r="3" fill="currentColor" stroke="none"/><circle cx="14" cy="24" r="3" fill="currentColor" stroke="none"/><circle cx="14" cy="36" r="3" fill="currentColor" stroke="none"/><path d="M22 12 H40 M22 24 H40 M22 36 H34"/>`,
+  bell: l`<path d="M12 32 V22 A12 12 0 0 1 36 22 V32 L40 38 H8 Z"/><path d="M20 38 A4 4 0 0 0 28 38"/>`,
+  orchestrate: l`<circle cx="24" cy="24" r="17"/><path d="M19 15 L33 24 L19 33 Z"/>`,
+  plan: l`<rect x="6" y="8" width="24" height="32" rx="3"/><path d="M12 16 H24 M12 22 H24 M12 28 H20"/><path d="M32 24 H44 M38 18 L44 24 L38 30"/>`,
+  badge: l`<rect x="6" y="10" width="36" height="28" rx="3"/><circle cx="17" cy="21" r="5"/><path d="M10 32 C10 26 13 24 17 24 C21 24 24 26 24 32"/><path d="M30 18 H38 M30 24 H38 M30 30 H36"/>`,
+  audit: l`<path d="M10 6 H26 L34 14 V42 H10 Z"/><path d="M26 6 V14 H34"/><path d="M16 24 H24 M16 30 H22"/><circle cx="33" cy="33" r="6"/><path d="M37.5 37.5 L43 43"/>`,
+  key: l`<circle cx="16" cy="24" r="9"/><path d="M23 24 H42 M34 24 V31 M40 24 V29"/>`,
+  layers: l`<path d="M24 6 L44 16 L24 26 L4 16 Z"/><path d="M4 26 L24 36 L44 26"/><path d="M4 34 L24 44 L44 34"/>`,
+  classifier: l`<path d="M6 10 H24 L40 26 L24 42 H6 Z"/><circle cx="14" cy="18" r="3" fill="currentColor" stroke="none"/><circle cx="32" cy="26" r="3" fill="currentColor" stroke="none"/>`,
+  deploy: l`<path d="M24 8 V34"/><path d="M24 8 L15 20 M24 8 L33 20"/><path d="M10 40 H38"/>`,
+  metrics: l`<path d="M6 40 H42"/><path d="M6 40 V6"/><path d="M10 30 L18 22 L26 27 L38 12"/>`,
+  schedule: l`<rect x="6" y="10" width="28" height="30" rx="3"/><path d="M6 18 H34"/><path d="M14 6 V14 M26 6 V14"/><circle cx="34" cy="34" r="10"/><path d="M34 28 V34 L38 37"/>`,
+  backup: l`<path d="M24 6 V26 M24 26 L16 18 M24 26 L32 18"/><rect x="8" y="30" width="32" height="12" rx="2"/><path d="M8 36 H40"/>`,
+  webhook: l`<circle cx="12" cy="14" r="6"/><circle cx="36" cy="34" r="6"/><path d="M17 17 L31 31"/><path d="M22 22 L20 28 L26 26 L24 32"/>`,
+  organization: l`<rect x="10" y="10" width="28" height="32" rx="2"/><path d="M17 18 H21 M27 18 H31 M17 26 H21 M27 26 H31 M17 34 H21 M27 34 H31"/>`,
+  drift: l`<rect x="6" y="12" width="20" height="20" rx="3"/><rect x="22" y="16" width="20" height="20" rx="3"/><path d="M20 24 H28"/>`,
+  // Added later: consolidated from docs pages that predated vox-icon ------
+  blocks: l`<rect x="7" y="7" width="15" height="15" rx="2.5"/><rect x="26" y="7" width="15" height="15" rx="2.5"/><rect x="7" y="26" width="15" height="15" rx="2.5"/><rect x="26" y="26" width="15" height="15" rx="2.5"/>`,
+  plug: l`<path d="M16 6 V18 M32 6 V18 M12 18 H36 V28 C36 34 30 38 24 38 C18 38 12 34 12 28 Z"/><path d="M24 38 V44"/>`,
+  ballot: l`<rect x="8" y="18" width="32" height="24" rx="2.5"/><path d="M8 26 H40"/><path d="M24 10 V26"/><path d="M18 6 L24 12 L30 6"/>`,
+  sun: l`<circle cx="24" cy="24" r="8"/><path d="M24 4v4M24 40v4M9.86 9.86l2.82 2.82M35.32 35.32l2.82 2.82M4 24h4M40 24h4M12.68 35.32l-2.82 2.82M38.14 9.86l-2.82 2.82"/>`,
+  moon: l`<path d="M42 25.58A18 18 0 1 1 22.42 6 14 14 0 0 0 42 25.58Z"/>`,
+  github: l`<g transform="translate(4,4) scale(2.5)" fill="currentColor" stroke="none"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></g>`,
+  accessibility: l`<circle cx="24" cy="24" r="18"/><circle cx="24" cy="16" r="2.6" fill="currentColor" stroke="none"/><path d="M14 21 H34 M24 21 V32 M24 25 L18 34 M24 25 L30 34"/>`,
+  settings: l`<circle cx="24" cy="24" r="7"/><path d="M24 6 V12 M24 36 V42 M6 24 H12 M36 24 H42 M11 11 L15.2 15.2 M32.8 32.8 L37 37 M37 11 L32.8 15.2 M15.2 32.8 L11 37"/>`
+};
+var Oo = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, Ve = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ko(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Oo(o, a, e), e;
+};
+let j = class extends v {
+  constructor() {
+    super(...arguments), this.name = "info", this.size = "md";
+  }
+  render() {
+    const t = m[this.name];
+    return t ? c`
+      <svg
+        viewBox="0 0 48 48"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        role=${this.label ? "img" : h}
+        aria-hidden=${this.label ? h : "true"}
+        aria-label=${this.label ?? h}
+      >
+        ${t}
+      </svg>
+    ` : h;
+  }
+};
+j.styles = d`
+    :host {
+      display: inline-flex;
+      flex: none;
+      color: inherit;
+    }
+
+    svg {
+      display: block;
+    }
+
+    :host([size='sm']) svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    :host([size='md']) svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    :host([size='lg']) svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    :host([size='xl']) svg {
+      width: 48px;
+      height: 48px;
+    }
+  `;
+Ve([
+  n()
+], j.prototype, "name", 2);
+Ve([
+  n({ reflect: !0 })
+], j.prototype, "size", 2);
+Ve([
+  n()
+], j.prototype, "label", 2);
+j = Ve([
+  p("vox-icon")
+], j);
+var Lo = Object.defineProperty, ne = (t, o, a, r) => {
   for (var e = void 0, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = i(o, a, e) || e);
-  return e && mo(o, a, e), e;
+  return e && Lo(o, a, e), e;
 };
-const Ze = class Ze extends v {
+const io = class io extends v {
   constructor() {
     super(), this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
   }
@@ -391,34 +550,34 @@ const Ze = class Ze extends v {
     this.internals.setValidity(o.validity, o.validationMessage, o);
   }
   renderLabel(o) {
-    return this.label ? l`
+    return this.label ? c`
       <label class="label" for=${o}>
-        ${this.label}${this.required ? l`<span class="required-mark" aria-hidden="true"> *</span>` : p}
+        ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : h}
       </label>
-    ` : p;
+    ` : h;
   }
   renderNote() {
-    return this.note ? l`<p class="note">${this.note}</p>` : p;
+    return this.note ? c`<p class="note">${this.note}</p>` : h;
   }
 };
-Ze.formAssociated = !0;
-let h = Ze;
-te([
+io.formAssociated = !0;
+let x = io;
+ne([
   n()
-], h.prototype, "name");
-te([
+], x.prototype, "name");
+ne([
   n()
-], h.prototype, "label");
-te([
+], x.prototype, "label");
+ne([
   n()
-], h.prototype, "note");
-te([
+], x.prototype, "note");
+ne([
   n({ type: Boolean, reflect: !0 })
-], h.prototype, "disabled");
-te([
+], x.prototype, "disabled");
+ne([
   n({ type: Boolean, reflect: !0 })
-], h.prototype, "required");
-const re = c`
+], x.prototype, "required");
+const le = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -485,7 +644,7 @@ const re = c`
   :host([data-vox-group='end']) .control {
     border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
   }
-`, ao = c`
+`, vo = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -514,12 +673,12 @@ const re = c`
     margin: 0;
   }
 `;
-var yo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, Ne = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? wo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+var Po = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Ue = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Vo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && yo(o, a, e), e;
+  return r && e && Po(o, a, e), e;
 };
-let q = class extends h {
+let I = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -537,7 +696,7 @@ let q = class extends h {
     this.checked = t.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return l`
+    return c`
       <label class="check">
         <input
           type="checkbox"
@@ -555,9 +714,9 @@ let q = class extends h {
     `;
   }
 };
-q.styles = [
-  ao,
-  c`
+I.styles = [
+  vo,
+  d`
       .box {
         flex: none;
         display: flex;
@@ -596,21 +755,21 @@ q.styles = [
       }
     `
 ];
-Ne([
+Ue([
   n({ type: Boolean, reflect: !0 })
-], q.prototype, "checked", 2);
-Ne([
+], I.prototype, "checked", 2);
+Ue([
   n()
-], q.prototype, "value", 2);
-q = Ne([
-  d("vox-checkbox")
-], q);
-var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, V = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? _o(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], I.prototype, "value", 2);
+I = Ue([
+  p("vox-checkbox")
+], I);
+var jo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, B = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Do(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && $o(o, a, e), e;
+  return r && e && jo(o, a, e), e;
 };
-let u = class extends h {
+let g = class extends x {
   constructor() {
     super(...arguments), this.multiple = !1, this.buttonLabel = "Choose a file", this.fileNames = [];
   }
@@ -629,14 +788,14 @@ let u = class extends h {
     ), this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return l`
+    return c`
       <div class="field">
         ${this.renderLabel("file")}
         <label>
           <input
             id="file"
             type="file"
-            accept=${j(this.accept)}
+            accept=${P(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
             @change=${this.handleChange}
@@ -653,9 +812,9 @@ let u = class extends h {
     `;
   }
 };
-u.styles = [
-  re,
-  c`
+g.styles = [
+  le,
+  d`
       input {
         position: absolute;
         width: 1px;
@@ -703,30 +862,30 @@ u.styles = [
       }
     `
 ];
-V([
+B([
   n()
-], u.prototype, "accept", 2);
-V([
+], g.prototype, "accept", 2);
+B([
   n({ type: Boolean })
-], u.prototype, "multiple", 2);
-V([
+], g.prototype, "multiple", 2);
+B([
   n({ attribute: "button-label" })
-], u.prototype, "buttonLabel", 2);
-V([
-  to()
-], u.prototype, "fileNames", 2);
-V([
-  qe("input")
-], u.prototype, "inputEl", 2);
-u = V([
-  d("vox-file-input")
-], u);
-var Oo = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, B = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Po(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], g.prototype, "buttonLabel", 2);
+B([
+  Le()
+], g.prototype, "fileNames", 2);
+B([
+  Ze("input")
+], g.prototype, "inputEl", 2);
+g = B([
+  p("vox-file-input")
+], g);
+var zo = Object.defineProperty, Ho = Object.getOwnPropertyDescriptor, q = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ho(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Oo(o, a, e), e;
+  return r && e && zo(o, a, e), e;
 };
-let f = class extends h {
+let b = class extends x {
   constructor() {
     super(...arguments), this.type = "text", this.value = "", this.readonly = !1;
   }
@@ -749,20 +908,20 @@ let f = class extends h {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return l`
+    return c`
       <div class="field">
         ${this.renderLabel("input")}
         <input
           id="input"
           class="control"
           type=${this.type}
-          .value=${ro(this.value)}
-          placeholder=${j(this.placeholder)}
-          autocomplete=${j(this.autocomplete)}
+          .value=${po(this.value)}
+          placeholder=${P(this.placeholder)}
+          autocomplete=${P(this.autocomplete)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          aria-label=${this.label ? p : "text input"}
+          aria-label=${this.label ? h : "text input"}
           @input=${this.handleInput}
           @change=${this.handleChange}
         />
@@ -771,31 +930,31 @@ let f = class extends h {
     `;
   }
 };
-f.styles = re;
-B([
+b.styles = le;
+q([
   n()
-], f.prototype, "type", 2);
-B([
+], b.prototype, "type", 2);
+q([
   n()
-], f.prototype, "value", 2);
-B([
+], b.prototype, "value", 2);
+q([
   n()
-], f.prototype, "placeholder", 2);
-B([
+], b.prototype, "placeholder", 2);
+q([
   n()
-], f.prototype, "autocomplete", 2);
-B([
+], b.prototype, "autocomplete", 2);
+q([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "readonly", 2);
-f = B([
-  d("vox-input")
-], f);
-var Co = Object.getOwnPropertyDescriptor, jo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Co(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], b.prototype, "readonly", 2);
+b = q([
+  p("vox-input")
+], b);
+var Eo = Object.getOwnPropertyDescriptor, So = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Eo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = i(e) || e);
   return e;
 };
-let ke = class extends v {
+let Be = class extends v {
   handleSlotChange(t) {
     const o = t.target.assignedElements();
     o.forEach((a, r) => {
@@ -804,14 +963,14 @@ let ke = class extends v {
     });
   }
   render() {
-    return l`
+    return c`
       <div class="group" role="group">
         <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
     `;
   }
 };
-ke.styles = c`
+Be.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -853,15 +1012,15 @@ ke.styles = c`
       border-left: none;
     }
   `;
-ke = jo([
-  d("vox-input-group")
-], ke);
-var Do = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, _e = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ko(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+Be = So([
+  p("vox-input-group")
+], Be);
+var Ao = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, je = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Bo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Do(o, a, e), e;
+  return r && e && Ao(o, a, e), e;
 };
-let k = class extends v {
+let D = class extends v {
   constructor() {
     super(...arguments), this.value = "", this.checked = !1, this.disabled = !1;
   }
@@ -874,7 +1033,7 @@ let k = class extends v {
     (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.select());
   }
   render() {
-    return l`
+    return c`
       <span
         class="radio"
         role="radio"
@@ -890,7 +1049,7 @@ let k = class extends v {
     `;
   }
 };
-k.styles = c`
+D.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -939,24 +1098,24 @@ k.styles = c`
       outline-offset: 2px;
     }
   `;
-_e([
+je([
   n()
-], k.prototype, "value", 2);
-_e([
+], D.prototype, "value", 2);
+je([
   n({ type: Boolean, reflect: !0 })
-], k.prototype, "checked", 2);
-_e([
+], D.prototype, "checked", 2);
+je([
   n({ type: Boolean, reflect: !0 })
-], k.prototype, "disabled", 2);
-k = _e([
-  d("vox-radio")
-], k);
-var zo = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, so = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Eo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], D.prototype, "disabled", 2);
+D = je([
+  p("vox-radio")
+], D);
+var qo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, ho = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? No(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && zo(o, a, e), e;
+  return r && e && qo(o, a, e), e;
 };
-let pe = class extends h {
+let be = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -987,7 +1146,7 @@ let pe = class extends h {
     !(o instanceof HTMLElement) || o.tagName !== "VOX-RADIO" || (t.stopPropagation(), this.value !== o.value && (this.value = o.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
   }
   handleKeydown(t) {
-    var Je, eo;
+    var no, lo;
     const a = {
       ArrowDown: 1,
       ArrowRight: 1,
@@ -996,16 +1155,16 @@ let pe = class extends h {
     }[t.key];
     if (!a) return;
     t.preventDefault();
-    const r = this.radios.filter((De) => !De.disabled);
+    const r = this.radios.filter((Ae) => !Ae.disabled);
     if (r.length === 0) return;
-    const e = r.findIndex((De) => De.checked), s = (Math.max(e, 0) + a + r.length) % r.length, i = r[s];
-    i.select(), (eo = (Je = i.shadowRoot) == null ? void 0 : Je.querySelector(".radio")) == null || eo.focus();
+    const e = r.findIndex((Ae) => Ae.checked), s = (Math.max(e, 0) + a + r.length) % r.length, i = r[s];
+    i.select(), (lo = (no = i.shadowRoot) == null ? void 0 : no.querySelector(".radio")) == null || lo.focus();
   }
   render() {
-    return l`
+    return c`
       <div class="field" role="radiogroup" aria-label=${this.label}>
-        ${this.label ? l`<span class="label">
-              ${this.label}${this.required ? l`<span class="required-mark" aria-hidden="true"> *</span>` : ""}
+        ${this.label ? c`<span class="label">
+              ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : ""}
             </span>` : ""}
         <div
           class="options"
@@ -1019,9 +1178,9 @@ let pe = class extends h {
     `;
   }
 };
-pe.styles = [
-  re,
-  c`
+be.styles = [
+  le,
+  d`
       .options {
         display: flex;
         flex-direction: column;
@@ -1030,18 +1189,18 @@ pe.styles = [
       }
     `
 ];
-so([
+ho([
   n()
-], pe.prototype, "value", 2);
-pe = so([
-  d("vox-radio-group")
-], pe);
-var So = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Me = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Vo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], be.prototype, "value", 2);
+be = ho([
+  p("vox-radio-group")
+], be);
+var Io = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Ge = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? To(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && So(o, a, e), e;
+  return r && e && Io(o, a, e), e;
 };
-let L = class extends h {
+let T = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1062,7 +1221,7 @@ let L = class extends h {
     this.value = this.selectEl.value, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return l`
+    return c`
       <div class="field">
         ${this.renderLabel("select")}
         <select
@@ -1078,9 +1237,9 @@ let L = class extends h {
     `;
   }
 };
-L.styles = [
-  re,
-  c`
+T.styles = [
+  le,
+  d`
       select.control {
         appearance: none;
         padding-right: var(--vox-space-8);
@@ -1091,21 +1250,21 @@ L.styles = [
       }
     `
 ];
-Me([
+Ge([
   n()
-], L.prototype, "value", 2);
-Me([
-  qe("select")
-], L.prototype, "selectEl", 2);
-L = Me([
-  d("vox-select")
-], L);
-var Bo = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, Te = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ao(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], T.prototype, "value", 2);
+Ge([
+  Ze("select")
+], T.prototype, "selectEl", 2);
+T = Ge([
+  p("vox-select")
+], T);
+var Ro = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, Xe = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Fo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Bo(o, a, e), e;
+  return r && e && Ro(o, a, e), e;
 };
-let N = class extends h {
+let R = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -1119,7 +1278,7 @@ let N = class extends h {
     this.checked = t.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return l`
+    return c`
       <label class="check">
         <input
           type="checkbox"
@@ -1134,9 +1293,9 @@ let N = class extends h {
     `;
   }
 };
-N.styles = [
-  ao,
-  c`
+R.styles = [
+  vo,
+  d`
       .track {
         flex: none;
         position: relative;
@@ -1174,21 +1333,21 @@ N.styles = [
       }
     `
 ];
-Te([
+Xe([
   n({ type: Boolean, reflect: !0 })
-], N.prototype, "checked", 2);
-Te([
+], R.prototype, "checked", 2);
+Xe([
   n()
-], N.prototype, "value", 2);
-N = Te([
-  d("vox-switch")
-], N);
-var qo = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, ae = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Lo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], R.prototype, "value", 2);
+R = Xe([
+  p("vox-switch")
+], R);
+var Zo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, ce = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ko(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && qo(o, a, e), e;
+  return r && e && Zo(o, a, e), e;
 };
-let g = class extends h {
+let y = class extends x {
   constructor() {
     super(...arguments), this.value = "", this.rows = 4, this.readonly = !1;
   }
@@ -1211,15 +1370,15 @@ let g = class extends h {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return l`
+    return c`
       <div class="field">
         ${this.renderLabel("textarea")}
         <textarea
           id="textarea"
           class="control"
           rows=${this.rows}
-          .value=${ro(this.value)}
-          placeholder=${j(this.placeholder)}
+          .value=${po(this.value)}
+          placeholder=${P(this.placeholder)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
@@ -1231,48 +1390,48 @@ let g = class extends h {
     `;
   }
 };
-g.styles = [
-  re,
-  c`
+y.styles = [
+  le,
+  d`
       textarea.control {
         resize: vertical;
         min-height: 4em;
       }
     `
 ];
-ae([
+ce([
   n()
-], g.prototype, "value", 2);
-ae([
+], y.prototype, "value", 2);
+ce([
   n()
-], g.prototype, "placeholder", 2);
-ae([
+], y.prototype, "placeholder", 2);
+ce([
   n({ type: Number })
-], g.prototype, "rows", 2);
-ae([
+], y.prototype, "rows", 2);
+ce([
   n({ type: Boolean, reflect: !0 })
-], g.prototype, "readonly", 2);
-g = ae([
-  d("vox-textarea")
-], g);
-var No = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, se = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Mo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], y.prototype, "readonly", 2);
+y = ce([
+  p("vox-textarea")
+], y);
+var Uo = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, de = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Go(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && No(o, a, e), e;
+  return r && e && Uo(o, a, e), e;
 };
-let m = class extends v {
+let w = class extends v {
   constructor() {
     super(...arguments), this.alt = "", this.initials = "", this.size = "md";
   }
   render() {
-    return l`
+    return c`
       <span class="avatar" role=${this.src ? "presentation" : "img"} aria-label=${this.alt}>
-        ${this.src ? l`<img src=${this.src} alt=${this.alt} />` : this.initials}
+        ${this.src ? c`<img src=${this.src} alt=${this.alt} />` : this.initials}
       </span>
     `;
   }
 };
-m.styles = c`
+w.styles = d`
     :host {
       display: inline-block;
     }
@@ -1320,27 +1479,27 @@ m.styles = c`
       font-size: 28px;
     }
   `;
-se([
+de([
   n()
-], m.prototype, "src", 2);
-se([
+], w.prototype, "src", 2);
+de([
   n()
-], m.prototype, "alt", 2);
-se([
+], w.prototype, "alt", 2);
+de([
   n()
-], m.prototype, "initials", 2);
-se([
+], w.prototype, "initials", 2);
+de([
   n({ reflect: !0 })
-], m.prototype, "size", 2);
-m = se([
-  d("vox-avatar")
-], m);
-var To = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, Fe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Fo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], w.prototype, "size", 2);
+w = de([
+  p("vox-avatar")
+], w);
+var Xo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, Qe = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Qo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && To(o, a, e), e;
+  return r && e && Xo(o, a, e), e;
 };
-let M = class extends v {
+let F = class extends v {
   constructor() {
     super(...arguments), this.heading = "", this.reverse = !1, this.hasActions = !1;
   }
@@ -1349,7 +1508,7 @@ let M = class extends v {
     this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return l`
+    return c`
       <div class="billboard">
         <div class="media"><slot name="media"></slot></div>
         <div class="content">
@@ -1363,7 +1522,7 @@ let M = class extends v {
     `;
   }
 };
-M.styles = c`
+F.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1425,30 +1584,30 @@ M.styles = c`
       display: none;
     }
   `;
-Fe([
+Qe([
   n()
-], M.prototype, "heading", 2);
-Fe([
+], F.prototype, "heading", 2);
+Qe([
   n({ type: Boolean, reflect: !0 })
-], M.prototype, "reverse", 2);
-M = Fe([
-  d("vox-billboard")
-], M);
-var Io = Object.getOwnPropertyDescriptor, Ro = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Io(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], F.prototype, "reverse", 2);
+F = Qe([
+  p("vox-billboard")
+], F);
+var Wo = Object.getOwnPropertyDescriptor, Yo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Wo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = i(e) || e);
   return e;
 };
-let ze = class extends v {
+let qe = class extends v {
   render() {
-    return l`
+    return c`
       <nav aria-label="Breadcrumbs">
         <slot></slot>
       </nav>
     `;
   }
 };
-ze.styles = c`
+qe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1482,36 +1641,74 @@ ze.styles = c`
       color: var(--vox-color-text-3);
     }
   `;
-ze = Ro([
-  d("vox-breadcrumbs")
-], ze);
-var Ho = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, Ie = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Uo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+qe = Yo([
+  p("vox-breadcrumbs")
+], qe);
+var Jo = Object.defineProperty, et = Object.getOwnPropertyDescriptor, De = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? et(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ho(o, a, e), e;
+  return r && e && Jo(o, a, e), e;
 };
-let T = class extends v {
+let z = class extends v {
   constructor() {
-    super(...arguments), this.siteTitle = "", this.href = "/";
+    super(...arguments), this.siteTitle = "", this.href = "/", this.mobileOpen = !1, this.handleOutsideClick = (t) => {
+      this.mobileOpen && !t.composedPath().includes(this) && (this.mobileOpen = !1);
+    }, this.handleKeydown = (t) => {
+      var o;
+      t.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (o = this.renderRoot.querySelector(".menu-toggle")) == null || o.focus());
+    }, this.toggleMobileMenu = () => {
+      this.mobileOpen = !this.mobileOpen;
+    }, this.closeMobileMenu = () => {
+      this.mobileOpen = !1;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
   }
   render() {
-    return l`
+    return c`
       <header class="header">
         <a class="brand" href=${this.href}>
           <slot name="logo"></slot>
-          ${this.siteTitle ? l`<span>${this.siteTitle}</span>` : p}
+          ${this.siteTitle ? c`<span>${this.siteTitle}</span>` : h}
         </a>
-        <nav aria-label="Main">
-          <slot></slot>
-        </nav>
-        <div class="actions">
-          <slot name="actions"></slot>
+        <button
+          type="button"
+          class="menu-toggle"
+          aria-expanded=${this.mobileOpen ? "true" : "false"}
+          aria-controls="nav-wrap"
+          aria-label=${this.mobileOpen ? "Close menu" : "Open menu"}
+          @click=${this.toggleMobileMenu}
+        >
+          <svg
+            class="menu-icon"
+            viewBox="0 0 48 48"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            ${this.mobileOpen ? m.close : m.menu}
+          </svg>
+        </button>
+        <div id="nav-wrap" class="nav-wrap${this.mobileOpen ? " open" : ""}">
+          <nav aria-label="Main">
+            <slot @click=${this.closeMobileMenu}></slot>
+          </nav>
+          <div class="actions">
+            <slot name="actions"></slot>
+          </div>
         </div>
       </header>
     `;
   }
 };
-T.styles = c`
+z.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1545,6 +1742,39 @@ T.styles = c`
       width: auto;
     }
 
+    .menu-toggle {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      margin-left: auto;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-1);
+      cursor: pointer;
+    }
+
+    .menu-toggle:hover {
+      color: var(--vox-color-brand-1);
+    }
+
+    .menu-toggle:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .menu-icon {
+      width: 22px;
+      height: 22px;
+    }
+
+    .nav-wrap {
+      display: contents;
+    }
+
     nav {
       display: flex;
       align-items: center;
@@ -1575,45 +1805,80 @@ T.styles = c`
       align-items: center;
       gap: var(--vox-space-3);
     }
+
+    @media (max-width: 768px) {
+      .menu-toggle {
+        display: inline-flex;
+      }
+
+      .nav-wrap {
+        display: none;
+        width: 100%;
+      }
+
+      .nav-wrap.open {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--vox-space-4);
+        margin-top: var(--vox-space-3);
+        padding-top: var(--vox-space-4);
+        border-top: 1px solid var(--vox-color-divider);
+      }
+
+      nav {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--vox-space-3);
+      }
+
+      .actions {
+        flex-direction: column;
+        align-items: stretch;
+      }
+    }
   `;
-Ie([
+De([
   n({ attribute: "site-title" })
-], T.prototype, "siteTitle", 2);
-Ie([
+], z.prototype, "siteTitle", 2);
+De([
   n()
-], T.prototype, "href", 2);
-T = Ie([
-  d("vox-header")
-], T);
-var Ko = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, ie = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Go(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], z.prototype, "href", 2);
+De([
+  Le()
+], z.prototype, "mobileOpen", 2);
+z = De([
+  p("vox-header")
+], z);
+var ot = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, pe = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? tt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ko(o, a, e), e;
+  return r && e && ot(o, a, e), e;
 };
-let y = class extends v {
+let $ = class extends v {
   constructor() {
     super(...arguments), this.previousLabel = "", this.nextLabel = "";
   }
   render() {
-    return l`
+    return c`
       <nav aria-label="Series">
-        ${this.previousHref ? l`
+        ${this.previousHref ? c`
               <a href=${this.previousHref} rel="prev">
                 <span class="direction">← Previous</span>
                 <span class="title">${this.previousLabel}</span>
               </a>
-            ` : p}
-        ${this.nextHref ? l`
+            ` : h}
+        ${this.nextHref ? c`
               <a class="next" href=${this.nextHref} rel="next">
                 <span class="direction">Next →</span>
                 <span class="title">${this.nextLabel}</span>
               </a>
-            ` : p}
+            ` : h}
       </nav>
     `;
   }
 };
-y.styles = c`
+$.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1663,57 +1928,152 @@ y.styles = c`
       color: var(--vox-color-brand-1);
     }
   `;
-ie([
+pe([
   n({ attribute: "previous-href" })
-], y.prototype, "previousHref", 2);
-ie([
+], $.prototype, "previousHref", 2);
+pe([
   n({ attribute: "previous-label" })
-], y.prototype, "previousLabel", 2);
-ie([
+], $.prototype, "previousLabel", 2);
+pe([
   n({ attribute: "next-href" })
-], y.prototype, "nextHref", 2);
-ie([
+], $.prototype, "nextHref", 2);
+pe([
   n({ attribute: "next-label" })
-], y.prototype, "nextLabel", 2);
-y = ie([
-  d("vox-series-nav")
-], y);
-var Xo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, b = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Qo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], $.prototype, "nextLabel", 2);
+$ = pe([
+  p("vox-series-nav")
+], $);
+var rt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, u = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? at(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Xo(o, a, e), e;
+  return r && e && rt(o, a, e), e;
 };
-let he = class extends v {
+let H = class extends v {
   constructor() {
-    super(...arguments), this.label = "Section";
+    super(...arguments), this.label = "Section", this.toggleLabel = "Menu", this.mobileOpen = !1, this.handleOutsideClick = (t) => {
+      this.mobileOpen && !t.composedPath().includes(this) && (this.mobileOpen = !1);
+    }, this.handleKeydown = (t) => {
+      var o;
+      t.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (o = this.renderRoot.querySelector(".toggle")) == null || o.focus());
+    }, this.toggleMobile = () => {
+      this.mobileOpen = !this.mobileOpen;
+    }, this.handleNavClick = (t) => {
+      t.composedPath().some((o) => o instanceof HTMLAnchorElement) && (this.mobileOpen = !1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
   }
   render() {
-    return l`
-      <nav aria-label=${this.label}>
+    return c`
+      <button
+        type="button"
+        class="toggle"
+        aria-expanded=${this.mobileOpen ? "true" : "false"}
+        aria-controls="nav"
+        @click=${this.toggleMobile}
+      >
+        ${this.toggleLabel}
+        <svg
+          class="toggle-icon"
+          viewBox="0 0 48 48"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          ${this.mobileOpen ? m.close : m.menu}
+        </svg>
+      </button>
+      <nav
+        id="nav"
+        class=${this.mobileOpen ? "open" : ""}
+        aria-label=${this.label}
+        @click=${this.handleNavClick}
+      >
         <slot></slot>
       </nav>
     `;
   }
 };
-he.styles = c`
+H.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
     }
 
+    .toggle {
+      display: none;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: var(--vox-space-2);
+      padding: var(--vox-space-2) var(--vox-space-3);
+      background: none;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .toggle:hover {
+      border-color: var(--vox-color-brand-1);
+      color: var(--vox-color-brand-1);
+    }
+
+    .toggle:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .toggle-icon {
+      width: 18px;
+      height: 18px;
+      flex: none;
+    }
+
     nav {
       display: flex;
       flex-direction: column;
       gap: 2px;
     }
+
+    @media (max-width: 768px) {
+      .toggle {
+        display: flex;
+      }
+
+      nav {
+        display: none;
+        margin-top: var(--vox-space-2);
+      }
+
+      nav.open {
+        display: flex;
+      }
+    }
   `;
-b([
+u([
   n()
-], he.prototype, "label", 2);
-he = b([
-  d("vox-sidenav")
-], he);
-let F = class extends v {
+], H.prototype, "label", 2);
+u([
+  n({ attribute: "toggle-label" })
+], H.prototype, "toggleLabel", 2);
+u([
+  Le()
+], H.prototype, "mobileOpen", 2);
+H = u([
+  p("vox-sidenav")
+], H);
+let Z = class extends v {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1;
   }
@@ -1721,7 +2081,7 @@ let F = class extends v {
     this.open = !this.open;
   }
   render() {
-    return l`
+    return c`
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
@@ -1736,7 +2096,7 @@ let F = class extends v {
     `;
   }
 };
-F.styles = c`
+Z.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1793,35 +2153,44 @@ F.styles = c`
       display: flex;
     }
   `;
-b([
+u([
   n()
-], F.prototype, "heading", 2);
-b([
+], Z.prototype, "heading", 2);
+u([
   n({ type: Boolean, reflect: !0 })
-], F.prototype, "open", 2);
-F = b([
-  d("vox-sidenav-group")
-], F);
-let I = class extends v {
+], Z.prototype, "open", 2);
+Z = u([
+  p("vox-sidenav-group")
+], Z);
+let K = class extends v {
   constructor() {
-    super(...arguments), this.href = "#", this.current = !1;
+    super(...arguments), this.href = "#", this.current = !1, this.hasIcon = !1;
+  }
+  handleIconSlotChange(t) {
+    const o = t.target;
+    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return l`
+    return c`
       <a href=${this.href} aria-current=${this.current ? "page" : "false"}>
+        <span class="icon ${this.hasIcon ? "has-icon" : ""}">
+          <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+        </span>
         <slot></slot>
       </a>
     `;
   }
 };
-I.styles = c`
+K.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
     }
 
     a {
-      display: block;
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-2);
       padding: var(--vox-space-2) var(--vox-space-3);
       border-radius: var(--vox-radius-sm);
       color: var(--vox-color-text-2);
@@ -1846,34 +2215,43 @@ I.styles = c`
       color: var(--vox-color-brand-1);
       font-weight: 600;
     }
+
+    .icon {
+      display: flex;
+      flex: none;
+    }
+
+    .icon:not(.has-icon) {
+      display: none;
+    }
   `;
-b([
+u([
   n()
-], I.prototype, "href", 2);
-b([
+], K.prototype, "href", 2);
+u([
   n({ type: Boolean, reflect: !0 })
-], I.prototype, "current", 2);
-I = b([
-  d("vox-sidenav-item")
-], I);
-var Wo = Object.defineProperty, Yo = Object.getOwnPropertyDescriptor, io = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Yo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], K.prototype, "current", 2);
+K = u([
+  p("vox-sidenav-item")
+], K);
+var st = Object.defineProperty, it = Object.getOwnPropertyDescriptor, xo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? it(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Wo(o, a, e), e;
+  return r && e && st(o, a, e), e;
 };
-let xe = class extends v {
+let me = class extends v {
   constructor() {
     super(...arguments), this.label = "Secondary";
   }
   render() {
-    return l`
+    return c`
       <nav aria-label=${this.label}>
         <slot></slot>
       </nav>
     `;
   }
 };
-xe.styles = c`
+me.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1908,18 +2286,18 @@ xe.styles = c`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-io([
+xo([
   n()
-], xe.prototype, "label", 2);
-xe = io([
-  d("vox-subnav")
-], xe);
-var Zo = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, P = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Jo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], me.prototype, "label", 2);
+me = xo([
+  p("vox-subnav")
+], me);
+var nt = Object.defineProperty, lt = Object.getOwnPropertyDescriptor, k = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? lt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Zo(o, a, e), e;
+  return r && e && nt(o, a, e), e;
 };
-let Ee = class extends v {
+let Ne = class extends v {
   get tabs() {
     return [...this.querySelectorAll("vox-tab")];
   }
@@ -1952,7 +2330,7 @@ let Ee = class extends v {
     s.select(), s.focusTab();
   }
   render() {
-    return l`
+    return c`
       <div
         class="tablist"
         role="tablist"
@@ -1965,7 +2343,7 @@ let Ee = class extends v {
     `;
   }
 };
-Ee.styles = c`
+Ne.styles = d`
     :host {
       display: block;
     }
@@ -1976,10 +2354,10 @@ Ee.styles = c`
       border-bottom: 1px solid var(--vox-color-divider);
     }
   `;
-Ee = P([
-  d("vox-tabs")
-], Ee);
-let R = class extends v {
+Ne = k([
+  p("vox-tabs")
+], Ne);
+let U = class extends v {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1;
   }
@@ -1993,7 +2371,7 @@ let R = class extends v {
     (t = this.renderRoot.querySelector(".tab")) == null || t.focus();
   }
   render() {
-    return l`
+    return c`
       <button
         class="tab"
         role="tab"
@@ -2002,91 +2380,210 @@ let R = class extends v {
         @click=${this.select}
       >
         <slot></slot>
-      </button>
+      </button>
+    `;
+  }
+};
+U.styles = d`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .tab {
+      padding: var(--vox-space-2) var(--vox-space-4);
+      margin-bottom: -1px;
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      color: var(--vox-color-text-2);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: color var(--vox-transition-fast);
+    }
+
+    .tab:hover {
+      color: var(--vox-color-text-1);
+    }
+
+    .tab:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    :host([selected]) .tab {
+      color: var(--vox-color-brand-1);
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+  `;
+k([
+  n()
+], U.prototype, "panel", 2);
+k([
+  n({ type: Boolean, reflect: !0 })
+], U.prototype, "selected", 2);
+U = k([
+  p("vox-tab")
+], U);
+let G = class extends v {
+  constructor() {
+    super(...arguments), this.name = "", this.active = !1;
+  }
+  render() {
+    return c`<div role="tabpanel"><slot></slot></div>`;
+  }
+};
+G.styles = d`
+    :host {
+      display: none;
+      font-family: var(--vox-font-family-base);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+      padding: var(--vox-space-4) 0;
+    }
+
+    :host([active]) {
+      display: block;
+    }
+  `;
+k([
+  n()
+], G.prototype, "name", 2);
+k([
+  n({ type: Boolean, reflect: !0 })
+], G.prototype, "active", 2);
+G = k([
+  p("vox-tab-panel")
+], G);
+var ct = Object.defineProperty, dt = Object.getOwnPropertyDescriptor, ve = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? dt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && ct(o, a, e), e;
+};
+let ye = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "On this page";
+  }
+  render() {
+    return c`
+      <div class="heading" id="vox-toc-heading">${this.heading}</div>
+      <nav aria-labelledby="vox-toc-heading">
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+ye.styles = d`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-2);
+      padding-left: var(--vox-space-3);
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    nav {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      border-left: 1px solid var(--vox-color-divider);
+    }
+  `;
+ve([
+  n()
+], ye.prototype, "heading", 2);
+ye = ve([
+  p("vox-toc")
+], ye);
+let X = class extends v {
+  constructor() {
+    super(...arguments), this.href = "#", this.current = !1, this.hasChildren = !1;
+  }
+  handleChildrenSlotChange(t) {
+    const o = t.target;
+    this.hasChildren = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return c`
+      <a href=${this.href} aria-current=${this.current ? "true" : "false"}>
+        <slot></slot>
+      </a>
+      <div class="children ${this.hasChildren ? "has-children" : ""}">
+        <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
+      </div>
     `;
   }
 };
-R.styles = c`
+X.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
     }
 
-    .tab {
-      padding: var(--vox-space-2) var(--vox-space-4);
-      margin-bottom: -1px;
-      background: none;
-      border: none;
-      border-bottom: 2px solid transparent;
+    a {
+      display: block;
+      margin-left: -1px;
+      padding: var(--vox-space-1) var(--vox-space-3);
+      border-left: 2px solid transparent;
       color: var(--vox-color-text-2);
-      font-family: inherit;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: color var(--vox-transition-fast);
+      font-size: 13px;
+      line-height: 1.5;
+      text-decoration: none;
+      transition:
+        color var(--vox-transition-fast),
+        border-color var(--vox-transition-fast);
     }
 
-    .tab:hover {
+    a:hover {
       color: var(--vox-color-text-1);
     }
 
-    .tab:focus-visible {
+    a:focus-visible {
       outline: 2px solid var(--vox-color-brand-1);
       outline-offset: -2px;
-      border-radius: var(--vox-radius-sm);
     }
 
-    :host([selected]) .tab {
+    :host([current]) a {
+      border-left-color: var(--vox-color-brand-1);
       color: var(--vox-color-brand-1);
-      border-bottom-color: var(--vox-color-brand-1);
+      font-weight: 600;
     }
-  `;
-P([
-  n()
-], R.prototype, "panel", 2);
-P([
-  n({ type: Boolean, reflect: !0 })
-], R.prototype, "selected", 2);
-R = P([
-  d("vox-tab")
-], R);
-let H = class extends v {
-  constructor() {
-    super(...arguments), this.name = "", this.active = !1;
-  }
-  render() {
-    return l`<div role="tabpanel"><slot></slot></div>`;
-  }
-};
-H.styles = c`
-    :host {
-      display: none;
-      font-family: var(--vox-font-family-base);
-      font-size: 14px;
-      line-height: 1.7;
-      color: var(--vox-color-text-2);
-      padding: var(--vox-space-4) 0;
+
+    .children {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      padding-left: var(--vox-space-3);
     }
 
-    :host([active]) {
-      display: block;
+    .children:not(.has-children) {
+      display: none;
     }
   `;
-P([
+ve([
   n()
-], H.prototype, "name", 2);
-P([
+], X.prototype, "href", 2);
+ve([
   n({ type: Boolean, reflect: !0 })
-], H.prototype, "active", 2);
-H = P([
-  d("vox-tab-panel")
-], H);
-var et = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, ne = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ot(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], X.prototype, "current", 2);
+X = ve([
+  p("vox-toc-item")
+], X);
+var pt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, he = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? vt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && et(o, a, e), e;
+  return r && e && pt(o, a, e), e;
 };
-let w = class extends v {
+let _ = class extends v {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1, this.lightDismiss = !1, this.hasFooter = !1;
   }
@@ -2112,9 +2609,9 @@ let w = class extends v {
     this.hasFooter = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return l`
+    return c`
       <dialog
-        aria-label=${this.heading || p}
+        aria-label=${this.heading || h}
         @close=${this.handleNativeClose}
         @click=${this.handleClick}
       >
@@ -2134,7 +2631,7 @@ let w = class extends v {
     `;
   }
 };
-w.styles = c`
+_.styles = d`
     dialog {
       box-sizing: border-box;
       width: min(90vw, 480px);
@@ -2221,27 +2718,27 @@ w.styles = c`
       margin-bottom: 0;
     }
   `;
-ne([
+he([
   n()
-], w.prototype, "heading", 2);
-ne([
+], _.prototype, "heading", 2);
+he([
   n({ type: Boolean })
-], w.prototype, "open", 2);
-ne([
+], _.prototype, "open", 2);
+he([
   n({ type: Boolean, attribute: "light-dismiss" })
-], w.prototype, "lightDismiss", 2);
-ne([
-  qe("dialog")
-], w.prototype, "dialogEl", 2);
-w = ne([
-  d("vox-dialog")
-], w);
-var tt = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, Re = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? rt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], _.prototype, "lightDismiss", 2);
+he([
+  Ze("dialog")
+], _.prototype, "dialogEl", 2);
+_ = he([
+  p("vox-dialog")
+], _);
+var ht = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, We = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? xt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && tt(o, a, e), e;
+  return r && e && ht(o, a, e), e;
 };
-let U = class extends v {
+let Q = class extends v {
   constructor() {
     super(...arguments), this.summary = "Show details", this.open = !1;
   }
@@ -2251,7 +2748,7 @@ let U = class extends v {
     );
   }
   render() {
-    return l`
+    return c`
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
@@ -2268,7 +2765,7 @@ let U = class extends v {
     `;
   }
 };
-U.styles = c`
+Q.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2320,21 +2817,21 @@ U.styles = c`
       display: none;
     }
   `;
-Re([
+We([
   n()
-], U.prototype, "summary", 2);
-Re([
+], Q.prototype, "summary", 2);
+We([
   n({ type: Boolean, reflect: !0 })
-], U.prototype, "open", 2);
-U = Re([
-  d("vox-disclosure")
-], U);
-var at = Object.defineProperty, st = Object.getOwnPropertyDescriptor, He = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? st(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], Q.prototype, "open", 2);
+Q = We([
+  p("vox-disclosure")
+], Q);
+var ut = Object.defineProperty, ft = Object.getOwnPropertyDescriptor, Ye = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ft(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && at(o, a, e), e;
+  return r && e && ut(o, a, e), e;
 };
-let K = class extends v {
+let W = class extends v {
   constructor() {
     super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (t) => {
       this.open && !t.composedPath().includes(this) && (this.open = !1);
@@ -2363,7 +2860,7 @@ let K = class extends v {
     this.open = !this.open;
   }
   render() {
-    return l`
+    return c`
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
@@ -2381,7 +2878,7 @@ let K = class extends v {
     `;
   }
 };
-K.styles = c`
+W.styles = d`
     :host {
       position: relative;
       display: inline-block;
@@ -2480,21 +2977,21 @@ K.styles = c`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-He([
+Ye([
   n()
-], K.prototype, "label", 2);
-He([
+], W.prototype, "label", 2);
+Ye([
   n({ type: Boolean, reflect: !0 })
-], K.prototype, "open", 2);
-K = He([
-  d("vox-dropdown")
-], K);
-var it = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, le = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? nt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], W.prototype, "open", 2);
+W = Ye([
+  p("vox-dropdown")
+], W);
+var gt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, xe = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? bt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && it(o, a, e), e;
+  return r && e && gt(o, a, e), e;
 };
-let ue = class extends v {
+let we = class extends v {
   constructor() {
     super(...arguments), this.single = !1;
   }
@@ -2508,10 +3005,10 @@ let ue = class extends v {
     );
   }
   render() {
-    return l`<slot @vox-toggle=${this.handleToggle}></slot>`;
+    return c`<slot @vox-toggle=${this.handleToggle}></slot>`;
   }
 };
-ue.styles = c`
+we.styles = d`
     :host {
       display: block;
       border: 1px solid var(--vox-color-divider);
@@ -2523,13 +3020,13 @@ ue.styles = c`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-le([
+xe([
   n({ type: Boolean })
-], ue.prototype, "single", 2);
-ue = le([
-  d("vox-accordion")
-], ue);
-let G = class extends v {
+], we.prototype, "single", 2);
+we = xe([
+  p("vox-accordion")
+], we);
+let Y = class extends v {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1;
   }
@@ -2539,7 +3036,7 @@ let G = class extends v {
     );
   }
   render() {
-    return l`
+    return c`
       <h3 style="margin:0">
         <button
           class="trigger"
@@ -2558,7 +3055,7 @@ let G = class extends v {
     `;
   }
 };
-G.styles = c`
+Y.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2620,21 +3117,27 @@ G.styles = c`
       margin-bottom: 0;
     }
   `;
-le([
+xe([
   n()
-], G.prototype, "heading", 2);
-le([
+], Y.prototype, "heading", 2);
+xe([
   n({ type: Boolean, reflect: !0 })
-], G.prototype, "open", 2);
-G = le([
-  d("vox-accordion-item")
-], G);
-var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ce = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ct(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], Y.prototype, "open", 2);
+Y = xe([
+  p("vox-accordion-item")
+], Y);
+var mt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, ue = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? yt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && lt(o, a, e), e;
+  return r && e && mt(o, a, e), e;
 };
-let $ = class extends v {
+const wt = {
+  info: "info",
+  success: "check-circle",
+  warning: "warning",
+  danger: "x-circle"
+};
+let C = class extends v {
   constructor() {
     super(...arguments), this.variant = "info", this.heading = "", this.dismissible = !1, this.open = !0;
   }
@@ -2644,24 +3147,36 @@ let $ = class extends v {
     );
   }
   render() {
-    return l`
+    return c`
       <div class="alert ${this.variant}" role="alert">
+        <svg
+          class="icon"
+          viewBox="0 0 48 48"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          ${m[wt[this.variant]]}
+        </svg>
         <div class="body">
-          ${this.heading ? l`<p class="heading">${this.heading}</p>` : p}
+          ${this.heading ? c`<p class="heading">${this.heading}</p>` : h}
           <slot></slot>
         </div>
-        ${this.dismissible ? l`
+        ${this.dismissible ? c`
               <button class="close" aria-label="Dismiss" @click=${this.dismiss}>
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
                   <path d="M18 6 6 18M6 6l12 12" />
                 </svg>
               </button>
-            ` : p}
+            ` : h}
       </div>
     `;
   }
 };
-$.styles = c`
+C.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2687,6 +3202,13 @@ $.styles = c`
       flex: 1 1 auto;
     }
 
+    .icon {
+      flex: none;
+      width: 20px;
+      height: 20px;
+      margin-top: 1px;
+    }
+
     .heading {
       margin: 0 0 var(--vox-space-1);
       font-size: 14px;
@@ -2700,6 +3222,9 @@ $.styles = c`
     .info .heading {
       color: var(--vox-color-brand-1);
     }
+    .info .icon {
+      color: var(--vox-color-brand-1);
+    }
 
     .success {
       background-color: var(--vox-color-tip-soft);
@@ -2708,6 +3233,9 @@ $.styles = c`
     .success .heading {
       color: var(--vox-color-tip-1);
     }
+    .success .icon {
+      color: var(--vox-color-tip-1);
+    }
 
     .warning {
       background-color: var(--vox-color-warning-soft);
@@ -2716,6 +3244,9 @@ $.styles = c`
     .warning .heading {
       color: var(--vox-color-warning-1);
     }
+    .warning .icon {
+      color: var(--vox-color-warning-1);
+    }
 
     .danger {
       background-color: var(--vox-color-danger-soft);
@@ -2724,6 +3255,9 @@ $.styles = c`
     .danger .heading {
       color: var(--vox-color-danger-1);
     }
+    .danger .icon {
+      color: var(--vox-color-danger-1);
+    }
 
     .close {
       flex: none;
@@ -2761,35 +3295,35 @@ $.styles = c`
       margin-bottom: 0;
     }
   `;
-ce([
+ue([
   n()
-], $.prototype, "variant", 2);
-ce([
+], C.prototype, "variant", 2);
+ue([
   n()
-], $.prototype, "heading", 2);
-ce([
+], C.prototype, "heading", 2);
+ue([
   n({ type: Boolean })
-], $.prototype, "dismissible", 2);
-ce([
+], C.prototype, "dismissible", 2);
+ue([
   n({ type: Boolean, reflect: !0 })
-], $.prototype, "open", 2);
-$ = ce([
-  d("vox-alert")
-], $);
-var dt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, no = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? vt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], C.prototype, "open", 2);
+C = ue([
+  p("vox-alert")
+], C);
+var $t = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, uo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? _t(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && dt(o, a, e), e;
+  return r && e && $t(o, a, e), e;
 };
-let fe = class extends v {
+let $e = class extends v {
   constructor() {
     super(...arguments), this.variant = "brand";
   }
   render() {
-    return l`<span class="badge ${this.variant}"><slot></slot></span>`;
+    return c`<span class="badge ${this.variant}"><slot></slot></span>`;
   }
 };
-fe.styles = c`
+$e.styles = d`
     :host {
       display: inline-block;
     }
@@ -2831,24 +3365,24 @@ fe.styles = c`
       color: var(--vox-color-text-2);
     }
   `;
-no([
+uo([
   n()
-], fe.prototype, "variant", 2);
-fe = no([
-  d("vox-badge")
-], fe);
-var pt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, Ue = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ht(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], $e.prototype, "variant", 2);
+$e = uo([
+  p("vox-badge")
+], $e);
+var Ct = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, Je = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Mt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && pt(o, a, e), e;
+  return r && e && Ct(o, a, e), e;
 };
-let X = class extends v {
+let J = class extends v {
   constructor() {
     super(...arguments), this.date = "";
   }
   render() {
     const t = /* @__PURE__ */ new Date(`${this.date}T00:00:00`), o = !Number.isNaN(t.getTime()), a = o ? t.toLocaleString(this.locale, { month: "short" }) : "—", r = o ? t.getDate() : "–";
-    return l`
+    return c`
       <time class="tile" datetime=${this.date}>
         <span class="month">${a}</span>
         <span class="day">${r}</span>
@@ -2856,7 +3390,7 @@ let X = class extends v {
     `;
   }
 };
-X.styles = c`
+J.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -2892,45 +3426,67 @@ X.styles = c`
       color: var(--vox-color-text-1);
     }
   `;
-Ue([
+Je([
   n()
-], X.prototype, "date", 2);
-Ue([
+], J.prototype, "date", 2);
+Je([
   n()
-], X.prototype, "locale", 2);
-X = Ue([
-  d("vox-calendar-tile")
-], X);
-var xt = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, Ke = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ut(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], J.prototype, "locale", 2);
+J = Je([
+  p("vox-calendar-tile")
+], J);
+var Ot = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, eo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? kt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && xt(o, a, e), e;
+  return r && e && Ot(o, a, e), e;
 };
-const ft = {
+const Lt = {
   info: "Info",
   tip: "Tip",
   warning: "Warning",
   danger: "Danger"
+}, Pt = {
+  info: "info",
+  tip: "check-circle",
+  warning: "warning",
+  danger: "x-circle"
 };
-let Q = class extends v {
+let ee = class extends v {
   constructor() {
     super(...arguments), this.variant = "info";
   }
   render() {
-    return l`
+    return c`
       <div class="callout ${this.variant}" role="note">
-        <p class="heading">${this.heading ?? ft[this.variant]}</p>
-        <slot></slot>
+        <svg
+          class="icon"
+          viewBox="0 0 48 48"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          ${m[Pt[this.variant]]}
+        </svg>
+        <div class="content">
+          <p class="heading">${this.heading ?? Lt[this.variant]}</p>
+          <slot></slot>
+        </div>
       </div>
     `;
   }
 };
-Q.styles = c`
+ee.styles = d`
     :host {
       display: block;
     }
 
     .callout {
+      display: flex;
+      gap: var(--vox-space-3);
+      align-items: flex-start;
       border-radius: var(--vox-radius-md);
       padding: var(--vox-space-4);
       font-family: var(--vox-font-family-base);
@@ -2939,6 +3495,18 @@ Q.styles = c`
       color: var(--vox-color-text-2);
     }
 
+    .icon {
+      flex: none;
+      width: 18px;
+      height: 18px;
+      margin-top: 2px;
+    }
+
+    .content {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
     .heading {
       margin: 0 0 var(--vox-space-2);
       font-size: 14px;
@@ -2951,6 +3519,9 @@ Q.styles = c`
     .info .heading {
       color: var(--vox-color-text-1);
     }
+    .info .icon {
+      color: var(--vox-color-text-1);
+    }
 
     .tip {
       background-color: var(--vox-color-tip-soft);
@@ -2958,6 +3529,9 @@ Q.styles = c`
     .tip .heading {
       color: var(--vox-color-tip-1);
     }
+    .tip .icon {
+      color: var(--vox-color-tip-1);
+    }
 
     .warning {
       background-color: var(--vox-color-warning-soft);
@@ -2965,6 +3539,9 @@ Q.styles = c`
     .warning .heading {
       color: var(--vox-color-warning-1);
     }
+    .warning .icon {
+      color: var(--vox-color-warning-1);
+    }
 
     .danger {
       background-color: var(--vox-color-danger-soft);
@@ -2972,6 +3549,9 @@ Q.styles = c`
     .danger .heading {
       color: var(--vox-color-danger-1);
     }
+    .danger .icon {
+      color: var(--vox-color-danger-1);
+    }
 
     ::slotted(p:first-child) {
       margin-top: 0;
@@ -2981,21 +3561,21 @@ Q.styles = c`
       margin-bottom: 0;
     }
   `;
-Ke([
+eo([
   n()
-], Q.prototype, "variant", 2);
-Ke([
+], ee.prototype, "variant", 2);
+eo([
   n()
-], Q.prototype, "heading", 2);
-Q = Ke([
-  d("vox-callout")
-], Q);
-var bt = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, Oe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? gt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], ee.prototype, "heading", 2);
+ee = eo([
+  p("vox-callout")
+], ee);
+var Vt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, ze = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? jt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && bt(o, a, e), e;
+  return r && e && Vt(o, a, e), e;
 };
-let z = class extends v {
+let E = class extends v {
   constructor() {
     super(...arguments), this.heading = "", this.hasIcon = !1, this.hasBadge = !1, this.hasFooter = !1;
   }
@@ -3012,7 +3592,7 @@ let z = class extends v {
     this.hasFooter = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const t = l`
+    const t = c`
       <div class="badge ${this.hasBadge ? "has-badge" : ""}">
         <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
       </div>
@@ -3025,10 +3605,10 @@ let z = class extends v {
         <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
       </div>
     `;
-    return this.href !== void 0 ? l`<a class="card" href=${this.href} target=${this.target ?? p}>${t}</a>` : l`<div class="card">${t}</div>`;
+    return this.href !== void 0 ? c`<a class="card" href=${this.href} target=${this.target ?? h}>${t}</a>` : c`<div class="card">${t}</div>`;
   }
 };
-z.styles = c`
+E.styles = d`
     :host {
       display: block;
     }
@@ -3044,6 +3624,11 @@ z.styles = c`
       border-radius: var(--vox-radius-lg);
       padding: var(--vox-space-6);
       font-family: var(--vox-font-family-base);
+      /* Slotted content (e.g. an icon using stroke="currentColor")
+         inherits from this element's position in the flat tree — when
+         rendered as an <a>, that means the browser's default link color
+         without this, since nothing else in .card sets one. */
+      color: var(--vox-color-text-1);
       text-decoration: none;
       transition: border-color var(--vox-transition-base);
     }
@@ -3108,24 +3693,24 @@ z.styles = c`
       display: none;
     }
   `;
-Oe([
+ze([
   n()
-], z.prototype, "heading", 2);
-Oe([
+], E.prototype, "heading", 2);
+ze([
   n()
-], z.prototype, "href", 2);
-Oe([
+], E.prototype, "href", 2);
+ze([
   n()
-], z.prototype, "target", 2);
-z = Oe([
-  d("vox-card")
-], z);
-var mt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, lo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? yt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], E.prototype, "target", 2);
+E = ze([
+  p("vox-card")
+], E);
+var Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, fo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? zt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && mt(o, a, e), e;
+  return r && e && Dt(o, a, e), e;
 };
-let be = class extends v {
+let _e = class extends v {
   constructor() {
     super(...arguments), this.heading = "", this.hasBody = !1, this.hasActions = !1;
   }
@@ -3138,9 +3723,9 @@ let be = class extends v {
     this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return l`
+    return c`
       <div class="band">
-        ${this.heading ? l`<h2 class="heading">${this.heading}</h2>` : p}
+        ${this.heading ? c`<h2 class="heading">${this.heading}</h2>` : h}
         <div class="body ${this.hasBody ? "has-content" : ""}">
           <slot @slotchange=${this.handleBodySlotChange}></slot>
         </div>
@@ -3151,7 +3736,7 @@ let be = class extends v {
     `;
   }
 };
-be.styles = c`
+_e.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3206,23 +3791,23 @@ be.styles = c`
       display: none;
     }
   `;
-lo([
+fo([
   n()
-], be.prototype, "heading", 2);
-be = lo([
-  d("vox-cta-band")
-], be);
-var wt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, co = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? $t(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], _e.prototype, "heading", 2);
+_e = fo([
+  p("vox-cta-band")
+], _e);
+var Ht = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, go = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Et(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && wt(o, a, e), e;
+  return r && e && Ht(o, a, e), e;
 };
-let ge = class extends v {
+let Ce = class extends v {
   constructor() {
     super(...arguments), this.heading = "";
   }
   render() {
-    return l`
+    return c`
       <div class="empty">
         <div class="icon"><slot name="icon"></slot></div>
         <h3 class="heading">${this.heading}</h3>
@@ -3232,7 +3817,7 @@ let ge = class extends v {
     `;
   }
 };
-ge.styles = c`
+Ce.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3276,20 +3861,20 @@ ge.styles = c`
       margin-top: var(--vox-space-4);
     }
   `;
-co([
+go([
   n()
-], ge.prototype, "heading", 2);
-ge = co([
-  d("vox-empty-state")
-], ge);
-var _t = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, Ge = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ot(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], Ce.prototype, "heading", 2);
+Ce = go([
+  p("vox-empty-state")
+], Ce);
+var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, oo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? At(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && _t(o, a, e), e;
+  return r && e && St(o, a, e), e;
 };
-let Se = class extends v {
+let Ie = class extends v {
   render() {
-    return l`
+    return c`
       <footer>
         <div class="inner">
           <div class="columns"><slot></slot></div>
@@ -3299,7 +3884,7 @@ let Se = class extends v {
     `;
   }
 };
-Se.styles = c`
+Ie.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3327,21 +3912,21 @@ Se.styles = c`
       color: var(--vox-color-text-3);
     }
   `;
-Se = Ge([
-  d("vox-footer")
-], Se);
-let me = class extends v {
+Ie = oo([
+  p("vox-footer")
+], Ie);
+let Me = class extends v {
   constructor() {
     super(...arguments), this.heading = "";
   }
   render() {
-    return l`
+    return c`
       <h3 class="heading">${this.heading}</h3>
       <div class="links"><slot></slot></div>
     `;
   }
 };
-me.styles = c`
+Me.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3373,18 +3958,18 @@ me.styles = c`
       text-decoration: underline;
     }
   `;
-Ge([
+oo([
   n()
-], me.prototype, "heading", 2);
-me = Ge([
-  d("vox-footer-column")
-], me);
-var Pt = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, Pe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ct(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], Me.prototype, "heading", 2);
+Me = oo([
+  p("vox-footer-column")
+], Me);
+var Bt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, He = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? qt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Pt(o, a, e), e;
+  return r && e && Bt(o, a, e), e;
 };
-let E = class extends v {
+let S = class extends v {
   constructor() {
     super(...arguments), this.cols = 0, this.min = "240px", this.gap = "md";
   }
@@ -3392,10 +3977,10 @@ let E = class extends v {
     this.style.gridTemplateColumns = this.cols > 0 ? `repeat(${this.cols}, minmax(0, 1fr))` : `repeat(auto-fit, minmax(min(${this.min}, 100%), 1fr))`;
   }
   render() {
-    return l`<slot></slot>`;
+    return c`<slot></slot>`;
   }
 };
-E.styles = c`
+S.styles = d`
     :host {
       display: grid;
     }
@@ -3412,24 +3997,24 @@ E.styles = c`
       gap: var(--vox-space-6);
     }
   `;
-Pe([
+He([
   n({ type: Number })
-], E.prototype, "cols", 2);
-Pe([
+], S.prototype, "cols", 2);
+He([
   n()
-], E.prototype, "min", 2);
-Pe([
+], S.prototype, "min", 2);
+He([
   n({ reflect: !0 })
-], E.prototype, "gap", 2);
-E = Pe([
-  d("vox-grid")
-], E);
-var jt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, Xe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Dt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], S.prototype, "gap", 2);
+S = He([
+  p("vox-grid")
+], S);
+var Nt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, to = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? It(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && jt(o, a, e), e;
+  return r && e && Nt(o, a, e), e;
 };
-let W = class extends v {
+let oe = class extends v {
   constructor() {
     super(...arguments), this.eyebrow = "", this.heading = "", this.hasActions = !1;
   }
@@ -3438,9 +4023,9 @@ let W = class extends v {
     this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return l`
+    return c`
       <header class="hero">
-        ${this.eyebrow ? l`<p class="eyebrow">${this.eyebrow}</p>` : p}
+        ${this.eyebrow ? c`<p class="eyebrow">${this.eyebrow}</p>` : h}
         <h1 class="heading">${this.heading}</h1>
         <div class="body"><slot></slot></div>
         <div class="actions ${this.hasActions ? "has-content" : ""}">
@@ -3450,7 +4035,7 @@ let W = class extends v {
     `;
   }
 };
-W.styles = c`
+oe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3507,43 +4092,50 @@ W.styles = c`
       display: none;
     }
   `;
-Xe([
+to([
   n()
-], W.prototype, "eyebrow", 2);
-Xe([
+], oe.prototype, "eyebrow", 2);
+to([
   n()
-], W.prototype, "heading", 2);
-W = Xe([
-  d("vox-hero")
-], W);
-var kt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, Ce = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? zt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], oe.prototype, "heading", 2);
+oe = to([
+  p("vox-hero")
+], oe);
+var Tt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, Ee = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Rt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && kt(o, a, e), e;
+  return r && e && Tt(o, a, e), e;
 };
-let Ve = class extends v {
+let Te = class extends v {
   render() {
-    return l`<slot></slot>`;
+    return c`<slot></slot>`;
   }
 };
-Ve.styles = c`
+Te.styles = d`
     :host {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
       gap: var(--vox-space-4);
     }
   `;
-Ve = Ce([
-  d("vox-link-hub")
-], Ve);
-let Y = class extends v {
+Te = Ee([
+  p("vox-link-hub")
+], Te);
+let te = class extends v {
   constructor() {
-    super(...arguments), this.href = "#", this.heading = "";
+    super(...arguments), this.href = "#", this.heading = "", this.hasIcon = !1;
+  }
+  handleIconSlotChange(t) {
+    const o = t.target;
+    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return l`
+    return c`
       <a href=${this.href}>
         <span class="heading">
+          <span class="icon ${this.hasIcon ? "has-icon" : ""}">
+            <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+          </span>
           ${this.heading}
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="M5 12h14" />
@@ -3555,12 +4147,21 @@ let Y = class extends v {
     `;
   }
 };
-Y.styles = c`
+te.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
     }
 
+    .icon {
+      display: flex;
+      flex: none;
+    }
+
+    .icon:not(.has-icon) {
+      display: none;
+    }
+
     a {
       display: block;
       height: 100%;
@@ -3607,26 +4208,26 @@ Y.styles = c`
       color: var(--vox-color-text-2);
     }
   `;
-Ce([
+Ee([
   n()
-], Y.prototype, "href", 2);
-Ce([
+], te.prototype, "href", 2);
+Ee([
   n()
-], Y.prototype, "heading", 2);
-Y = Ce([
-  d("vox-link-hub-item")
-], Y);
-var Et = Object.defineProperty, St = Object.getOwnPropertyDescriptor, Qe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? St(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], te.prototype, "heading", 2);
+te = Ee([
+  p("vox-link-hub-item")
+], te);
+var Ft = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, ro = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Zt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Et(o, a, e), e;
+  return r && e && Ft(o, a, e), e;
 };
-let Z = class extends v {
+let re = class extends v {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
   render() {
-    return l`
+    return c`
       <div role="status">
         <div class="spinner"></div>
         <span class="visually-hidden">${this.label}</span>
@@ -3634,7 +4235,7 @@ let Z = class extends v {
     `;
   }
 };
-Z.styles = c`
+re.styles = d`
     :host {
       display: inline-block;
     }
@@ -3687,33 +4288,33 @@ Z.styles = c`
       white-space: nowrap;
     }
   `;
-Qe([
+ro([
   n({ reflect: !0 })
-], Z.prototype, "size", 2);
-Qe([
+], re.prototype, "size", 2);
+ro([
   n()
-], Z.prototype, "label", 2);
-Z = Qe([
-  d("vox-loader")
-], Z);
-var Vt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, vo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Bt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], re.prototype, "label", 2);
+re = ro([
+  p("vox-loader")
+], re);
+var Kt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, bo = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ut(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Vt(o, a, e), e;
+  return r && e && Kt(o, a, e), e;
 };
-let ye = class extends v {
+let Oe = class extends v {
   constructor() {
     super(...arguments), this.label = "Pagination";
   }
   render() {
-    return l`
+    return c`
       <nav aria-label=${this.label}>
         <slot></slot>
       </nav>
     `;
   }
 };
-ye.styles = c`
+Oe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3753,36 +4354,36 @@ ye.styles = c`
       font-weight: 600;
     }
   `;
-vo([
+bo([
   n()
-], ye.prototype, "label", 2);
-ye = vo([
-  d("vox-pagination")
-], ye);
-var At = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, We = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? qt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], Oe.prototype, "label", 2);
+Oe = bo([
+  p("vox-pagination")
+], Oe);
+var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, ao = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Xt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && At(o, a, e), e;
+  return r && e && Gt(o, a, e), e;
 };
-let J = class extends v {
+let ae = class extends v {
   constructor() {
     super(...arguments), this.attribution = "", this.detail = "";
   }
   render() {
-    return l`
+    return c`
       <blockquote>
         <div class="text"><slot></slot></div>
-        ${this.attribution ? l`
+        ${this.attribution ? c`
               <footer>
                 <span class="attribution">${this.attribution}</span>
-                ${this.detail ? l`<span class="detail"> — ${this.detail}</span>` : p}
+                ${this.detail ? c`<span class="detail"> — ${this.detail}</span>` : h}
               </footer>
-            ` : p}
+            ` : h}
       </blockquote>
     `;
   }
 };
-J.styles = c`
+ae.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3824,21 +4425,21 @@ J.styles = c`
       color: var(--vox-color-text-2);
     }
   `;
-We([
+ao([
   n()
-], J.prototype, "attribution", 2);
-We([
+], ae.prototype, "attribution", 2);
+ao([
   n()
-], J.prototype, "detail", 2);
-J = We([
-  d("vox-quote")
-], J);
-var Lt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, C = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Nt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], ae.prototype, "detail", 2);
+ae = ao([
+  p("vox-quote")
+], ae);
+var Qt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, L = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Wt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Lt(o, a, e), e;
+  return r && e && Qt(o, a, e), e;
 };
-let we = class extends v {
+let ke = class extends v {
   constructor() {
     super(...arguments), this.heading = "", this.hasDescription = !1;
   }
@@ -3847,7 +4448,7 @@ let we = class extends v {
     this.hasDescription = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return l`
+    return c`
       <h2 class="heading">${this.heading}</h2>
       <div class="description ${this.hasDescription ? "has-content" : ""}">
         <slot
@@ -3861,7 +4462,7 @@ let we = class extends v {
     `;
   }
 };
-we.styles = c`
+ke.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3893,13 +4494,13 @@ we.styles = c`
       margin-top: var(--vox-space-6);
     }
   `;
-C([
+L([
   n()
-], we.prototype, "heading", 2);
-we = C([
-  d("vox-sponsor-tier")
-], we);
-let _ = class extends v {
+], ke.prototype, "heading", 2);
+ke = L([
+  p("vox-sponsor-tier")
+], ke);
+let M = class extends v {
   constructor() {
     super(...arguments), this.name = "", this.hasBody = !1;
   }
@@ -3908,24 +4509,24 @@ let _ = class extends v {
     this.hasBody = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const t = l`
+    const t = c`
       <div class="logo ${this.logo ? "has-logo" : ""}">
-        ${this.logo ? l`<img src=${this.logo} alt=${this.name} />` : p}
+        ${this.logo ? c`<img src=${this.logo} alt=${this.name} />` : h}
       </div>
       <span class="name">${this.name}</span>
       <div class="body ${this.hasBody ? "has-content" : ""}">
         <slot @slotchange=${this.handleBodySlotChange}></slot>
       </div>
     `;
-    return this.href !== void 0 ? l`<a
+    return this.href !== void 0 ? c`<a
           class="sponsor"
           href=${this.href}
-          target=${this.target ?? p}
+          target=${this.target ?? h}
           >${t}</a
-        >` : l`<div class="sponsor">${t}</div>`;
+        >` : c`<div class="sponsor">${t}</div>`;
   }
 };
-_.styles = c`
+M.styles = d`
     :host {
       display: block;
     }
@@ -3991,39 +4592,39 @@ _.styles = c`
       display: none;
     }
   `;
-C([
+L([
   n()
-], _.prototype, "name", 2);
-C([
+], M.prototype, "name", 2);
+L([
   n()
-], _.prototype, "href", 2);
-C([
+], M.prototype, "href", 2);
+L([
   n()
-], _.prototype, "logo", 2);
-C([
+], M.prototype, "logo", 2);
+L([
   n()
-], _.prototype, "target", 2);
-_ = C([
-  d("vox-sponsor")
-], _);
-var Mt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, Ye = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Tt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], M.prototype, "target", 2);
+M = L([
+  p("vox-sponsor")
+], M);
+var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, so = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Jt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Mt(o, a, e), e;
+  return r && e && Yt(o, a, e), e;
 };
-let ee = class extends v {
+let se = class extends v {
   constructor() {
     super(...arguments), this.value = "", this.label = "";
   }
   render() {
-    return l`
+    return c`
       <div class="value">${this.value}</div>
       <div class="label">${this.label}</div>
       <div class="description"><slot></slot></div>
     `;
   }
 };
-ee.styles = c`
+se.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4050,35 +4651,35 @@ ee.styles = c`
       color: var(--vox-color-text-2);
     }
   `;
-Ye([
+so([
   n()
-], ee.prototype, "value", 2);
-Ye([
+], se.prototype, "value", 2);
+so([
   n()
-], ee.prototype, "label", 2);
-ee = Ye([
-  d("vox-stat")
-], ee);
-var Ft = Object.defineProperty, It = Object.getOwnPropertyDescriptor, de = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? It(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], se.prototype, "label", 2);
+se = so([
+  p("vox-stat")
+], se);
+var er = Object.defineProperty, or = Object.getOwnPropertyDescriptor, fe = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? or(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ft(o, a, e), e;
+  return r && e && er(o, a, e), e;
 };
-let Be = class extends v {
+let Re = class extends v {
   numberSteps() {
     this.querySelectorAll("vox-step").forEach((t, o) => {
       t.number = o + 1;
     });
   }
   render() {
-    return l`
+    return c`
       <div class="steps" role="list" aria-label="Progress">
         <slot @slotchange=${this.numberSteps}></slot>
       </div>
     `;
   }
 };
-Be.styles = c`
+Re.styles = d`
     :host {
       display: block;
     }
@@ -4092,22 +4693,22 @@ Be.styles = c`
       flex: 1 1 0;
     }
   `;
-Be = de([
-  d("vox-step-indicator")
-], Be);
-let S = class extends v {
+Re = fe([
+  p("vox-step-indicator")
+], Re);
+let A = class extends v {
   constructor() {
     super(...arguments), this.label = "", this.state = "upcoming", this.number = 1;
   }
   render() {
-    return l`
+    return c`
       <div
         class="step"
         role="listitem"
         aria-current=${this.state === "current" ? "step" : "false"}
       >
         <span class="marker">
-          ${this.state === "complete" ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          ${this.state === "complete" ? c`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                 <path d="m4 12 5 5L20 6" />
               </svg>` : this.number}
         </span>
@@ -4116,7 +4717,7 @@ let S = class extends v {
     `;
   }
 };
-S.styles = c`
+A.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4190,52 +4791,52 @@ S.styles = c`
       color: var(--vox-color-text-1);
     }
   `;
-de([
+fe([
   n()
-], S.prototype, "label", 2);
-de([
+], A.prototype, "label", 2);
+fe([
   n({ reflect: !0 })
-], S.prototype, "state", 2);
-de([
+], A.prototype, "state", 2);
+fe([
   n({ type: Number })
-], S.prototype, "number", 2);
-S = de([
-  d("vox-step")
-], S);
-var Rt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, je = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ht(o, a) : o, s = t.length - 1, i; s >= 0; s--)
+], A.prototype, "number", 2);
+A = fe([
+  p("vox-step")
+], A);
+var tr = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, Se = (t, o, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? rr(o, a) : o, s = t.length - 1, i; s >= 0; s--)
     (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Rt(o, a, e), e;
+  return r && e && tr(o, a, e), e;
 };
-let Ae = class extends v {
+let Fe = class extends v {
   render() {
-    return l`<slot></slot>`;
+    return c`<slot></slot>`;
   }
 };
-Ae.styles = c`
+Fe.styles = d`
     :host {
       display: block;
     }
   `;
-Ae = je([
-  d("vox-timeline")
-], Ae);
-let oe = class extends v {
+Fe = Se([
+  p("vox-timeline")
+], Fe);
+let ie = class extends v {
   constructor() {
     super(...arguments), this.heading = "", this.date = "";
   }
   render() {
-    return l`
+    return c`
       <div class="item">
         <span class="dot" aria-hidden="true"></span>
-        ${this.date ? l`<div class="date">${this.date}</div>` : p}
+        ${this.date ? c`<div class="date">${this.date}</div>` : h}
         <h3 class="heading">${this.heading}</h3>
         <div class="body"><slot></slot></div>
       </div>
     `;
   }
 };
-oe.styles = c`
+ie.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4285,66 +4886,69 @@ oe.styles = c`
       color: var(--vox-color-text-2);
     }
   `;
-je([
+Se([
   n()
-], oe.prototype, "heading", 2);
-je([
+], ie.prototype, "heading", 2);
+Se([
   n()
-], oe.prototype, "date", 2);
-oe = je([
-  d("vox-timeline-item")
-], oe);
+], ie.prototype, "date", 2);
+ie = Se([
+  p("vox-timeline-item")
+], ie);
 export {
-  ue as VoxAccordion,
-  G as VoxAccordionItem,
-  $ as VoxAlert,
-  m as VoxAvatar,
-  fe as VoxBadge,
-  M as VoxBillboard,
-  ze as VoxBreadcrumbs,
-  x as VoxButton,
-  X as VoxCalendarTile,
-  Q as VoxCallout,
-  z as VoxCard,
-  q as VoxCheckbox,
-  A as VoxCta,
-  be as VoxCtaBand,
-  w as VoxDialog,
-  U as VoxDisclosure,
-  K as VoxDropdown,
-  ge as VoxEmptyState,
-  u as VoxFileInput,
-  Se as VoxFooter,
-  me as VoxFooterColumn,
-  E as VoxGrid,
-  T as VoxHeader,
-  W as VoxHero,
-  f as VoxInput,
-  ke as VoxInputGroup,
-  Ve as VoxLinkHub,
-  Y as VoxLinkHubItem,
-  Z as VoxLoader,
-  ye as VoxPagination,
-  J as VoxQuote,
-  k as VoxRadio,
-  pe as VoxRadioGroup,
-  L as VoxSelect,
-  y as VoxSeriesNav,
-  he as VoxSidenav,
-  F as VoxSidenavGroup,
-  I as VoxSidenavItem,
-  _ as VoxSponsor,
-  we as VoxSponsorTier,
-  ee as VoxStat,
-  S as VoxStep,
-  Be as VoxStepIndicator,
-  xe as VoxSubnav,
-  N as VoxSwitch,
-  R as VoxTab,
-  H as VoxTabPanel,
-  Ee as VoxTabs,
-  g as VoxTextarea,
-  D as VoxThemeToggle,
-  Ae as VoxTimeline,
-  oe as VoxTimelineItem
+  we as VoxAccordion,
+  Y as VoxAccordionItem,
+  C as VoxAlert,
+  w as VoxAvatar,
+  $e as VoxBadge,
+  F as VoxBillboard,
+  qe as VoxBreadcrumbs,
+  f as VoxButton,
+  J as VoxCalendarTile,
+  ee as VoxCallout,
+  E as VoxCard,
+  I as VoxCheckbox,
+  N as VoxCta,
+  _e as VoxCtaBand,
+  _ as VoxDialog,
+  Q as VoxDisclosure,
+  W as VoxDropdown,
+  Ce as VoxEmptyState,
+  g as VoxFileInput,
+  Ie as VoxFooter,
+  Me as VoxFooterColumn,
+  S as VoxGrid,
+  z as VoxHeader,
+  oe as VoxHero,
+  j as VoxIcon,
+  b as VoxInput,
+  Be as VoxInputGroup,
+  Te as VoxLinkHub,
+  te as VoxLinkHubItem,
+  re as VoxLoader,
+  Oe as VoxPagination,
+  ae as VoxQuote,
+  D as VoxRadio,
+  be as VoxRadioGroup,
+  T as VoxSelect,
+  $ as VoxSeriesNav,
+  H as VoxSidenav,
+  Z as VoxSidenavGroup,
+  K as VoxSidenavItem,
+  M as VoxSponsor,
+  ke as VoxSponsorTier,
+  se as VoxStat,
+  A as VoxStep,
+  Re as VoxStepIndicator,
+  me as VoxSubnav,
+  R as VoxSwitch,
+  U as VoxTab,
+  G as VoxTabPanel,
+  Ne as VoxTabs,
+  y as VoxTextarea,
+  V as VoxThemeToggle,
+  Fe as VoxTimeline,
+  ie as VoxTimelineItem,
+  ye as VoxToc,
+  X as VoxTocItem
 };