@openvoxproject/voxblocks 0.11.0 → 0.12.0

package/dist/voxblocks.js

@@ -1,33 +1,33 @@
-import { css as d, LitElement as h, html as c, svg as l, nothing as v } from "lit";
-import { property as n, customElement as p, state as le, query as Ze } from "lit/decorators.js";
-import { classMap as bt } from "lit/directives/class-map.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { live as dt } from "lit/directives/live.js";
-var mt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, V = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? yt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+import { css as d, LitElement as h, html as l, svg as c, nothing as v } from "lit";
+import { property as n, customElement as p, state as Z, query as rt } from "lit/decorators.js";
+import { classMap as Et } from "lit/directives/class-map.js";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { live as Mt } from "lit/directives/live.js";
+var At = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, V = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ht(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && mt(t, a, e), e;
+  return r && e && At(t, a, e), e;
 };
 let g = class extends h {
   constructor() {
     super(...arguments), this.variant = "brand", this.size = "md", this.type = "button", this.disabled = !1;
   }
   render() {
-    const o = bt({
+    const o = Et({
       button: !0,
       [this.variant]: !0,
       [this.size]: !0
     });
-    return this.href !== void 0 && !this.disabled ? c`
+    return this.href !== void 0 && !this.disabled ? l`
         <a
           class=${o}
           href=${this.href}
-          target=${u(this.target)}
-          rel=${u(this.target === "_blank" ? "noreferrer" : void 0)}
+          target=${E(this.target)}
+          rel=${E(this.target === "_blank" ? "noreferrer" : void 0)}
         >
           <slot></slot>
         </a>
-      ` : c`
+      ` : l`
       <button class=${o} type=${this.type} ?disabled=${this.disabled}>
         <slot></slot>
       </button>
@@ -163,17 +163,17 @@ V([
 g = V([
   p("vox-button")
 ], g);
-var wt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, Ue = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? $t(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+var Bt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, at = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Nt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && wt(t, a, e), e;
+  return r && e && Bt(t, a, e), e;
 };
-let R = class extends h {
+let K = class extends h {
   constructor() {
     super(...arguments), this.href = "#";
   }
   render() {
-    return c`
+    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">
@@ -184,7 +184,7 @@ let R = class extends h {
     `;
   }
 };
-R.styles = d`
+K.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -221,31 +221,31 @@ R.styles = d`
       transform: translateX(3px);
     }
   `;
-Ue([
+at([
   n()
-], R.prototype, "href", 2);
-Ue([
+], K.prototype, "href", 2);
+at([
   n()
-], R.prototype, "target", 2);
-R = Ue([
+], K.prototype, "target", 2);
+K = at([
   p("vox-cta")
-], R);
-var _t = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, Pe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ct(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], K);
+var Tt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, Ne = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? qt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && _t(t, a, e), e;
+  return r && e && Tt(t, a, e), e;
 };
-const ct = "vox-theme", be = "data-vox-theme";
-let z = class extends h {
+const yt = "vox-theme", Oe = "data-vox-theme";
+let A = class extends h {
   constructor() {
     super(...arguments), this.lightLabel = "Switch to dark theme", this.darkLabel = "Switch to light theme", this.dark = !1, this.media = window.matchMedia("(prefers-color-scheme: dark)"), this.handleSystemChange = (o) => {
-      localStorage.getItem(ct) || document.documentElement.setAttribute(be, o.matches ? "dark" : "light");
+      localStorage.getItem(yt) || document.documentElement.setAttribute(Oe, o.matches ? "dark" : "light");
     };
   }
   connectedCallback() {
     super.connectedCallback(), this.syncFromDocument(), this.observer = new MutationObserver(() => this.syncFromDocument()), this.observer.observe(document.documentElement, {
       attributes: !0,
-      attributeFilter: [be]
+      attributeFilter: [Oe]
     }), this.media.addEventListener("change", this.handleSystemChange);
   }
   disconnectedCallback() {
@@ -253,12 +253,12 @@ let z = class extends h {
     super.disconnectedCallback(), (o = this.observer) == null || o.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
   }
   syncFromDocument() {
-    const o = document.documentElement.getAttribute(be) === "dark";
+    const o = document.documentElement.getAttribute(Oe) === "dark";
     this.dark = o, this.toggleAttribute("dark", o);
   }
   handleClick() {
     const o = this.dark ? "light" : "dark";
-    document.documentElement.setAttribute(be, o), localStorage.setItem(ct, o), this.dispatchEvent(
+    document.documentElement.setAttribute(Oe, o), localStorage.setItem(yt, o), this.dispatchEvent(
       new CustomEvent("vox-theme-change", {
         detail: { theme: o },
         bubbles: !0,
@@ -268,7 +268,7 @@ let z = class extends h {
   }
   render() {
     const o = this.dark ? this.darkLabel : this.lightLabel;
-    return c`
+    return l`
       <button
         type="button"
         role="switch"
@@ -291,7 +291,7 @@ let z = class extends h {
     `;
   }
 };
-z.styles = d`
+A.styles = d`
     :host {
       display: inline-flex;
     }
@@ -350,118 +350,118 @@ z.styles = d`
       transform: translateX(20px);
     }
   `;
-Pe([
+Ne([
   n({ attribute: "light-label" })
-], z.prototype, "lightLabel", 2);
-Pe([
+], A.prototype, "lightLabel", 2);
+Ne([
   n({ attribute: "dark-label" })
-], z.prototype, "darkLabel", 2);
-Pe([
-  le()
-], z.prototype, "dark", 2);
-z = Pe([
+], A.prototype, "darkLabel", 2);
+Ne([
+  Z()
+], A.prototype, "dark", 2);
+A = Ne([
   p("vox-theme-toggle")
-], z);
+], A);
 const y = {
   // Phase 1: shared UI baseline -----------------------------------------
-  search: l`<circle cx="21" cy="21" r="13"/><path d="M30.5 30.5 L41 41"/>`,
-  close: l`<path d="M14 14 L34 34 M34 14 L14 34"/>`,
-  menu: l`<path d="M8 14 H40 M8 24 H40 M8 34 H40"/>`,
-  "chevron-up": l`<path d="M14 28 L24 18 L34 28"/>`,
-  "chevron-down": l`<path d="M14 20 L24 30 L34 20"/>`,
-  "chevron-left": l`<path d="M28 14 L18 24 L28 34"/>`,
-  "chevron-right": l`<path d="M20 14 L30 24 L20 34"/>`,
-  "external-link": l`<path d="M36 26 V38 A4 4 0 0 1 32 42 H10 A4 4 0 0 1 6 38 V16 A4 4 0 0 1 10 12 H22"/><path d="M30 6 H42 V18"/><path d="M20 28 L42 6"/>`,
-  copy: l`<rect x="8" y="14" width="24" height="24" rx="3"/><path d="M16 14 V10 A2 2 0 0 1 18 8 H38 A2 2 0 0 1 40 10 V30 A2 2 0 0 1 38 32 H34"/>`,
-  check: l`<path d="M10 25 L20 35 L38 13"/>`,
-  warning: l`<path d="M24 8 L44 40 H4 Z"/><path d="M24 20 V28"/><circle cx="24" cy="34" r="1.6" fill="currentColor" stroke="none"/>`,
-  info: l`<circle cx="24" cy="24" r="17"/><path d="M24 22 V33"/><circle cx="24" cy="15.5" r="1.8" fill="currentColor" stroke="none"/>`,
-  add: l`<path d="M24 10 V38 M10 24 H38"/>`,
-  remove: l`<path d="M10 24 H38"/>`,
-  edit: l`<path d="M30 8 L40 18 L18 40 L7 41 L8 30 Z"/><path d="M26 12 L36 22"/>`,
-  delete: l`<path d="M10 14 H38"/><path d="M17 14 V9 A2 2 0 0 1 19 7 H29 A2 2 0 0 1 31 9 V14"/><path d="M13 14 L15 40 A2 2 0 0 0 17 42 H31 A2 2 0 0 0 33 40 L35 14"/><path d="M20 21 V35 M28 21 V35"/>`,
-  filter: l`<path d="M6 10 H42 L28 26 V38 L20 42 V26 Z"/>`,
-  sort: l`<path d="M14 30 V10 M14 10 L8 16 M14 10 L20 16"/><path d="M34 18 V38 M34 38 L28 32 M34 38 L40 32"/>`,
-  calendar: l`<rect x="6" y="10" width="36" height="32" rx="3"/><path d="M6 20 H42"/><path d="M15 6 V14 M33 6 V14"/><circle cx="15" cy="28" r="1.6" fill="currentColor" stroke="none"/><circle cx="24" cy="28" r="1.6" fill="currentColor" stroke="none"/><circle cx="33" cy="28" r="1.6" fill="currentColor" stroke="none"/>`,
-  clock: l`<circle cx="24" cy="24" r="17"/><path d="M24 14 V24 L32 29"/>`,
-  person: l`<circle cx="24" cy="16" r="8"/><path d="M8 42 C8 31 15 26 24 26 C33 26 40 31 40 42"/>`,
-  people: l`<circle cx="17" cy="16" r="7"/><circle cx="33" cy="18" r="6"/><path d="M4 41 C4 31 10 27 17 27 C21 27 24 28.3 26.3 30.5"/><path d="M24 41 C24 32 29 28 37 28 C43 28 44 32 44 41"/>`,
-  lock: l`<rect x="10" y="21" width="28" height="21" rx="3"/><path d="M16 21 V15 A8 8 0 0 1 32 15 V21"/><circle cx="24" cy="31" r="2.2" fill="currentColor" stroke="none"/>`,
-  eye: l`<path d="M4 24 C10 12 20 8 24 8 C28 8 38 12 44 24 C38 36 28 40 24 40 C20 40 10 36 4 24 Z"/><circle cx="24" cy="24" r="6"/>`,
-  "eye-slash": l`<path d="M4 24 C10 12 20 8 24 8 C28 8 38 12 44 24 C38 36 28 40 24 40 C20 40 10 36 4 24 Z"/><circle cx="24" cy="24" r="6"/><path d="M6 6 L42 42"/>`,
-  refresh: l`<path d="M46 8 L46 20 L34 20"/><path d="M2 40 L2 28 L14 28"/><path d="M7.02 18 A18 18 0 0 1 36.72 11.28 L46 20"/><path d="M2 28 L11.28 36.72 A18 18 0 0 0 40.98 30"/>`,
+  search: c`<circle cx="21" cy="21" r="13"/><path d="M30.5 30.5 L41 41"/>`,
+  close: c`<path d="M14 14 L34 34 M34 14 L14 34"/>`,
+  menu: c`<path d="M8 14 H40 M8 24 H40 M8 34 H40"/>`,
+  "chevron-up": c`<path d="M14 28 L24 18 L34 28"/>`,
+  "chevron-down": c`<path d="M14 20 L24 30 L34 20"/>`,
+  "chevron-left": c`<path d="M28 14 L18 24 L28 34"/>`,
+  "chevron-right": c`<path d="M20 14 L30 24 L20 34"/>`,
+  "external-link": c`<path d="M36 26 V38 A4 4 0 0 1 32 42 H10 A4 4 0 0 1 6 38 V16 A4 4 0 0 1 10 12 H22"/><path d="M30 6 H42 V18"/><path d="M20 28 L42 6"/>`,
+  copy: c`<rect x="8" y="14" width="24" height="24" rx="3"/><path d="M16 14 V10 A2 2 0 0 1 18 8 H38 A2 2 0 0 1 40 10 V30 A2 2 0 0 1 38 32 H34"/>`,
+  check: c`<path d="M10 25 L20 35 L38 13"/>`,
+  warning: c`<path d="M24 8 L44 40 H4 Z"/><path d="M24 20 V28"/><circle cx="24" cy="34" r="1.6" fill="currentColor" stroke="none"/>`,
+  info: c`<circle cx="24" cy="24" r="17"/><path d="M24 22 V33"/><circle cx="24" cy="15.5" r="1.8" fill="currentColor" stroke="none"/>`,
+  add: c`<path d="M24 10 V38 M10 24 H38"/>`,
+  remove: c`<path d="M10 24 H38"/>`,
+  edit: c`<path d="M30 8 L40 18 L18 40 L7 41 L8 30 Z"/><path d="M26 12 L36 22"/>`,
+  delete: c`<path d="M10 14 H38"/><path d="M17 14 V9 A2 2 0 0 1 19 7 H29 A2 2 0 0 1 31 9 V14"/><path d="M13 14 L15 40 A2 2 0 0 0 17 42 H31 A2 2 0 0 0 33 40 L35 14"/><path d="M20 21 V35 M28 21 V35"/>`,
+  filter: c`<path d="M6 10 H42 L28 26 V38 L20 42 V26 Z"/>`,
+  sort: c`<path d="M14 30 V10 M14 10 L8 16 M14 10 L20 16"/><path d="M34 18 V38 M34 38 L28 32 M34 38 L40 32"/>`,
+  calendar: c`<rect x="6" y="10" width="36" height="32" rx="3"/><path d="M6 20 H42"/><path d="M15 6 V14 M33 6 V14"/><circle cx="15" cy="28" r="1.6" fill="currentColor" stroke="none"/><circle cx="24" cy="28" r="1.6" fill="currentColor" stroke="none"/><circle cx="33" cy="28" r="1.6" fill="currentColor" stroke="none"/>`,
+  clock: c`<circle cx="24" cy="24" r="17"/><path d="M24 14 V24 L32 29"/>`,
+  person: c`<circle cx="24" cy="16" r="8"/><path d="M8 42 C8 31 15 26 24 26 C33 26 40 31 40 42"/>`,
+  people: c`<circle cx="17" cy="16" r="7"/><circle cx="33" cy="18" r="6"/><path d="M4 41 C4 31 10 27 17 27 C21 27 24 28.3 26.3 30.5"/><path d="M24 41 C24 32 29 28 37 28 C43 28 44 32 44 41"/>`,
+  lock: c`<rect x="10" y="21" width="28" height="21" rx="3"/><path d="M16 21 V15 A8 8 0 0 1 32 15 V21"/><circle cx="24" cy="31" r="2.2" fill="currentColor" stroke="none"/>`,
+  eye: c`<path d="M4 24 C10 12 20 8 24 8 C28 8 38 12 44 24 C38 36 28 40 24 40 C20 40 10 36 4 24 Z"/><circle cx="24" cy="24" r="6"/>`,
+  "eye-slash": c`<path d="M4 24 C10 12 20 8 24 8 C28 8 38 12 44 24 C38 36 28 40 24 40 C20 40 10 36 4 24 Z"/><circle cx="24" cy="24" r="6"/><path d="M6 6 L42 42"/>`,
+  refresh: c`<path d="M46 8 L46 20 L34 20"/><path d="M2 40 L2 28 L14 28"/><path d="M7.02 18 A18 18 0 0 1 36.72 11.28 L46 20"/><path d="M2 28 L11.28 36.72 A18 18 0 0 0 40.98 30"/>`,
   // Phase 2: OpenVox marketing site --------------------------------------
-  community: l`<circle cx="24" cy="10" r="5"/><circle cx="10" cy="34" r="5"/><circle cx="38" cy="34" r="5"/><path d="M24 15 L14 30 M24 15 L34 30 M15 34 H33"/>`,
-  book: l`<path d="M24 12 C20 8 12 7 6 9 V37 C12 35 20 36 24 40 C28 36 36 35 42 37 V9 C36 7 28 8 24 12 Z"/><path d="M24 12 V40"/>`,
-  terminal: l`<rect x="6" y="9" width="36" height="30" rx="3"/><path d="M14 19 L21 24 L14 29"/><path d="M25 30 H33"/>`,
-  shield: l`<path d="M24 6 L40 12 V22 C40 33 33 40 24 43 C15 40 8 33 8 22 V12 Z"/><path d="M17 23 L22 28 L32 17"/>`,
-  roadmap: l`<path d="M6 38 C14 38 14 26 22 26 C30 26 30 14 38 14"/><circle cx="6" cy="38" r="3" fill="currentColor" stroke="none"/><circle cx="22" cy="26" r="3" fill="currentColor" stroke="none"/><circle cx="38" cy="14" r="3" fill="currentColor" stroke="none"/>`,
-  help: l`<circle cx="24" cy="24" r="17"/><path d="M18 18 C18 13 30 13 30 19 C30 24 24 23 24 29"/><circle cx="24" cy="35" r="1.8" fill="currentColor" stroke="none"/>`,
-  repository: l`<rect x="7" y="10" width="34" height="28" rx="3"/><path d="M18 20 L13 24 L18 28 M30 20 L35 24 L30 28"/>`,
-  star: l`<path d="M24 6 L29 19 L43 19 L32 28 L36 42 L24 34 L12 42 L16 28 L5 19 L19 19 Z"/>`,
-  chat: l`<path d="M8 10 H40 A2 2 0 0 1 42 12 V30 A2 2 0 0 1 40 32 H20 L12 40 V32 H8 A2 2 0 0 1 6 30 V12 A2 2 0 0 1 8 10 Z"/><path d="M14 18 H34 M14 24 H28"/>`,
-  heart: l`<path d="M24 41 C10 32 4 23 4 15.5 C4 9 9 5 15 5 C19.5 5 22.5 7.5 24 11 C25.5 7.5 28.5 5 33 5 C39 5 44 9 44 15.5 C44 23 38 32 24 41 Z"/>`,
+  community: c`<circle cx="24" cy="10" r="5"/><circle cx="10" cy="34" r="5"/><circle cx="38" cy="34" r="5"/><path d="M24 15 L14 30 M24 15 L34 30 M15 34 H33"/>`,
+  book: c`<path d="M24 12 C20 8 12 7 6 9 V37 C12 35 20 36 24 40 C28 36 36 35 42 37 V9 C36 7 28 8 24 12 Z"/><path d="M24 12 V40"/>`,
+  terminal: c`<rect x="6" y="9" width="36" height="30" rx="3"/><path d="M14 19 L21 24 L14 29"/><path d="M25 30 H33"/>`,
+  shield: c`<path d="M24 6 L40 12 V22 C40 33 33 40 24 43 C15 40 8 33 8 22 V12 Z"/><path d="M17 23 L22 28 L32 17"/>`,
+  roadmap: c`<path d="M6 38 C14 38 14 26 22 26 C30 26 30 14 38 14"/><circle cx="6" cy="38" r="3" fill="currentColor" stroke="none"/><circle cx="22" cy="26" r="3" fill="currentColor" stroke="none"/><circle cx="38" cy="14" r="3" fill="currentColor" stroke="none"/>`,
+  help: c`<circle cx="24" cy="24" r="17"/><path d="M18 18 C18 13 30 13 30 19 C30 24 24 23 24 29"/><circle cx="24" cy="35" r="1.8" fill="currentColor" stroke="none"/>`,
+  repository: c`<rect x="7" y="10" width="34" height="28" rx="3"/><path d="M18 20 L13 24 L18 28 M30 20 L35 24 L30 28"/>`,
+  star: c`<path d="M24 6 L29 19 L43 19 L32 28 L36 42 L24 34 L12 42 L16 28 L5 19 L19 19 Z"/>`,
+  chat: c`<path d="M8 10 H40 A2 2 0 0 1 42 12 V30 A2 2 0 0 1 40 32 H20 L12 40 V32 H8 A2 2 0 0 1 6 30 V12 A2 2 0 0 1 8 10 Z"/><path d="M14 18 H34 M14 24 H28"/>`,
+  heart: c`<path d="M24 41 C10 32 4 23 4 15.5 C4 9 9 5 15 5 C19.5 5 22.5 7.5 24 11 C25.5 7.5 28.5 5 33 5 C39 5 44 9 44 15.5 C44 23 38 32 24 41 Z"/>`,
   // Phase 3: module registry (Forge replacement) -------------------------
-  module: l`<rect x="8" y="16" width="32" height="24" rx="3"/><path d="M8 24 H40"/><path d="M20 16 L24 24 L28 16"/>`,
-  tag: l`<path d="M6 10 H26 L42 26 L26 42 H6 Z"/><circle cx="15" cy="19" r="3" fill="currentColor" stroke="none"/>`,
-  dependency: l`<rect x="6" y="19" width="20" height="10" rx="5"/><rect x="22" y="19" width="20" height="10" rx="5"/>`,
-  verified: l`<path d="M24 5 L31 10 L39 9 L40 17 L46 24 L40 31 L39 39 L31 38 L24 43 L17 38 L9 39 L8 31 L2 24 L8 17 L9 9 L17 10 Z"/><path d="M16 24 L21 29 L32 18"/>`,
-  archived: l`<rect x="6" y="6" width="36" height="10" rx="2"/><rect x="10" y="16" width="28" height="26" rx="2"/><path d="M20 26 H28"/>`,
-  publish: l`<path d="M24 6 V28 M24 6 L16 14 M24 6 L32 14"/><path d="M8 32 V38 A2 2 0 0 0 10 40 H38 A2 2 0 0 0 40 38 V32"/>`,
-  changelog: l`<path d="M10 6 H28 L36 14 V42 H10 Z"/><path d="M28 6 V14 H36"/><path d="M16 24 H24"/><circle cx="34" cy="34" r="7"/><path d="M34 30 V34 L37 36"/>`,
-  vulnerability: l`<path d="M24 6 L40 12 V22 C40 33 33 40 24 43 C15 40 8 33 8 22 V12 Z"/><path d="M24 16 V26"/><circle cx="24" cy="32" r="1.8" fill="currentColor" stroke="none"/>`,
-  gauge: l`<path d="M6 34 A18 18 0 0 1 42 34"/><path d="M24 34 L34 20"/><circle cx="24" cy="34" r="2.2" fill="currentColor" stroke="none"/>`,
-  "file-tree": l`<path d="M6 12 H18 L22 17 H42 V38 H6 Z"/><path d="M26 24 H36 M26 30 H36"/>`,
-  "check-circle": l`<circle cx="24" cy="24" r="17"/><path d="M15 24 L21 30 L33 17"/>`,
-  "x-circle": l`<circle cx="24" cy="24" r="17"/><path d="M18 18 L30 30 M30 18 L18 30"/>`,
-  fork: l`<circle cx="14" cy="10" r="4"/><circle cx="34" cy="10" r="4"/><circle cx="24" cy="38" r="4"/><path d="M14 14 V22 L24 32 M34 14 V22 L24 32 M24 32 V34"/>`,
-  trending: l`<path d="M6 34 L18 22 L26 28 L42 10"/><path d="M32 10 H42 V20"/>`,
-  collection: l`<rect x="10" y="6" width="28" height="10" rx="2"/><rect x="6" y="19" width="36" height="10" rx="2"/><rect x="10" y="32" width="28" height="10" rx="2"/>`,
+  module: c`<rect x="8" y="16" width="32" height="24" rx="3"/><path d="M8 24 H40"/><path d="M20 16 L24 24 L28 16"/>`,
+  tag: c`<path d="M6 10 H26 L42 26 L26 42 H6 Z"/><circle cx="15" cy="19" r="3" fill="currentColor" stroke="none"/>`,
+  dependency: c`<rect x="6" y="19" width="20" height="10" rx="5"/><rect x="22" y="19" width="20" height="10" rx="5"/>`,
+  verified: c`<path d="M24 5 L31 10 L39 9 L40 17 L46 24 L40 31 L39 39 L31 38 L24 43 L17 38 L9 39 L8 31 L2 24 L8 17 L9 9 L17 10 Z"/><path d="M16 24 L21 29 L32 18"/>`,
+  archived: c`<rect x="6" y="6" width="36" height="10" rx="2"/><rect x="10" y="16" width="28" height="26" rx="2"/><path d="M20 26 H28"/>`,
+  publish: c`<path d="M24 6 V28 M24 6 L16 14 M24 6 L32 14"/><path d="M8 32 V38 A2 2 0 0 0 10 40 H38 A2 2 0 0 0 40 38 V32"/>`,
+  changelog: c`<path d="M10 6 H28 L36 14 V42 H10 Z"/><path d="M28 6 V14 H36"/><path d="M16 24 H24"/><circle cx="34" cy="34" r="7"/><path d="M34 30 V34 L37 36"/>`,
+  vulnerability: c`<path d="M24 6 L40 12 V22 C40 33 33 40 24 43 C15 40 8 33 8 22 V12 Z"/><path d="M24 16 V26"/><circle cx="24" cy="32" r="1.8" fill="currentColor" stroke="none"/>`,
+  gauge: c`<path d="M6 34 A18 18 0 0 1 42 34"/><path d="M24 34 L34 20"/><circle cx="24" cy="34" r="2.2" fill="currentColor" stroke="none"/>`,
+  "file-tree": c`<path d="M6 12 H18 L22 17 H42 V38 H6 Z"/><path d="M26 24 H36 M26 30 H36"/>`,
+  "check-circle": c`<circle cx="24" cy="24" r="17"/><path d="M15 24 L21 30 L33 17"/>`,
+  "x-circle": c`<circle cx="24" cy="24" r="17"/><path d="M18 18 L30 30 M30 18 L18 30"/>`,
+  fork: c`<circle cx="14" cy="10" r="4"/><circle cx="34" cy="10" r="4"/><circle cx="24" cy="38" r="4"/><path d="M14 14 V22 L24 32 M34 14 V22 L24 32 M24 32 V34"/>`,
+  trending: c`<path d="M6 34 L18 22 L26 28 L42 10"/><path d="M32 10 H42 V20"/>`,
+  collection: c`<rect x="10" y="6" width="28" height="10" rx="2"/><rect x="6" y="19" width="36" height="10" rx="2"/><rect x="10" y="32" width="28" height="10" rx="2"/>`,
   // Phase 4: fleet console (Puppet Enterprise replacement) ---------------
-  dashboard: l`<rect x="6" y="6" width="18" height="14" rx="2"/><rect x="28" y="6" width="14" height="8" rx="2"/><rect x="28" y="18" width="14" height="14" rx="2"/><rect x="6" y="24" width="18" height="18" rx="2"/>`,
-  node: l`<rect x="10" y="14" width="28" height="20" rx="3"/><path d="M16 22 H22 M16 27 H22"/><circle cx="32" cy="24" r="2" fill="currentColor" stroke="none"/>`,
-  "node-group": l`<rect x="6" y="10" width="24" height="9" rx="2"/><rect x="12" y="21" width="24" height="9" rx="2"/><rect x="18" y="32" width="24" height="9" rx="2"/>`,
-  pulse: l`<path d="M4 24 H14 L19 12 L27 36 L32 24 H44"/>`,
-  compliance: l`<rect x="9" y="6" width="30" height="36" rx="3"/><path d="M16 16 L19 19 L26 12 M16 26 L19 29 L26 22 M16 36 H30"/>`,
-  report: l`<path d="M10 6 H28 L36 14 V42 H10 Z"/><path d="M28 6 V14 H36"/><path d="M16 34 V28 M22 34 V24 M28 34 V30"/>`,
-  "activity-log": l`<path d="M14 8 V40"/><circle cx="14" cy="12" r="3" fill="currentColor" stroke="none"/><circle cx="14" cy="24" r="3" fill="currentColor" stroke="none"/><circle cx="14" cy="36" r="3" fill="currentColor" stroke="none"/><path d="M22 12 H40 M22 24 H40 M22 36 H34"/>`,
-  bell: l`<path d="M12 32 V22 A12 12 0 0 1 36 22 V32 L40 38 H8 Z"/><path d="M20 38 A4 4 0 0 0 28 38"/>`,
-  orchestrate: l`<circle cx="24" cy="24" r="17"/><path d="M19 15 L33 24 L19 33 Z"/>`,
-  plan: l`<rect x="6" y="8" width="24" height="32" rx="3"/><path d="M12 16 H24 M12 22 H24 M12 28 H20"/><path d="M32 24 H44 M38 18 L44 24 L38 30"/>`,
-  badge: l`<rect x="6" y="10" width="36" height="28" rx="3"/><circle cx="17" cy="21" r="5"/><path d="M10 32 C10 26 13 24 17 24 C21 24 24 26 24 32"/><path d="M30 18 H38 M30 24 H38 M30 30 H36"/>`,
-  audit: l`<path d="M10 6 H26 L34 14 V42 H10 Z"/><path d="M26 6 V14 H34"/><path d="M16 24 H24 M16 30 H22"/><circle cx="33" cy="33" r="6"/><path d="M37.5 37.5 L43 43"/>`,
-  key: l`<circle cx="16" cy="24" r="9"/><path d="M23 24 H42 M34 24 V31 M40 24 V29"/>`,
-  layers: l`<path d="M24 6 L44 16 L24 26 L4 16 Z"/><path d="M4 26 L24 36 L44 26"/><path d="M4 34 L24 44 L44 34"/>`,
-  classifier: l`<path d="M6 10 H24 L40 26 L24 42 H6 Z"/><circle cx="14" cy="18" r="3" fill="currentColor" stroke="none"/><circle cx="32" cy="26" r="3" fill="currentColor" stroke="none"/>`,
-  deploy: l`<path d="M24 8 V34"/><path d="M24 8 L15 20 M24 8 L33 20"/><path d="M10 40 H38"/>`,
-  metrics: l`<path d="M6 40 H42"/><path d="M6 40 V6"/><path d="M10 30 L18 22 L26 27 L38 12"/>`,
-  schedule: l`<rect x="6" y="10" width="28" height="30" rx="3"/><path d="M6 18 H34"/><path d="M14 6 V14 M26 6 V14"/><circle cx="34" cy="34" r="10"/><path d="M34 28 V34 L38 37"/>`,
-  backup: l`<path d="M24 6 V26 M24 26 L16 18 M24 26 L32 18"/><rect x="8" y="30" width="32" height="12" rx="2"/><path d="M8 36 H40"/>`,
-  webhook: l`<circle cx="12" cy="14" r="6"/><circle cx="36" cy="34" r="6"/><path d="M17 17 L31 31"/><path d="M22 22 L20 28 L26 26 L24 32"/>`,
-  organization: l`<rect x="10" y="10" width="28" height="32" rx="2"/><path d="M17 18 H21 M27 18 H31 M17 26 H21 M27 26 H31 M17 34 H21 M27 34 H31"/>`,
-  drift: l`<rect x="6" y="12" width="20" height="20" rx="3"/><rect x="22" y="16" width="20" height="20" rx="3"/><path d="M20 24 H28"/>`,
+  dashboard: c`<rect x="6" y="6" width="18" height="14" rx="2"/><rect x="28" y="6" width="14" height="8" rx="2"/><rect x="28" y="18" width="14" height="14" rx="2"/><rect x="6" y="24" width="18" height="18" rx="2"/>`,
+  node: c`<rect x="10" y="14" width="28" height="20" rx="3"/><path d="M16 22 H22 M16 27 H22"/><circle cx="32" cy="24" r="2" fill="currentColor" stroke="none"/>`,
+  "node-group": c`<rect x="6" y="10" width="24" height="9" rx="2"/><rect x="12" y="21" width="24" height="9" rx="2"/><rect x="18" y="32" width="24" height="9" rx="2"/>`,
+  pulse: c`<path d="M4 24 H14 L19 12 L27 36 L32 24 H44"/>`,
+  compliance: c`<rect x="9" y="6" width="30" height="36" rx="3"/><path d="M16 16 L19 19 L26 12 M16 26 L19 29 L26 22 M16 36 H30"/>`,
+  report: c`<path d="M10 6 H28 L36 14 V42 H10 Z"/><path d="M28 6 V14 H36"/><path d="M16 34 V28 M22 34 V24 M28 34 V30"/>`,
+  "activity-log": c`<path d="M14 8 V40"/><circle cx="14" cy="12" r="3" fill="currentColor" stroke="none"/><circle cx="14" cy="24" r="3" fill="currentColor" stroke="none"/><circle cx="14" cy="36" r="3" fill="currentColor" stroke="none"/><path d="M22 12 H40 M22 24 H40 M22 36 H34"/>`,
+  bell: c`<path d="M12 32 V22 A12 12 0 0 1 36 22 V32 L40 38 H8 Z"/><path d="M20 38 A4 4 0 0 0 28 38"/>`,
+  orchestrate: c`<circle cx="24" cy="24" r="17"/><path d="M19 15 L33 24 L19 33 Z"/>`,
+  plan: c`<rect x="6" y="8" width="24" height="32" rx="3"/><path d="M12 16 H24 M12 22 H24 M12 28 H20"/><path d="M32 24 H44 M38 18 L44 24 L38 30"/>`,
+  badge: c`<rect x="6" y="10" width="36" height="28" rx="3"/><circle cx="17" cy="21" r="5"/><path d="M10 32 C10 26 13 24 17 24 C21 24 24 26 24 32"/><path d="M30 18 H38 M30 24 H38 M30 30 H36"/>`,
+  audit: c`<path d="M10 6 H26 L34 14 V42 H10 Z"/><path d="M26 6 V14 H34"/><path d="M16 24 H24 M16 30 H22"/><circle cx="33" cy="33" r="6"/><path d="M37.5 37.5 L43 43"/>`,
+  key: c`<circle cx="16" cy="24" r="9"/><path d="M23 24 H42 M34 24 V31 M40 24 V29"/>`,
+  layers: c`<path d="M24 6 L44 16 L24 26 L4 16 Z"/><path d="M4 26 L24 36 L44 26"/><path d="M4 34 L24 44 L44 34"/>`,
+  classifier: c`<path d="M6 10 H24 L40 26 L24 42 H6 Z"/><circle cx="14" cy="18" r="3" fill="currentColor" stroke="none"/><circle cx="32" cy="26" r="3" fill="currentColor" stroke="none"/>`,
+  deploy: c`<path d="M24 8 V34"/><path d="M24 8 L15 20 M24 8 L33 20"/><path d="M10 40 H38"/>`,
+  metrics: c`<path d="M6 40 H42"/><path d="M6 40 V6"/><path d="M10 30 L18 22 L26 27 L38 12"/>`,
+  schedule: c`<rect x="6" y="10" width="28" height="30" rx="3"/><path d="M6 18 H34"/><path d="M14 6 V14 M26 6 V14"/><circle cx="34" cy="34" r="10"/><path d="M34 28 V34 L38 37"/>`,
+  backup: c`<path d="M24 6 V26 M24 26 L16 18 M24 26 L32 18"/><rect x="8" y="30" width="32" height="12" rx="2"/><path d="M8 36 H40"/>`,
+  webhook: c`<circle cx="12" cy="14" r="6"/><circle cx="36" cy="34" r="6"/><path d="M17 17 L31 31"/><path d="M22 22 L20 28 L26 26 L24 32"/>`,
+  organization: c`<rect x="10" y="10" width="28" height="32" rx="2"/><path d="M17 18 H21 M27 18 H31 M17 26 H21 M27 26 H31 M17 34 H21 M27 34 H31"/>`,
+  drift: c`<rect x="6" y="12" width="20" height="20" rx="3"/><rect x="22" y="16" width="20" height="20" rx="3"/><path d="M20 24 H28"/>`,
   // Added later: consolidated from docs pages that predated vox-icon ------
-  blocks: l`<rect x="7" y="7" width="15" height="15" rx="2.5"/><rect x="26" y="7" width="15" height="15" rx="2.5"/><rect x="7" y="26" width="15" height="15" rx="2.5"/><rect x="26" y="26" width="15" height="15" rx="2.5"/>`,
-  plug: l`<path d="M16 6 V18 M32 6 V18 M12 18 H36 V28 C36 34 30 38 24 38 C18 38 12 34 12 28 Z"/><path d="M24 38 V44"/>`,
-  ballot: l`<rect x="8" y="18" width="32" height="24" rx="2.5"/><path d="M8 26 H40"/><path d="M24 10 V26"/><path d="M18 6 L24 12 L30 6"/>`,
-  sun: l`<circle cx="24" cy="24" r="8"/><path d="M24 4v4M24 40v4M9.86 9.86l2.82 2.82M35.32 35.32l2.82 2.82M4 24h4M40 24h4M12.68 35.32l-2.82 2.82M38.14 9.86l-2.82 2.82"/>`,
-  moon: l`<path d="M42 25.58A18 18 0 1 1 22.42 6 14 14 0 0 0 42 25.58Z"/>`,
-  github: l`<g transform="translate(4,4) scale(2.5)" fill="currentColor" stroke="none"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></g>`,
-  accessibility: l`<circle cx="24" cy="24" r="18"/><circle cx="24" cy="16" r="2.6" fill="currentColor" stroke="none"/><path d="M14 21 H34 M24 21 V32 M24 25 L18 34 M24 25 L30 34"/>`,
-  settings: l`<circle cx="24" cy="24" r="7"/><path d="M24 6 V12 M24 36 V42 M6 24 H12 M36 24 H42 M11 11 L15.2 15.2 M32.8 32.8 L37 37 M37 11 L32.8 15.2 M15.2 32.8 L11 37"/>`
+  blocks: c`<rect x="7" y="7" width="15" height="15" rx="2.5"/><rect x="26" y="7" width="15" height="15" rx="2.5"/><rect x="7" y="26" width="15" height="15" rx="2.5"/><rect x="26" y="26" width="15" height="15" rx="2.5"/>`,
+  plug: c`<path d="M16 6 V18 M32 6 V18 M12 18 H36 V28 C36 34 30 38 24 38 C18 38 12 34 12 28 Z"/><path d="M24 38 V44"/>`,
+  ballot: c`<rect x="8" y="18" width="32" height="24" rx="2.5"/><path d="M8 26 H40"/><path d="M24 10 V26"/><path d="M18 6 L24 12 L30 6"/>`,
+  sun: c`<circle cx="24" cy="24" r="8"/><path d="M24 4v4M24 40v4M9.86 9.86l2.82 2.82M35.32 35.32l2.82 2.82M4 24h4M40 24h4M12.68 35.32l-2.82 2.82M38.14 9.86l-2.82 2.82"/>`,
+  moon: c`<path d="M42 25.58A18 18 0 1 1 22.42 6 14 14 0 0 0 42 25.58Z"/>`,
+  github: c`<g transform="translate(4,4) scale(2.5)" fill="currentColor" stroke="none"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></g>`,
+  accessibility: c`<circle cx="24" cy="24" r="18"/><circle cx="24" cy="16" r="2.6" fill="currentColor" stroke="none"/><path d="M14 21 H34 M24 21 V32 M24 25 L18 34 M24 25 L30 34"/>`,
+  settings: c`<circle cx="24" cy="24" r="7"/><path d="M24 6 V12 M24 36 V42 M6 24 H12 M36 24 H42 M11 11 L15.2 15.2 M32.8 32.8 L37 37 M37 11 L32.8 15.2 M15.2 32.8 L11 37"/>`
 };
-var Ot = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, Ve = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Mt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+var It = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, Te = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Rt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Ot(t, a, e), e;
+  return r && e && It(t, a, e), e;
 };
-let E = class extends h {
+let H = class extends h {
   constructor() {
     super(...arguments), this.name = "info", this.size = "md";
   }
   render() {
     const o = y[this.name];
-    return o ? c`
+    return o ? l`
       <svg
         viewBox="0 0 48 48"
         fill="none"
@@ -478,7 +478,7 @@ let E = class extends h {
     ` : v;
   }
 };
-E.styles = d`
+H.styles = d`
     :host {
       display: inline-flex;
       flex: none;
@@ -509,26 +509,26 @@ E.styles = d`
       height: 48px;
     }
   `;
-Ve([
+Te([
   n()
-], E.prototype, "name", 2);
-Ve([
+], H.prototype, "name", 2);
+Te([
   n({ reflect: !0 })
-], E.prototype, "size", 2);
-Ve([
+], H.prototype, "size", 2);
+Te([
   n()
-], E.prototype, "label", 2);
-E = Ve([
+], H.prototype, "label", 2);
+H = Te([
   p("vox-icon")
-], E);
-var kt = Object.defineProperty, N = (o, t, a, r) => {
+], H);
+var Zt = Object.defineProperty, xe = (o, t, a, r) => {
   for (var e = void 0, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = i(t, a, e) || e);
-  return e && kt(t, a, e), e;
+  return e && Zt(t, a, e), e;
 };
-const it = class it extends h {
+const bt = class bt extends h {
   constructor() {
-    super(), this.invalid = !1, this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
+    super(), this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
   }
   get form() {
     return this.internals.form;
@@ -547,44 +547,37 @@ const it = class it extends h {
   }
   /** Mirror a native inner control's validity onto the host element. */
   syncValidity(t) {
-    this.internals.setValidity(t.validity, t.validationMessage, t), this.invalid = !t.validity.valid;
+    this.internals.setValidity(t.validity, t.validationMessage, t);
   }
   renderLabel(t) {
-    return this.label ? c`
+    return this.label ? l`
       <label class="label" for=${t}>
-        ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : v}
+        ${this.label}${this.required ? l`<span class="required-mark" aria-hidden="true"> *</span>` : v}
       </label>
     ` : v;
   }
-  /** `note`'s id when present, for `aria-describedby` on the native control. */
-  get noteId() {
-    return this.note ? "note" : void 0;
-  }
   renderNote() {
-    return this.note ? c`<p class="note" id="note">${this.note}</p>` : v;
+    return this.note ? l`<p class="note">${this.note}</p>` : v;
   }
 };
-it.formAssociated = !0;
-let x = it;
-N([
-  le()
-], x.prototype, "invalid");
-N([
+bt.formAssociated = !0;
+let x = bt;
+xe([
   n()
 ], x.prototype, "name");
-N([
+xe([
   n()
 ], x.prototype, "label");
-N([
+xe([
   n()
 ], x.prototype, "note");
-N([
+xe([
   n({ type: Boolean, reflect: !0 })
 ], x.prototype, "disabled");
-N([
+xe([
   n({ type: Boolean, reflect: !0 })
 ], x.prototype, "required");
-const ce = d`
+const ue = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -639,15 +632,6 @@ const ce = d`
     box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
   }
 
-  .control[aria-invalid='true'] {
-    border-color: var(--vox-color-danger-1);
-  }
-
-  .control[aria-invalid='true']:focus {
-    border-color: var(--vox-color-danger-1);
-    box-shadow: 0 0 0 3px var(--vox-color-danger-soft);
-  }
-
   /* Corner flattening when placed inside a <vox-input-group>. */
   :host([data-vox-group]) .control {
     border-radius: 0;
@@ -660,7 +644,7 @@ const ce = d`
   :host([data-vox-group='end']) .control {
     border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
   }
-`, pt = d`
+`, Ot = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -689,12 +673,12 @@ const ce = d`
     margin: 0;
   }
 `;
-var Lt = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, Ke = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Pt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+var Ft = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, st = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ut(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Lt(t, a, e), e;
+  return r && e && Ft(t, a, e), e;
 };
-let Z = class extends x {
+let G = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -702,8 +686,8 @@ let Z = class extends x {
     this.checked = !1;
   }
   updated() {
-    this.internals.setFormValue(this.checked ? this.value : null), this.invalid = this.required && !this.checked, this.internals.setValidity(
-      this.invalid ? { valueMissing: !0 } : {},
+    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
     );
@@ -712,14 +696,12 @@ let Z = class extends x {
     this.checked = o.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return c`
+    return l`
       <label class="check">
         <input
           type="checkbox"
           .checked=${this.checked}
           ?disabled=${this.disabled}
-          ?required=${this.required}
-          aria-invalid=${this.invalid ? "true" : "false"}
           @change=${this.handleChange}
         />
         <span class="box" aria-hidden="true">
@@ -732,8 +714,8 @@ let Z = class extends x {
     `;
   }
 };
-Z.styles = [
-  pt,
+G.styles = [
+  Ot,
   d`
       .box {
         flex: none;
@@ -773,21 +755,21 @@ Z.styles = [
       }
     `
 ];
-Ke([
+st([
   n({ type: Boolean, reflect: !0 })
-], Z.prototype, "checked", 2);
-Ke([
+], G.prototype, "checked", 2);
+st([
   n()
-], Z.prototype, "value", 2);
-Z = Ke([
+], G.prototype, "value", 2);
+G = st([
   p("vox-checkbox")
-], Z);
-var Vt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, T = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? jt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], G);
+var Kt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, F = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Gt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Vt(t, a, e), e;
+  return r && e && Kt(t, a, e), e;
 };
-let b = class extends x {
+let m = class extends x {
   constructor() {
     super(...arguments), this.multiple = !1, this.buttonLabel = "Choose a file", this.fileNames = [];
   }
@@ -799,25 +781,23 @@ let b = class extends x {
     this.fileNames = o.map((a) => a.name);
     const t = new FormData();
     for (const a of o) t.append(this.name, a);
-    this.internals.setFormValue(o.length > 0 ? t : null), this.invalid = this.required && o.length === 0, this.internals.setValidity(
-      this.invalid ? { valueMissing: !0 } : {},
+    this.internals.setFormValue(o.length > 0 ? t : null), this.internals.setValidity(
+      this.required && o.length === 0 ? { valueMissing: !0 } : {},
       "Please select a file.",
       this.inputEl
     ), this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return c`
+    return l`
       <div class="field">
         ${this.renderLabel("file")}
         <label>
           <input
             id="file"
             type="file"
-            accept=${u(this.accept)}
+            accept=${E(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
-            aria-describedby=${u(this.noteId)}
-            aria-invalid=${this.invalid ? "true" : "false"}
             @change=${this.handleChange}
           />
           <span class="picker">
@@ -832,8 +812,8 @@ let b = class extends x {
     `;
   }
 };
-b.styles = [
-  ce,
+m.styles = [
+  ue,
   d`
       input {
         position: absolute;
@@ -882,30 +862,30 @@ b.styles = [
       }
     `
 ];
-T([
+F([
   n()
-], b.prototype, "accept", 2);
-T([
+], m.prototype, "accept", 2);
+F([
   n({ type: Boolean })
-], b.prototype, "multiple", 2);
-T([
+], m.prototype, "multiple", 2);
+F([
   n({ attribute: "button-label" })
-], b.prototype, "buttonLabel", 2);
-T([
-  le()
-], b.prototype, "fileNames", 2);
-T([
-  Ze("input")
-], b.prototype, "inputEl", 2);
-b = T([
+], m.prototype, "buttonLabel", 2);
+F([
+  Z()
+], m.prototype, "fileNames", 2);
+F([
+  rt("input")
+], m.prototype, "inputEl", 2);
+m = F([
   p("vox-file-input")
-], b);
-var Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, F = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? zt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], m);
+var Yt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, U = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Xt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Dt(t, a, e), e;
+  return r && e && Yt(t, a, e), e;
 };
-let m = class extends x {
+let w = class extends x {
   constructor() {
     super(...arguments), this.type = "text", this.value = "", this.readonly = !1;
   }
@@ -928,22 +908,20 @@ let m = class extends x {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return c`
+    return l`
       <div class="field">
         ${this.renderLabel("input")}
         <input
           id="input"
           class="control"
           type=${this.type}
-          .value=${dt(this.value)}
-          placeholder=${u(this.placeholder)}
-          autocomplete=${u(this.autocomplete)}
+          .value=${Mt(this.value)}
+          placeholder=${E(this.placeholder)}
+          autocomplete=${E(this.autocomplete)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
           aria-label=${this.label ? v : "text input"}
-          aria-describedby=${u(this.noteId)}
-          aria-invalid=${this.invalid ? "true" : "false"}
           @input=${this.handleInput}
           @change=${this.handleChange}
         />
@@ -952,31 +930,31 @@ let m = class extends x {
     `;
   }
 };
-m.styles = ce;
-F([
+w.styles = ue;
+U([
   n()
-], m.prototype, "type", 2);
-F([
+], w.prototype, "type", 2);
+U([
   n()
-], m.prototype, "value", 2);
-F([
+], w.prototype, "value", 2);
+U([
   n()
-], m.prototype, "placeholder", 2);
-F([
+], w.prototype, "placeholder", 2);
+U([
   n()
-], m.prototype, "autocomplete", 2);
-F([
+], w.prototype, "autocomplete", 2);
+U([
   n({ type: Boolean, reflect: !0 })
-], m.prototype, "readonly", 2);
-m = F([
+], w.prototype, "readonly", 2);
+w = U([
   p("vox-input")
-], m);
-var Et = Object.getOwnPropertyDescriptor, Ht = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Et(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], w);
+var Wt = Object.getOwnPropertyDescriptor, Jt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Wt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = i(e) || e);
   return e;
 };
-let Ie = class extends h {
+let Ye = class extends h {
   handleSlotChange(o) {
     const t = o.target.assignedElements();
     t.forEach((a, r) => {
@@ -985,14 +963,14 @@ let Ie = class extends h {
     });
   }
   render() {
-    return c`
+    return l`
       <div class="group" role="group">
         <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
     `;
   }
 };
-Ie.styles = d`
+Ye.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1034,15 +1012,15 @@ Ie.styles = d`
       border-left: none;
     }
   `;
-Ie = Ht([
+Ye = Jt([
   p("vox-input-group")
-], Ie);
-var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, je = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? At(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Ye);
+var Qt = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, qe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? eo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && St(t, a, e), e;
+  return r && e && Qt(t, a, e), e;
 };
-let H = class extends h {
+let B = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.checked = !1, this.disabled = !1;
   }
@@ -1055,7 +1033,7 @@ let H = class extends h {
     (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.select());
   }
   render() {
-    return c`
+    return l`
       <span
         class="radio"
         role="radio"
@@ -1071,7 +1049,7 @@ let H = class extends h {
     `;
   }
 };
-H.styles = d`
+B.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1120,24 +1098,24 @@ H.styles = d`
       outline-offset: 2px;
     }
   `;
-je([
+qe([
   n()
-], H.prototype, "value", 2);
-je([
+], B.prototype, "value", 2);
+qe([
   n({ type: Boolean, reflect: !0 })
-], H.prototype, "checked", 2);
-je([
+], B.prototype, "checked", 2);
+qe([
   n({ type: Boolean, reflect: !0 })
-], H.prototype, "disabled", 2);
-H = je([
+], B.prototype, "disabled", 2);
+B = qe([
   p("vox-radio")
-], H);
-var It = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, ht = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Bt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], B);
+var to = Object.defineProperty, oo = Object.getOwnPropertyDescriptor, kt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? oo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && It(t, a, e), e;
+  return r && e && to(t, a, e), e;
 };
-let me = class extends x {
+let Pe = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1148,19 +1126,19 @@ let me = class extends x {
     this.value = "";
   }
   updated() {
-    this.internals.setFormValue(this.value || null), this.invalid = this.required && !this.value, this.internals.setValidity(
-      this.invalid ? { valueMissing: !0 } : {},
+    this.internals.setFormValue(this.value || null), this.internals.setValidity(
+      this.required && !this.value ? { valueMissing: !0 } : {},
       "Please select an option.",
       this
     ), this.syncRadios();
   }
   syncRadios() {
-    const o = this.radios, t = o.some((r) => r.value === this.value && this.value !== ""), a = o.find((r) => !r.disabled);
-    o.forEach((r) => {
+    const o = this.radios, t = o.some((a) => a.value === this.value && this.value !== "");
+    o.forEach((a, r) => {
       var s, i;
-      r.checked = this.value !== "" && r.value === this.value;
-      const e = t ? r.checked : r === a;
-      (i = (s = r.shadowRoot) == null ? void 0 : s.querySelector(".radio")) == null || i.setAttribute("tabindex", e ? "0" : "-1");
+      a.checked = this.value !== "" && a.value === this.value;
+      const e = t ? a.checked : r === 0;
+      (i = (s = a.shadowRoot) == null ? void 0 : s.querySelector(".radio")) == null || i.setAttribute("tabindex", e ? "0" : "-1");
     });
   }
   handleSelect(o) {
@@ -1168,7 +1146,7 @@ let me = class extends x {
     !(t instanceof HTMLElement) || t.tagName !== "VOX-RADIO" || (o.stopPropagation(), this.value !== t.value && (this.value = t.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
   }
   handleKeydown(o) {
-    var nt, lt;
+    var _, Me;
     const a = {
       ArrowDown: 1,
       ArrowRight: 1,
@@ -1177,23 +1155,16 @@ let me = class extends x {
     }[o.key];
     if (!a) return;
     o.preventDefault();
-    const r = this.radios.filter((Ae) => !Ae.disabled);
+    const r = this.radios.filter((Ge) => !Ge.disabled);
     if (r.length === 0) return;
-    const e = r.findIndex((Ae) => Ae.checked), s = (Math.max(e, 0) + a + r.length) % r.length, i = r[s];
-    i.select(), (lt = (nt = i.shadowRoot) == null ? void 0 : nt.querySelector(".radio")) == null || lt.focus();
+    const e = r.findIndex((Ge) => Ge.checked), s = (Math.max(e, 0) + a + r.length) % r.length, i = r[s];
+    i.select(), (Me = (_ = i.shadowRoot) == null ? void 0 : _.querySelector(".radio")) == null || Me.focus();
   }
   render() {
-    return c`
-      <div
-        class="field"
-        role="radiogroup"
-        aria-label=${this.label || v}
-        aria-describedby=${u(this.noteId)}
-        aria-invalid=${this.invalid ? "true" : "false"}
-        aria-required=${this.required ? "true" : "false"}
-      >
-        ${this.label ? c`<span class="label">
-              ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : ""}
+    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"
@@ -1207,8 +1178,8 @@ let me = class extends x {
     `;
   }
 };
-me.styles = [
-  ce,
+Pe.styles = [
+  ue,
   d`
       .options {
         display: flex;
@@ -1218,18 +1189,18 @@ me.styles = [
       }
     `
 ];
-ht([
+kt([
   n()
-], me.prototype, "value", 2);
-me = ht([
+], Pe.prototype, "value", 2);
+Pe = kt([
   p("vox-radio-group")
-], me);
-var qt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, Ge = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Nt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Pe);
+var ro = Object.defineProperty, ao = Object.getOwnPropertyDescriptor, it = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ao(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && qt(t, a, e), e;
+  return r && e && ro(t, a, e), e;
 };
-let U = class extends x {
+let Y = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1250,7 +1221,7 @@ let U = class extends x {
     this.value = this.selectEl.value, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return c`
+    return l`
       <div class="field">
         ${this.renderLabel("select")}
         <select
@@ -1258,8 +1229,6 @@ let U = class extends x {
           class="control"
           ?required=${this.required}
           ?disabled=${this.disabled}
-          aria-describedby=${u(this.noteId)}
-          aria-invalid=${this.invalid ? "true" : "false"}
           @change=${this.handleChange}
         ></select>
         ${this.renderNote()}
@@ -1268,8 +1237,8 @@ let U = class extends x {
     `;
   }
 };
-U.styles = [
-  ce,
+Y.styles = [
+  ue,
   d`
       select.control {
         appearance: none;
@@ -1281,21 +1250,21 @@ U.styles = [
       }
     `
 ];
-Ge([
+it([
   n()
-], U.prototype, "value", 2);
-Ge([
-  Ze("select")
-], U.prototype, "selectEl", 2);
-U = Ge([
+], Y.prototype, "value", 2);
+it([
+  rt("select")
+], Y.prototype, "selectEl", 2);
+Y = it([
   p("vox-select")
-], U);
-var Tt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, Xe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ft(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Y);
+var so = Object.defineProperty, io = Object.getOwnPropertyDescriptor, nt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? io(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Tt(t, a, e), e;
+  return r && e && so(t, a, e), e;
 };
-let K = class extends x {
+let X = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -1309,7 +1278,7 @@ let K = class extends x {
     this.checked = o.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return c`
+    return l`
       <label class="check">
         <input
           type="checkbox"
@@ -1324,8 +1293,8 @@ let K = class extends x {
     `;
   }
 };
-K.styles = [
-  pt,
+X.styles = [
+  Ot,
   d`
       .track {
         flex: none;
@@ -1364,21 +1333,21 @@ K.styles = [
       }
     `
 ];
-Xe([
+nt([
   n({ type: Boolean, reflect: !0 })
-], K.prototype, "checked", 2);
-Xe([
+], X.prototype, "checked", 2);
+nt([
   n()
-], K.prototype, "value", 2);
-K = Xe([
+], X.prototype, "value", 2);
+X = nt([
   p("vox-switch")
-], K);
-var Rt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, de = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Zt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], X);
+var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, fe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? lo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Rt(t, a, e), e;
+  return r && e && no(t, a, e), e;
 };
-let w = class extends x {
+let C = class extends x {
   constructor() {
     super(...arguments), this.value = "", this.rows = 4, this.readonly = !1;
   }
@@ -1401,20 +1370,18 @@ let w = class extends x {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
-    return c`
+    return l`
       <div class="field">
         ${this.renderLabel("textarea")}
         <textarea
           id="textarea"
           class="control"
           rows=${this.rows}
-          .value=${dt(this.value)}
-          placeholder=${u(this.placeholder)}
+          .value=${Mt(this.value)}
+          placeholder=${E(this.placeholder)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          aria-describedby=${u(this.noteId)}
-          aria-invalid=${this.invalid ? "true" : "false"}
           @input=${this.handleInput}
           @change=${this.handleChange}
         ></textarea>
@@ -1423,8 +1390,8 @@ let w = class extends x {
     `;
   }
 };
-w.styles = [
-  ce,
+C.styles = [
+  ue,
   d`
       textarea.control {
         resize: vertical;
@@ -1432,44 +1399,39 @@ w.styles = [
       }
     `
 ];
-de([
+fe([
   n()
-], w.prototype, "value", 2);
-de([
+], C.prototype, "value", 2);
+fe([
   n()
-], w.prototype, "placeholder", 2);
-de([
+], C.prototype, "placeholder", 2);
+fe([
   n({ type: Number })
-], w.prototype, "rows", 2);
-de([
+], C.prototype, "rows", 2);
+fe([
   n({ type: Boolean, reflect: !0 })
-], w.prototype, "readonly", 2);
-w = de([
+], C.prototype, "readonly", 2);
+C = fe([
   p("vox-textarea")
-], w);
-var Ut = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, pe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Kt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], C);
+var co = Object.defineProperty, po = Object.getOwnPropertyDescriptor, ge = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? po(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Ut(t, a, e), e;
+  return r && e && co(t, a, e), e;
 };
-let $ = class extends h {
+let M = class extends h {
   constructor() {
     super(...arguments), this.alt = "", this.initials = "", this.size = "md";
   }
   render() {
-    const o = !this.src && this.alt;
-    return c`
-      <span
-        class="avatar"
-        role=${o ? "img" : v}
-        aria-label=${o ? this.alt : v}
-      >
-        ${this.src ? c`<img src=${this.src} alt=${this.alt} />` : this.initials}
+    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>
     `;
   }
 };
-$.styles = d`
+M.styles = d`
     :host {
       display: inline-block;
     }
@@ -1517,27 +1479,27 @@ $.styles = d`
       font-size: 28px;
     }
   `;
-pe([
+ge([
   n()
-], $.prototype, "src", 2);
-pe([
+], M.prototype, "src", 2);
+ge([
   n()
-], $.prototype, "alt", 2);
-pe([
+], M.prototype, "alt", 2);
+ge([
   n()
-], $.prototype, "initials", 2);
-pe([
+], M.prototype, "initials", 2);
+ge([
   n({ reflect: !0 })
-], $.prototype, "size", 2);
-$ = pe([
+], M.prototype, "size", 2);
+M = ge([
   p("vox-avatar")
-], $);
-var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, Qe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Xt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], M);
+var ho = Object.defineProperty, vo = Object.getOwnPropertyDescriptor, lt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? vo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Gt(t, a, e), e;
+  return r && e && ho(t, a, e), e;
 };
-let G = class extends h {
+let W = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.reverse = !1, this.hasActions = !1;
   }
@@ -1546,7 +1508,7 @@ let G = class extends h {
     this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return c`
+    return l`
       <div class="billboard">
         <div class="media"><slot name="media"></slot></div>
         <div class="content">
@@ -1560,7 +1522,7 @@ let G = class extends h {
     `;
   }
 };
-G.styles = d`
+W.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1622,30 +1584,30 @@ G.styles = d`
       display: none;
     }
   `;
-Qe([
+lt([
   n()
-], G.prototype, "heading", 2);
-Qe([
+], W.prototype, "heading", 2);
+lt([
   n({ type: Boolean, reflect: !0 })
-], G.prototype, "reverse", 2);
-G = Qe([
+], W.prototype, "reverse", 2);
+W = lt([
   p("vox-billboard")
-], G);
-var Qt = Object.getOwnPropertyDescriptor, Wt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Qt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], W);
+var xo = Object.getOwnPropertyDescriptor, uo = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? xo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = i(e) || e);
   return e;
 };
-let Be = class extends h {
+let Xe = class extends h {
   render() {
-    return c`
+    return l`
       <nav aria-label="Breadcrumbs">
         <slot></slot>
       </nav>
     `;
   }
 };
-Be.styles = d`
+Xe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1679,21 +1641,18 @@ Be.styles = d`
       color: var(--vox-color-text-3);
     }
   `;
-Be = Wt([
+Xe = uo([
   p("vox-breadcrumbs")
-], Be);
-var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, De = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Jt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Xe);
+var fo = Object.defineProperty, go = Object.getOwnPropertyDescriptor, Ie = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? go(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Yt(t, a, e), e;
+  return r && e && fo(t, a, e), e;
 };
-let S = class extends h {
+let N = class extends h {
   constructor() {
     super(...arguments), this.siteTitle = "", this.href = "/", this.mobileOpen = !1, this.handleOutsideClick = (o) => {
       this.mobileOpen && !o.composedPath().includes(this) && (this.mobileOpen = !1);
-    }, this.handleFocusOut = (o) => {
-      const t = o.relatedTarget;
-      this.mobileOpen && !(t && this.contains(t)) && (this.mobileOpen = !1);
     }, this.handleKeydown = (o) => {
       var t;
       o.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (t = this.renderRoot.querySelector(".menu-toggle")) == null || t.focus());
@@ -1704,17 +1663,17 @@ let S = class extends h {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("focusout", this.handleFocusOut);
+    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), this.removeEventListener("focusout", this.handleFocusOut);
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
   }
   render() {
-    return c`
+    return l`
       <header class="header">
         <a class="brand" href=${this.href}>
           <slot name="logo"></slot>
-          ${this.siteTitle ? c`<span>${this.siteTitle}</span>` : v}
+          ${this.siteTitle ? l`<span>${this.siteTitle}</span>` : v}
         </a>
         <button
           type="button"
@@ -1749,7 +1708,7 @@ let S = class extends h {
     `;
   }
 };
-S.styles = d`
+N.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1879,37 +1838,37 @@ S.styles = d`
       }
     }
   `;
-De([
+Ie([
   n({ attribute: "site-title" })
-], S.prototype, "siteTitle", 2);
-De([
+], N.prototype, "siteTitle", 2);
+Ie([
   n()
-], S.prototype, "href", 2);
-De([
-  le()
-], S.prototype, "mobileOpen", 2);
-S = De([
+], N.prototype, "href", 2);
+Ie([
+  Z()
+], N.prototype, "mobileOpen", 2);
+N = Ie([
   p("vox-header")
-], S);
-var eo = Object.defineProperty, to = Object.getOwnPropertyDescriptor, he = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? to(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], N);
+var bo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, be = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? yo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && eo(t, a, e), e;
+  return r && e && bo(t, a, e), e;
 };
-let _ = class extends h {
+let O = class extends h {
   constructor() {
     super(...arguments), this.previousLabel = "", this.nextLabel = "";
   }
   render() {
-    return c`
+    return l`
       <nav aria-label="Series">
-        ${this.previousHref ? c`
+        ${this.previousHref ? l`
               <a href=${this.previousHref} rel="prev">
                 <span class="direction">← Previous</span>
                 <span class="title">${this.previousLabel}</span>
               </a>
             ` : v}
-        ${this.nextHref ? c`
+        ${this.nextHref ? l`
               <a class="next" href=${this.nextHref} rel="next">
                 <span class="direction">Next →</span>
                 <span class="title">${this.nextLabel}</span>
@@ -1919,7 +1878,7 @@ let _ = class extends h {
     `;
   }
 };
-_.styles = d`
+O.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1969,33 +1928,30 @@ _.styles = d`
       color: var(--vox-color-brand-1);
     }
   `;
-he([
+be([
   n({ attribute: "previous-href" })
-], _.prototype, "previousHref", 2);
-he([
+], O.prototype, "previousHref", 2);
+be([
   n({ attribute: "previous-label" })
-], _.prototype, "previousLabel", 2);
-he([
+], O.prototype, "previousLabel", 2);
+be([
   n({ attribute: "next-href" })
-], _.prototype, "nextHref", 2);
-he([
+], O.prototype, "nextHref", 2);
+be([
   n({ attribute: "next-label" })
-], _.prototype, "nextLabel", 2);
-_ = he([
+], O.prototype, "nextLabel", 2);
+O = be([
   p("vox-series-nav")
-], _);
-var oo = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, f = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ro(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], O);
+var mo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, f = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? wo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && oo(t, a, e), e;
+  return r && e && mo(t, a, e), e;
 };
-let A = class extends h {
+let T = class extends h {
   constructor() {
     super(...arguments), this.label = "Section", this.toggleLabel = "Menu", this.mobileOpen = !1, this.handleOutsideClick = (o) => {
       this.mobileOpen && !o.composedPath().includes(this) && (this.mobileOpen = !1);
-    }, this.handleFocusOut = (o) => {
-      const t = o.relatedTarget;
-      this.mobileOpen && !(t && this.contains(t)) && (this.mobileOpen = !1);
     }, this.handleKeydown = (o) => {
       var t;
       o.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (t = this.renderRoot.querySelector(".toggle")) == null || t.focus());
@@ -2006,13 +1962,13 @@ let A = class extends h {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("focusout", this.handleFocusOut);
+    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), this.removeEventListener("focusout", this.handleFocusOut);
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
   }
   render() {
-    return c`
+    return l`
       <button
         type="button"
         class="toggle"
@@ -2045,7 +2001,7 @@ let A = class extends h {
     `;
   }
 };
-A.styles = d`
+T.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2107,29 +2063,28 @@ A.styles = d`
   `;
 f([
   n()
-], A.prototype, "label", 2);
+], T.prototype, "label", 2);
 f([
   n({ attribute: "toggle-label" })
-], A.prototype, "toggleLabel", 2);
+], T.prototype, "toggleLabel", 2);
 f([
-  le()
-], A.prototype, "mobileOpen", 2);
-A = f([
+  Z()
+], T.prototype, "mobileOpen", 2);
+T = f([
   p("vox-sidenav")
-], A);
-let C = class extends h {
+], T);
+let J = class extends h {
   constructor() {
-    super(...arguments), this.heading = "", this.open = !1, this.itemsId = `vox-sidenav-group-items-${C.nextId++}`;
+    super(...arguments), this.heading = "", this.open = !1;
   }
   toggle() {
     this.open = !this.open;
   }
   render() {
-    return c`
+    return l`
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
-        aria-controls=${this.itemsId}
         @click=${this.toggle}
       >
         ${this.heading}
@@ -2137,12 +2092,11 @@ let C = class extends h {
           <path d="m9 6 6 6-6 6" />
         </svg>
       </button>
-      <div id=${this.itemsId} class="items"><slot></slot></div>
+      <div class="items"><slot></slot></div>
     `;
   }
 };
-C.nextId = 0;
-C.styles = d`
+J.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2201,14 +2155,14 @@ C.styles = d`
   `;
 f([
   n()
-], C.prototype, "heading", 2);
+], J.prototype, "heading", 2);
 f([
   n({ type: Boolean, reflect: !0 })
-], C.prototype, "open", 2);
-C = f([
+], J.prototype, "open", 2);
+J = f([
   p("vox-sidenav-group")
-], C);
-let X = class extends h {
+], J);
+let Q = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasIcon = !1;
   }
@@ -2217,7 +2171,7 @@ let X = class extends h {
     this.hasIcon = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return c`
+    return l`
       <a href=${this.href} aria-current=${this.current ? "page" : "false"}>
         <span class="icon ${this.hasIcon ? "has-icon" : ""}">
           <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
@@ -2227,7 +2181,7 @@ let X = class extends h {
     `;
   }
 };
-X.styles = d`
+Q.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2273,31 +2227,31 @@ X.styles = d`
   `;
 f([
   n()
-], X.prototype, "href", 2);
+], Q.prototype, "href", 2);
 f([
   n({ type: Boolean, reflect: !0 })
-], X.prototype, "current", 2);
-X = f([
+], Q.prototype, "current", 2);
+Q = f([
   p("vox-sidenav-item")
-], X);
-var ao = Object.defineProperty, so = Object.getOwnPropertyDescriptor, vt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? so(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Q);
+var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, Lt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? _o(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && ao(t, a, e), e;
+  return r && e && $o(t, a, e), e;
 };
-let ye = class extends h {
+let Ve = class extends h {
   constructor() {
     super(...arguments), this.label = "Secondary";
   }
   render() {
-    return c`
+    return l`
       <nav aria-label=${this.label}>
         <slot></slot>
       </nav>
     `;
   }
 };
-ye.styles = d`
+Ve.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2332,18 +2286,18 @@ ye.styles = d`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-vt([
+Lt([
   n()
-], ye.prototype, "label", 2);
-ye = vt([
+], Ve.prototype, "label", 2);
+Ve = Lt([
   p("vox-subnav")
-], ye);
-var io = Object.defineProperty, no = Object.getOwnPropertyDescriptor, j = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? no(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Ve);
+var Co = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, j = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Mo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && io(t, a, e), e;
+  return r && e && Co(t, a, e), e;
 };
-let qe = class extends h {
+let We = class extends h {
   get tabs() {
     return [...this.querySelectorAll("vox-tab")];
   }
@@ -2369,21 +2323,14 @@ let qe = class extends h {
     ));
   }
   handleKeydown(o) {
-    const t = this.tabs;
-    if (o.key === "Home" || o.key === "End") {
-      o.preventDefault();
-      const i = t[o.key === "Home" ? 0 : t.length - 1];
-      i.select(), i.focusTab();
-      return;
-    }
-    const r = { ArrowRight: 1, ArrowLeft: -1 }[o.key];
-    if (!r) return;
+    const a = { ArrowRight: 1, ArrowLeft: -1 }[o.key];
+    if (!a) return;
     o.preventDefault();
-    const e = t.findIndex((i) => i.selected), s = t[(e + r + t.length) % t.length];
+    const r = this.tabs, e = r.findIndex((i) => i.selected), s = r[(e + a + r.length) % r.length];
     s.select(), s.focusTab();
   }
   render() {
-    return c`
+    return l`
       <div
         class="tablist"
         role="tablist"
@@ -2396,7 +2343,7 @@ let qe = class extends h {
     `;
   }
 };
-qe.styles = d`
+We.styles = d`
     :host {
       display: block;
     }
@@ -2407,10 +2354,10 @@ qe.styles = d`
       border-bottom: 1px solid var(--vox-color-divider);
     }
   `;
-qe = j([
+We = j([
   p("vox-tabs")
-], qe);
-let Q = class extends h {
+], We);
+let ee = class extends h {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1;
   }
@@ -2424,13 +2371,11 @@ let Q = class extends h {
     (o = this.renderRoot.querySelector(".tab")) == null || o.focus();
   }
   render() {
-    return c`
+    return l`
       <button
-        id="tab-${this.panel}"
         class="tab"
         role="tab"
         aria-selected=${this.selected ? "true" : "false"}
-        aria-controls="panel-${this.panel}"
         tabindex=${this.selected ? "0" : "-1"}
         @click=${this.select}
       >
@@ -2439,7 +2384,7 @@ let Q = class extends h {
     `;
   }
 };
-Q.styles = d`
+ee.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2476,31 +2421,22 @@ Q.styles = d`
   `;
 j([
   n()
-], Q.prototype, "panel", 2);
+], ee.prototype, "panel", 2);
 j([
   n({ type: Boolean, reflect: !0 })
-], Q.prototype, "selected", 2);
-Q = j([
+], ee.prototype, "selected", 2);
+ee = j([
   p("vox-tab")
-], Q);
-let W = class extends h {
+], ee);
+let te = class extends h {
   constructor() {
     super(...arguments), this.name = "", this.active = !1;
   }
   render() {
-    return c`
-      <div
-        id="panel-${this.name}"
-        role="tabpanel"
-        aria-labelledby="tab-${this.name}"
-        tabindex="0"
-      >
-        <slot></slot>
-      </div>
-    `;
+    return l`<div role="tabpanel"><slot></slot></div>`;
   }
 };
-W.styles = d`
+te.styles = d`
     :host {
       display: none;
       font-family: var(--vox-font-family-base);
@@ -2513,33 +2449,27 @@ W.styles = d`
     :host([active]) {
       display: block;
     }
-
-    div:focus-visible {
-      outline: 2px solid var(--vox-color-brand-1);
-      outline-offset: 2px;
-      border-radius: var(--vox-radius-sm);
-    }
   `;
 j([
   n()
-], W.prototype, "name", 2);
+], te.prototype, "name", 2);
 j([
   n({ type: Boolean, reflect: !0 })
-], W.prototype, "active", 2);
-W = j([
+], te.prototype, "active", 2);
+te = j([
   p("vox-tab-panel")
-], W);
-var lo = Object.defineProperty, co = Object.getOwnPropertyDescriptor, ve = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? co(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], te);
+var Oo = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, ye = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ko(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && lo(t, a, e), e;
+  return r && e && Oo(t, a, e), e;
 };
-let we = class extends h {
+let je = class extends h {
   constructor() {
     super(...arguments), this.heading = "On this page";
   }
   render() {
-    return c`
+    return l`
       <div class="heading" id="vox-toc-heading">${this.heading}</div>
       <nav aria-labelledby="vox-toc-heading">
         <slot></slot>
@@ -2547,7 +2477,7 @@ let we = class extends h {
     `;
   }
 };
-we.styles = d`
+je.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2568,13 +2498,13 @@ we.styles = d`
       border-left: 1px solid var(--vox-color-divider);
     }
   `;
-ve([
+ye([
   n()
-], we.prototype, "heading", 2);
-we = ve([
+], je.prototype, "heading", 2);
+je = ye([
   p("vox-toc")
-], we);
-let Y = class extends h {
+], je);
+let oe = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasChildren = !1;
   }
@@ -2583,7 +2513,7 @@ let Y = class extends h {
     this.hasChildren = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return c`
+    return l`
       <a href=${this.href} aria-current=${this.current ? "true" : "false"}>
         <slot></slot>
       </a>
@@ -2593,7 +2523,7 @@ let Y = class extends h {
     `;
   }
 };
-Y.styles = d`
+oe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2639,21 +2569,21 @@ Y.styles = d`
       display: none;
     }
   `;
-ve([
+ye([
   n()
-], Y.prototype, "href", 2);
-ve([
+], oe.prototype, "href", 2);
+ye([
   n({ type: Boolean, reflect: !0 })
-], Y.prototype, "current", 2);
-Y = ve([
+], oe.prototype, "current", 2);
+oe = ye([
   p("vox-toc-item")
-], Y);
-var po = Object.defineProperty, ho = Object.getOwnPropertyDescriptor, xe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ho(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], oe);
+var Lo = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, me = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Po(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && po(t, a, e), e;
+  return r && e && Lo(t, a, e), e;
 };
-let O = class extends h {
+let k = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1, this.lightDismiss = !1, this.hasFooter = !1;
   }
@@ -2679,14 +2609,14 @@ let O = class extends h {
     this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return c`
+    return l`
       <dialog
-        aria-labelledby=${this.heading ? "heading" : v}
+        aria-label=${this.heading || v}
         @close=${this.handleNativeClose}
         @click=${this.handleClick}
       >
         <div class="header">
-          <h2 class="heading" id="heading">${this.heading}</h2>
+          <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" />
@@ -2701,7 +2631,7 @@ let O = class extends h {
     `;
   }
 };
-O.styles = d`
+k.styles = d`
     dialog {
       box-sizing: border-box;
       width: min(90vw, 480px);
@@ -2788,29 +2718,29 @@ O.styles = d`
       margin-bottom: 0;
     }
   `;
-xe([
+me([
   n()
-], O.prototype, "heading", 2);
-xe([
+], k.prototype, "heading", 2);
+me([
   n({ type: Boolean })
-], O.prototype, "open", 2);
-xe([
+], k.prototype, "open", 2);
+me([
   n({ type: Boolean, attribute: "light-dismiss" })
-], O.prototype, "lightDismiss", 2);
-xe([
-  Ze("dialog")
-], O.prototype, "dialogEl", 2);
-O = xe([
+], k.prototype, "lightDismiss", 2);
+me([
+  rt("dialog")
+], k.prototype, "dialogEl", 2);
+k = me([
   p("vox-dialog")
-], O);
-var vo = Object.defineProperty, xo = Object.getOwnPropertyDescriptor, We = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? xo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], k);
+var Vo = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, ct = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? jo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && vo(t, a, e), e;
+  return r && e && Vo(t, a, e), e;
 };
-let M = class extends h {
+let re = class extends h {
   constructor() {
-    super(...arguments), this.summary = "Show details", this.open = !1, this.panelId = `vox-disclosure-panel-${M.nextId++}`;
+    super(...arguments), this.summary = "Show details", this.open = !1;
   }
   toggle() {
     this.open = !this.open, this.dispatchEvent(
@@ -2818,11 +2748,10 @@ let M = class extends h {
     );
   }
   render() {
-    return c`
+    return l`
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
-        aria-controls=${this.panelId}
         @click=${this.toggle}
       >
         <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -2830,14 +2759,13 @@ let M = class extends h {
         </svg>
         ${this.summary}
       </button>
-      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
+      <div class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;
   }
 };
-M.nextId = 0;
-M.styles = d`
+re.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2889,67 +2817,54 @@ M.styles = d`
       display: none;
     }
   `;
-We([
+ct([
   n()
-], M.prototype, "summary", 2);
-We([
+], re.prototype, "summary", 2);
+ct([
   n({ type: Boolean, reflect: !0 })
-], M.prototype, "open", 2);
-M = We([
+], re.prototype, "open", 2);
+re = ct([
   p("vox-disclosure")
-], M);
-var uo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, Ye = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? fo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], re);
+var zo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, dt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Do(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && uo(t, a, e), e;
+  return r && e && zo(t, a, e), e;
 };
-let J = class extends h {
+let ae = class extends h {
   constructor() {
     super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (o) => {
       this.open && !o.composedPath().includes(this) && (this.open = !1);
-    }, this.handleFocusOut = (o) => {
-      const t = o.relatedTarget;
-      this.open && !(t && this.contains(t)) && (this.open = !1);
     }, this.handleKeydown = (o) => {
       var t;
       if (o.key === "Escape" && this.open) {
         this.open = !1, (t = this.renderRoot.querySelector(".trigger")) == null || t.focus();
         return;
       }
-      if (o.key === "ArrowDown" || o.key === "ArrowUp") {
+      if ((o.key === "ArrowDown" || o.key === "ArrowUp") && this.open) {
         o.preventDefault();
-        const a = o.key === "ArrowDown" ? 1 : -1;
-        if (!this.open) {
-          this.open = !0, this.updateComplete.then(
-            () => this.focusItem(o.key === "ArrowDown" ? 0 : -1)
-          );
-          return;
-        }
-        const e = [...this.querySelectorAll("a, button")].indexOf(document.activeElement);
-        this.focusItem(Math.max(e, 0) + a);
+        const a = [...this.querySelectorAll("a, button")];
+        if (a.length === 0) return;
+        const r = document.activeElement, e = a.indexOf(r), s = o.key === "ArrowDown" ? 1 : -1;
+        a[(Math.max(e, 0) + s + a.length) % a.length].focus();
       }
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("focusout", this.handleFocusOut);
+    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), this.removeEventListener("focusout", this.handleFocusOut);
-  }
-  focusItem(o) {
-    const t = [...this.querySelectorAll("a, button")];
-    t.length !== 0 && t[(o + t.length) % t.length].focus();
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
   }
   toggle() {
-    this.open = !this.open, this.open && this.updateComplete.then(() => this.focusItem(0));
+    this.open = !this.open;
   }
   render() {
-    return c`
+    return l`
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
         aria-haspopup="true"
-        aria-controls="menu"
         @click=${this.toggle}
       >
         ${this.label}
@@ -2957,13 +2872,13 @@ let J = class extends h {
           <path d="m6 9 6 6 6-6" />
         </svg>
       </button>
-      <div id="menu" class="menu">
+      <div class="menu">
         <slot @click=${() => this.open = !1}></slot>
       </div>
     `;
   }
 };
-J.styles = d`
+ae.styles = d`
     :host {
       position: relative;
       display: inline-block;
@@ -3062,21 +2977,21 @@ J.styles = d`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-Ye([
+dt([
   n()
-], J.prototype, "label", 2);
-Ye([
+], ae.prototype, "label", 2);
+dt([
   n({ type: Boolean, reflect: !0 })
-], J.prototype, "open", 2);
-J = Ye([
+], ae.prototype, "open", 2);
+ae = dt([
   p("vox-dropdown")
-], J);
-var go = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, ue = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? bo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], ae);
+var So = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, we = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Eo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && go(t, a, e), e;
+  return r && e && So(t, a, e), e;
 };
-let $e = class extends h {
+let ze = class extends h {
   constructor() {
     super(...arguments), this.single = !1;
   }
@@ -3090,10 +3005,10 @@ let $e = class extends h {
     );
   }
   render() {
-    return c`<slot @vox-toggle=${this.handleToggle}></slot>`;
+    return l`<slot @vox-toggle=${this.handleToggle}></slot>`;
   }
 };
-$e.styles = d`
+ze.styles = d`
     :host {
       display: block;
       border: 1px solid var(--vox-color-divider);
@@ -3105,15 +3020,15 @@ $e.styles = d`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-ue([
+we([
   n({ type: Boolean })
-], $e.prototype, "single", 2);
-$e = ue([
+], ze.prototype, "single", 2);
+ze = we([
   p("vox-accordion")
-], $e);
-let k = class extends h {
+], ze);
+let se = class extends h {
   constructor() {
-    super(...arguments), this.heading = "", this.open = !1, this.panelId = `vox-accordion-panel-${k.nextId++}`;
+    super(...arguments), this.heading = "", this.open = !1;
   }
   toggle() {
     this.open = !this.open, this.dispatchEvent(
@@ -3121,12 +3036,11 @@ let k = class extends h {
     );
   }
   render() {
-    return c`
+    return l`
       <h3 style="margin:0">
         <button
           class="trigger"
           aria-expanded=${this.open ? "true" : "false"}
-          aria-controls=${this.panelId}
           @click=${this.toggle}
         >
           ${this.heading}
@@ -3135,14 +3049,13 @@ let k = class extends h {
           </svg>
         </button>
       </h3>
-      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
+      <div class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;
   }
 };
-k.nextId = 0;
-k.styles = d`
+se.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3204,21 +3117,21 @@ k.styles = d`
       margin-bottom: 0;
     }
   `;
-ue([
+we([
   n()
-], k.prototype, "heading", 2);
-ue([
+], se.prototype, "heading", 2);
+we([
   n({ type: Boolean, reflect: !0 })
-], k.prototype, "open", 2);
-k = ue([
+], se.prototype, "open", 2);
+se = we([
   p("vox-accordion-item")
-], k);
-var mo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, fe = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? yo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], se);
+var Ao = Object.defineProperty, Ho = Object.getOwnPropertyDescriptor, $e = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ho(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && mo(t, a, e), e;
+  return r && e && Ao(t, a, e), e;
 };
-const wo = {
+const Bo = {
   info: "info",
   success: "check-circle",
   warning: "warning",
@@ -3234,12 +3147,8 @@ let L = class extends h {
     );
   }
   render() {
-    const o = this.variant === "danger" || this.variant === "warning";
-    return c`
-      <div
-        class="alert ${this.variant}"
-        role=${o ? "alert" : "status"}
-      >
+    return l`
+      <div class="alert ${this.variant}" role="alert">
         <svg
           class="icon"
           viewBox="0 0 48 48"
@@ -3250,13 +3159,13 @@ let L = class extends h {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${y[wo[this.variant]]}
+          ${y[Bo[this.variant]]}
         </svg>
         <div class="body">
-          ${this.heading ? c`<p class="heading">${this.heading}</p>` : v}
+          ${this.heading ? l`<p class="heading">${this.heading}</p>` : v}
           <slot></slot>
         </div>
-        ${this.dismissible ? c`
+        ${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" />
@@ -3386,35 +3295,35 @@ L.styles = d`
       margin-bottom: 0;
     }
   `;
-fe([
+$e([
   n()
 ], L.prototype, "variant", 2);
-fe([
+$e([
   n()
 ], L.prototype, "heading", 2);
-fe([
+$e([
   n({ type: Boolean })
 ], L.prototype, "dismissible", 2);
-fe([
+$e([
   n({ type: Boolean, reflect: !0 })
 ], L.prototype, "open", 2);
-L = fe([
+L = $e([
   p("vox-alert")
 ], L);
-var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, xt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? _o(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+var No = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Pt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? To(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && $o(t, a, e), e;
+  return r && e && No(t, a, e), e;
 };
-let _e = class extends h {
+let De = class extends h {
   constructor() {
     super(...arguments), this.variant = "brand";
   }
   render() {
-    return c`<span class="badge ${this.variant}"><slot></slot></span>`;
+    return l`<span class="badge ${this.variant}"><slot></slot></span>`;
   }
 };
-_e.styles = d`
+De.styles = d`
     :host {
       display: inline-block;
     }
@@ -3456,24 +3365,24 @@ _e.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-xt([
+Pt([
   n()
-], _e.prototype, "variant", 2);
-_e = xt([
+], De.prototype, "variant", 2);
+De = Pt([
   p("vox-badge")
-], _e);
-var Co = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, Je = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Oo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], De);
+var qo = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, pt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Io(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Co(t, a, e), e;
+  return r && e && qo(t, a, e), e;
 };
-let ee = class extends h {
+let ie = class extends h {
   constructor() {
     super(...arguments), this.date = "";
   }
   render() {
     const o = /* @__PURE__ */ new Date(`${this.date}T00:00:00`), t = !Number.isNaN(o.getTime()), a = t ? o.toLocaleString(this.locale, { month: "short" }) : "—", r = t ? o.getDate() : "–";
-    return c`
+    return l`
       <time class="tile" datetime=${this.date}>
         <span class="month">${a}</span>
         <span class="day">${r}</span>
@@ -3481,7 +3390,7 @@ let ee = class extends h {
     `;
   }
 };
-ee.styles = d`
+ie.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -3517,37 +3426,37 @@ ee.styles = d`
       color: var(--vox-color-text-1);
     }
   `;
-Je([
+pt([
   n()
-], ee.prototype, "date", 2);
-Je([
+], ie.prototype, "date", 2);
+pt([
   n()
-], ee.prototype, "locale", 2);
-ee = Je([
+], ie.prototype, "locale", 2);
+ie = pt([
   p("vox-calendar-tile")
-], ee);
-var Mo = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, et = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ko(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], ie);
+var Ro = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, ht = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Zo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Mo(t, a, e), e;
+  return r && e && Ro(t, a, e), e;
 };
-const Lo = {
+const Fo = {
   info: "Info",
   tip: "Tip",
   warning: "Warning",
   danger: "Danger"
-}, Po = {
+}, Uo = {
   info: "info",
   tip: "check-circle",
   warning: "warning",
   danger: "x-circle"
 };
-let te = class extends h {
+let ne = class extends h {
   constructor() {
     super(...arguments), this.variant = "info";
   }
   render() {
-    return c`
+    return l`
       <div class="callout ${this.variant}" role="note">
         <svg
           class="icon"
@@ -3559,17 +3468,17 @@ let te = class extends h {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${y[Po[this.variant]]}
+          ${y[Uo[this.variant]]}
         </svg>
         <div class="content">
-          <p class="heading">${this.heading ?? Lo[this.variant]}</p>
+          <p class="heading">${this.heading ?? Fo[this.variant]}</p>
           <slot></slot>
         </div>
       </div>
     `;
   }
 };
-te.styles = d`
+ne.styles = d`
     :host {
       display: block;
     }
@@ -3652,21 +3561,21 @@ te.styles = d`
       margin-bottom: 0;
     }
   `;
-et([
+ht([
   n()
-], te.prototype, "variant", 2);
-et([
+], ne.prototype, "variant", 2);
+ht([
   n()
-], te.prototype, "heading", 2);
-te = et([
+], ne.prototype, "heading", 2);
+ne = ht([
   p("vox-callout")
-], te);
-var Vo = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, ze = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? jo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], ne);
+var Ko = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, Re = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Go(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Vo(t, a, e), e;
+  return r && e && Ko(t, a, e), e;
 };
-let I = class extends h {
+let q = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasIcon = !1, this.hasBadge = !1, this.hasFooter = !1;
   }
@@ -3683,11 +3592,11 @@ let I = class extends h {
     this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const o = c`
+    const o = l`
       <div class="badge ${this.hasBadge ? "has-badge" : ""}">
         <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
       </div>
-      <div class="icon ${this.hasIcon ? "has-icon" : ""}" aria-hidden="true">
+      <div class="icon ${this.hasIcon ? "has-icon" : ""}">
         <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
       </div>
       <h3 class="heading">${this.heading}</h3>
@@ -3696,10 +3605,10 @@ let I = class extends h {
         <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
       </div>
     `;
-    return this.href !== void 0 ? c`<a class="card" href=${this.href} target=${this.target ?? v}>${o}</a>` : c`<div class="card">${o}</div>`;
+    return this.href !== void 0 ? l`<a class="card" href=${this.href} target=${this.target ?? v}>${o}</a>` : l`<div class="card">${o}</div>`;
   }
 };
-I.styles = d`
+q.styles = d`
     :host {
       display: block;
     }
@@ -3784,24 +3693,663 @@ I.styles = d`
       display: none;
     }
   `;
-ze([
+Re([
   n()
-], I.prototype, "heading", 2);
-ze([
+], q.prototype, "heading", 2);
+Re([
   n()
-], I.prototype, "href", 2);
-ze([
+], q.prototype, "href", 2);
+Re([
   n()
-], I.prototype, "target", 2);
-I = ze([
+], q.prototype, "target", 2);
+q = Re([
   p("vox-card")
-], I);
-var Do = Object.defineProperty, zo = Object.getOwnPropertyDescriptor, ut = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? zo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], q);
+function Vt(o, t) {
+  let a = t;
+  for (; a < o.length && (o[a] === " " || o[a] === "	"); ) a++;
+  return a;
+}
+function z(o, t) {
+  return {
+    re: o,
+    type: (a, r, e) => t.has(a) ? "keyword" : r[Vt(r, e)] === "(" ? "function" : "plain"
+  };
+}
+function Je(o) {
+  return {
+    re: o,
+    type: (t, a, r) => a[Vt(a, r)] === ":" ? "property" : "string"
+  };
+}
+const _e = /-?\b\d+\.?\d*(?:[eE][+-]?\d+)?\b/y, $ = /"(?:\\.|[^"\\])*"/y, D = /'(?:\\.|[^'\\])*'/y, Ze = /#.*/y, Yo = /\/\/.*/y, jt = /\/\*[\s\S]*?\*\//y;
+function mt(o, t, a) {
+  const r = o[o.length - 1];
+  r && r.type === t ? r.text += a : o.push({ type: t, text: a });
+}
+function Xo(o, t) {
+  const a = [];
+  let r = 0;
+  for (; r < o.length; ) {
+    let e = !1;
+    for (const s of t) {
+      s.re.lastIndex = r;
+      const i = s.re.exec(o);
+      if (i && i.index === r && i[0].length > 0) {
+        const _ = i[0], Me = typeof s.type == "function" ? s.type(_, o, r + _.length) : s.type;
+        mt(a, Me, _), r += _.length, e = !0;
+        break;
+      }
+    }
+    e || (mt(a, "plain", o[r]), r++);
+  }
+  return a;
+}
+const Wo = /* @__PURE__ */ new Set([
+  "if",
+  "then",
+  "elif",
+  "else",
+  "fi",
+  "for",
+  "while",
+  "until",
+  "do",
+  "done",
+  "case",
+  "esac",
+  "in",
+  "function",
+  "select",
+  "time",
+  "return",
+  "exit",
+  "break",
+  "continue",
+  "local",
+  "export",
+  "readonly",
+  "declare",
+  "unset",
+  "shift",
+  "eval",
+  "exec",
+  "trap",
+  "set",
+  "source",
+  "alias",
+  "unalias",
+  "true",
+  "false"
+]), ke = [
+  { re: Ze, type: "comment" },
+  { re: /\$\{[^}]*\}|\$[A-Za-z_]\w*|\$[0-9@#?$!*_-]/y, type: "function" },
+  { re: $, type: "string" },
+  { re: D, type: "string" },
+  { re: _e, type: "number" },
+  z(/[A-Za-z_][\w-]*/y, Wo)
+], Jo = /* @__PURE__ */ new Set([
+  "true",
+  "false",
+  "yes",
+  "no",
+  "null",
+  "on",
+  "off",
+  "True",
+  "False",
+  "Yes",
+  "No",
+  "Null",
+  "On",
+  "Off",
+  "TRUE",
+  "FALSE",
+  "YES",
+  "NO",
+  "NULL",
+  "ON",
+  "OFF"
+]), wt = [
+  { re: Ze, type: "comment" },
+  Je($),
+  Je(D),
+  { re: /[A-Za-z_][\w .-]*?(?=:(\s|$))/y, type: "property" },
+  { re: /[&*!][A-Za-z_][\w:.]*/y, type: "function" },
+  { re: _e, type: "number" },
+  z(/[A-Za-z_][\w-]*/y, Jo)
+], Qo = [
+  Je($),
+  { re: _e, type: "number" },
+  z(/[A-Za-z_]\w*/y, /* @__PURE__ */ new Set(["true", "false", "null"]))
+], er = /* @__PURE__ */ new Set([
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "for",
+  "while",
+  "do",
+  "switch",
+  "case",
+  "default",
+  "break",
+  "continue",
+  "class",
+  "extends",
+  "super",
+  "new",
+  "this",
+  "import",
+  "export",
+  "from",
+  "as",
+  "async",
+  "await",
+  "try",
+  "catch",
+  "finally",
+  "throw",
+  "typeof",
+  "instanceof",
+  "in",
+  "of",
+  "yield",
+  "static",
+  "get",
+  "set",
+  "void",
+  "delete",
+  "null",
+  "undefined",
+  "true",
+  "false",
+  "public",
+  "private",
+  "protected",
+  "readonly",
+  "interface",
+  "type",
+  "enum",
+  "implements",
+  "namespace",
+  "declare",
+  "abstract",
+  "keyof",
+  "satisfies"
+]), Le = [
+  { re: Yo, type: "comment" },
+  { re: jt, type: "comment" },
+  { re: $, type: "string" },
+  { re: D, type: "string" },
+  { re: /`(?:\\.|[^`\\])*`/y, type: "string" },
+  { re: /-?\b0[xXbBoO][0-9a-fA-F]+\b|-?\b\d+\.?\d*(?:[eE][+-]?\d+)?\b/y, type: "number" },
+  z(/[A-Za-z_$][\w$]*/y, er)
+], tr = [
+  { re: jt, type: "comment" },
+  { re: $, type: "string" },
+  { re: D, type: "string" },
+  { re: /@[\w-]+/y, type: "keyword" },
+  { re: /!important/y, type: "keyword" },
+  { re: /#[0-9a-fA-F]{3,8}\b/y, type: "number" },
+  { re: /-?\b\d+\.?\d*[a-zA-Z%]*\b/y, type: "number" },
+  { re: /[a-zA-Z-]+(?=\s*:)/y, type: "property" },
+  z(/[a-zA-Z-]+/y, /* @__PURE__ */ new Set())
+], $t = [
+  { re: /<!--[\s\S]*?-->/y, type: "comment" },
+  { re: /<\/?[a-zA-Z][\w:-]*/y, type: "tag" },
+  { re: /[a-zA-Z-][\w-]*(?=\s*=)/y, type: "property" },
+  { re: $, type: "string" },
+  { re: D, type: "string" },
+  { re: /&[\w#]+;/y, type: "keyword" }
+], or = /* @__PURE__ */ new Set([
+  "def",
+  "end",
+  "if",
+  "elsif",
+  "else",
+  "unless",
+  "while",
+  "until",
+  "for",
+  "in",
+  "do",
+  "class",
+  "module",
+  "begin",
+  "rescue",
+  "ensure",
+  "raise",
+  "return",
+  "yield",
+  "break",
+  "next",
+  "redo",
+  "retry",
+  "case",
+  "when",
+  "then",
+  "and",
+  "or",
+  "not",
+  "nil",
+  "true",
+  "false",
+  "self",
+  "super",
+  "require",
+  "require_relative",
+  "include",
+  "extend",
+  "attr_accessor",
+  "attr_reader",
+  "attr_writer",
+  "private",
+  "protected",
+  "public",
+  "lambda",
+  "proc",
+  "new"
+]), _t = [
+  { re: Ze, type: "comment" },
+  { re: /:[A-Za-z_]\w*[?!]?/y, type: "string" },
+  { re: /@{1,2}[A-Za-z_]\w*|\$[A-Za-z_]\w*/y, type: "function" },
+  { re: $, type: "string" },
+  { re: D, type: "string" },
+  { re: _e, type: "number" },
+  { re: /[A-Z]\w*/y, type: "property" },
+  z(/[a-z_]\w*[?!]?/y, or)
+], rr = /* @__PURE__ */ new Set([
+  "class",
+  "define",
+  "node",
+  "inherits",
+  "if",
+  "elsif",
+  "else",
+  "unless",
+  "case",
+  "and",
+  "or",
+  "in",
+  "undef",
+  "true",
+  "false",
+  "default",
+  "import",
+  "include",
+  "require",
+  "contain",
+  "function",
+  "type",
+  "application",
+  "produces",
+  "consumes",
+  "private",
+  "return",
+  "break",
+  "next",
+  "each",
+  "map",
+  "filter",
+  "reduce",
+  "with",
+  "String",
+  "Integer",
+  "Boolean",
+  "Array",
+  "Hash",
+  "Optional",
+  "Enum",
+  "Variant",
+  "Numeric",
+  "Float",
+  "Undef",
+  "Any",
+  "Pattern",
+  "Regexp",
+  "Sensitive",
+  "Struct",
+  "Tuple",
+  "Type",
+  "Callable",
+  "Data",
+  "Scalar"
+]), Ct = [
+  { re: Ze, type: "comment" },
+  { re: $, type: "string" },
+  { re: D, type: "string" },
+  { re: /\$[\w:]+/y, type: "function" },
+  { re: /[a-zA-Z_][\w:]*(?=\s*\{)/y, type: "tag" },
+  { re: /[a-z_]\w*(?=\s*=>)/y, type: "property" },
+  { re: _e, type: "number" },
+  z(/[A-Za-z_][\w:]*/y, rr)
+], ar = {
+  bash: ke,
+  sh: ke,
+  shell: ke,
+  zsh: ke,
+  yaml: wt,
+  yml: wt,
+  json: Qo,
+  javascript: Le,
+  js: Le,
+  typescript: Le,
+  ts: Le,
+  css: tr,
+  html: $t,
+  xml: $t,
+  ruby: _t,
+  rb: _t,
+  puppet: Ct,
+  pp: Ct
+}, sr = {
+  bash: "Bash",
+  sh: "Shell",
+  shell: "Shell",
+  zsh: "Zsh",
+  yaml: "YAML",
+  yml: "YAML",
+  json: "JSON",
+  javascript: "JavaScript",
+  js: "JavaScript",
+  typescript: "TypeScript",
+  ts: "TypeScript",
+  css: "CSS",
+  html: "HTML",
+  xml: "XML",
+  ruby: "Ruby",
+  rb: "Ruby",
+  puppet: "Puppet",
+  pp: "Puppet",
+  plaintext: "Plain Text",
+  text: "Plain Text"
+};
+function ir(o, t) {
+  const a = ar[t];
+  return a ? Xo(o, a) : [{ type: "plain", text: o }];
+}
+var nr = Object.defineProperty, lr = Object.getOwnPropertyDescriptor, b = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? lr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Do(t, a, e), e;
+  return r && e && nr(t, a, e), e;
 };
-let Ce = class extends h {
+function cr(o) {
+  const t = o.split(`
+`);
+  for (; t.length && t[0].trim() === ""; ) t.shift();
+  for (; t.length && t[t.length - 1].trim() === ""; ) t.pop();
+  const a = t.filter((e) => e.trim() !== "").map((e) => {
+    var s;
+    return ((s = e.match(/^[ \t]*/)) == null ? void 0 : s[0].length) ?? 0;
+  }), r = a.length ? Math.min(...a) : 0;
+  return t.map((e) => e.slice(r)).join(`
+`);
+}
+function dr(o) {
+  const t = [[]];
+  for (const a of o)
+    a.text.split(`
+`).forEach((r, e) => {
+      e > 0 && t.push([]), r && t[t.length - 1].push({ type: a.type, text: r });
+    });
+  return t;
+}
+let u = class extends h {
+  constructor() {
+    super(...arguments), this.language = "", this.filename = "", this.lineNumbers = !1, this.noCopy = !1, this.noHeader = !1, this.noBorder = !1, this._code = "", this._copied = !1;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(this._copyResetTimer);
+  }
+  _handleSlotChange(o) {
+    const a = o.target.assignedNodes({ flatten: !0 }).map((r) => r.textContent ?? "").join("");
+    this._code = cr(a);
+  }
+  async _copy() {
+    var o;
+    try {
+      await navigator.clipboard.writeText(this._code);
+    } catch {
+      const t = document.createElement("textarea");
+      t.value = this._code, t.style.position = "fixed", t.style.opacity = "0", (o = this.shadowRoot) == null || o.appendChild(t), t.select(), document.execCommand("copy"), t.remove();
+    }
+    this._copied = !0, clearTimeout(this._copyResetTimer), this._copyResetTimer = setTimeout(() => {
+      this._copied = !1;
+    }, 1500);
+  }
+  render() {
+    const o = sr[this.language] ?? this.language, t = dr(ir(this._code, this.language));
+    return l`
+      <div class="block">
+        ${this.noHeader ? v : l`
+              <div class="header">
+                <span class="meta">
+                  ${this.filename ? l`<span class="filename">${this.filename}</span>` : v}
+                  ${o ? l`<span class="lang">${o}</span>` : v}
+                </span>
+                ${this.noCopy ? v : l`
+                      <button
+                        class="copy"
+                        type="button"
+                        @click=${this._copy}
+                        aria-label=${this._copied ? "Copied" : "Copy code"}
+                      >
+                        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                          ${y[this._copied ? "check" : "copy"]}
+                        </svg>
+                      </button>
+                    `}
+              </div>
+            `}
+        <pre tabindex="0"><code>${t.map(
+      (a) => l`<span class="line">${a.map(
+        (r) => r.type === "plain" ? r.text : l`<span class="tok-${r.type}">${r.text}</span>`
+      )}</span>`
+    )}</code></pre>
+        <span class="visually-hidden" aria-live="polite">${this._copied ? "Copied to clipboard" : ""}</span>
+      </div>
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    `;
+  }
+};
+u.styles = d`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .block {
+      border: 1px solid var(--vox-color-border);
+      border-radius: var(--vox-radius-md);
+      background-color: var(--vox-color-bg-alt);
+      overflow: hidden;
+    }
+
+    :host([no-border]) .block {
+      border: none;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-2) var(--vox-space-2) var(--vox-space-2) var(--vox-space-4);
+      border-bottom: 1px solid var(--vox-color-divider);
+      font-size: 12px;
+    }
+
+    .meta {
+      display: flex;
+      align-items: baseline;
+      gap: var(--vox-space-3);
+      min-width: 0;
+      overflow: hidden;
+      color: var(--vox-color-text-2);
+    }
+
+    .filename {
+      color: var(--vox-color-text-1);
+      font-family: var(--vox-font-family-mono);
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .lang {
+      flex: none;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .copy {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      background: none;
+      color: var(--vox-color-text-2);
+      cursor: pointer;
+    }
+
+    .copy:hover {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+    }
+
+    .copy:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .copy svg {
+      width: 15px;
+      height: 15px;
+    }
+
+    pre {
+      margin: 0;
+      padding: var(--vox-space-4);
+      overflow-x: auto;
+      white-space: pre;
+      tab-size: 2;
+    }
+
+    pre:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    code {
+      font-family: var(--vox-font-family-mono);
+      font-size: 13px;
+      line-height: 1.7;
+      color: var(--vox-color-text-1);
+    }
+
+    .line {
+      display: block;
+    }
+
+    :host([line-numbers]) code {
+      counter-reset: line;
+    }
+
+    :host([line-numbers]) .line {
+      padding-left: 3.5ch;
+      position: relative;
+    }
+
+    :host([line-numbers]) .line::before {
+      counter-increment: line;
+      content: counter(line);
+      position: absolute;
+      left: 0;
+      width: 2.5ch;
+      text-align: right;
+      color: var(--vox-color-text-3);
+      user-select: none;
+    }
+
+    .tok-comment {
+      color: var(--vox-code-comment);
+      font-style: italic;
+    }
+    .tok-keyword {
+      color: var(--vox-code-keyword);
+    }
+    .tok-string {
+      color: var(--vox-code-string);
+    }
+    .tok-number {
+      color: var(--vox-code-number);
+    }
+    .tok-function {
+      color: var(--vox-code-function);
+    }
+    .tok-property {
+      color: var(--vox-code-property);
+    }
+    .tok-tag {
+      color: var(--vox-code-tag);
+    }
+
+    slot {
+      display: none;
+    }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+  `;
+b([
+  n()
+], u.prototype, "language", 2);
+b([
+  n()
+], u.prototype, "filename", 2);
+b([
+  n({ type: Boolean, attribute: "line-numbers", reflect: !0 })
+], u.prototype, "lineNumbers", 2);
+b([
+  n({ type: Boolean, attribute: "no-copy" })
+], u.prototype, "noCopy", 2);
+b([
+  n({ type: Boolean, attribute: "no-header" })
+], u.prototype, "noHeader", 2);
+b([
+  n({ type: Boolean, attribute: "no-border", reflect: !0 })
+], u.prototype, "noBorder", 2);
+b([
+  Z()
+], u.prototype, "_code", 2);
+b([
+  Z()
+], u.prototype, "_copied", 2);
+u = b([
+  p("vox-code-block")
+], u);
+var pr = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, zt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? hr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && pr(t, a, e), e;
+};
+let Se = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasBody = !1, this.hasActions = !1;
   }
@@ -3814,9 +4362,9 @@ let Ce = class extends h {
     this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return c`
+    return l`
       <div class="band">
-        ${this.heading ? c`<h2 class="heading">${this.heading}</h2>` : v}
+        ${this.heading ? l`<h2 class="heading">${this.heading}</h2>` : v}
         <div class="body ${this.hasBody ? "has-content" : ""}">
           <slot @slotchange=${this.handleBodySlotChange}></slot>
         </div>
@@ -3827,7 +4375,7 @@ let Ce = class extends h {
     `;
   }
 };
-Ce.styles = d`
+Se.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3882,25 +4430,25 @@ Ce.styles = d`
       display: none;
     }
   `;
-ut([
+zt([
   n()
-], Ce.prototype, "heading", 2);
-Ce = ut([
+], Se.prototype, "heading", 2);
+Se = zt([
   p("vox-cta-band")
-], Ce);
-var Eo = Object.defineProperty, Ho = Object.getOwnPropertyDescriptor, ft = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ho(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Se);
+var vr = Object.defineProperty, xr = Object.getOwnPropertyDescriptor, Dt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? xr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Eo(t, a, e), e;
+  return r && e && vr(t, a, e), e;
 };
-let Oe = class extends h {
+let Ee = class extends h {
   constructor() {
     super(...arguments), this.heading = "";
   }
   render() {
-    return c`
+    return l`
       <div class="empty">
-        <div class="icon" aria-hidden="true"><slot name="icon"></slot></div>
+        <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>
@@ -3908,7 +4456,7 @@ let Oe = class extends h {
     `;
   }
 };
-Oe.styles = d`
+Ee.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3952,20 +4500,20 @@ Oe.styles = d`
       margin-top: var(--vox-space-4);
     }
   `;
-ft([
+Dt([
   n()
-], Oe.prototype, "heading", 2);
-Oe = ft([
+], Ee.prototype, "heading", 2);
+Ee = Dt([
   p("vox-empty-state")
-], Oe);
-var So = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, tt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ao(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Ee);
+var ur = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, vt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? fr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && So(t, a, e), e;
+  return r && e && ur(t, a, e), e;
 };
-let Ne = class extends h {
+let Qe = class extends h {
   render() {
-    return c`
+    return l`
       <footer>
         <div class="inner">
           <div class="columns"><slot></slot></div>
@@ -3975,7 +4523,7 @@ let Ne = class extends h {
     `;
   }
 };
-Ne.styles = d`
+Qe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4003,21 +4551,21 @@ Ne.styles = d`
       color: var(--vox-color-text-3);
     }
   `;
-Ne = tt([
+Qe = vt([
   p("vox-footer")
-], Ne);
-let Me = class extends h {
+], Qe);
+let Ae = class extends h {
   constructor() {
     super(...arguments), this.heading = "";
   }
   render() {
-    return c`
+    return l`
       <h3 class="heading">${this.heading}</h3>
       <div class="links"><slot></slot></div>
     `;
   }
 };
-Me.styles = d`
+Ae.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4049,18 +4597,18 @@ Me.styles = d`
       text-decoration: underline;
     }
   `;
-tt([
+vt([
   n()
-], Me.prototype, "heading", 2);
-Me = tt([
+], Ae.prototype, "heading", 2);
+Ae = vt([
   p("vox-footer-column")
-], Me);
-var Io = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, Ee = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Bo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], Ae);
+var gr = Object.defineProperty, br = Object.getOwnPropertyDescriptor, Fe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? br(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Io(t, a, e), e;
+  return r && e && gr(t, a, e), e;
 };
-let B = class extends h {
+let I = class extends h {
   constructor() {
     super(...arguments), this.cols = 0, this.min = "240px", this.gap = "md";
   }
@@ -4068,10 +4616,10 @@ let B = class extends h {
     this.style.gridTemplateColumns = this.cols > 0 ? `repeat(${this.cols}, minmax(0, 1fr))` : `repeat(auto-fit, minmax(min(${this.min}, 100%), 1fr))`;
   }
   render() {
-    return c`<slot></slot>`;
+    return l`<slot></slot>`;
   }
 };
-B.styles = d`
+I.styles = d`
     :host {
       display: grid;
     }
@@ -4088,24 +4636,24 @@ B.styles = d`
       gap: var(--vox-space-6);
     }
   `;
-Ee([
+Fe([
   n({ type: Number })
-], B.prototype, "cols", 2);
-Ee([
+], I.prototype, "cols", 2);
+Fe([
   n()
-], B.prototype, "min", 2);
-Ee([
+], I.prototype, "min", 2);
+Fe([
   n({ reflect: !0 })
-], B.prototype, "gap", 2);
-B = Ee([
+], I.prototype, "gap", 2);
+I = Fe([
   p("vox-grid")
-], B);
-var qo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, ot = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? No(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], I);
+var yr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, xt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? mr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && qo(t, a, e), e;
+  return r && e && yr(t, a, e), e;
 };
-let oe = class extends h {
+let le = class extends h {
   constructor() {
     super(...arguments), this.eyebrow = "", this.heading = "", this.hasActions = !1;
   }
@@ -4114,9 +4662,9 @@ let oe = class extends h {
     this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return c`
+    return l`
       <header class="hero">
-        ${this.eyebrow ? c`<p class="eyebrow">${this.eyebrow}</p>` : v}
+        ${this.eyebrow ? l`<p class="eyebrow">${this.eyebrow}</p>` : v}
         <h1 class="heading">${this.heading}</h1>
         <div class="body"><slot></slot></div>
         <div class="actions ${this.hasActions ? "has-content" : ""}">
@@ -4126,7 +4674,7 @@ let oe = class extends h {
     `;
   }
 };
-oe.styles = d`
+le.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4183,36 +4731,36 @@ oe.styles = d`
       display: none;
     }
   `;
-ot([
+xt([
   n()
-], oe.prototype, "eyebrow", 2);
-ot([
+], le.prototype, "eyebrow", 2);
+xt([
   n()
-], oe.prototype, "heading", 2);
-oe = ot([
+], le.prototype, "heading", 2);
+le = xt([
   p("vox-hero")
-], oe);
-var To = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, He = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Fo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], le);
+var wr = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, Ue = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? $r(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && To(t, a, e), e;
+  return r && e && wr(t, a, e), e;
 };
-let Te = class extends h {
+let et = class extends h {
   render() {
-    return c`<slot></slot>`;
+    return l`<slot></slot>`;
   }
 };
-Te.styles = d`
+et.styles = d`
     :host {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
       gap: var(--vox-space-4);
     }
   `;
-Te = He([
+et = Ue([
   p("vox-link-hub")
-], Te);
-let re = class extends h {
+], et);
+let ce = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.heading = "", this.hasIcon = !1;
   }
@@ -4221,10 +4769,10 @@ let re = class extends h {
     this.hasIcon = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return c`
+    return l`
       <a href=${this.href}>
         <span class="heading">
-          <span class="icon ${this.hasIcon ? "has-icon" : ""}" aria-hidden="true">
+          <span class="icon ${this.hasIcon ? "has-icon" : ""}">
             <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
           </span>
           ${this.heading}
@@ -4238,7 +4786,7 @@ let re = class extends h {
     `;
   }
 };
-re.styles = d`
+ce.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4299,26 +4847,26 @@ re.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-He([
+Ue([
   n()
-], re.prototype, "href", 2);
-He([
+], ce.prototype, "href", 2);
+Ue([
   n()
-], re.prototype, "heading", 2);
-re = He([
+], ce.prototype, "heading", 2);
+ce = Ue([
   p("vox-link-hub-item")
-], re);
-var Ro = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, rt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Zo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], ce);
+var _r = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, ut = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Cr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Ro(t, a, e), e;
+  return r && e && _r(t, a, e), e;
 };
-let ae = class extends h {
+let de = class extends h {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
   render() {
-    return c`
+    return l`
       <div role="status">
         <div class="spinner"></div>
         <span class="visually-hidden">${this.label}</span>
@@ -4326,7 +4874,7 @@ let ae = class extends h {
     `;
   }
 };
-ae.styles = d`
+de.styles = d`
     :host {
       display: inline-block;
     }
@@ -4379,33 +4927,33 @@ ae.styles = d`
       white-space: nowrap;
     }
   `;
-rt([
+ut([
   n({ reflect: !0 })
-], ae.prototype, "size", 2);
-rt([
+], de.prototype, "size", 2);
+ut([
   n()
-], ae.prototype, "label", 2);
-ae = rt([
+], de.prototype, "label", 2);
+de = ut([
   p("vox-loader")
-], ae);
-var Uo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, gt = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ko(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], de);
+var Mr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, St = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Or(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Uo(t, a, e), e;
+  return r && e && Mr(t, a, e), e;
 };
-let ke = class extends h {
+let He = class extends h {
   constructor() {
     super(...arguments), this.label = "Pagination";
   }
   render() {
-    return c`
+    return l`
       <nav aria-label=${this.label}>
         <slot></slot>
       </nav>
     `;
   }
 };
-ke.styles = d`
+He.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4417,8 +4965,7 @@ ke.styles = d`
       flex-wrap: wrap;
     }
 
-    ::slotted(a),
-    ::slotted(span) {
+    ::slotted(a) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -4440,42 +4987,42 @@ ke.styles = d`
       background-color: var(--vox-color-brand-soft);
     }
 
-    ::slotted([aria-current='page']) {
+    ::slotted(a[aria-current='page']) {
       background-color: var(--vox-color-brand-3);
       color: var(--vox-color-text-inverse);
       font-weight: 600;
     }
   `;
-gt([
+St([
   n()
-], ke.prototype, "label", 2);
-ke = gt([
+], He.prototype, "label", 2);
+He = St([
   p("vox-pagination")
-], ke);
-var Go = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, at = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Xo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], He);
+var kr = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, ft = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Lr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Go(t, a, e), e;
+  return r && e && kr(t, a, e), e;
 };
-let se = class extends h {
+let pe = class extends h {
   constructor() {
     super(...arguments), this.attribution = "", this.detail = "";
   }
   render() {
-    return c`
+    return l`
       <blockquote>
         <div class="text"><slot></slot></div>
-        ${this.attribution ? c`
+        ${this.attribution ? l`
               <footer>
                 <span class="attribution">${this.attribution}</span>
-                ${this.detail ? c`<span class="detail"> — ${this.detail}</span>` : v}
+                ${this.detail ? l`<span class="detail"> — ${this.detail}</span>` : v}
               </footer>
             ` : v}
       </blockquote>
     `;
   }
 };
-se.styles = d`
+pe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4517,21 +5064,21 @@ se.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-at([
+ft([
   n()
-], se.prototype, "attribution", 2);
-at([
+], pe.prototype, "attribution", 2);
+ft([
   n()
-], se.prototype, "detail", 2);
-se = at([
+], pe.prototype, "detail", 2);
+pe = ft([
   p("vox-quote")
-], se);
-var Qo = Object.defineProperty, Wo = Object.getOwnPropertyDescriptor, D = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Wo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], pe);
+var Pr = Object.defineProperty, Vr = Object.getOwnPropertyDescriptor, S = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Vr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Qo(t, a, e), e;
+  return r && e && Pr(t, a, e), e;
 };
-let Le = class extends h {
+let Be = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasDescription = !1;
   }
@@ -4540,7 +5087,7 @@ let Le = class extends h {
     this.hasDescription = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    return c`
+    return l`
       <h2 class="heading">${this.heading}</h2>
       <div class="description ${this.hasDescription ? "has-content" : ""}">
         <slot
@@ -4554,7 +5101,7 @@ let Le = class extends h {
     `;
   }
 };
-Le.styles = d`
+Be.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4586,12 +5133,12 @@ Le.styles = d`
       margin-top: var(--vox-space-6);
     }
   `;
-D([
+S([
   n()
-], Le.prototype, "heading", 2);
-Le = D([
+], Be.prototype, "heading", 2);
+Be = S([
   p("vox-sponsor-tier")
-], Le);
+], Be);
 let P = class extends h {
   constructor() {
     super(...arguments), this.name = "", this.hasBody = !1;
@@ -4601,21 +5148,21 @@ let P = class extends h {
     this.hasBody = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const o = c`
+    const o = l`
       <div class="logo ${this.logo ? "has-logo" : ""}">
-        ${this.logo ? c`<img src=${this.logo} alt=${this.name} />` : v}
+        ${this.logo ? l`<img src=${this.logo} alt=${this.name} />` : v}
       </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 ? c`<a
+    return this.href !== void 0 ? l`<a
           class="sponsor"
           href=${this.href}
           target=${this.target ?? v}
           >${o}</a
-        >` : c`<div class="sponsor">${o}</div>`;
+        >` : l`<div class="sponsor">${o}</div>`;
   }
 };
 P.styles = d`
@@ -4684,39 +5231,39 @@ P.styles = d`
       display: none;
     }
   `;
-D([
+S([
   n()
 ], P.prototype, "name", 2);
-D([
+S([
   n()
 ], P.prototype, "href", 2);
-D([
+S([
   n()
 ], P.prototype, "logo", 2);
-D([
+S([
   n()
 ], P.prototype, "target", 2);
-P = D([
+P = S([
   p("vox-sponsor")
 ], P);
-var Yo = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, st = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Jo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+var jr = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, gt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? zr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && Yo(t, a, e), e;
+  return r && e && jr(t, a, e), e;
 };
-let ie = class extends h {
+let he = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.label = "";
   }
   render() {
-    return c`
+    return l`
       <div class="value">${this.value}</div>
       <div class="label">${this.label}</div>
       <div class="description"><slot></slot></div>
     `;
   }
 };
-ie.styles = d`
+he.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4743,35 +5290,35 @@ ie.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-st([
+gt([
   n()
-], ie.prototype, "value", 2);
-st([
+], he.prototype, "value", 2);
+gt([
   n()
-], ie.prototype, "label", 2);
-ie = st([
+], he.prototype, "label", 2);
+he = gt([
   p("vox-stat")
-], ie);
-var er = Object.defineProperty, tr = Object.getOwnPropertyDescriptor, ge = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? tr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], he);
+var Dr = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, Ce = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Sr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && er(t, a, e), e;
+  return r && e && Dr(t, a, e), e;
 };
-let Fe = class extends h {
+let tt = class extends h {
   numberSteps() {
     this.querySelectorAll("vox-step").forEach((o, t) => {
       o.number = t + 1;
     });
   }
   render() {
-    return c`
+    return l`
       <div class="steps" role="list" aria-label="Progress">
         <slot @slotchange=${this.numberSteps}></slot>
       </div>
     `;
   }
 };
-Fe.styles = d`
+tt.styles = d`
     :host {
       display: block;
     }
@@ -4785,34 +5332,31 @@ Fe.styles = d`
       flex: 1 1 0;
     }
   `;
-Fe = ge([
+tt = Ce([
   p("vox-step-indicator")
-], Fe);
-let q = class extends h {
+], tt);
+let R = class extends h {
   constructor() {
     super(...arguments), this.label = "", this.state = "upcoming", this.number = 1;
   }
   render() {
-    return c`
+    return l`
       <div
         class="step"
         role="listitem"
         aria-current=${this.state === "current" ? "step" : "false"}
       >
         <span class="marker">
-          ${this.state === "complete" ? c`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          ${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}
-          ${this.state !== "current" ? c`<span class="visually-hidden"> (${this.state})</span>` : v}
-        </span>
+        <span class="label">${this.label}</span>
       </div>
     `;
   }
 };
-q.styles = d`
+R.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4885,62 +5429,53 @@ q.styles = d`
       font-weight: 600;
       color: var(--vox-color-text-1);
     }
-
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      white-space: nowrap;
-    }
   `;
-ge([
+Ce([
   n()
-], q.prototype, "label", 2);
-ge([
+], R.prototype, "label", 2);
+Ce([
   n({ reflect: !0 })
-], q.prototype, "state", 2);
-ge([
+], R.prototype, "state", 2);
+Ce([
   n({ type: Number })
-], q.prototype, "number", 2);
-q = ge([
+], R.prototype, "number", 2);
+R = Ce([
   p("vox-step")
-], q);
-var or = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, Se = (o, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? rr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+], R);
+var Er = Object.defineProperty, Ar = Object.getOwnPropertyDescriptor, Ke = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ar(t, a) : t, s = o.length - 1, i; s >= 0; s--)
     (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
-  return r && e && or(t, a, e), e;
+  return r && e && Er(t, a, e), e;
 };
-let Re = class extends h {
+let ot = class extends h {
   render() {
-    return c`<slot></slot>`;
+    return l`<slot></slot>`;
   }
 };
-Re.styles = d`
+ot.styles = d`
     :host {
       display: block;
     }
   `;
-Re = Se([
+ot = Ke([
   p("vox-timeline")
-], Re);
-let ne = class extends h {
+], ot);
+let ve = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.date = "";
   }
   render() {
-    return c`
+    return l`
       <div class="item">
         <span class="dot" aria-hidden="true"></span>
-        ${this.date ? c`<div class="date">${this.date}</div>` : v}
+        ${this.date ? l`<div class="date">${this.date}</div>` : v}
         <h3 class="heading">${this.heading}</h3>
         <div class="body"><slot></slot></div>
       </div>
     `;
   }
 };
-ne.styles = d`
+ve.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4990,69 +5525,70 @@ ne.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Se([
+Ke([
   n()
-], ne.prototype, "heading", 2);
-Se([
+], ve.prototype, "heading", 2);
+Ke([
   n()
-], ne.prototype, "date", 2);
-ne = Se([
+], ve.prototype, "date", 2);
+ve = Ke([
   p("vox-timeline-item")
-], ne);
+], ve);
 export {
-  $e as VoxAccordion,
-  k as VoxAccordionItem,
+  ze as VoxAccordion,
+  se as VoxAccordionItem,
   L as VoxAlert,
-  $ as VoxAvatar,
-  _e as VoxBadge,
-  G as VoxBillboard,
-  Be as VoxBreadcrumbs,
+  M as VoxAvatar,
+  De as VoxBadge,
+  W as VoxBillboard,
+  Xe as VoxBreadcrumbs,
   g as VoxButton,
-  ee as VoxCalendarTile,
-  te as VoxCallout,
-  I as VoxCard,
-  Z as VoxCheckbox,
-  R as VoxCta,
-  Ce as VoxCtaBand,
-  O as VoxDialog,
-  M as VoxDisclosure,
-  J as VoxDropdown,
-  Oe as VoxEmptyState,
-  b as VoxFileInput,
-  Ne as VoxFooter,
-  Me as VoxFooterColumn,
-  B as VoxGrid,
-  S as VoxHeader,
-  oe as VoxHero,
-  E as VoxIcon,
-  m as VoxInput,
-  Ie as VoxInputGroup,
-  Te as VoxLinkHub,
-  re as VoxLinkHubItem,
-  ae as VoxLoader,
-  ke as VoxPagination,
-  se as VoxQuote,
-  H as VoxRadio,
-  me as VoxRadioGroup,
-  U as VoxSelect,
-  _ as VoxSeriesNav,
-  A as VoxSidenav,
-  C as VoxSidenavGroup,
-  X as VoxSidenavItem,
+  ie as VoxCalendarTile,
+  ne as VoxCallout,
+  q as VoxCard,
+  G as VoxCheckbox,
+  u as VoxCodeBlock,
+  K as VoxCta,
+  Se as VoxCtaBand,
+  k as VoxDialog,
+  re as VoxDisclosure,
+  ae as VoxDropdown,
+  Ee as VoxEmptyState,
+  m as VoxFileInput,
+  Qe as VoxFooter,
+  Ae as VoxFooterColumn,
+  I as VoxGrid,
+  N as VoxHeader,
+  le as VoxHero,
+  H as VoxIcon,
+  w as VoxInput,
+  Ye as VoxInputGroup,
+  et as VoxLinkHub,
+  ce as VoxLinkHubItem,
+  de as VoxLoader,
+  He as VoxPagination,
+  pe as VoxQuote,
+  B as VoxRadio,
+  Pe as VoxRadioGroup,
+  Y as VoxSelect,
+  O as VoxSeriesNav,
+  T as VoxSidenav,
+  J as VoxSidenavGroup,
+  Q as VoxSidenavItem,
   P as VoxSponsor,
-  Le as VoxSponsorTier,
-  ie as VoxStat,
-  q as VoxStep,
-  Fe as VoxStepIndicator,
-  ye as VoxSubnav,
-  K as VoxSwitch,
-  Q as VoxTab,
-  W as VoxTabPanel,
-  qe as VoxTabs,
-  w as VoxTextarea,
-  z as VoxThemeToggle,
-  Re as VoxTimeline,
-  ne as VoxTimelineItem,
-  we as VoxToc,
-  Y as VoxTocItem
+  Be as VoxSponsorTier,
+  he as VoxStat,
+  R as VoxStep,
+  tt as VoxStepIndicator,
+  Ve as VoxSubnav,
+  X as VoxSwitch,
+  ee as VoxTab,
+  te as VoxTabPanel,
+  We as VoxTabs,
+  C as VoxTextarea,
+  A as VoxThemeToggle,
+  ot as VoxTimeline,
+  ve as VoxTimelineItem,
+  je as VoxToc,
+  oe as VoxTocItem
 };