@openvoxproject/voxblocks 0.9.0

package/dist/voxblocks.js

@@ -0,0 +1,4350 @@
+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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && ho(o, a, e), e;
+};
+let x = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "brand", this.size = "md", this.type = "button", this.disabled = !1;
+  }
+  render() {
+    const t = po({
+      button: !0,
+      [this.variant]: !0,
+      [this.size]: !0
+    });
+    return this.href !== void 0 && !this.disabled ? l`
+        <a
+          class=${t}
+          href=${this.href}
+          target=${j(this.target)}
+          rel=${j(this.target === "_blank" ? "noreferrer" : void 0)}
+        >
+          <slot></slot>
+        </a>
+      ` : l`
+      <button class=${t} type=${this.type} ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+x.styles = c`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--vox-space-2);
+      border: 1px solid transparent;
+      border-radius: var(--vox-radius-full);
+      font-family: var(--vox-font-family-base);
+      font-weight: 600;
+      line-height: 1;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+      transition:
+        color var(--vox-transition-base),
+        background-color var(--vox-transition-base),
+        border-color var(--vox-transition-base);
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .sm {
+      font-size: 12px;
+      padding: 0 var(--vox-space-3);
+      height: 28px;
+    }
+
+    .md {
+      font-size: 14px;
+      padding: 0 20px;
+      height: 38px;
+    }
+
+    .lg {
+      font-size: 16px;
+      padding: 0 var(--vox-space-6);
+      height: 48px;
+    }
+
+    .brand {
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    .brand:hover:not(:disabled) {
+      background-color: var(--vox-color-brand-2);
+    }
+
+    .alt {
+      background-color: var(--vox-color-bg-soft);
+      color: var(--vox-color-text-1);
+      border-color: var(--vox-color-divider);
+    }
+
+    .alt:hover:not(:disabled) {
+      border-color: var(--vox-color-brand-1);
+      color: var(--vox-color-brand-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    .danger:hover:not(:disabled) {
+      background-color: var(--vox-color-danger-2);
+    }
+
+    .ghost {
+      background-color: transparent;
+      color: var(--vox-color-brand-1);
+    }
+
+    .ghost:hover:not(:disabled) {
+      background-color: var(--vox-color-brand-soft);
+    }
+
+    /* Corner flattening when placed inside a <vox-input-group>. */
+    :host([data-vox-group]) .button {
+      height: 100%;
+      border-radius: 0;
+    }
+
+    :host([data-vox-group='start']) .button {
+      border-radius: var(--vox-radius-md) 0 0 var(--vox-radius-md);
+    }
+
+    :host([data-vox-group='end']) .button {
+      border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
+    }
+  `;
+O([
+  n()
+], x.prototype, "variant", 2);
+O([
+  n()
+], x.prototype, "size", 2);
+O([
+  n()
+], x.prototype, "href", 2);
+O([
+  n()
+], x.prototype, "target", 2);
+O([
+  n()
+], x.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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && uo(o, a, e), e;
+};
+let A = class extends v {
+  constructor() {
+    super(...arguments), this.href = "#";
+  }
+  render() {
+    return l`
+      <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">
+          <path d="M5 12h14" />
+          <path d="m13 6 6 6-6 6" />
+        </svg>
+      </a>
+    `;
+  }
+};
+A.styles = c`
+    :host {
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      color: var(--vox-color-brand-1);
+      font-size: 15px;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: var(--vox-color-brand-2);
+      text-decoration: underline;
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    a:hover svg {
+      transform: translateX(3px);
+    }
+  `;
+Le([
+  n()
+], A.prototype, "href", 2);
+Le([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && bo(o, a, e), e;
+};
+const oo = "vox-theme", ve = "data-vox-theme";
+let D = 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");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.syncFromDocument(), this.observer = new MutationObserver(() => this.syncFromDocument()), this.observer.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: [ve]
+    }), this.media.addEventListener("change", this.handleSystemChange);
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this.observer) == null || t.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
+  }
+  syncFromDocument() {
+    const t = document.documentElement.getAttribute(ve) === "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(
+      new CustomEvent("vox-theme-change", {
+        detail: { theme: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const t = this.dark ? this.darkLabel : this.lightLabel;
+    return l`
+      <button
+        type="button"
+        role="switch"
+        aria-checked=${this.dark}
+        aria-label=${t}
+        title=${t}
+        @click=${this.handleClick}
+      >
+        <span class="track">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="4" />
+            <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+          </svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" />
+          </svg>
+          <span class="thumb"></span>
+        </span>
+      </button>
+    `;
+  }
+};
+D.styles = c`
+    :host {
+      display: inline-flex;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      border: none;
+      background: none;
+      padding: 0;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-full);
+    }
+
+    .track {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      width: 44px;
+      height: 24px;
+      padding: 0 5px;
+      border-radius: var(--vox-radius-full);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-divider);
+    }
+
+    .track svg {
+      position: relative;
+      width: 13px;
+      height: 13px;
+      flex: none;
+      color: var(--vox-color-text-3);
+    }
+
+    .thumb {
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: var(--vox-color-bg-elv);
+      box-shadow: var(--vox-shadow-1);
+      transition: transform var(--vox-transition-base);
+    }
+
+    :host([dark]) .thumb {
+      transform: translateX(20px);
+    }
+  `;
+$e([
+  n({ attribute: "light-label" })
+], D.prototype, "lightLabel", 2);
+$e([
+  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) => {
+  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;
+};
+const Ze = class Ze extends v {
+  constructor() {
+    super(), this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
+  }
+  get form() {
+    return this.internals.form;
+  }
+  get validity() {
+    return this.internals.validity;
+  }
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  checkValidity() {
+    return this.internals.checkValidity();
+  }
+  reportValidity() {
+    return this.internals.reportValidity();
+  }
+  /** Mirror a native inner control's validity onto the host element. */
+  syncValidity(o) {
+    this.internals.setValidity(o.validity, o.validationMessage, o);
+  }
+  renderLabel(o) {
+    return this.label ? l`
+      <label class="label" for=${o}>
+        ${this.label}${this.required ? l`<span class="required-mark" aria-hidden="true"> *</span>` : p}
+      </label>
+    ` : p;
+  }
+  renderNote() {
+    return this.note ? l`<p class="note">${this.note}</p>` : p;
+  }
+};
+Ze.formAssociated = !0;
+let h = Ze;
+te([
+  n()
+], h.prototype, "name");
+te([
+  n()
+], h.prototype, "label");
+te([
+  n()
+], h.prototype, "note");
+te([
+  n({ type: Boolean, reflect: !0 })
+], h.prototype, "disabled");
+te([
+  n({ type: Boolean, reflect: !0 })
+], h.prototype, "required");
+const re = c`
+  :host {
+    display: block;
+    font-family: var(--vox-font-family-base);
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vox-space-1);
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--vox-color-text-1);
+  }
+
+  .required-mark {
+    color: var(--vox-color-danger-1);
+  }
+
+  .note {
+    margin: 0;
+    font-size: 12px;
+    color: var(--vox-color-text-2);
+  }
+
+  .control {
+    box-sizing: border-box;
+    width: 100%;
+    background-color: var(--vox-color-bg);
+    border: 1px solid var(--vox-color-border);
+    border-radius: var(--vox-radius-md);
+    color: var(--vox-color-text-1);
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: var(--vox-space-2) var(--vox-space-3);
+    transition:
+      border-color var(--vox-transition-fast),
+      box-shadow var(--vox-transition-fast);
+  }
+
+  .control:focus {
+    outline: none;
+    border-color: var(--vox-color-brand-1);
+    box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
+  }
+
+  /* Corner flattening when placed inside a <vox-input-group>. */
+  :host([data-vox-group]) .control {
+    border-radius: 0;
+  }
+
+  :host([data-vox-group='start']) .control {
+    border-radius: var(--vox-radius-md) 0 0 var(--vox-radius-md);
+  }
+
+  :host([data-vox-group='end']) .control {
+    border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
+  }
+`, ao = c`
+  :host {
+    display: block;
+    font-family: var(--vox-font-family-base);
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .check {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--vox-space-2);
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--vox-color-text-1);
+  }
+
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && yo(o, a, e), e;
+};
+let q = class extends h {
+  constructor() {
+    super(...arguments), this.checked = !1, this.value = "on";
+  }
+  formResetCallback() {
+    this.checked = !1;
+  }
+  updated() {
+    this.internals.setFormValue(this.checked ? this.value : null), this.internals.setValidity(
+      this.required && !this.checked ? { valueMissing: !0 } : {},
+      "Please check this box.",
+      this.renderRoot.querySelector("input") ?? void 0
+    );
+  }
+  handleChange(t) {
+    this.checked = t.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <label class="check">
+        <input
+          type="checkbox"
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="box" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m4 12 5 5L20 6" />
+          </svg>
+        </span>
+        <span class="text"><slot></slot></span>
+      </label>
+    `;
+  }
+};
+q.styles = [
+  ao,
+  c`
+      .box {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        margin-top: 2px;
+        border: 1px solid var(--vox-color-border);
+        border-radius: var(--vox-radius-sm);
+        background-color: var(--vox-color-bg);
+        color: var(--vox-color-text-inverse);
+        transition:
+          background-color var(--vox-transition-fast),
+          border-color var(--vox-transition-fast);
+      }
+
+      .box svg {
+        width: 12px;
+        height: 12px;
+        opacity: 0;
+      }
+
+      input:checked + .box {
+        background-color: var(--vox-color-brand-3);
+        border-color: var(--vox-color-brand-3);
+      }
+
+      input:checked + .box svg {
+        opacity: 1;
+      }
+
+      input:focus-visible + .box {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+    `
+];
+Ne([
+  n({ type: Boolean, reflect: !0 })
+], q.prototype, "checked", 2);
+Ne([
+  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 = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && $o(o, a, e), e;
+};
+let u = class extends h {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.buttonLabel = "Choose a file", this.fileNames = [];
+  }
+  formResetCallback() {
+    this.fileNames = [], this.inputEl && (this.inputEl.value = ""), this.internals.setFormValue(null);
+  }
+  handleChange() {
+    const t = [...this.inputEl.files ?? []];
+    this.fileNames = t.map((a) => a.name);
+    const o = new FormData();
+    for (const a of t) o.append(this.name, a);
+    this.internals.setFormValue(t.length > 0 ? o : null), this.internals.setValidity(
+      this.required && t.length === 0 ? { valueMissing: !0 } : {},
+      "Please select a file.",
+      this.inputEl
+    ), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <div class="field">
+        ${this.renderLabel("file")}
+        <label>
+          <input
+            id="file"
+            type="file"
+            accept=${j(this.accept)}
+            ?multiple=${this.multiple}
+            ?disabled=${this.disabled}
+            @change=${this.handleChange}
+          />
+          <span class="picker">
+            <span class="button">${this.buttonLabel}</span>
+            <span class="names">
+              ${this.fileNames.length > 0 ? this.fileNames.join(", ") : "No file selected"}
+            </span>
+          </span>
+        </label>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+u.styles = [
+  re,
+  c`
+      input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+      }
+
+      .picker {
+        display: flex;
+        align-items: center;
+        gap: var(--vox-space-3);
+        flex-wrap: wrap;
+      }
+
+      .button {
+        display: inline-flex;
+        align-items: center;
+        padding: 0 var(--vox-space-4);
+        height: 34px;
+        background-color: var(--vox-color-bg-soft);
+        border: 1px dashed var(--vox-color-border);
+        border-radius: var(--vox-radius-md);
+        color: var(--vox-color-text-1);
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition:
+          border-color var(--vox-transition-fast),
+          color var(--vox-transition-fast);
+      }
+
+      .button:hover {
+        border-color: var(--vox-color-brand-1);
+        color: var(--vox-color-brand-1);
+      }
+
+      input:focus-visible ~ .picker .button {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+
+      .names {
+        font-size: 13px;
+        color: var(--vox-color-text-2);
+      }
+    `
+];
+V([
+  n()
+], u.prototype, "accept", 2);
+V([
+  n({ type: Boolean })
+], u.prototype, "multiple", 2);
+V([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Oo(o, a, e), e;
+};
+let f = class extends h {
+  constructor() {
+    super(...arguments), this.type = "text", this.value = "", this.readonly = !1;
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  updated() {
+    this.internals.setFormValue(this.value);
+    const t = this.renderRoot.querySelector("input");
+    t && this.syncValidity(t);
+  }
+  focus(t) {
+    var o;
+    (o = this.renderRoot.querySelector("input")) == null || o.focus(t);
+  }
+  handleInput(t) {
+    this.value = t.target.value;
+  }
+  handleChange() {
+    this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <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)}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          aria-label=${this.label ? p : "text input"}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        />
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+f.styles = re;
+B([
+  n()
+], f.prototype, "type", 2);
+B([
+  n()
+], f.prototype, "value", 2);
+B([
+  n()
+], f.prototype, "placeholder", 2);
+B([
+  n()
+], f.prototype, "autocomplete", 2);
+B([
+  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--)
+    (i = t[s]) && (e = i(e) || e);
+  return e;
+};
+let ke = class extends v {
+  handleSlotChange(t) {
+    const o = t.target.assignedElements();
+    o.forEach((a, r) => {
+      const e = r === 0 ? "start" : r === o.length - 1 ? "end" : "middle";
+      a.setAttribute("data-vox-group", e);
+    });
+  }
+  render() {
+    return l`
+      <div class="group" role="group">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+ke.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .group {
+      display: flex;
+      align-items: stretch;
+    }
+
+    ::slotted(*) {
+      flex: none;
+    }
+
+    ::slotted(vox-input),
+    ::slotted(vox-select) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    ::slotted(span) {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--vox-space-3);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-border);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
+    ::slotted(span[data-vox-group='start']) {
+      border-radius: var(--vox-radius-md) 0 0 var(--vox-radius-md);
+      border-right: none;
+    }
+
+    ::slotted(span[data-vox-group='end']) {
+      border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
+      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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Do(o, a, e), e;
+};
+let k = class extends v {
+  constructor() {
+    super(...arguments), this.value = "", this.checked = !1, this.disabled = !1;
+  }
+  select() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("vox-radio-select", { bubbles: !0, composed: !0 })
+    );
+  }
+  handleKeydown(t) {
+    (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.select());
+  }
+  render() {
+    return l`
+      <span
+        class="radio"
+        role="radio"
+        aria-checked=${this.checked ? "true" : "false"}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.checked ? "0" : "-1"}
+        @click=${this.select}
+        @keydown=${this.handleKeydown}
+      >
+        <span class="circle" aria-hidden="true"></span>
+        <span class="text"><slot></slot></span>
+      </span>
+    `;
+  }
+};
+k.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .radio {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--vox-space-2);
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--vox-color-text-1);
+    }
+
+    .radio:focus {
+      outline: none;
+    }
+
+    .circle {
+      flex: none;
+      box-sizing: border-box;
+      width: 18px;
+      height: 18px;
+      margin-top: 2px;
+      border: 1px solid var(--vox-color-border);
+      border-radius: 50%;
+      background-color: var(--vox-color-bg);
+      transition:
+        border-color var(--vox-transition-fast),
+        box-shadow var(--vox-transition-fast);
+    }
+
+    :host([checked]) .circle {
+      border-color: var(--vox-color-brand-3);
+      border-width: 5px;
+    }
+
+    .radio:focus-visible .circle {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+  `;
+_e([
+  n()
+], k.prototype, "value", 2);
+_e([
+  n({ type: Boolean, reflect: !0 })
+], k.prototype, "checked", 2);
+_e([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && zo(o, a, e), e;
+};
+let pe = class extends h {
+  constructor() {
+    super(...arguments), this.value = "";
+  }
+  get radios() {
+    return [...this.querySelectorAll("vox-radio")];
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  updated() {
+    this.internals.setFormValue(this.value || null), this.internals.setValidity(
+      this.required && !this.value ? { valueMissing: !0 } : {},
+      "Please select an option.",
+      this
+    ), this.syncRadios();
+  }
+  syncRadios() {
+    const t = this.radios, o = t.some((a) => a.value === this.value && this.value !== "");
+    t.forEach((a, r) => {
+      var s, i;
+      a.checked = this.value !== "" && a.value === this.value;
+      const e = o ? a.checked : r === 0;
+      (i = (s = a.shadowRoot) == null ? void 0 : s.querySelector(".radio")) == null || i.setAttribute("tabindex", e ? "0" : "-1");
+    });
+  }
+  handleSelect(t) {
+    const o = t.target;
+    !(o instanceof HTMLElement) || o.tagName !== "VOX-RADIO" || (t.stopPropagation(), this.value !== o.value && (this.value = o.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
+  }
+  handleKeydown(t) {
+    var Je, eo;
+    const a = {
+      ArrowDown: 1,
+      ArrowRight: 1,
+      ArrowUp: -1,
+      ArrowLeft: -1
+    }[t.key];
+    if (!a) return;
+    t.preventDefault();
+    const r = this.radios.filter((De) => !De.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();
+  }
+  render() {
+    return l`
+      <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>` : ""}
+            </span>` : ""}
+        <div
+          class="options"
+          @vox-radio-select=${this.handleSelect}
+          @keydown=${this.handleKeydown}
+        >
+          <slot @slotchange=${this.syncRadios}></slot>
+        </div>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+pe.styles = [
+  re,
+  c`
+      .options {
+        display: flex;
+        flex-direction: column;
+        gap: var(--vox-space-2);
+        margin-top: var(--vox-space-1);
+      }
+    `
+];
+so([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && So(o, a, e), e;
+};
+let L = class extends h {
+  constructor() {
+    super(...arguments), this.value = "";
+  }
+  formResetCallback() {
+    this.value = "", this.syncOptions();
+  }
+  updated() {
+    this.internals.setFormValue(this.value), this.selectEl && this.syncValidity(this.selectEl);
+  }
+  syncOptions() {
+    if (!this.selectEl) return;
+    const t = this.renderRoot.querySelector("slot");
+    t && (this.selectEl.replaceChildren(
+      ...t.assignedElements().filter((o) => o instanceof HTMLOptionElement || o instanceof HTMLOptGroupElement).map((o) => o.cloneNode(!0))
+    ), this.value && (this.selectEl.value = this.value), this.value = this.selectEl.value);
+  }
+  handleChange() {
+    this.value = this.selectEl.value, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <div class="field">
+        ${this.renderLabel("select")}
+        <select
+          id="select"
+          class="control"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        ></select>
+        ${this.renderNote()}
+      </div>
+      <div hidden><slot @slotchange=${this.syncOptions}></slot></div>
+    `;
+  }
+};
+L.styles = [
+  re,
+  c`
+      select.control {
+        appearance: none;
+        padding-right: var(--vox-space-8);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right var(--vox-space-3) center;
+        cursor: pointer;
+      }
+    `
+];
+Me([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Bo(o, a, e), e;
+};
+let N = class extends h {
+  constructor() {
+    super(...arguments), this.checked = !1, this.value = "on";
+  }
+  formResetCallback() {
+    this.checked = !1;
+  }
+  updated() {
+    this.internals.setFormValue(this.checked ? this.value : null);
+  }
+  handleChange(t) {
+    this.checked = t.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <label class="check">
+        <input
+          type="checkbox"
+          role="switch"
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="track" aria-hidden="true"></span>
+        <span class="text"><slot></slot></span>
+      </label>
+    `;
+  }
+};
+N.styles = [
+  ao,
+  c`
+      .track {
+        flex: none;
+        position: relative;
+        width: 36px;
+        height: 20px;
+        margin-top: 1px;
+        border-radius: var(--vox-radius-full);
+        background-color: var(--vox-color-border);
+        transition: background-color var(--vox-transition-fast);
+      }
+
+      .track::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: var(--vox-color-bg);
+        transition: transform var(--vox-transition-fast);
+      }
+
+      input:checked + .track {
+        background-color: var(--vox-color-brand-3);
+      }
+
+      input:checked + .track::after {
+        transform: translateX(16px);
+      }
+
+      input:focus-visible + .track {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+    `
+];
+Te([
+  n({ type: Boolean, reflect: !0 })
+], N.prototype, "checked", 2);
+Te([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && qo(o, a, e), e;
+};
+let g = class extends h {
+  constructor() {
+    super(...arguments), this.value = "", this.rows = 4, this.readonly = !1;
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  updated() {
+    this.internals.setFormValue(this.value);
+    const t = this.renderRoot.querySelector("textarea");
+    t && this.syncValidity(t);
+  }
+  focus(t) {
+    var o;
+    (o = this.renderRoot.querySelector("textarea")) == null || o.focus(t);
+  }
+  handleInput(t) {
+    this.value = t.target.value;
+  }
+  handleChange() {
+    this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <div class="field">
+        ${this.renderLabel("textarea")}
+        <textarea
+          id="textarea"
+          class="control"
+          rows=${this.rows}
+          .value=${ro(this.value)}
+          placeholder=${j(this.placeholder)}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        ></textarea>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+g.styles = [
+  re,
+  c`
+      textarea.control {
+        resize: vertical;
+        min-height: 4em;
+      }
+    `
+];
+ae([
+  n()
+], g.prototype, "value", 2);
+ae([
+  n()
+], g.prototype, "placeholder", 2);
+ae([
+  n({ type: Number })
+], g.prototype, "rows", 2);
+ae([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && No(o, a, e), e;
+};
+let m = class extends v {
+  constructor() {
+    super(...arguments), this.alt = "", this.initials = "", this.size = "md";
+  }
+  render() {
+    return l`
+      <span class="avatar" role=${this.src ? "presentation" : "img"} aria-label=${this.alt}>
+        ${this.src ? l`<img src=${this.src} alt=${this.alt} />` : this.initials}
+      </span>
+    `;
+  }
+};
+m.styles = c`
+    :host {
+      display: inline-block;
+    }
+
+    .avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      border-radius: 50%;
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      font-family: var(--vox-font-family-base);
+      font-weight: 600;
+      user-select: none;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    :host([size='sm']) .avatar {
+      width: 28px;
+      height: 28px;
+      font-size: 11px;
+    }
+
+    :host([size='md']) .avatar {
+      width: 40px;
+      height: 40px;
+      font-size: 14px;
+    }
+
+    :host([size='lg']) .avatar {
+      width: 56px;
+      height: 56px;
+      font-size: 20px;
+    }
+
+    :host([size='xl']) .avatar {
+      width: 80px;
+      height: 80px;
+      font-size: 28px;
+    }
+  `;
+se([
+  n()
+], m.prototype, "src", 2);
+se([
+  n()
+], m.prototype, "alt", 2);
+se([
+  n()
+], m.prototype, "initials", 2);
+se([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && To(o, a, e), e;
+};
+let M = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.reverse = !1, this.hasActions = !1;
+  }
+  handleActionsSlotChange(t) {
+    const o = t.target;
+    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <div class="billboard">
+        <div class="media"><slot name="media"></slot></div>
+        <div class="content">
+          <h2 class="heading">${this.heading}</h2>
+          <div class="body"><slot></slot></div>
+          <div class="actions ${this.hasActions ? "has-content" : ""}">
+            <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+M.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .billboard {
+      display: flex;
+      gap: var(--vox-space-8);
+      align-items: center;
+      flex-wrap: wrap;
+      padding: var(--vox-space-8);
+      background-color: var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+    }
+
+    :host([reverse]) .billboard {
+      flex-direction: row-reverse;
+    }
+
+    .media {
+      flex: 1 1 280px;
+      min-width: 0;
+    }
+
+    .media ::slotted(img) {
+      display: block;
+      max-width: 100%;
+      border-radius: var(--vox-radius-md);
+    }
+
+    .content {
+      flex: 1 1 320px;
+      min-width: 0;
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-3);
+      font-family: var(--vox-font-family-display);
+      font-size: 28px;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      font-size: 16px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      flex-wrap: wrap;
+      margin-top: var(--vox-space-6);
+    }
+
+    .actions:not(.has-content) {
+      display: none;
+    }
+  `;
+Fe([
+  n()
+], M.prototype, "heading", 2);
+Fe([
+  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--)
+    (i = t[s]) && (e = i(e) || e);
+  return e;
+};
+let ze = class extends v {
+  render() {
+    return l`
+      <nav aria-label="Breadcrumbs">
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+ze.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      font-size: 13px;
+    }
+
+    ::slotted(*) {
+      color: var(--vox-color-text-2);
+      text-decoration: none;
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+
+    ::slotted([aria-current='page']) {
+      color: var(--vox-color-text-1);
+      font-weight: 600;
+    }
+
+    ::slotted(*:not(:first-child))::before {
+      content: '/';
+      margin: 0 var(--vox-space-2);
+      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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Ho(o, a, e), e;
+};
+let T = class extends v {
+  constructor() {
+    super(...arguments), this.siteTitle = "", this.href = "/";
+  }
+  render() {
+    return l`
+      <header class="header">
+        <a class="brand" href=${this.href}>
+          <slot name="logo"></slot>
+          ${this.siteTitle ? l`<span>${this.siteTitle}</span>` : p}
+        </a>
+        <nav aria-label="Main">
+          <slot></slot>
+        </nav>
+        <div class="actions">
+          <slot name="actions"></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+T.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+      background-color: var(--vox-color-bg);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-6);
+      flex-wrap: wrap;
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: var(--vox-space-3) var(--vox-space-6);
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      color: var(--vox-color-text-1);
+      font-size: 16px;
+      font-weight: 700;
+      text-decoration: none;
+    }
+
+    .brand ::slotted(img),
+    .brand ::slotted(svg) {
+      height: 28px;
+      width: auto;
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-4);
+      flex-wrap: wrap;
+      flex: 1 1 auto;
+    }
+
+    nav ::slotted(a) {
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      transition: color var(--vox-transition-fast);
+    }
+
+    nav ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+    }
+
+    nav ::slotted(a[aria-current='page']) {
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-3);
+    }
+  `;
+Ie([
+  n({ attribute: "site-title" })
+], T.prototype, "siteTitle", 2);
+Ie([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Ko(o, a, e), e;
+};
+let y = class extends v {
+  constructor() {
+    super(...arguments), this.previousLabel = "", this.nextLabel = "";
+  }
+  render() {
+    return l`
+      <nav aria-label="Series">
+        ${this.previousHref ? l`
+              <a href=${this.previousHref} rel="prev">
+                <span class="direction">← Previous</span>
+                <span class="title">${this.previousLabel}</span>
+              </a>
+            ` : p}
+        ${this.nextHref ? l`
+              <a class="next" href=${this.nextHref} rel="next">
+                <span class="direction">Next →</span>
+                <span class="title">${this.nextLabel}</span>
+              </a>
+            ` : p}
+      </nav>
+    `;
+  }
+};
+y.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--vox-space-4);
+    }
+
+    a {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 0 1 48%;
+      padding: var(--vox-space-3) var(--vox-space-4);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a:hover,
+    a:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .next {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    .direction {
+      font-size: 12px;
+      color: var(--vox-color-text-3);
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--vox-color-brand-1);
+    }
+  `;
+ie([
+  n({ attribute: "previous-href" })
+], y.prototype, "previousHref", 2);
+ie([
+  n({ attribute: "previous-label" })
+], y.prototype, "previousLabel", 2);
+ie([
+  n({ attribute: "next-href" })
+], y.prototype, "nextHref", 2);
+ie([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Xo(o, a, e), e;
+};
+let he = class extends v {
+  constructor() {
+    super(...arguments), this.label = "Section";
+  }
+  render() {
+    return l`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+he.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+  `;
+b([
+  n()
+], he.prototype, "label", 2);
+he = b([
+  d("vox-sidenav")
+], he);
+let F = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.open = !1;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  render() {
+    return l`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        @click=${this.toggle}
+      >
+        ${this.heading}
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m9 6 6 6-6 6" />
+        </svg>
+      </button>
+      <div class="items"><slot></slot></div>
+    `;
+  }
+};
+F.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-2);
+      width: 100%;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .trigger:hover {
+      color: var(--vox-color-brand-1);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    .chevron {
+      flex: none;
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(90deg);
+    }
+
+    .items {
+      display: none;
+      flex-direction: column;
+      gap: 2px;
+      padding-left: var(--vox-space-3);
+      border-left: 1px solid var(--vox-color-divider);
+      margin-left: var(--vox-space-3);
+    }
+
+    :host([open]) .items {
+      display: flex;
+    }
+  `;
+b([
+  n()
+], F.prototype, "heading", 2);
+b([
+  n({ type: Boolean, reflect: !0 })
+], F.prototype, "open", 2);
+F = b([
+  d("vox-sidenav-group")
+], F);
+let I = class extends v {
+  constructor() {
+    super(...arguments), this.href = "#", this.current = !1;
+  }
+  render() {
+    return l`
+      <a href=${this.href} aria-current=${this.current ? "page" : "false"}>
+        <slot></slot>
+      </a>
+    `;
+  }
+};
+I.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: block;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      text-decoration: none;
+      transition:
+        color var(--vox-transition-fast),
+        background-color var(--vox-transition-fast);
+    }
+
+    a:hover {
+      color: var(--vox-color-text-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    :host([current]) a {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+    }
+  `;
+b([
+  n()
+], I.prototype, "href", 2);
+b([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Wo(o, a, e), e;
+};
+let xe = class extends v {
+  constructor() {
+    super(...arguments), this.label = "Secondary";
+  }
+  render() {
+    return l`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+xe.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      gap: var(--vox-space-1);
+      overflow-x: auto;
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    ::slotted(a) {
+      padding: var(--vox-space-2) var(--vox-space-4);
+      margin-bottom: -1px;
+      border-bottom: 2px solid transparent;
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      white-space: nowrap;
+      transition: color var(--vox-transition-fast);
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-text-1);
+    }
+
+    ::slotted(a[aria-current='page']) {
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+  `;
+io([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Zo(o, a, e), e;
+};
+let Ee = class extends v {
+  get tabs() {
+    return [...this.querySelectorAll("vox-tab")];
+  }
+  get panels() {
+    return [...this.querySelectorAll("vox-tab-panel")];
+  }
+  sync() {
+    const t = this.tabs;
+    t.length > 0 && !t.some((a) => a.selected) && (t[0].selected = !0);
+    const o = t.find((a) => a.selected);
+    this.panels.forEach((a) => {
+      a.active = a.name === (o == null ? void 0 : o.panel);
+    });
+  }
+  handleSelect(t) {
+    const o = t.target;
+    o.tagName === "VOX-TAB" && (this.tabs.forEach((a) => a.selected = a === o), this.sync(), this.dispatchEvent(
+      new CustomEvent("vox-tab-change", {
+        detail: { panel: o.panel },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  handleKeydown(t) {
+    const a = { ArrowRight: 1, ArrowLeft: -1 }[t.key];
+    if (!a) return;
+    t.preventDefault();
+    const r = this.tabs, e = r.findIndex((i) => i.selected), s = r[(e + a + r.length) % r.length];
+    s.select(), s.focusTab();
+  }
+  render() {
+    return l`
+      <div
+        class="tablist"
+        role="tablist"
+        @vox-tab-select=${this.handleSelect}
+        @keydown=${this.handleKeydown}
+      >
+        <slot name="tab" @slotchange=${this.sync}></slot>
+      </div>
+      <slot @slotchange=${this.sync}></slot>
+    `;
+  }
+};
+Ee.styles = c`
+    :host {
+      display: block;
+    }
+
+    .tablist {
+      display: flex;
+      gap: var(--vox-space-1);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+  `;
+Ee = P([
+  d("vox-tabs")
+], Ee);
+let R = class extends v {
+  constructor() {
+    super(...arguments), this.panel = "", this.selected = !1;
+  }
+  select() {
+    this.dispatchEvent(
+      new CustomEvent("vox-tab-select", { bubbles: !0, composed: !0 })
+    );
+  }
+  focusTab() {
+    var t;
+    (t = this.renderRoot.querySelector(".tab")) == null || t.focus();
+  }
+  render() {
+    return l`
+      <button
+        class="tab"
+        role="tab"
+        aria-selected=${this.selected ? "true" : "false"}
+        tabindex=${this.selected ? "0" : "-1"}
+        @click=${this.select}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+R.styles = c`
+    :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);
+    }
+  `;
+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;
+    }
+
+    :host([active]) {
+      display: block;
+    }
+  `;
+P([
+  n()
+], H.prototype, "name", 2);
+P([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && et(o, a, e), e;
+};
+let w = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.open = !1, this.lightDismiss = !1, this.hasFooter = !1;
+  }
+  show() {
+    this.open = !0;
+  }
+  close() {
+    this.open = !1;
+  }
+  updated() {
+    this.open && !this.dialogEl.open ? this.dialogEl.showModal() : !this.open && this.dialogEl.open && this.dialogEl.close();
+  }
+  handleNativeClose() {
+    this.open = !1, this.dispatchEvent(
+      new CustomEvent("vox-close", { bubbles: !0, composed: !0 })
+    );
+  }
+  handleClick(t) {
+    this.lightDismiss && t.target === this.dialogEl && this.close();
+  }
+  handleFooterSlotChange(t) {
+    const o = t.target;
+    this.hasFooter = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <dialog
+        aria-label=${this.heading || p}
+        @close=${this.handleNativeClose}
+        @click=${this.handleClick}
+      >
+        <div class="header">
+          <h2 class="heading">${this.heading}</h2>
+          <button class="close" aria-label="Close dialog" @click=${this.close}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="body"><slot></slot></div>
+        <div class="footer ${this.hasFooter ? "has-content" : ""}">
+          <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+        </div>
+      </dialog>
+    `;
+  }
+};
+w.styles = c`
+    dialog {
+      box-sizing: border-box;
+      width: min(90vw, 480px);
+      padding: 0;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-lg);
+      background-color: var(--vox-color-bg-elv);
+      color: var(--vox-color-text-1);
+      font-family: var(--vox-font-family-base);
+      box-shadow: var(--vox-shadow-2);
+    }
+
+    dialog::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4) var(--vox-space-6);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-2);
+      cursor: pointer;
+    }
+
+    .close:hover {
+      color: var(--vox-color-text-1);
+      background-color: var(--vox-color-bg-soft);
+    }
+
+    .close:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+    }
+
+    .close svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .body {
+      padding: var(--vox-space-6);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4) var(--vox-space-6);
+      border-top: 1px solid var(--vox-color-divider);
+    }
+
+    .footer:not(.has-content) {
+      display: none;
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+ne([
+  n()
+], w.prototype, "heading", 2);
+ne([
+  n({ type: Boolean })
+], w.prototype, "open", 2);
+ne([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && tt(o, a, e), e;
+};
+let U = class extends v {
+  constructor() {
+    super(...arguments), this.summary = "Show details", this.open = !1;
+  }
+  toggle() {
+    this.open = !this.open, this.dispatchEvent(
+      new CustomEvent("vox-toggle", { bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return l`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        @click=${this.toggle}
+      >
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m9 6 6 6-6 6" />
+        </svg>
+        ${this.summary}
+      </button>
+      <div class="panel" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+U.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      padding: 0;
+      background: none;
+      border: none;
+      color: var(--vox-color-brand-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .trigger:hover {
+      color: var(--vox-color-brand-2);
+      text-decoration: underline;
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    .chevron {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(90deg);
+    }
+
+    .panel {
+      margin-top: var(--vox-space-3);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .panel[hidden] {
+      display: none;
+    }
+  `;
+Re([
+  n()
+], U.prototype, "summary", 2);
+Re([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && at(o, a, e), e;
+};
+let K = class extends v {
+  constructor() {
+    super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (t) => {
+      this.open && !t.composedPath().includes(this) && (this.open = !1);
+    }, this.handleKeydown = (t) => {
+      var o;
+      if (t.key === "Escape" && this.open) {
+        this.open = !1, (o = this.renderRoot.querySelector(".trigger")) == null || o.focus();
+        return;
+      }
+      if ((t.key === "ArrowDown" || t.key === "ArrowUp") && this.open) {
+        t.preventDefault();
+        const a = [...this.querySelectorAll("a, button")];
+        if (a.length === 0) return;
+        const r = document.activeElement, e = a.indexOf(r), s = t.key === "ArrowDown" ? 1 : -1;
+        a[(Math.max(e, 0) + s + a.length) % a.length].focus();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  render() {
+    return l`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-haspopup="true"
+        @click=${this.toggle}
+      >
+        ${this.label}
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+      <div class="menu">
+        <slot @click=${() => this.open = !1}></slot>
+      </div>
+    `;
+  }
+};
+K.styles = c`
+    :host {
+      position: relative;
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      padding: 0 var(--vox-space-4);
+      height: 38px;
+      background-color: var(--vox-color-bg-soft);
+      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;
+      transition:
+        border-color var(--vox-transition-fast),
+        color var(--vox-transition-fast);
+    }
+
+    .trigger:hover {
+      border-color: var(--vox-color-brand-1);
+      color: var(--vox-color-brand-1);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .chevron {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 10;
+      min-width: max(100%, 180px);
+      display: none;
+      flex-direction: column;
+      padding: var(--vox-space-2);
+      background-color: var(--vox-color-bg-elv);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      box-shadow: var(--vox-shadow-2);
+    }
+
+    :host([open]) .menu {
+      display: flex;
+    }
+
+    ::slotted(a),
+    ::slotted(button) {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      text-align: left;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    ::slotted(a:hover),
+    ::slotted(button:hover),
+    ::slotted(a:focus-visible),
+    ::slotted(button:focus-visible) {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      outline: none;
+    }
+
+    ::slotted(hr) {
+      width: 100%;
+      margin: var(--vox-space-1) 0;
+      border: none;
+      border-top: 1px solid var(--vox-color-divider);
+    }
+  `;
+He([
+  n()
+], K.prototype, "label", 2);
+He([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && it(o, a, e), e;
+};
+let ue = class extends v {
+  constructor() {
+    super(...arguments), this.single = !1;
+  }
+  handleToggle(t) {
+    if (!this.single) return;
+    const o = t.target;
+    o.open && this.querySelectorAll("vox-accordion-item").forEach(
+      (a) => {
+        a !== o && (a.open = !1);
+      }
+    );
+  }
+  render() {
+    return l`<slot @vox-toggle=${this.handleToggle}></slot>`;
+  }
+};
+ue.styles = c`
+    :host {
+      display: block;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      overflow: hidden;
+    }
+
+    ::slotted(vox-accordion-item:not(:first-child)) {
+      border-top: 1px solid var(--vox-color-divider);
+    }
+  `;
+le([
+  n({ type: Boolean })
+], ue.prototype, "single", 2);
+ue = le([
+  d("vox-accordion")
+], ue);
+let G = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.open = !1;
+  }
+  toggle() {
+    this.open = !this.open, this.dispatchEvent(
+      new CustomEvent("vox-toggle", { bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return l`
+      <h3 style="margin:0">
+        <button
+          class="trigger"
+          aria-expanded=${this.open ? "true" : "false"}
+          @click=${this.toggle}
+        >
+          ${this.heading}
+          <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+      </h3>
+      <div class="panel" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+G.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-3);
+      width: 100%;
+      padding: var(--vox-space-4);
+      background: none;
+      border: none;
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 15px;
+      font-weight: 600;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .trigger:hover {
+      color: var(--vox-color-brand-1);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    .chevron {
+      flex: none;
+      width: 16px;
+      height: 16px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .panel {
+      padding: 0 var(--vox-space-4) var(--vox-space-4);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .panel[hidden] {
+      display: none;
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+le([
+  n()
+], G.prototype, "heading", 2);
+le([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && lt(o, a, e), e;
+};
+let $ = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "info", this.heading = "", this.dismissible = !1, this.open = !0;
+  }
+  dismiss() {
+    this.open = !1, this.dispatchEvent(
+      new CustomEvent("vox-dismiss", { bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return l`
+      <div class="alert ${this.variant}" role="alert">
+        <div class="body">
+          ${this.heading ? l`<p class="heading">${this.heading}</p>` : p}
+          <slot></slot>
+        </div>
+        ${this.dismissible ? l`
+              <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}
+      </div>
+    `;
+  }
+};
+$.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    :host(:not([open])) {
+      display: none;
+    }
+
+    .alert {
+      display: flex;
+      gap: var(--vox-space-3);
+      align-items: flex-start;
+      padding: var(--vox-space-4);
+      border-radius: var(--vox-radius-md);
+      border-left: 4px solid;
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      flex: 1 1 auto;
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-1);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .info {
+      background-color: var(--vox-color-brand-soft);
+      border-color: var(--vox-color-brand-1);
+    }
+    .info .heading {
+      color: var(--vox-color-brand-1);
+    }
+
+    .success {
+      background-color: var(--vox-color-tip-soft);
+      border-color: var(--vox-color-tip-1);
+    }
+    .success .heading {
+      color: var(--vox-color-tip-1);
+    }
+
+    .warning {
+      background-color: var(--vox-color-warning-soft);
+      border-color: var(--vox-color-warning-1);
+    }
+    .warning .heading {
+      color: var(--vox-color-warning-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-soft);
+      border-color: var(--vox-color-danger-1);
+    }
+    .danger .heading {
+      color: var(--vox-color-danger-1);
+    }
+
+    .close {
+      flex: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-2);
+      cursor: pointer;
+    }
+
+    .close:hover {
+      color: var(--vox-color-text-1);
+    }
+
+    .close:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+    }
+
+    .close svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+ce([
+  n()
+], $.prototype, "variant", 2);
+ce([
+  n()
+], $.prototype, "heading", 2);
+ce([
+  n({ type: Boolean })
+], $.prototype, "dismissible", 2);
+ce([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && dt(o, a, e), e;
+};
+let fe = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "brand";
+  }
+  render() {
+    return l`<span class="badge ${this.variant}"><slot></slot></span>`;
+  }
+};
+fe.styles = c`
+    :host {
+      display: inline-block;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 10px;
+      border-radius: var(--vox-radius-full);
+      font-family: var(--vox-font-family-base);
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.6;
+      white-space: nowrap;
+    }
+
+    .brand {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+    }
+
+    .tip {
+      background-color: var(--vox-color-tip-soft);
+      color: var(--vox-color-tip-1);
+    }
+
+    .warning {
+      background-color: var(--vox-color-warning-soft);
+      color: var(--vox-color-warning-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-soft);
+      color: var(--vox-color-danger-1);
+    }
+
+    .neutral {
+      background-color: var(--vox-color-bg-soft);
+      color: var(--vox-color-text-2);
+    }
+  `;
+no([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && pt(o, a, e), e;
+};
+let X = 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`
+      <time class="tile" datetime=${this.date}>
+        <span class="month">${a}</span>
+        <span class="day">${r}</span>
+      </time>
+    `;
+  }
+};
+X.styles = c`
+    :host {
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .tile {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 56px;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      overflow: hidden;
+      background-color: var(--vox-color-bg-elv);
+    }
+
+    .month {
+      align-self: stretch;
+      padding: 2px var(--vox-space-2);
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      text-align: center;
+    }
+
+    .day {
+      padding: var(--vox-space-1) var(--vox-space-2);
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--vox-color-text-1);
+    }
+  `;
+Ue([
+  n()
+], X.prototype, "date", 2);
+Ue([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && xt(o, a, e), e;
+};
+const ft = {
+  info: "Info",
+  tip: "Tip",
+  warning: "Warning",
+  danger: "Danger"
+};
+let Q = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "info";
+  }
+  render() {
+    return l`
+      <div class="callout ${this.variant}" role="note">
+        <p class="heading">${this.heading ?? ft[this.variant]}</p>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+Q.styles = c`
+    :host {
+      display: block;
+    }
+
+    .callout {
+      border-radius: var(--vox-radius-md);
+      padding: var(--vox-space-4);
+      font-family: var(--vox-font-family-base);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-2);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .info {
+      background-color: var(--vox-color-bg-soft);
+    }
+    .info .heading {
+      color: var(--vox-color-text-1);
+    }
+
+    .tip {
+      background-color: var(--vox-color-tip-soft);
+    }
+    .tip .heading {
+      color: var(--vox-color-tip-1);
+    }
+
+    .warning {
+      background-color: var(--vox-color-warning-soft);
+    }
+    .warning .heading {
+      color: var(--vox-color-warning-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-soft);
+    }
+    .danger .heading {
+      color: var(--vox-color-danger-1);
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+Ke([
+  n()
+], Q.prototype, "variant", 2);
+Ke([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && bt(o, a, e), e;
+};
+let z = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.hasIcon = !1, this.hasBadge = !1, this.hasFooter = !1;
+  }
+  handleIconSlotChange(t) {
+    const o = t.target;
+    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  handleBadgeSlotChange(t) {
+    const o = t.target;
+    this.hasBadge = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  handleFooterSlotChange(t) {
+    const o = t.target;
+    this.hasFooter = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    const t = l`
+      <div class="badge ${this.hasBadge ? "has-badge" : ""}">
+        <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
+      </div>
+      <div class="icon ${this.hasIcon ? "has-icon" : ""}">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+      </div>
+      <h3 class="heading">${this.heading}</h3>
+      <div class="body"><slot></slot></div>
+      <div class="footer ${this.hasFooter ? "has-footer" : ""}">
+        <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>`;
+  }
+};
+z.styles = c`
+    :host {
+      display: block;
+    }
+
+    .card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+      padding: var(--vox-space-6);
+      font-family: var(--vox-font-family-base);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    .badge {
+      position: absolute;
+      top: var(--vox-space-6);
+      right: var(--vox-space-6);
+    }
+
+    .badge:not(.has-badge) {
+      display: none;
+    }
+
+    a.card:hover,
+    a.card:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a.card:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      margin-bottom: var(--vox-space-4);
+      background-color: var(--vox-color-bg-elv);
+      border-radius: var(--vox-radius-md);
+      font-size: 24px;
+    }
+
+    .icon:not(.has-icon) {
+      display: none;
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.5;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      margin-top: var(--vox-space-2);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .footer {
+      margin-top: auto;
+      padding-top: var(--vox-space-4);
+    }
+
+    .footer:not(.has-footer) {
+      display: none;
+    }
+  `;
+Oe([
+  n()
+], z.prototype, "heading", 2);
+Oe([
+  n()
+], z.prototype, "href", 2);
+Oe([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && mt(o, a, e), e;
+};
+let be = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.hasBody = !1, this.hasActions = !1;
+  }
+  handleBodySlotChange(t) {
+    const o = t.target;
+    this.hasBody = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  handleActionsSlotChange(t) {
+    const o = t.target;
+    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <div class="band">
+        ${this.heading ? l`<h2 class="heading">${this.heading}</h2>` : p}
+        <div class="body ${this.hasBody ? "has-content" : ""}">
+          <slot @slotchange=${this.handleBodySlotChange}></slot>
+        </div>
+        <div class="actions ${this.hasActions ? "has-content" : ""}">
+          <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+be.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .band {
+      text-align: center;
+      padding: var(--vox-space-8);
+      background-color: var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+    }
+
+    .heading {
+      margin: 0;
+      font-family: var(--vox-font-family-display);
+      font-size: 28px;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 36rem;
+      margin: var(--vox-space-3) auto 0;
+      font-size: 16px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .body:not(.has-content) {
+      display: none;
+    }
+
+    .body ::slotted(a) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+
+    .body ::slotted(a:hover) {
+      color: var(--vox-color-brand-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: var(--vox-space-6);
+    }
+
+    .actions:not(.has-content) {
+      display: none;
+    }
+  `;
+lo([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && wt(o, a, e), e;
+};
+let ge = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "";
+  }
+  render() {
+    return l`
+      <div class="empty">
+        <div class="icon"><slot name="icon"></slot></div>
+        <h3 class="heading">${this.heading}</h3>
+        <div class="body"><slot></slot></div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </div>
+    `;
+  }
+};
+ge.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: var(--vox-space-8);
+      border: 1px dashed var(--vox-color-border);
+      border-radius: var(--vox-radius-lg);
+    }
+
+    .icon {
+      font-size: 32px;
+      margin-bottom: var(--vox-space-3);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 32rem;
+      margin-top: var(--vox-space-2);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-top: var(--vox-space-4);
+    }
+  `;
+co([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && _t(o, a, e), e;
+};
+let Se = class extends v {
+  render() {
+    return l`
+      <footer>
+        <div class="inner">
+          <div class="columns"><slot></slot></div>
+          <div class="bottom"><slot name="bottom"></slot></div>
+        </div>
+      </footer>
+    `;
+  }
+};
+Se.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+      background-color: var(--vox-color-bg-alt);
+      border-top: 1px solid var(--vox-color-divider);
+    }
+
+    .inner {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: var(--vox-space-8) var(--vox-space-6);
+    }
+
+    .columns {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: var(--vox-space-6);
+    }
+
+    .bottom {
+      margin-top: var(--vox-space-8);
+      padding-top: var(--vox-space-4);
+      border-top: 1px solid var(--vox-color-divider);
+      font-size: 13px;
+      color: var(--vox-color-text-3);
+    }
+  `;
+Se = Ge([
+  d("vox-footer")
+], Se);
+let me = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "";
+  }
+  render() {
+    return l`
+      <h3 class="heading">${this.heading}</h3>
+      <div class="links"><slot></slot></div>
+    `;
+  }
+};
+me.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-3);
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-text-1);
+    }
+
+    .links {
+      display: flex;
+      flex-direction: column;
+      gap: var(--vox-space-2);
+    }
+
+    ::slotted(a) {
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      text-decoration: none;
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+  `;
+Ge([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Pt(o, a, e), e;
+};
+let E = class extends v {
+  constructor() {
+    super(...arguments), this.cols = 0, this.min = "240px", this.gap = "md";
+  }
+  updated() {
+    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>`;
+  }
+};
+E.styles = c`
+    :host {
+      display: grid;
+    }
+
+    :host([gap='sm']) {
+      gap: var(--vox-space-2);
+    }
+
+    :host([gap='md']) {
+      gap: var(--vox-space-4);
+    }
+
+    :host([gap='lg']) {
+      gap: var(--vox-space-6);
+    }
+  `;
+Pe([
+  n({ type: Number })
+], E.prototype, "cols", 2);
+Pe([
+  n()
+], E.prototype, "min", 2);
+Pe([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && jt(o, a, e), e;
+};
+let W = class extends v {
+  constructor() {
+    super(...arguments), this.eyebrow = "", this.heading = "", this.hasActions = !1;
+  }
+  handleActionsSlotChange(t) {
+    const o = t.target;
+    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <header class="hero">
+        ${this.eyebrow ? l`<p class="eyebrow">${this.eyebrow}</p>` : p}
+        <h1 class="heading">${this.heading}</h1>
+        <div class="body"><slot></slot></div>
+        <div class="actions ${this.hasActions ? "has-content" : ""}">
+          <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+W.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .hero {
+      padding: var(--vox-space-8) 0;
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .eyebrow {
+      margin: 0 0 var(--vox-space-2);
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-brand-1);
+    }
+
+    .heading {
+      margin: 0;
+      font-family: var(--vox-font-family-display);
+      font-size: 36px;
+      font-weight: 600;
+      line-height: 1.25;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 44rem;
+      margin-top: var(--vox-space-3);
+      font-size: 17px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .body ::slotted(a) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+
+    .body ::slotted(a:hover) {
+      color: var(--vox-color-brand-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      flex-wrap: wrap;
+      margin-top: var(--vox-space-6);
+    }
+
+    .actions:not(.has-content) {
+      display: none;
+    }
+  `;
+Xe([
+  n()
+], W.prototype, "eyebrow", 2);
+Xe([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && kt(o, a, e), e;
+};
+let Ve = class extends v {
+  render() {
+    return l`<slot></slot>`;
+  }
+};
+Ve.styles = c`
+    :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 {
+  constructor() {
+    super(...arguments), this.href = "#", this.heading = "";
+  }
+  render() {
+    return l`
+      <a href=${this.href}>
+        <span class="heading">
+          ${this.heading}
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M5 12h14" />
+            <path d="m13 6 6 6-6 6" />
+          </svg>
+        </span>
+        <span class="body"><slot></slot></span>
+      </a>
+    `;
+  }
+};
+Y.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: block;
+      height: 100%;
+      box-sizing: border-box;
+      padding: var(--vox-space-4);
+      border-bottom: 2px solid var(--vox-color-divider);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a:hover,
+    a:focus-visible {
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .heading {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--vox-color-brand-1);
+    }
+
+    .heading svg {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    a:hover .heading svg {
+      transform: translateX(3px);
+    }
+
+    .body {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+Ce([
+  n()
+], Y.prototype, "href", 2);
+Ce([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Et(o, a, e), e;
+};
+let Z = class extends v {
+  constructor() {
+    super(...arguments), this.size = "md", this.label = "Loading";
+  }
+  render() {
+    return l`
+      <div role="status">
+        <div class="spinner"></div>
+        <span class="visually-hidden">${this.label}</span>
+      </div>
+    `;
+  }
+};
+Z.styles = c`
+    :host {
+      display: inline-block;
+    }
+
+    .spinner {
+      box-sizing: border-box;
+      border-radius: 50%;
+      border-style: solid;
+      border-color: var(--vox-color-brand-soft);
+      border-top-color: var(--vox-color-brand-3);
+      animation: spin 0.8s linear infinite;
+    }
+
+    :host([size='sm']) .spinner {
+      width: 16px;
+      height: 16px;
+      border-width: 2px;
+    }
+
+    :host([size='md']) .spinner {
+      width: 28px;
+      height: 28px;
+      border-width: 3px;
+    }
+
+    :host([size='lg']) .spinner {
+      width: 44px;
+      height: 44px;
+      border-width: 4px;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation-duration: 2.4s;
+      }
+    }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+  `;
+Qe([
+  n({ reflect: !0 })
+], Z.prototype, "size", 2);
+Qe([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Vt(o, a, e), e;
+};
+let ye = class extends v {
+  constructor() {
+    super(...arguments), this.label = "Pagination";
+  }
+  render() {
+    return l`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+ye.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      gap: var(--vox-space-1);
+      flex-wrap: wrap;
+    }
+
+    ::slotted(a) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 34px;
+      height: 34px;
+      padding: 0 var(--vox-space-2);
+      border-radius: var(--vox-radius-md);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      transition:
+        color var(--vox-transition-fast),
+        background-color var(--vox-transition-fast);
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+      background-color: var(--vox-color-brand-soft);
+    }
+
+    ::slotted(a[aria-current='page']) {
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+      font-weight: 600;
+    }
+  `;
+vo([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && At(o, a, e), e;
+};
+let J = class extends v {
+  constructor() {
+    super(...arguments), this.attribution = "", this.detail = "";
+  }
+  render() {
+    return l`
+      <blockquote>
+        <div class="text"><slot></slot></div>
+        ${this.attribution ? l`
+              <footer>
+                <span class="attribution">${this.attribution}</span>
+                ${this.detail ? l`<span class="detail"> — ${this.detail}</span>` : p}
+              </footer>
+            ` : p}
+      </blockquote>
+    `;
+  }
+};
+J.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    blockquote {
+      margin: 0;
+      padding-left: var(--vox-space-6);
+      border-left: 4px solid var(--vox-color-brand-3);
+    }
+
+    .text {
+      font-family: var(--vox-font-family-display);
+      font-style: italic;
+      font-size: 20px;
+      line-height: 1.6;
+      color: var(--vox-color-text-1);
+    }
+
+    .text::before {
+      content: '“';
+    }
+
+    .text::after {
+      content: '”';
+    }
+
+    footer {
+      margin-top: var(--vox-space-3);
+      font-size: 14px;
+    }
+
+    .attribution {
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .detail {
+      color: var(--vox-color-text-2);
+    }
+  `;
+We([
+  n()
+], J.prototype, "attribution", 2);
+We([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Lt(o, a, e), e;
+};
+let we = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.hasDescription = !1;
+  }
+  handleDescriptionSlotChange(t) {
+    const o = t.target;
+    this.hasDescription = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <h2 class="heading">${this.heading}</h2>
+      <div class="description ${this.hasDescription ? "has-content" : ""}">
+        <slot
+          name="description"
+          @slotchange=${this.handleDescriptionSlotChange}
+        ></slot>
+      </div>
+      <div class="grid">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+we.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 22px;
+      font-weight: 700;
+      line-height: 1.3;
+      color: var(--vox-color-text-1);
+    }
+
+    .description {
+      margin: var(--vox-space-2) 0 0;
+      font-size: 15px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .description:not(.has-content) {
+      display: none;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+      gap: var(--vox-space-4);
+      margin-top: var(--vox-space-6);
+    }
+  `;
+C([
+  n()
+], we.prototype, "heading", 2);
+we = C([
+  d("vox-sponsor-tier")
+], we);
+let _ = class extends v {
+  constructor() {
+    super(...arguments), this.name = "", this.hasBody = !1;
+  }
+  handleBodySlotChange(t) {
+    const o = t.target;
+    this.hasBody = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    const t = l`
+      <div class="logo ${this.logo ? "has-logo" : ""}">
+        ${this.logo ? l`<img src=${this.logo} alt=${this.name} />` : p}
+      </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
+          class="sponsor"
+          href=${this.href}
+          target=${this.target ?? p}
+          >${t}</a
+        >` : l`<div class="sponsor">${t}</div>`;
+  }
+};
+_.styles = c`
+    :host {
+      display: block;
+    }
+
+    .sponsor {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+      font-family: var(--vox-font-family-base);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a.sponsor:hover,
+    a.sponsor:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a.sponsor:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 64px;
+      background-color: var(--vox-color-bg-elv);
+      border-radius: var(--vox-radius-md);
+    }
+
+    .logo:not(.has-logo) {
+      display: none;
+    }
+
+    .logo img {
+      max-width: 80%;
+      max-height: 40px;
+      object-fit: contain;
+    }
+
+    .name {
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .body:not(.has-content) {
+      display: none;
+    }
+  `;
+C([
+  n()
+], _.prototype, "name", 2);
+C([
+  n()
+], _.prototype, "href", 2);
+C([
+  n()
+], _.prototype, "logo", 2);
+C([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Mt(o, a, e), e;
+};
+let ee = class extends v {
+  constructor() {
+    super(...arguments), this.value = "", this.label = "";
+  }
+  render() {
+    return l`
+      <div class="value">${this.value}</div>
+      <div class="label">${this.label}</div>
+      <div class="description"><slot></slot></div>
+    `;
+  }
+};
+ee.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .value {
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 1.1;
+      color: var(--vox-color-brand-1);
+    }
+
+    .label {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .description {
+      margin-top: var(--vox-space-1);
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+Ye([
+  n()
+], ee.prototype, "value", 2);
+Ye([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Ft(o, a, e), e;
+};
+let Be = class extends v {
+  numberSteps() {
+    this.querySelectorAll("vox-step").forEach((t, o) => {
+      t.number = o + 1;
+    });
+  }
+  render() {
+    return l`
+      <div class="steps" role="list" aria-label="Progress">
+        <slot @slotchange=${this.numberSteps}></slot>
+      </div>
+    `;
+  }
+};
+Be.styles = c`
+    :host {
+      display: block;
+    }
+
+    .steps {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    ::slotted(vox-step) {
+      flex: 1 1 0;
+    }
+  `;
+Be = de([
+  d("vox-step-indicator")
+], Be);
+let S = class extends v {
+  constructor() {
+    super(...arguments), this.label = "", this.state = "upcoming", this.number = 1;
+  }
+  render() {
+    return l`
+      <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">
+                <path d="m4 12 5 5L20 6" />
+              </svg>` : this.number}
+        </span>
+        <span class="label">${this.label}</span>
+      </div>
+    `;
+  }
+};
+S.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .step {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--vox-space-2);
+      padding: 0 var(--vox-space-2);
+    }
+
+    /* Connector line to the previous step. */
+    :host(:not(:first-child)) .step::before {
+      content: '';
+      position: absolute;
+      top: 14px;
+      right: 50%;
+      width: 100%;
+      height: 2px;
+      background-color: var(--vox-color-divider);
+      z-index: 0;
+    }
+
+    :host([state='complete']) .step::before {
+      background-color: var(--vox-color-brand-3);
+    }
+
+    .marker {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid var(--vox-color-divider);
+      background-color: var(--vox-color-bg);
+      color: var(--vox-color-text-2);
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    :host([state='complete']) .marker {
+      background-color: var(--vox-color-brand-3);
+      border-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    :host([state='current']) .marker {
+      border-color: var(--vox-color-brand-3);
+      color: var(--vox-color-brand-1);
+    }
+
+    .marker svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .label {
+      font-size: 13px;
+      color: var(--vox-color-text-2);
+    }
+
+    :host([state='current']) .label {
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+  `;
+de([
+  n()
+], S.prototype, "label", 2);
+de([
+  n({ reflect: !0 })
+], S.prototype, "state", 2);
+de([
+  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--)
+    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
+  return r && e && Rt(o, a, e), e;
+};
+let Ae = class extends v {
+  render() {
+    return l`<slot></slot>`;
+  }
+};
+Ae.styles = c`
+    :host {
+      display: block;
+    }
+  `;
+Ae = je([
+  d("vox-timeline")
+], Ae);
+let oe = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.date = "";
+  }
+  render() {
+    return l`
+      <div class="item">
+        <span class="dot" aria-hidden="true"></span>
+        ${this.date ? l`<div class="date">${this.date}</div>` : p}
+        <h3 class="heading">${this.heading}</h3>
+        <div class="body"><slot></slot></div>
+      </div>
+    `;
+  }
+};
+oe.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .item {
+      position: relative;
+      padding: 0 0 var(--vox-space-6) var(--vox-space-6);
+      border-left: 2px solid var(--vox-color-divider);
+    }
+
+    :host(:last-child) .item {
+      border-left-color: transparent;
+      padding-bottom: 0;
+    }
+
+    .dot {
+      position: absolute;
+      top: 4px;
+      left: -7px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--vox-color-brand-3);
+      border: 2px solid var(--vox-color-bg);
+    }
+
+    .date {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-text-3);
+    }
+
+    .heading {
+      margin: var(--vox-space-1) 0 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+je([
+  n()
+], oe.prototype, "heading", 2);
+je([
+  n()
+], oe.prototype, "date", 2);
+oe = je([
+  d("vox-timeline-item")
+], oe);
+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
+};