@monospaced/set-core 0.12.0 → 0.13.0

package/dist/index.js

@@ -1,4 +1,4 @@
-const wt = /* @__PURE__ */ new Set([
+const Nt = /* @__PURE__ */ new Set([
   "area",
   "base",
   "br",
@@ -13,38 +13,38 @@ const wt = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
-function dt(t) {
+function ft(t) {
   return t.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
-function St(t) {
-  return Object.entries(t).flatMap(([n, e]) => e === !1 || e == null ? [] : e === !0 ? [n] : [`${n}="${dt(String(e))}"`]).join(" ");
+function Bt(t) {
+  return Object.entries(t).flatMap(([n, e]) => e === !1 || e == null ? [] : e === !0 ? [n] : [`${n}="${ft(String(e))}"`]).join(" ");
 }
-function h(t) {
-  if (t.kind === "text") return dt(t.value);
+function m(t) {
+  if (t.kind === "text") return ft(t.value);
   if (t.kind === "raw") return t.html;
-  const n = St(t.attrs), e = n ? `<${t.tag} ${n}>` : `<${t.tag}>`;
-  if (wt.has(t.tag)) return e;
-  const i = t.children.map(h).join("");
+  const n = Bt(t.attrs), e = n ? `<${t.tag} ${n}>` : `<${t.tag}>`;
+  if (Nt.has(t.tag)) return e;
+  const i = t.children.map(m).join("");
   return `${e}${i}</${t.tag}>`;
 }
-function I(t) {
+function V(t) {
   return /^[A-Za-z][\w:-]*$/.test(t);
 }
-function g(t) {
+function v(t) {
   if (t === void 0) return;
   const n = t.trim();
   if (n) {
-    if (!I(n))
+    if (!V(n))
       throw new Error(
         "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
       );
     return n;
   }
 }
-function N(t) {
+function O(t) {
   return t == null ? void 0 : t.trim().replace(/\s+/g, " ") || void 0;
 }
-const st = {
+const yt = {
   adjustment: [
     {
       tag: "g",
@@ -775,16 +775,16 @@ const st = {
       ]
     }
   ]
-}, $e = Object.keys(st);
-function lt(t) {
+}, oi = Object.keys(yt);
+function wt(t) {
   return t.map((n) => ({
     kind: "element",
     tag: n.tag,
     attrs: n.attrs,
-    children: n.children ? lt(n.children) : []
+    children: n.children ? wt(n.children) : []
   }));
 }
-function O({
+function P({
   ariaHidden: t = !0,
   id: n,
   mirrored: e,
@@ -792,26 +792,26 @@ function O({
   size: r = "md",
   title: a
 }) {
-  const o = st[i];
+  const o = yt[i];
   if (!o)
     throw new Error(`Unknown icon name: ${i}`);
-  const d = g(n), s = a?.trim();
+  const d = v(n), s = a?.trim();
   if (!t && !s)
     throw new Error("title must be non-empty when ariaHidden is false.");
   if (!t && !d)
     throw new Error("id must be provided when ariaHidden is false.");
-  const l = t ? void 0 : `${d}-title`, p = [];
-  return t || p.push({
+  const p = t ? void 0 : `${d}-title`, l = [];
+  return t || l.push({
     kind: "element",
     tag: "title",
-    attrs: { id: l },
+    attrs: { id: p },
     children: [{ kind: "text", value: s }]
-  }), p.push(...lt(o)), {
+  }), l.push(...wt(o)), {
     kind: "element",
     tag: "svg",
     attrs: {
       "aria-hidden": t ? "true" : void 0,
-      "aria-labelledby": l,
+      "aria-labelledby": p,
       class: "set-icon",
       "data-mirrored": e,
       "data-size": r,
@@ -824,13 +824,13 @@ function O({
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    children: p
+    children: l
   };
 }
-function xt(t) {
-  return h(O(t));
+function Ot(t) {
+  return m(P(t));
 }
-const Ge = {
+const di = {
   name: "icon",
   description: "Use `icon` to render a Set icon.",
   output: { element: "svg", class: "set-icon" },
@@ -944,7 +944,7 @@ const Ge = {
     ]
   }
 };
-function it(t) {
+function ut(t) {
   const {
     appearance: n = "outline",
     controls: e,
@@ -954,34 +954,34 @@ function it(t) {
     haspopup: o,
     id: d,
     icon: s,
-    iconMirrored: l,
-    iconPlacement: p = "start",
+    iconMirrored: p,
+    iconPlacement: l = "start",
     label: c,
-    labelVisibility: u = "visible",
-    name: m,
-    size: y = "md",
-    tone: k = "default",
-    type: v,
-    value: C
-  } = t, S = s || void 0, b = !!S;
-  if (u !== "visible" && !b)
+    labelVisibility: h = "visible",
+    name: b,
+    size: S = "md",
+    tone: f = "default",
+    type: E,
+    value: q
+  } = t, w = s || void 0, k = !!w;
+  if (h !== "visible" && !k)
     throw new Error("labelVisibility requires icon when label is not visible.");
-  const x = b && S ? {
+  const L = k && w ? {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
     children: [
       {
         kind: "raw",
-        html: xt({
+        html: Ot({
           ariaHidden: !0,
-          mirrored: l,
-          name: S,
+          mirrored: p,
+          name: w,
           size: "fill"
         })
       }
     ]
-  } : null, w = {
+  } : null, x = {
     kind: "element",
     tag: "span",
     attrs: { class: "label" },
@@ -996,23 +996,23 @@ function it(t) {
       "aria-haspopup": o || void 0,
       class: "set-button",
       "data-appearance": n,
-      "data-label-visibility": u === "visible" ? void 0 : u,
-      "data-size": y,
-      "data-tone": k === "neutral" ? "neutral" : void 0,
+      "data-label-visibility": h === "visible" ? void 0 : h,
+      "data-size": S,
+      "data-tone": f === "neutral" ? "neutral" : void 0,
       disabled: !!i,
       form: a || void 0,
       id: d || void 0,
-      name: m || void 0,
-      type: v || "button",
-      value: C || void 0
+      name: b || void 0,
+      type: E || "button",
+      value: q || void 0
     },
-    children: x ? p === "end" ? [w, x] : [x, w] : [w]
+    children: L ? l === "end" ? [x, L] : [L, x] : [x]
   };
 }
-function nt(t) {
-  return h(it(t));
+function ht(t) {
+  return m(ut(t));
 }
-const Ze = {
+const si = {
   name: "button",
   description: "Use `button` to let users trigger actions.",
   output: { element: "button", class: "set-button" },
@@ -1195,10 +1195,10 @@ const Ze = {
       }
     ]
   }
-}, R = "set-alert", pt = "set-alert-before-dismiss", ct = "set-alert-dismiss", P = "Dismiss alert";
-function Et(t, n) {
+}, Z = "set-alert", St = "set-alert-before-dismiss", xt = "set-alert-dismiss", W = "Dismiss alert";
+function Pt(t, n) {
   const e = n.createElement("div");
-  return e.setAttribute("data-part", "close"), e.innerHTML = nt({
+  return e.setAttribute("data-part", "close"), e.innerHTML = ht({
     appearance: "text",
     icon: "close",
     label: t,
@@ -1207,7 +1207,7 @@ function Et(t, n) {
     tone: "neutral"
   }), e;
 }
-function zt(t) {
+function Rt(t) {
   switch (t) {
     case "success":
       return "check-circle";
@@ -1221,12 +1221,12 @@ function zt(t) {
       return "sticky-note";
   }
 }
-function Ct(t) {
+function Wt(t) {
   return t === "warning" || t === "error" ? "alert" : "status";
 }
-function Lt({
+function Ut({
   dismissible: t,
-  dismissibleLabel: n = P,
+  dismissibleLabel: n = W,
   id: e,
   inlineSize: i = "full",
   message: r,
@@ -1234,29 +1234,29 @@ function Lt({
   tone: o,
   title: d
 }) {
-  const s = g(e), l = n.trim() === "" ? P : n, p = [];
-  return d && p.push({
+  const s = v(e), p = n.trim() === "" ? W : n, l = [];
+  return d && l.push({
     kind: "element",
     tag: "p",
     attrs: { class: "title" },
     children: [{ kind: "text", value: d }]
-  }), p.push({
+  }), l.push({
     kind: "element",
     tag: "p",
     attrs: { class: "message" },
     children: [{ kind: "text", value: r }]
   }), {
     kind: "element",
-    tag: R,
+    tag: Z,
     attrs: {
       class: "set-alert",
       "data-dismissible": t,
-      "data-dismissible-label": t ? l : void 0,
+      "data-dismissible-label": t ? p : void 0,
       "data-inline-size": i === "fit" ? "fit" : void 0,
       "data-size": a,
       "data-tone": o || void 0,
       id: s,
-      role: Ct(o)
+      role: Wt(o)
     },
     children: [
       {
@@ -1264,9 +1264,9 @@ function Lt({
         tag: "div",
         attrs: { class: "icon-wrapper" },
         children: [
-          O({
+          P({
             ariaHidden: !0,
-            name: zt(o),
+            name: Rt(o),
             size: a
           })
         ]
@@ -1275,29 +1275,29 @@ function Lt({
         kind: "element",
         tag: "div",
         attrs: { class: "content" },
-        children: p
+        children: l
       }
     ]
   };
 }
-function Fe(t) {
-  return h(Lt(t));
+function li(t) {
+  return m(Ut(t));
 }
-function Mt() {
-  if (customElements.get(R)) return;
+function $t() {
+  if (customElements.get(Z)) return;
   class t extends HTMLElement {
     #t = (e) => {
       const i = e.target;
       if (!(i instanceof Element) || !i.closest('[data-part="close"]')) return;
       const r = new CustomEvent(
-        pt,
+        St,
         {
           bubbles: !0,
           cancelable: !0
         }
       );
       this.dispatchEvent(r) && (this.dispatchEvent(
-        new CustomEvent(ct, {
+        new CustomEvent(xt, {
           bubbles: !0
         })
       ), this.remove());
@@ -1310,20 +1310,20 @@ function Mt() {
     }
     #e() {
       this.querySelector('[data-part="close"]') || this.append(
-        Et(
-          this.getAttribute("data-dismissible-label") ?? P,
+        Pt(
+          this.getAttribute("data-dismissible-label") ?? W,
           this.ownerDocument
         )
       );
     }
   }
-  customElements.define(R, t);
+  customElements.define(Z, t);
 }
-const je = {
+const pi = {
   name: "alert",
   description: "Use `alert` to surface short, important messages.",
   output: {
-    element: R,
+    element: Z,
     class: "set-alert"
   },
   content: {
@@ -1340,7 +1340,7 @@ const je = {
       type: { kind: "boolean" }
     },
     dismissibleLabel: {
-      default: P,
+      default: W,
       description: "Accessible label for the dismiss control.",
       ignoredWhen: "`dismissible` is false",
       type: { kind: "string" }
@@ -1374,12 +1374,12 @@ const je = {
     }
   },
   events: {
-    [pt]: {
+    [St]: {
       bubbles: !0,
       cancelable: !0,
       description: "Fired before the alert is removed by a dismiss action. Call `preventDefault()` to keep the alert mounted."
     },
-    [ct]: {
+    [xt]: {
       bubbles: !0,
       description: "Fired after the alert has been removed by an allowed dismiss action."
     }
@@ -1445,7 +1445,7 @@ const je = {
             }
           ]
         },
-        value: { kind: "literal", text: P }
+        value: { kind: "literal", text: W }
       },
       {
         target: { on: "host" },
@@ -1468,11 +1468,11 @@ const je = {
     ]
   }
 };
-function qt(t) {
+function Gt(t) {
   if (t)
     return t === !0 ? !0 : t;
 }
-function ut(t) {
+function Et(t) {
   const {
     appearance: n = "text",
     current: e,
@@ -1482,21 +1482,21 @@ function ut(t) {
     icon: o,
     iconPlacement: d = "start",
     label: s,
-    labelVisibility: l = "visible",
-    rel: p,
+    labelVisibility: p = "visible",
+    rel: l,
     size: c = "md",
-    target: u,
-    tone: m = "default",
-    underline: y
-  } = t, k = g(a), v = o?.trim() || void 0;
-  if (l !== "visible" && !!!v)
+    target: h,
+    tone: b = "default",
+    underline: S
+  } = t, f = v(a), E = o?.trim() || void 0;
+  if (p !== "visible" && !!!E)
     throw new Error("labelVisibility requires icon when label is not visible.");
-  const S = qt(i), b = v ? {
+  const w = Gt(i), k = E ? {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
-    children: [{ kind: "raw", html: v }]
-  } : null, x = {
+    children: [{ kind: "raw", html: E }]
+  } : null, L = {
     kind: "element",
     tag: "span",
     attrs: { class: "label" },
@@ -1509,23 +1509,23 @@ function ut(t) {
       "aria-current": e,
       class: "set-link",
       "data-appearance": n === "text" ? void 0 : n,
-      "data-label-visibility": l === "visible" ? void 0 : l,
+      "data-label-visibility": p === "visible" ? void 0 : p,
       "data-size": c,
-      "data-tone": m === "neutral" ? "neutral" : void 0,
-      "data-underline": y && n === "text" ? !0 : void 0,
-      download: S,
+      "data-tone": b === "neutral" ? "neutral" : void 0,
+      "data-underline": S && n === "text" ? !0 : void 0,
+      download: w,
       href: r,
-      id: k,
-      rel: S ? void 0 : p || void 0,
-      target: S ? void 0 : u || void 0
+      id: f,
+      rel: w ? void 0 : l || void 0,
+      target: w ? void 0 : h || void 0
     },
-    children: b ? d === "end" ? [x, b] : [b, x] : [x]
+    children: k ? d === "end" ? [L, k] : [k, L] : [L]
   };
 }
-function Ke(t) {
-  return h(ut(t));
+function ci(t) {
+  return m(Et(t));
 }
-const Xe = {
+const ui = {
   name: "link",
   description: "Use `link` to navigate to another page or resource.",
   output: { element: "a", class: "set-link" },
@@ -1712,10 +1712,10 @@ const Xe = {
       }
     ]
   }
-}, W = "set-banner", ht = "set-banner-before-dismiss", mt = "set-banner-dismiss", U = "Dismiss banner";
-function It(t, n) {
+}, F = "set-banner", zt = "set-banner-before-dismiss", Ct = "set-banner-dismiss", j = "Dismiss banner";
+function Zt(t, n) {
   const e = n.createElement("div");
-  return e.setAttribute("data-part", "close"), e.innerHTML = nt({
+  return e.setAttribute("data-part", "close"), e.innerHTML = ht({
     appearance: "text",
     icon: "close",
     label: t,
@@ -1724,27 +1724,27 @@ function It(t, n) {
     tone: "neutral"
   }), e;
 }
-function Tt({
+function Ft({
   actionHref: t,
   actionLabel: n,
   dismissible: e = !0,
-  dismissibleLabel: i = U,
+  dismissibleLabel: i = j,
   id: r,
   message: a,
   tone: o
 }) {
   if (!!t != !!n)
     throw new Error("actionHref and actionLabel must be provided together.");
-  const d = g(r), s = i.trim() === "" ? U : i, l = [{ kind: "text", value: a }];
-  return t && n && (l.push({ kind: "text", value: " " }), l.push(
-    ut({
+  const d = v(r), s = i.trim() === "" ? j : i, p = [{ kind: "text", value: a }];
+  return t && n && (p.push({ kind: "text", value: " " }), p.push(
+    Et({
       href: t,
       label: n,
       underline: !0
     })
   )), {
     kind: "element",
-    tag: W,
+    tag: F,
     attrs: {
       class: "set-banner",
       "data-set-content-theme": "dark",
@@ -1759,29 +1759,29 @@ function Tt({
         kind: "element",
         tag: "p",
         attrs: { class: "message" },
-        children: l
+        children: p
       }
     ]
   };
 }
-function Qe(t) {
-  return h(Tt(t));
+function hi(t) {
+  return m(Ft(t));
 }
-function At() {
-  if (customElements.get(W)) return;
+function jt() {
+  if (customElements.get(F)) return;
   class t extends HTMLElement {
     #t = (e) => {
       const i = e.target;
       if (!(i instanceof Element) || !i.closest('[data-part="close"]')) return;
       const r = new CustomEvent(
-        ht,
+        zt,
         {
           bubbles: !0,
           cancelable: !0
         }
       );
       this.dispatchEvent(r) && (this.dispatchEvent(
-        new CustomEvent(mt, {
+        new CustomEvent(Ct, {
           bubbles: !0
         })
       ), this.remove());
@@ -1794,19 +1794,19 @@ function At() {
     }
     #e() {
       this.querySelector('[data-part="close"]') || this.append(
-        It(
-          this.getAttribute("data-dismissible-label") ?? U,
+        Zt(
+          this.getAttribute("data-dismissible-label") ?? j,
           this.ownerDocument
         )
       );
     }
   }
-  customElements.define(W, t);
+  customElements.define(F, t);
 }
-const Ye = {
+const mi = {
   name: "banner",
   description: "Use `banner` to display a prominent site-wide message.",
-  output: { element: W, class: "set-banner" },
+  output: { element: F, class: "set-banner" },
   content: { kind: "text", prop: "message" },
   props: {
     actionHref: {
@@ -1825,7 +1825,7 @@ const Ye = {
       type: { kind: "boolean" }
     },
     dismissibleLabel: {
-      default: U,
+      default: j,
       description: "Accessible label for the dismiss control.",
       ignoredWhen: "`dismissible` is false",
       type: { kind: "string" }
@@ -1848,12 +1848,12 @@ const Ye = {
     }
   },
   events: {
-    [ht]: {
+    [zt]: {
       bubbles: !0,
       cancelable: !0,
       description: "Fired before the banner is removed by a dismiss action. Call `preventDefault()` to keep the banner mounted."
     },
-    [mt]: {
+    [Ct]: {
       bubbles: !0,
       description: "Fired after the banner has been removed by an allowed dismiss action."
     }
@@ -1891,14 +1891,14 @@ const Ye = {
       }
     ]
   }
-}, $ = "set-lightswitch", kt = "set-lightswitch-change", Q = "set-theme", Y = "Switch to dark theme", J = "Switch to light theme";
-function _t(t) {
+}, K = "set-lightswitch", Lt = "set-lightswitch-change", dt = "set-theme", st = "Switch to dark theme", lt = "Switch to light theme";
+function Kt(t) {
   return t === "dark" ? "light" : "dark";
 }
-function Dt(t) {
+function Xt(t) {
   return t === "dark" ? "moon" : "sunny";
 }
-function rt(t, n) {
+function gt(t, n) {
   return {
     kind: "element",
     tag: "span",
@@ -1909,9 +1909,9 @@ function rt(t, n) {
         tag: "span",
         attrs: { class: "icon-wrapper" },
         children: [
-          O({
+          P({
             ariaHidden: !0,
-            name: Dt(t),
+            name: Xt(t),
             size: "fill"
           })
         ]
@@ -1925,17 +1925,17 @@ function rt(t, n) {
     ]
   };
 }
-function Ht({
+function Qt({
   appearance: t = "text",
   id: n,
-  labelDark: e = Y,
-  labelLight: i = J,
+  labelDark: e = st,
+  labelLight: i = lt,
   size: r = "md"
 }) {
-  const a = g(n), o = e.trim() === "" ? Y : e, d = i.trim() === "" ? J : i;
+  const a = v(n), o = e.trim() === "" ? st : e, d = i.trim() === "" ? lt : i;
   return {
     kind: "element",
-    tag: $,
+    tag: K,
     attrs: {
       class: "set-lightswitch",
       id: a
@@ -1951,25 +1951,25 @@ function Ht({
           type: "button"
         },
         children: [
-          rt("dark", o),
-          rt("light", d)
+          gt("dark", o),
+          gt("light", d)
         ]
       }
     ]
   };
 }
-function Je(t) {
-  return h(Ht(t));
+function ki(t) {
+  return m(Qt(t));
 }
-function Vt() {
-  if (customElements.get($)) return;
+function Yt() {
+  if (customElements.get(K)) return;
   class t extends HTMLElement {
     #t = (e) => {
       const i = e.target;
       if (!(i instanceof Element) || !i.closest("button")) return;
-      const r = _t(this.#u());
+      const r = Kt(this.#u());
       r === this.#r() ? this.#d() : this.#n(r), this.#a(), this.dispatchEvent(
-        new CustomEvent(kt, {
+        new CustomEvent(Lt, {
           bubbles: !0,
           detail: { stored: !!this.#i(), theme: r }
         })
@@ -1990,7 +1990,7 @@ function Vt() {
     }
     #i() {
       try {
-        const e = this.#e()?.getItem(Q);
+        const e = this.#e()?.getItem(dt);
         return e === "light" || e === "dark" ? e : void 0;
       } catch {
         return;
@@ -1998,13 +1998,13 @@ function Vt() {
     }
     #n(e) {
       try {
-        this.#e()?.setItem(Q, e);
+        this.#e()?.setItem(dt, e);
       } catch {
       }
     }
     #d() {
       try {
-        this.#e()?.removeItem(Q);
+        this.#e()?.removeItem(dt);
       } catch {
       }
     }
@@ -2029,12 +2029,12 @@ function Vt() {
       i ? e.setAttribute("data-set-theme", i) : e.removeAttribute("data-set-theme");
     }
   }
-  customElements.define($, t);
+  customElements.define(K, t);
 }
-const ti = {
+const gi = {
   name: "lightswitch",
   description: "Use `lightswitch` to let users toggle between light and dark themes.",
-  output: { element: $, class: "set-lightswitch" },
+  output: { element: K, class: "set-lightswitch" },
   content: { kind: "none" },
   props: {
     appearance: {
@@ -2047,12 +2047,12 @@ const ti = {
       type: { kind: "string" }
     },
     labelDark: {
-      default: Y,
+      default: st,
       description: "Accessible label of the switch-to-dark action.",
       type: { kind: "string" }
     },
     labelLight: {
-      default: J,
+      default: lt,
       description: "Accessible label of the switch-to-light action.",
       type: { kind: "string" }
     },
@@ -2063,7 +2063,7 @@ const ti = {
     }
   },
   events: {
-    [kt]: {
+    [Lt]: {
       bubbles: !0,
       description: "Fired after activation applies a theme. `detail.theme` is the theme switched to; `detail.stored` is false when the change cleared the override to follow the system preference again."
     }
@@ -2102,8 +2102,8 @@ const ti = {
       }
     ]
   }
-}, G = "set-menu", gt = "set-menu-choose";
-function Nt({
+}, X = "set-menu", Mt = "set-menu-choose";
+function Jt({
   align: t = "start",
   id: n,
   items: e,
@@ -2114,35 +2114,35 @@ function Nt({
   triggerLabel: d,
   triggerLabelVisibility: s
 }) {
-  const l = n.trim();
-  if (!l)
+  const p = n.trim();
+  if (!p)
     throw new Error("id must be a non-empty string.");
-  if (!I(l))
+  if (!V(p))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
   if (!Array.isArray(e))
     throw new Error("items must be an array.");
-  const p = `${l}-button`, c = `${l}-popup`, u = e.map((m) => ({
+  const l = `${p}-button`, c = `${p}-popup`, h = e.map((b) => ({
     kind: "element",
     tag: "button",
     attrs: {
-      "aria-disabled": m.disabled ? "true" : void 0,
-      "data-item-id": m.id || void 0,
+      "aria-disabled": b.disabled ? "true" : void 0,
+      "data-item-id": b.id || void 0,
       role: "menuitem",
       tabindex: "-1",
       type: "button"
     },
-    children: [{ kind: "text", value: m.label }]
+    children: [{ kind: "text", value: b.label }]
   }));
   return {
     kind: "element",
-    tag: G,
+    tag: X,
     attrs: {
       class: "set-menu",
       "data-align": t === "start" ? void 0 : t,
       "data-size": i,
-      id: l
+      id: p
     },
     children: [
       {
@@ -2150,7 +2150,7 @@ function Nt({
         tag: "div",
         attrs: { "data-part": "trigger" },
         children: [
-          it({
+          ut({
             appearance: "outline",
             controls: c,
             disclosure: !0,
@@ -2158,7 +2158,7 @@ function Nt({
             icon: r,
             iconMirrored: a,
             iconPlacement: o,
-            id: p,
+            id: l,
             label: d,
             labelVisibility: s,
             size: i,
@@ -2171,22 +2171,22 @@ function Nt({
         kind: "element",
         tag: "div",
         attrs: {
-          "aria-labelledby": p,
+          "aria-labelledby": l,
           class: "popup",
           hidden: !0,
           id: c,
           role: "menu"
         },
-        children: u
+        children: h
       }
     ]
   };
 }
-function ei(t) {
-  return h(Nt(t));
+function bi(t) {
+  return m(Jt(t));
 }
-function Ot() {
-  if (customElements.get(G)) return;
+function te() {
+  if (customElements.get(X)) return;
   class t extends HTMLElement {
     #t;
     #e;
@@ -2236,7 +2236,7 @@ function Ot() {
         this.querySelectorAll('[role="menuitem"]')
       ).indexOf(e);
       this.dispatchEvent(
-        new CustomEvent(gt, {
+        new CustomEvent(Mt, {
           bubbles: !0,
           detail: {
             id: e.getAttribute("data-item-id") || void 0,
@@ -2298,13 +2298,13 @@ function Ot() {
       this.#t && this.removeEventListener("click", this.#t), this.#e && this.ownerDocument.removeEventListener("click", this.#e), this.#n && this.removeEventListener("keydown", this.#n), this.#i && this.removeEventListener("focusout", this.#i), this.#t = void 0, this.#e = void 0, this.#i = void 0, this.#n = void 0;
     }
   }
-  customElements.define(G, t);
+  customElements.define(X, t);
 }
-const ii = {
+const vi = {
   name: "menu",
   description: "Use `menu` to show a list of actions from a trigger button.",
   output: {
-    element: G,
+    element: X,
     class: "set-menu"
   },
   content: {
@@ -2378,7 +2378,7 @@ const ii = {
     }
   },
   events: {
-    [gt]: {
+    [Mt]: {
       bubbles: !0,
       description: "Fired when a menu item is activated.",
       detail: "{ id?: string; index: number; label: string }"
@@ -2438,15 +2438,15 @@ const ii = {
       }
     ]
   }
-}, tt = "Menu";
-function Pt({
+}, pt = "Menu";
+function ee({
   controlsId: t,
   expanded: n,
   id: e,
-  label: i = tt,
+  label: i = pt,
   size: r = "md"
 } = {}) {
-  const a = g(e), o = i.trim() === "" ? tt : i;
+  const a = v(e), o = i.trim() === "" ? pt : i;
   return {
     kind: "element",
     tag: "button",
@@ -2481,10 +2481,10 @@ function Pt({
     ]
   };
 }
-function Bt(t = {}) {
-  return h(Pt(t));
+function ie(t = {}) {
+  return m(ee(t));
 }
-const ni = {
+const fi = {
   name: "expander",
   description: "Use `expander` as a toggle for disclosure regions such as menus.",
   output: { element: "button", class: "set-expander" },
@@ -2504,7 +2504,7 @@ const ni = {
       type: { kind: "string" }
     },
     label: {
-      default: tt,
+      default: pt,
       description: "Accessible label.",
       type: { kind: "text" }
     },
@@ -2549,8 +2549,8 @@ const ni = {
       }
     ]
   }
-}, Z = "set-nav", at = "data-set-scroll-locked";
-function Rt({
+}, Q = "set-nav", bt = "data-set-scroll-locked";
+function ne({
   collapsible: t,
   contentId: n,
   expanderLabel: e,
@@ -2560,16 +2560,16 @@ function Rt({
   label: o,
   size: d = "md"
 }) {
-  const s = g(r), l = e?.trim() || void 0, p = n?.trim();
-  if (t && !p)
+  const s = v(r), p = e?.trim() || void 0, l = n?.trim();
+  if (t && !l)
     throw new Error(
       "contentId must be a non-empty string when collapsible is set."
     );
-  if (p && !I(p))
+  if (l && !V(l))
     throw new Error(
       "contentId must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const c = a.map((u) => ({
+  const c = a.map((h) => ({
     kind: "element",
     tag: "li",
     attrs: {},
@@ -2578,21 +2578,21 @@ function Rt({
         kind: "element",
         tag: "a",
         attrs: {
-          "aria-current": u.current ? "page" : void 0,
+          "aria-current": h.current ? "page" : void 0,
           class: "item",
-          href: u.href
+          href: h.href
         },
-        children: [{ kind: "text", value: u.label }]
+        children: [{ kind: "text", value: h.label }]
       }
     ]
   }));
   return {
     kind: "element",
-    tag: Z,
+    tag: Q,
     attrs: {
       class: "set-nav",
       "data-collapsible": t,
-      "data-expander-label": t && l ? l : void 0,
+      "data-expander-label": t && p ? p : void 0,
       "data-expander-position": t ? i : void 0,
       "data-size": d,
       id: s
@@ -2611,7 +2611,7 @@ function Rt({
             tag: "div",
             attrs: {
               class: "content",
-              id: p
+              id: l
             },
             children: [
               {
@@ -2627,11 +2627,11 @@ function Rt({
     ]
   };
 }
-function ri(t) {
-  return h(Rt(t));
+function yi(t) {
+  return m(ne(t));
 }
-function Wt() {
-  if (customElements.get(Z)) return;
+function re() {
+  if (customElements.get(Q)) return;
   class t extends HTMLElement {
     #t;
     #e;
@@ -2657,7 +2657,7 @@ function Wt() {
       const i = e.querySelector(".content");
       i && e.insertAdjacentHTML(
         "afterbegin",
-        `<div data-part="expander">${Bt({
+        `<div data-part="expander">${ie({
           controlsId: i.id || void 0,
           label: this.getAttribute("data-expander-label") || void 0,
           size: this.getAttribute("data-size") === "sm" ? "md" : "lg"
@@ -2690,10 +2690,10 @@ function Wt() {
       const i = this.ownerDocument.documentElement;
       if (i) {
         if (e) {
-          i.setAttribute(at, "");
+          i.setAttribute(bt, "");
           return;
         }
-        i.removeAttribute(at);
+        i.removeAttribute(bt);
       }
     }
     #o() {
@@ -2707,12 +2707,12 @@ function Wt() {
       ), this.#i = void 0, this.#n = void 0, this.#e = void 0;
     }
   }
-  customElements.define(Z, t);
+  customElements.define(Q, t);
 }
-const ai = {
+const wi = {
   name: "nav",
   description: "Use `nav` to render a primary navigation list.",
-  output: { element: Z, class: "set-nav" },
+  output: { element: Q, class: "set-nav" },
   content: { kind: "structured", prop: "items" },
   props: {
     items: {
@@ -2824,8 +2824,8 @@ const ai = {
       }
     ]
   }
-}, F = "set-range";
-function Ut({
+}, Y = "set-range";
+function ae({
   description: t,
   disabled: n,
   id: e,
@@ -2835,17 +2835,17 @@ function Ut({
   min: o,
   name: d,
   size: s = "md",
-  step: l,
-  value: p
+  step: p,
+  value: l
 }) {
-  const c = e.trim(), u = t?.trim(), m = d?.trim();
+  const c = e.trim(), h = t?.trim(), b = d?.trim();
   if (!c)
     throw new Error("id must be a non-empty string.");
-  if (!I(c))
+  if (!V(c))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const y = u ? `${c}-description` : void 0, k = [
+  const S = h ? `${c}-description` : void 0, f = [
     {
       kind: "element",
       tag: "div",
@@ -2861,7 +2861,7 @@ function Ut({
           kind: "element",
           tag: "output",
           attrs: { class: "output", for: c },
-          children: p != null ? [{ kind: "text", value: String(p) }] : []
+          children: l != null ? [{ kind: "text", value: String(l) }] : []
         }
       ]
     },
@@ -2869,41 +2869,41 @@ function Ut({
       kind: "element",
       tag: "input",
       attrs: {
-        "aria-describedby": y,
+        "aria-describedby": S,
         class: "range",
         disabled: !!n,
         id: c,
         max: a != null ? String(a) : void 0,
         min: o != null ? String(o) : void 0,
-        name: m || void 0,
-        step: l != null ? String(l) : void 0,
+        name: b || void 0,
+        step: p != null ? String(p) : void 0,
         type: "range",
-        value: p != null ? String(p) : void 0
+        value: l != null ? String(l) : void 0
       },
       children: []
     }
   ];
-  return u && k.push({
+  return h && f.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: y },
-    children: [{ kind: "text", value: u }]
+    attrs: { class: "description", id: S },
+    children: [{ kind: "text", value: h }]
   }), {
     kind: "element",
-    tag: F,
+    tag: Y,
     attrs: {
       class: "set-range",
       "data-inline-size": i === "fit" ? "fit" : void 0,
       "data-size": s
     },
-    children: k
+    children: f
   };
 }
-function oi(t) {
-  return h(Ut(t));
+function Si(t) {
+  return m(ae(t));
 }
-function $t() {
-  if (customElements.get(F)) return;
+function oe() {
+  if (customElements.get(Y)) return;
   class t extends HTMLElement {
     #t;
     #e = (e) => {
@@ -2957,12 +2957,12 @@ function $t() {
       this.#t && (delete this.#t.value, this.#t = void 0);
     }
   }
-  customElements.define(F, t);
+  customElements.define(Y, t);
 }
-const di = {
+const xi = {
   name: "range",
   description: "Use `range` to let users pick a numeric value along a scale.",
-  output: { element: F, class: "set-range" },
+  output: { element: Y, class: "set-range" },
   content: { kind: "text", prop: "label" },
   props: {
     description: {
@@ -3091,9 +3091,9 @@ const di = {
       }
     ]
   }
-}, j = "set-sidebar", Gt = "(min-width: 68em)", V = "Collapse sidebar", et = "Open sidebar";
-function Zt(t, n) {
-  return `<div data-part="close">${nt({
+}, J = "set-sidebar", de = "(min-width: 68em)", B = "Collapse sidebar", ct = "Open sidebar";
+function se(t, n) {
+  return `<div data-part="close">${ht({
     appearance: "text",
     icon: "panel-left",
     iconMirrored: "rtl",
@@ -3104,25 +3104,25 @@ function Zt(t, n) {
     type: "button"
   })}</div>`;
 }
-function Ft({
+function le({
   aboveNotebook: t = "persistent",
   buttonSize: n = "md",
   children: e,
-  collapseLabel: i = V,
+  collapseLabel: i = B,
   footer: r,
   header: a,
   id: o,
   surface: d,
-  triggerLabel: s = et
+  triggerLabel: s = ct
 }) {
-  const l = o.trim(), p = i.trim() || V, c = s.trim() || et;
-  if (!l)
+  const p = o.trim(), l = i.trim() || B, c = s.trim() || ct;
+  if (!p)
     throw new Error("id must be a non-empty string.");
-  if (!I(l))
+  if (!V(p))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const u = [
+  const h = [
     {
       kind: "element",
       tag: "div",
@@ -3136,22 +3136,22 @@ function Ft({
       children: e ? [{ kind: "raw", html: e }] : []
     }
   ];
-  r && u.push({
+  r && h.push({
     kind: "element",
     tag: "div",
     attrs: { class: "footer" },
     children: [{ kind: "raw", html: r }]
   });
-  const m = `${l}-panel`;
+  const b = `${p}-panel`;
   return {
     kind: "element",
-    tag: j,
+    tag: J,
     attrs: {
       class: "set-sidebar",
       "data-above-notebook": t,
-      "data-collapse-label": p !== V ? p : void 0,
+      "data-collapse-label": l !== B ? l : void 0,
       "data-button-size": n,
-      id: l
+      id: p
     },
     children: [
       {
@@ -3159,9 +3159,9 @@ function Ft({
         tag: "div",
         attrs: { "data-part": "trigger" },
         children: [
-          it({
+          ut({
             appearance: "text",
-            controls: m,
+            controls: b,
             disclosure: !0,
             icon: "panel-left",
             iconMirrored: "rtl",
@@ -3179,10 +3179,10 @@ function Ft({
         attrs: {
           class: "sidebar",
           "data-set-surface": d,
-          id: m,
+          id: b,
           tabindex: "-1"
         },
-        children: u
+        children: h
       },
       {
         kind: "element",
@@ -3193,11 +3193,11 @@ function Ft({
     ]
   };
 }
-function si(t) {
-  return h(Ft(t));
+function Ei(t) {
+  return m(le(t));
 }
-function jt() {
-  if (customElements.get(j)) return;
+function pe() {
+  if (customElements.get(J)) return;
   class t extends HTMLElement {
     #t;
     #e;
@@ -3241,10 +3241,10 @@ function jt() {
     #l() {
       const e = this.#d();
       if (!e || e.querySelector('[data-part="close"]')) return;
-      const i = e.querySelector(".header"), r = this.getAttribute("data-collapse-label") || V, a = this.getAttribute("data-button-size") ?? "md";
+      const i = e.querySelector(".header"), r = this.getAttribute("data-collapse-label") || B, a = this.getAttribute("data-button-size") ?? "md";
       i?.insertAdjacentHTML(
         "beforeend",
-        Zt(r, a)
+        se(r, a)
       );
     }
     #o() {
@@ -3319,7 +3319,7 @@ function jt() {
     }
     #f() {
       const e = this.ownerDocument.defaultView;
-      e && (typeof e.matchMedia == "function" && (this.#t = e.matchMedia(Gt), this.#n = () => {
+      e && (typeof e.matchMedia == "function" && (this.#t = e.matchMedia(de), this.#n = () => {
         this.#g();
       }, this.#t.addEventListener("change", this.#n), this.#g()), this.#e = (i) => {
         const r = i.target;
@@ -3346,13 +3346,13 @@ function jt() {
       this.#e && this.removeEventListener("click", this.#e), this.#i && this.removeEventListener("keydown", this.#i), this.#t && this.#n && this.#t.removeEventListener("change", this.#n), this.#e = void 0, this.#i = void 0, this.#t = void 0, this.#n = void 0;
     }
   }
-  customElements.define(j, t);
+  customElements.define(J, t);
 }
-const li = {
+const zi = {
   name: "sidebar",
   description: "Use `sidebar` for a side panel alongside main content.",
   output: {
-    element: j,
+    element: J,
     class: "set-sidebar"
   },
   content: {
@@ -3382,7 +3382,7 @@ const li = {
       type: { kind: "html" }
     },
     collapseLabel: {
-      default: V,
+      default: B,
       description: "Accessible label for the collapse button.",
       type: { kind: "string" }
     },
@@ -3407,7 +3407,7 @@ const li = {
       }
     },
     triggerLabel: {
-      default: et,
+      default: ct,
       description: "Accessible label for the open button.",
       type: { kind: "string" }
     }
@@ -3439,7 +3439,7 @@ const li = {
               of: {
                 kind: "when-equals",
                 prop: "collapseLabel",
-                to: V
+                to: B
               }
             }
           ]
@@ -3472,8 +3472,8 @@ const li = {
       }
     ]
   }
-}, K = "set-video";
-function Kt({
+}, tt = "set-video";
+function ce({
   autoPlay: t,
   controls: n,
   fit: e = "intrinsic",
@@ -3483,14 +3483,14 @@ function Kt({
   muted: o,
   playsInline: d,
   poster: s,
-  preload: l,
-  src: p,
+  preload: p,
+  src: l,
   width: c
 }) {
-  const u = g(r), m = p.trim(), y = s?.trim();
-  if (!m)
+  const h = v(r), b = l.trim(), S = s?.trim();
+  if (!b)
     throw new Error("src must be a non-empty string.");
-  const k = {
+  const f = {
     kind: "element",
     tag: "video",
     attrs: {
@@ -3501,30 +3501,30 @@ function Kt({
       loop: !!a,
       muted: !!o,
       playsinline: !!d,
-      poster: y || void 0,
-      preload: l,
-      src: m,
+      poster: S || void 0,
+      preload: p,
+      src: b,
       width: c ? String(c) : void 0
     },
     children: []
   };
   return {
     kind: "element",
-    tag: K,
+    tag: tt,
     attrs: {
       class: "set-video",
       "data-fluid": e === "fluid",
-      id: u
+      id: h
     },
-    children: [k]
+    children: [f]
   };
 }
-function pi(t) {
-  return h(Kt(t));
+function Ci(t) {
+  return m(ce(t));
 }
-const Xt = "(prefers-reduced-motion: reduce)";
-function Qt() {
-  if (customElements.get(K)) return;
+const ue = "(prefers-reduced-motion: reduce)";
+function he() {
+  if (customElements.get(tt)) return;
   class t extends HTMLElement {
     #t = !1;
     #e;
@@ -3533,7 +3533,7 @@ function Qt() {
       const e = this.querySelector("video");
       if (!e || (this.#t ||= e.hasAttribute("autoplay"), !this.#t)) return;
       const i = this.ownerDocument.defaultView;
-      !i || typeof i.matchMedia != "function" || (this.#e = i.matchMedia(Xt), this.#i = () => {
+      !i || typeof i.matchMedia != "function" || (this.#e = i.matchMedia(ue), this.#i = () => {
         this.#n();
       }, this.#e.addEventListener("change", this.#i), this.#n());
     }
@@ -3546,12 +3546,12 @@ function Qt() {
       })));
     }
   }
-  customElements.define(K, t);
+  customElements.define(tt, t);
 }
-const ci = {
+const Li = {
   name: "video",
   description: "Use `video` to render a video with intrinsic or fluid fit and native playback behavior.",
-  output: { element: K, class: "set-video" },
+  output: { element: tt, class: "set-video" },
   content: { kind: "none" },
   props: {
     autoPlay: {
@@ -3676,54 +3676,54 @@ const ci = {
     ]
   }
 };
-function Yt(t) {
+function me(t) {
   return t ? /[A-Za-z]/.test(t) : !1;
 }
-function Jt(t) {
+function ke(t) {
   return /^[a-z]/.test(t);
 }
-function D(t) {
+function H(t) {
   const n = t.charAt(0);
-  return Yt(n) ? n : void 0;
+  return me(n) ? n : void 0;
 }
-function te(t) {
-  const n = N(t);
+function ge(t) {
+  const n = O(t);
   if (!n) return;
-  const e = n.split(" "), i = D(e[0]);
+  const e = n.split(" "), i = H(e[0]);
   if (!i) return;
   const r = [i.toUpperCase()];
   if (e.length === 1)
     return r[0];
-  const a = e.slice(1).find(Jt);
+  const a = e.slice(1).find(ke);
   if (a) {
-    const d = D(a);
+    const d = H(a);
     return d ? `${r[0]}${d}` : void 0;
   }
   if (e.length === 2) {
-    const d = D(e[1]);
+    const d = H(e[1]);
     if (!d) return;
     r.push(d);
     const s = e[1].split("-").filter(Boolean);
     if (s.length === 2) {
-      const l = D(s[1]);
-      l && r.push(l);
+      const p = H(s[1]);
+      p && r.push(p);
     }
     return r.slice(0, 3).join("");
   }
   if (e.length === 3) {
-    const d = D(e[1]), s = D(e[2]);
+    const d = H(e[1]), s = H(e[2]);
     return !d || !s ? void 0 : (r.push(d, s), r.slice(0, 3).join(""));
   }
-  const o = D(e.at(-1) || "");
+  const o = H(e.at(-1) || "");
   if (o)
     return r.push(o), r.slice(0, 3).join("");
 }
-const ee = {
+const be = {
   bot: "robot-1",
   organization: "city-6",
   person: "user-1",
   team: "member"
-}, ot = [
+}, vt = [
   "01",
   "02",
   "03",
@@ -3734,15 +3734,15 @@ const ee = {
   "08",
   "09"
 ];
-function ie(t) {
+function ve(t) {
   let n = 5381;
   for (const e of t)
     n = n * 33 ^ e.charCodeAt(0);
   return n >>> 0;
 }
-function ne(t) {
+function fe(t) {
   if (t == null) return;
-  const n = N(t);
+  const n = O(t);
   if (n) {
     if (n.length > 3)
       throw new Error("initials must normalize to 3 characters or fewer.");
@@ -3751,26 +3751,26 @@ function ne(t) {
     return n;
   }
 }
-function re({
+function ye({
   alt: t,
   ariaHidden: n,
   name: e
 }) {
   if (!n)
-    return N(t) || N(e) || "Avatar";
+    return O(t) || O(e) || "Avatar";
 }
-function ae({
+function we({
   color: t,
   name: n
 }) {
   if (t) return t;
   if (n) {
-    const e = ie(n) % ot.length;
-    return ot[e];
+    const e = ve(n) % vt.length;
+    return vt[e];
   }
   return "neutral";
 }
-function oe({
+function Se({
   alt: t,
   ariaHidden: n,
   color: e,
@@ -3781,60 +3781,60 @@ function oe({
   size: d = "md",
   src: s
 }) {
-  const l = g(r), p = ne(a), c = N(o), u = N(s), m = re({
+  const p = v(r), l = fe(a), c = O(o), h = O(s), b = ye({
     alt: t,
     ariaHidden: n,
     name: c
-  }), y = p || te(c), k = !!u, v = ae({
+  }), S = l || ge(c), f = !!h, E = we({
     color: e,
     name: c
-  }), C = {
+  }), q = {
     "aria-hidden": n ? "true" : void 0,
-    "aria-label": !n && !k ? m : void 0,
+    "aria-label": !n && !f ? b : void 0,
     class: "set-avatar",
-    "data-color": v === "neutral" ? void 0 : v,
+    "data-color": E === "neutral" ? void 0 : E,
     "data-entity": i === "person" ? void 0 : i,
     "data-size": d,
-    id: l,
-    role: !n && !k ? "img" : void 0
+    id: p,
+    role: !n && !f ? "img" : void 0
   };
-  let S;
-  return k ? S = {
+  let w;
+  return f ? w = {
     kind: "element",
     tag: "img",
     attrs: {
-      alt: n ? "" : m || "",
+      alt: n ? "" : b || "",
       class: "img",
-      src: u
+      src: h
     },
     children: []
-  } : y ? S = {
+  } : S ? w = {
     kind: "element",
     tag: "span",
     attrs: { class: "initials" },
-    children: [{ kind: "text", value: y }]
-  } : S = {
+    children: [{ kind: "text", value: S }]
+  } : w = {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
     children: [
-      O({
+      P({
         ariaHidden: !0,
-        name: ee[i],
+        name: be[i],
         size: "fill"
       })
     ]
   }, {
     kind: "element",
     tag: "span",
-    attrs: C,
-    children: [S]
+    attrs: q,
+    children: [w]
   };
 }
-function ui(t) {
-  return h(oe(t));
+function Mi(t) {
+  return m(Se(t));
 }
-const hi = {
+const qi = {
   name: "avatar",
   description: "Use `avatar` to visually represent a person, team, or entity.",
   output: { element: "span", class: "set-avatar" },
@@ -3941,14 +3941,14 @@ const hi = {
     ]
   }
 };
-function de({
+function xe({
   floating: t,
   id: n,
   label: e,
   size: i = "md",
   tone: r
 }) {
-  const a = g(n);
+  const a = v(n);
   return {
     kind: "element",
     tag: "span",
@@ -3962,10 +3962,10 @@ function de({
     children: [{ kind: "text", value: e }]
   };
 }
-function mi(t) {
-  return h(de(t));
+function Ii(t) {
+  return m(xe(t));
 }
-const ki = {
+const Ti = {
   name: "badge",
   description: "Use `badge` to annotate content with a short label.",
   output: { element: "span", class: "set-badge" },
@@ -4034,7 +4034,7 @@ const ki = {
     ]
   }
 };
-function X({
+function et({
   align: t,
   as: n,
   children: e,
@@ -4044,30 +4044,30 @@ function X({
   monospaced: o,
   responsive: d,
   size: s = "md",
-  tone: l = "default"
+  tone: p = "default"
 }) {
-  const p = g(i), c = n === "p" ? "p" : "span", u = c === "p", m = u ? t ?? "start" : void 0;
+  const l = v(i), c = n === "p" ? "p" : "span", h = c === "p", b = h ? t ?? "start" : void 0;
   return {
     kind: "element",
     tag: c,
     attrs: {
       class: "set-text",
-      "data-align": m && m !== "start" ? m : void 0,
+      "data-align": b && b !== "start" ? b : void 0,
       "data-link-visited": r ? void 0 : "off",
-      "data-measured": u ? a ?? !0 : void 0,
+      "data-measured": h ? a ?? !0 : void 0,
       "data-monospaced": o,
       "data-responsive": d,
       "data-size": s,
-      "data-tone": l === "muted" ? "muted" : void 0,
-      id: p
+      "data-tone": p === "muted" ? "muted" : void 0,
+      id: l
     },
     children: [{ kind: "raw", html: e }]
   };
 }
-function gi(t) {
-  return h(X(t));
+function Ai(t) {
+  return m(et(t));
 }
-const bi = {
+const _i = {
   name: "text",
   description: "Use `text` for inline or paragraph body copy.",
   output: {
@@ -4191,7 +4191,7 @@ const bi = {
     ]
   }
 };
-function se({
+function Ee({
   align: t = "start",
   attribution: n,
   id: e,
@@ -4200,7 +4200,7 @@ function se({
   responsive: a = !1,
   size: o = "md"
 }) {
-  const d = g(e);
+  const d = v(e);
   return {
     kind: "element",
     tag: "figure",
@@ -4215,7 +4215,7 @@ function se({
         tag: "blockquote",
         attrs: { class: "quote" },
         children: [
-          X({
+          et({
             align: t,
             as: "p",
             children: r,
@@ -4230,7 +4230,7 @@ function se({
         tag: "figcaption",
         attrs: { class: "attribution" },
         children: [
-          X({
+          et({
             as: "span",
             children: n,
             responsive: a,
@@ -4241,10 +4241,10 @@ function se({
     ]
   };
 }
-function vi(t) {
-  return h(se(t));
+function Di(t) {
+  return m(Ee(t));
 }
-const fi = {
+const Vi = {
   name: "blockquote",
   description: "Use `blockquote` to display a quote with attribution.",
   output: { element: "figure", class: "set-blockquote" },
@@ -4313,7 +4313,7 @@ const fi = {
     ]
   }
 };
-function le({
+function ze({
   background: t = "default",
   border: n,
   children: e,
@@ -4324,7 +4324,7 @@ function le({
   responsive: d,
   surface: s
 }) {
-  const l = g(i);
+  const p = v(i);
   return {
     kind: "element",
     tag: "div",
@@ -4337,15 +4337,15 @@ function le({
       "data-padding-inline": a,
       "data-radius": o,
       "data-responsive": d,
-      id: l
+      id: p
     },
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function yi(t) {
-  return h(le(t));
+function Hi(t) {
+  return m(ze(t));
 }
-const wi = {
+const Ni = {
   name: "box",
   description: "Use `box` to inset content.",
   output: { element: "div", class: "set-box" },
@@ -4458,7 +4458,7 @@ const wi = {
     ]
   }
 };
-function pe({
+function Ce({
   description: t,
   headingLevel: n,
   href: e,
@@ -4467,20 +4467,20 @@ function pe({
   surface: a,
   title: o
 }) {
-  const d = g(i), s = n ? `h${n}` : "div", l = e ? [
+  const d = v(i), s = n ? `h${n}` : "div", p = e ? [
     {
       kind: "element",
       tag: "a",
       attrs: { href: e },
       children: [{ kind: "text", value: o }]
     }
-  ] : [{ kind: "text", value: o }], p = r ? [{ kind: "raw", html: r }] : [];
-  r && e && p.push({
+  ] : [{ kind: "text", value: o }], l = r ? [{ kind: "raw", html: r }] : [];
+  r && e && l.push({
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
     children: [
-      O({
+      P({
         ariaHidden: !0,
         mirrored: "rtl",
         name: "arrow-right",
@@ -4499,7 +4499,7 @@ function pe({
       kind: "element",
       tag: s,
       attrs: { class: "title" },
-      children: l
+      children: p
     },
     {
       kind: "element",
@@ -4512,7 +4512,7 @@ function pe({
     kind: "element",
     tag: "p",
     attrs: { class: "note" },
-    children: p
+    children: l
   }), {
     kind: "element",
     tag: "div",
@@ -4524,10 +4524,10 @@ function pe({
     children: c
   };
 }
-function Si(t) {
-  return h(pe(t));
+function Bi(t) {
+  return m(Ce(t));
 }
-const xi = {
+const Oi = {
   name: "card",
   description: "Use `card` to display a summary for a single topic.",
   output: {
@@ -4595,7 +4595,7 @@ const xi = {
     ]
   }
 };
-function ce({
+function Le({
   checked: t,
   description: n,
   disabled: e,
@@ -4605,12 +4605,12 @@ function ce({
   name: o,
   required: d,
   size: s = "md",
-  value: l
+  value: p
 }) {
-  const p = g(i), c = n?.trim();
-  if (c && !p)
+  const l = v(i), c = n?.trim();
+  if (c && !l)
     throw new Error("id must be provided when description is provided.");
-  const u = c ? `${p}-description` : void 0, m = !!e, k = [
+  const h = c ? `${l}-description` : void 0, b = !!e, f = [
     {
       kind: "element",
       tag: "label",
@@ -4620,16 +4620,16 @@ function ce({
           kind: "element",
           tag: "input",
           attrs: {
-            "aria-describedby": u,
-            "aria-invalid": !m && !!r ? "true" : void 0,
+            "aria-describedby": h,
+            "aria-invalid": !b && !!r ? "true" : void 0,
             checked: !!t,
             class: "checkbox",
-            disabled: m,
-            id: p,
+            disabled: b,
+            id: l,
             name: o || void 0,
             required: !!d,
             type: "checkbox",
-            value: l || void 0
+            value: p || void 0
           },
           children: []
         },
@@ -4642,22 +4642,22 @@ function ce({
       ]
     }
   ];
-  return c && k.push({
+  return c && f.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: u },
+    attrs: { class: "description", id: h },
     children: [{ kind: "text", value: c }]
   }), {
     kind: "element",
     tag: "div",
     attrs: { class: "set-checkbox", "data-size": s },
-    children: k
+    children: f
   };
 }
-function Ei(t) {
-  return h(ce(t));
+function Pi(t) {
+  return m(Le(t));
 }
-const zi = {
+const Ri = {
   name: "checkbox",
   description: "Use `checkbox` to let users toggle a single option on or off.",
   output: { element: "div", class: "set-checkbox" },
@@ -4787,13 +4787,13 @@ const zi = {
     ]
   }
 };
-function ue({
+function Me({
   children: t,
   gutter: n = "default",
   id: e,
   maxInlineSize: i = "default"
 }) {
-  const r = g(e);
+  const r = v(e);
   return {
     kind: "element",
     tag: "div",
@@ -4806,10 +4806,10 @@ function ue({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function Ci(t) {
-  return h(ue(t));
+function Wi(t) {
+  return m(Me(t));
 }
-const Li = {
+const Ui = {
   name: "container",
   description: "Use `container` to wrap page-level content.",
   output: { element: "div", class: "set-container" },
@@ -4866,14 +4866,14 @@ const Li = {
     ]
   }
 };
-function he({
+function qe({
   children: t,
   id: n,
   open: e,
   summary: i,
   inlineSize: r = "full"
 }) {
-  const a = g(n);
+  const a = v(n);
   return {
     kind: "element",
     tag: "details",
@@ -4894,7 +4894,7 @@ function he({
             tag: "span",
             attrs: { class: "marker" },
             children: [
-              O({
+              P({
                 ariaHidden: !0,
                 name: "chevron-right",
                 size: "sm"
@@ -4918,10 +4918,10 @@ function he({
     ]
   };
 }
-function Mi(t) {
-  return h(he(t));
+function $i(t) {
+  return m(qe(t));
 }
-const qi = {
+const Gi = {
   name: "details",
   description: "Use `details` to let users expand and collapse a section of content.",
   output: { element: "details", class: "set-details" },
@@ -4980,12 +4980,12 @@ const qi = {
     ]
   }
 };
-function me({
+function Ie({
   id: t,
   orientation: n = "horizontal",
   tone: e = "default"
 } = {}) {
-  const i = g(t);
+  const i = v(t);
   return {
     kind: "element",
     tag: n === "horizontal" ? "hr" : "span",
@@ -4999,10 +4999,10 @@ function me({
     children: []
   };
 }
-function Ii(t = {}) {
-  return h(me(t));
+function Zi(t = {}) {
+  return m(Ie(t));
 }
-const Ti = {
+const Fi = {
   name: "divider",
   description: "Use `divider` to separate sections with a rule.",
   output: {
@@ -5064,7 +5064,7 @@ const Ti = {
     ]
   }
 };
-function bt({
+function qt({
   children: t,
   description: n,
   disabled: e,
@@ -5076,11 +5076,11 @@ function bt({
   const d = n?.trim(), s = i.trim();
   if (!s)
     throw new Error("id must be a non-empty string.");
-  if (!I(s))
+  if (!V(s))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const l = d ? `${s}-description` : void 0, p = !!e, c = !p && !!r, u = [
+  const p = d ? `${s}-description` : void 0, l = !!e, c = !l && !!r, h = [
     {
       kind: "element",
       tag: "legend",
@@ -5088,29 +5088,29 @@ function bt({
       children: [{ kind: "text", value: a }]
     }
   ];
-  return d && u.push({
+  return d && h.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: l },
+    attrs: { class: "description", id: p },
     children: [{ kind: "text", value: d }]
-  }), t && u.push({ kind: "raw", html: t }), {
+  }), t && h.push({ kind: "raw", html: t }), {
     kind: "element",
     tag: "fieldset",
     attrs: {
-      "aria-describedby": d ? l : void 0,
+      "aria-describedby": d ? p : void 0,
       "aria-invalid": c ? "true" : void 0,
       class: "set-fieldset",
       "data-inline-size": o === "fit" ? "fit" : void 0,
-      disabled: p,
+      disabled: l,
       id: s
     },
-    children: u
+    children: h
   };
 }
-function Ai(t) {
-  return h(bt(t));
+function ji(t) {
+  return m(qt(t));
 }
-const _i = {
+const Ki = {
   name: "fieldset",
   description: "Use `fieldset` to group related form controls under a legend.",
   output: { element: "fieldset", class: "set-fieldset" },
@@ -5198,7 +5198,7 @@ const _i = {
     ]
   }
 };
-function ke({
+function Te({
   align: t = "start",
   caption: n,
   children: e,
@@ -5206,7 +5206,7 @@ function ke({
   inlineSize: r = "full",
   responsive: a = !1
 }) {
-  const o = g(i);
+  const o = v(i);
   return {
     kind: "element",
     tag: "figure",
@@ -5223,7 +5223,7 @@ function ke({
         tag: "figcaption",
         attrs: { class: "figcaption" },
         children: [
-          X({
+          et({
             as: "span",
             children: n,
             responsive: a,
@@ -5234,10 +5234,10 @@ function ke({
     ]
   };
 }
-function Di(t) {
-  return h(ke(t));
+function Xi(t) {
+  return m(Te(t));
 }
-const Hi = {
+const Qi = {
   name: "figure",
   description: "Use `figure` to present media with a caption.",
   output: { element: "figure", class: "set-figure" },
@@ -5306,16 +5306,16 @@ const Hi = {
       }
     ]
   }
-}, L = (t) => {
+}, T = (t) => {
   if (t !== void 0)
     return String(t);
 };
-function ge({
+function Ae({
   children: t,
   gap: n = "default",
   id: e
 }) {
-  const i = g(e);
+  const i = v(e);
   return {
     kind: "element",
     tag: "div",
@@ -5334,10 +5334,10 @@ function ge({
     ]
   };
 }
-function Vi(t) {
-  return h(ge(t));
+function Yi(t) {
+  return m(Ae(t));
 }
-function be({
+function _e({
   align: t,
   children: n,
   colSpan: e,
@@ -5347,43 +5347,43 @@ function be({
   colStartNarrow: o,
   colStartWide: d,
   id: s,
-  justify: l,
-  rowSpan: p,
+  justify: p,
+  rowSpan: l,
   rowSpanNarrow: c,
-  rowSpanWide: u,
-  rowStart: m,
-  rowStartNarrow: y,
-  rowStartWide: k
+  rowSpanWide: h,
+  rowStart: b,
+  rowStartNarrow: S,
+  rowStartWide: f
 }) {
-  const v = g(s);
+  const E = v(s);
   return {
     kind: "element",
     tag: "div",
     attrs: {
       class: "set-grid-item",
       "data-align": t,
-      "data-justify": l,
-      "data-col-span-narrow": L(i),
-      "data-col-start-narrow": L(o),
-      "data-col-span": L(e),
-      "data-col-start": L(a),
-      "data-col-span-wide": L(r),
-      "data-col-start-wide": L(d),
-      "data-row-span-narrow": L(c),
-      "data-row-start-narrow": L(y),
-      "data-row-span": L(p),
-      "data-row-start": L(m),
-      "data-row-span-wide": L(u),
-      "data-row-start-wide": L(k),
-      id: v
+      "data-justify": p,
+      "data-col-span-narrow": T(i),
+      "data-col-start-narrow": T(o),
+      "data-col-span": T(e),
+      "data-col-start": T(a),
+      "data-col-span-wide": T(r),
+      "data-col-start-wide": T(d),
+      "data-row-span-narrow": T(c),
+      "data-row-start-narrow": T(S),
+      "data-row-span": T(l),
+      "data-row-start": T(b),
+      "data-row-span-wide": T(h),
+      "data-row-start-wide": T(f),
+      id: E
     },
     children: n ? [{ kind: "raw", html: n }] : []
   };
 }
-function Ni(t) {
-  return h(be(t));
+function Ji(t) {
+  return m(_e(t));
 }
-const Oi = {
+const tn = {
   name: "grid",
   description: "Use `grid` to lay out content in a 12-column responsive grid.",
   output: { element: "div", class: "set-grid" },
@@ -5424,12 +5424,12 @@ const Oi = {
       }
     ]
   }
-}, M = {
+}, A = {
   kind: "number",
   min: 1,
   max: 12,
   integer: !0
-}, Pi = {
+}, en = {
   name: "grid-item",
   description: "Use `grid-item` to place content within a `grid` layout.",
   output: { element: "div", class: "set-grid-item" },
@@ -5449,11 +5449,11 @@ const Oi = {
     },
     colSpan: {
       description: "Columns spanned at the default breakpoint.",
-      type: M
+      type: A
     },
     colStart: {
       description: "Starting column at the default breakpoint.",
-      type: M
+      type: A
     },
     id: {
       description: "DOM id.",
@@ -5461,43 +5461,43 @@ const Oi = {
     },
     rowSpan: {
       description: "Rows spanned at the default breakpoint.",
-      type: M
+      type: A
     },
     rowSpanNarrow: {
       description: "Rows spanned at the narrow breakpoint.",
-      type: M
+      type: A
     },
     rowSpanWide: {
       description: "Rows spanned at the wide breakpoint. Effect is only visible above the wide breakpoint.",
-      type: M
+      type: A
     },
     rowStart: {
       description: "Starting row at the default breakpoint.",
-      type: M
+      type: A
     },
     rowStartNarrow: {
       description: "Starting row at the narrow breakpoint.",
-      type: M
+      type: A
     },
     rowStartWide: {
       description: "Starting row at the wide breakpoint. Effect is only visible above the wide breakpoint.",
-      type: M
+      type: A
     },
     colSpanNarrow: {
       description: "Columns spanned at the narrow breakpoint.",
-      type: M
+      type: A
     },
     colStartNarrow: {
       description: "Starting column at the narrow breakpoint.",
-      type: M
+      type: A
     },
     colSpanWide: {
       description: "Columns spanned at the wide breakpoint. Effect is only visible above the wide breakpoint.",
-      type: M
+      type: A
     },
     colStartWide: {
       description: "Starting column at the wide breakpoint. Effect is only visible above the wide breakpoint.",
-      type: M
+      type: A
     }
   },
   events: {},
@@ -5596,7 +5596,7 @@ const Oi = {
     ]
   }
 };
-function ve({
+function De({
   align: t = "start",
   id: n,
   level: e,
@@ -5605,7 +5605,7 @@ function ve({
   size: a = "md",
   text: o
 }) {
-  const d = g(n);
+  const d = v(n);
   return {
     kind: "element",
     tag: e ? `h${e}` : "span",
@@ -5620,10 +5620,10 @@ function ve({
     children: [{ kind: "text", value: o }]
   };
 }
-function Bi(t) {
-  return h(ve(t));
+function nn(t) {
+  return m(De(t));
 }
-const Ri = {
+const rn = {
   name: "heading",
   description: "Use `heading` to render heading text with consistent type.",
   output: {
@@ -5718,114 +5718,247 @@ const Ri = {
     ]
   }
 };
-function fe({
+function Ve({
   adaptive: t,
-  alt: n = "",
-  aspectRatio: e,
-  fit: i = "intrinsic",
-  gravity: r = "C",
-  height: a,
-  id: o,
-  lazy: d,
-  priority: s,
-  radius: l,
-  shadow: p,
-  sizes: c,
-  sources: u,
-  src: m,
-  srcSet: y,
-  width: k
+  animated: n,
+  alt: e = "",
+  aspectRatio: i,
+  fit: r = "intrinsic",
+  gravity: a = "C",
+  height: o,
+  id: d,
+  lazy: s,
+  leadSrc: p,
+  priority: l,
+  radius: c,
+  shadow: h,
+  sizes: b,
+  sources: S,
+  src: f,
+  srcSet: E,
+  still: q,
+  width: w
 }) {
-  const v = i === "cover", C = g(o), S = m.trim(), b = y?.trim(), x = c?.trim(), w = u?.map((f, q) => {
-    const _ = f.srcSet.trim(), z = f.media?.trim(), B = f.type?.trim(), yt = f.sizes?.trim();
-    if (!_)
-      throw new Error(`sources[${q}].srcSet must be non-empty.`);
+  const k = r === "cover", L = v(d), x = f.trim(), z = E?.trim(), _ = p?.trim(), D = q?.trim(), N = b?.trim(), M = S?.map((u, C) => {
+    const I = u.srcSet.trim(), y = u.media?.trim(), g = u.type?.trim(), Dt = u.sizes?.trim(), Vt = u.leadSrc?.trim(), Ht = u.still?.trim();
+    if (!I)
+      throw new Error(`sources[${C}].srcSet must be non-empty.`);
     return {
-      height: f.height,
-      media: z || void 0,
-      sizes: yt || void 0,
-      srcSet: _,
-      type: B || void 0,
-      width: f.width
+      height: u.height,
+      leadSrc: Vt || void 0,
+      media: y || void 0,
+      sizes: Dt || void 0,
+      srcSet: I,
+      still: Ht || void 0,
+      type: g || void 0,
+      width: u.width
     };
   }) || [];
-  if (!S)
+  if (!x)
     throw new Error("src must be a non-empty string.");
   if (t && [
-    S,
-    b,
-    ...w.map((f) => f.srcSet)
-  ].some((f) => f?.includes("#")))
+    x,
+    z,
+    ...M.map((u) => u.srcSet)
+  ].some((u) => u?.includes("#")))
     throw new Error("adaptive sources must not contain URL fragments.");
-  const E = (f, q) => f.split(/,\s+/).map((_) => {
-    const [z, ...B] = _.trim().split(/\s+/);
-    if (!z || B.length > 1)
+  const U = !!(n && t), it = !!(n && _), $ = !!_ || M.some((u) => u.leadSrc);
+  if (!n && $)
+    throw new Error("leadSrc requires animated.");
+  if (n) {
+    const u = [
+      x,
+      z,
+      _,
+      ...M.flatMap((y) => [y.srcSet, y.leadSrc])
+    ].filter((y) => !!y), C = u.filter((y) => y.includes("{scheme}"));
+    if (t && C.length !== u.length)
+      throw new Error(
+        "adaptive animated sources must contain a {scheme} placeholder."
+      );
+    if (!t && C.length > 0)
+      throw new Error(
+        "the {scheme} placeholder requires adaptive to enable light/dark."
+      );
+    if (!D)
+      throw new Error("animated requires a still.");
+    if ([
+      D,
+      ...M.map((y) => y.still)
+    ].filter((y) => !!y).some((y) => y.includes("#")))
+      throw new Error("animated still must not contain URL fragments.");
+  }
+  const mt = (u, C) => u.split(/,\s+/).map((I) => {
+    const [y, ...g] = I.trim().split(/\s+/);
+    if (!y || g.length > 1)
       throw new Error(
         "adaptive srcSet candidates must be a URL plus at most one descriptor, separated by a comma and whitespace."
       );
-    return [`${z}#${q}`, ...B].join(" ");
-  }).join(", "), T = (f) => {
-    const q = {
+    return [`${y}#${C}`, ...g].join(" ");
+  }).join(", "), nt = (u) => {
+    const C = {
       kind: "element",
       tag: "img",
       attrs: {
-        alt: n,
+        alt: e,
         class: "img",
-        "data-scheme": f && w.length === 0 ? f : void 0,
-        fetchpriority: s ? "high" : void 0,
-        height: v ? void 0 : a ? String(a) : void 0,
-        loading: d && !s ? "lazy" : void 0,
-        sizes: w.length > 0 ? void 0 : x || void 0,
-        src: f ? `${S}#${f}` : S,
-        srcset: b && f ? E(b, f) : b || void 0,
-        width: v ? void 0 : k ? String(k) : void 0
+        "data-scheme": u && M.length === 0 ? u : void 0,
+        fetchpriority: l ? "high" : void 0,
+        height: k ? void 0 : o ? String(o) : void 0,
+        loading: s && !l ? "lazy" : void 0,
+        sizes: M.length > 0 ? void 0 : N || void 0,
+        src: u ? `${x}#${u}` : x,
+        srcset: z && u ? mt(z, u) : z || void 0,
+        width: k ? void 0 : w ? String(w) : void 0
       },
       children: []
     };
-    if (w.length === 0)
-      return q;
-    const _ = w.map((z) => ({
+    if (M.length === 0)
+      return C;
+    const I = M.map((y) => ({
       kind: "element",
       tag: "source",
       attrs: {
-        height: z.height ? String(z.height) : void 0,
-        media: z.media,
-        sizes: z.sizes,
-        srcset: f ? E(z.srcSet, f) : z.srcSet,
-        type: z.type,
-        width: z.width ? String(z.width) : void 0
+        height: y.height ? String(y.height) : void 0,
+        media: y.media,
+        sizes: y.sizes,
+        srcset: u ? mt(y.srcSet, u) : y.srcSet,
+        type: y.type,
+        width: y.width ? String(y.width) : void 0
       },
       children: []
     }));
     return {
       kind: "element",
       tag: "picture",
-      attrs: { "data-scheme": f },
-      children: [..._, q]
+      attrs: { "data-scheme": u },
+      children: [...I, C]
     };
-  }, H = t ? [T("light"), T("dark")] : [T()], A = [];
-  return a && A.push(`--set-image-block-size: ${a / 16}rem`), k && A.push(`--set-image-inline-size: ${k / 16}rem`), {
+  }, rt = "(prefers-reduced-motion: reduce)", R = (u, C) => C ? u.replaceAll("{scheme}", C) : u, at = (u, C) => C ? `${u}#${C}` : u, kt = (u) => {
+    const C = M.filter((g) => g.still).map((g) => ({
+      kind: "element",
+      tag: "source",
+      attrs: {
+        height: g.height ? String(g.height) : void 0,
+        media: g.media ? `${rt} and ${g.media}` : rt,
+        srcset: at(g.still, u),
+        width: g.width ? String(g.width) : void 0
+      },
+      children: []
+    }));
+    C.push({
+      kind: "element",
+      tag: "source",
+      attrs: {
+        media: rt,
+        srcset: at(D, u)
+      },
+      children: []
+    });
+    const I = M.map((g) => ({
+      kind: "element",
+      tag: "source",
+      attrs: {
+        height: g.height ? String(g.height) : void 0,
+        media: g.media,
+        sizes: g.sizes,
+        srcset: R(g.srcSet, u),
+        type: g.type,
+        width: g.width ? String(g.width) : void 0
+      },
+      children: []
+    })), y = {
+      kind: "element",
+      tag: "img",
+      attrs: {
+        alt: e,
+        class: "img",
+        fetchpriority: l ? "high" : void 0,
+        height: k ? void 0 : o ? String(o) : void 0,
+        loading: s && !l ? "lazy" : void 0,
+        sizes: M.length > 0 ? void 0 : N || void 0,
+        src: R(x, u),
+        srcset: z ? R(z, u) : void 0,
+        width: k ? void 0 : w ? String(w) : void 0
+      },
+      children: []
+    };
+    return {
+      kind: "element",
+      tag: "picture",
+      attrs: { "data-scheme": u },
+      children: [...C, ...I, y]
+    };
+  }, At = (u) => {
+    const C = "(prefers-reduced-motion: no-preference)", I = M.map((g) => {
+      if (g.leadSrc)
+        return {
+          kind: "element",
+          tag: "source",
+          attrs: {
+            height: g.height ? String(g.height) : void 0,
+            media: g.media ? `${C} and ${g.media}` : C,
+            sizes: g.sizes,
+            srcset: R(g.leadSrc, u),
+            type: g.type,
+            width: g.width ? String(g.width) : void 0
+          },
+          children: []
+        };
+    }).filter((g) => !!g);
+    I.push({
+      kind: "element",
+      tag: "source",
+      attrs: {
+        media: C,
+        sizes: M.length > 0 ? void 0 : N || void 0,
+        srcset: R(_, u)
+      },
+      children: []
+    });
+    const y = {
+      kind: "element",
+      tag: "img",
+      attrs: {
+        alt: "",
+        class: "img",
+        height: k ? void 0 : o ? String(o) : void 0,
+        src: at(D, u),
+        width: k ? void 0 : w ? String(w) : void 0
+      },
+      children: []
+    };
+    return {
+      kind: "element",
+      tag: "picture",
+      attrs: { "data-scheme": u, "data-layer": "lead" },
+      children: [...I, y]
+    };
+  }, ot = (u) => it ? [kt(u), At(u)] : [kt(u)], _t = n ? U ? [...ot("light"), ...ot("dark")] : ot() : t ? [nt("light"), nt("dark")] : [nt()], G = [];
+  return o && G.push(`--set-image-block-size: ${o / 16}rem`), w && G.push(`--set-image-inline-size: ${w / 16}rem`), {
     kind: "element",
     tag: "div",
     attrs: {
       class: "set-image",
       "data-adaptive": !!t,
-      "data-aspect-ratio": v && !a ? e : void 0,
-      "data-fluid": i === "fluid",
-      "data-gravity": v && r !== "C" ? r : void 0,
-      "data-shadow": !!p,
-      "data-object-fit": v ? "cover" : void 0,
-      "data-radius": !!l,
-      id: C,
-      style: A.length > 0 ? A.join("; ") : void 0
-    },
-    children: H
+      "data-animated": !!n,
+      "data-sequenced": it,
+      "data-aspect-ratio": k && !o ? i : void 0,
+      "data-fluid": r === "fluid",
+      "data-gravity": k && a !== "C" ? a : void 0,
+      "data-shadow": !!h,
+      "data-object-fit": k ? "cover" : void 0,
+      "data-radius": !!c,
+      id: L,
+      style: G.length > 0 ? G.join("; ") : void 0
+    },
+    children: _t
   };
 }
-function ye(t) {
-  return h(fe(t));
+function He(t) {
+  return m(Ve(t));
 }
-const Wi = {
+const an = {
   name: "image",
   description: "Use `image` to render a responsive image with intrinsic, fluid, or cover fit, and optional art-directed `sources`.",
   output: { element: "div", class: "set-image" },
@@ -5833,7 +5966,12 @@ const Wi = {
   props: {
     adaptive: {
       default: !1,
-      description: "Shows the image's light or dark variant to match the surrounding color scheme. Use with adaptive assets exported from Screen, which carry both variants in one file; the component selects one by adding `#light`/`#dark` to the URL.",
+      description: "Shows the image's light or dark variant to match the surrounding color scheme. Use with adaptive assets exported from Screen, which carry both variants in one file; the component selects one by adding `#light`/`#dark` to the URL. With `animated`, it pairs light/dark webp instead, via a `{scheme}` placeholder in the URLs.",
+      type: { kind: "boolean" }
+    },
+    animated: {
+      default: !1,
+      description: "Renders an animated image (e.g. `webp`) with a required `still` shown when the user prefers reduced motion. Combine with `adaptive` for light/dark theming: the `src`/`srcSet`/`sources` URLs then carry no Cloudinary version and a `{scheme}` placeholder — matching Screen's animated exports — which the component substitutes across a light/dark pair. The `still` gets `#light`/`#dark` appended. Without `adaptive`, renders a single, unthemed animated asset. Add a `leadSrc` to sequence: it plays once as an overlay, then reveals `src` after a fixed hold.",
       type: { kind: "boolean" }
     },
     alt: {
@@ -5918,6 +6056,14 @@ const Wi = {
             required: !0,
             type: { kind: "string" }
           },
+          leadSrc: {
+            description: "Intro overlay for this source in an `animated` sequence.",
+            type: { kind: "string" }
+          },
+          still: {
+            description: "Reduced-motion still for this source, used when `animated`. For a light/dark still, use an adaptive SVG.",
+            type: { kind: "string" }
+          },
           type: {
             description: "MIME type for the source resources.",
             type: { kind: "string" }
@@ -5933,6 +6079,15 @@ const Wi = {
       description: "Candidate sources for the fallback image.",
       type: { kind: "string" }
     },
+    leadSrc: {
+      description: "An intro overlay that sequences an `animated` image: `leadSrc` plays once, then the component reveals `src` after a fixed hold. Follows the same `{scheme}` rules as `animated` sources.",
+      type: { kind: "string" }
+    },
+    still: {
+      description: "Reduced-motion still shown when `animated` and the user prefers reduced motion. Any image works; for a light/dark still use an adaptive SVG exported from Screen, which the component selects with `#light`/`#dark` when combined with `adaptive`.",
+      requiredWhen: "`animated` is set",
+      type: { kind: "string" }
+    },
     src: {
       description: "Image source URL.",
       required: !0,
@@ -5951,6 +6106,16 @@ const Wi = {
         attribute: "data-adaptive",
         condition: { kind: "when-truthy", prop: "adaptive" }
       },
+      {
+        target: { on: "host" },
+        attribute: "data-animated",
+        condition: { kind: "when-truthy", prop: "animated" }
+      },
+      {
+        target: { on: "host" },
+        attribute: "data-sequenced",
+        condition: { kind: "when-non-empty", prop: "leadSrc" }
+      },
       {
         target: { on: "host" },
         attribute: "data-object-fit",
@@ -6023,7 +6188,7 @@ const Wi = {
     ]
   }
 };
-function we({
+function Ne({
   align: t = "center",
   as: n = "div",
   children: e,
@@ -6032,7 +6197,7 @@ function we({
   justify: a = "start",
   nowrap: o
 }) {
-  const d = g(r);
+  const d = v(r);
   return {
     kind: "element",
     tag: n,
@@ -6047,10 +6212,10 @@ function we({
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function Ui(t) {
-  return h(we(t));
+function on(t) {
+  return m(Ne(t));
 }
-const $i = {
+const dn = {
   name: "inline",
   description: "Use `inline` to lay out content in a horizontal row.",
   output: {
@@ -6135,7 +6300,7 @@ const $i = {
     ]
   }
 };
-function Se({
+function Be({
   autocomplete: t,
   description: n,
   disabled: e,
@@ -6145,69 +6310,69 @@ function Se({
   name: o,
   pattern: d,
   readOnly: s,
-  required: l,
-  size: p = "md",
+  required: p,
+  size: l = "md",
   spellcheck: c,
-  type: u = "text",
-  value: m,
-  inlineSize: y = "full"
+  type: h = "text",
+  value: b,
+  inlineSize: S = "full"
 }) {
-  const k = i.trim(), v = n?.trim(), C = t === !1 ? !1 : t?.trim(), S = o?.trim(), b = d?.trim(), x = m;
-  if (!k)
+  const f = i.trim(), E = n?.trim(), q = t === !1 ? !1 : t?.trim(), w = o?.trim(), k = d?.trim(), L = b;
+  if (!f)
     throw new Error("id must be a non-empty string.");
-  if (!I(k))
+  if (!V(f))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const w = v ? `${k}-description` : void 0, E = u === "numeric", T = E ? "text" : u, H = b || (E ? "^[0-9]*$" : void 0), A = c === void 0 && E ? !1 : c, f = !!e, q = !f && !!s, z = [
+  const x = E ? `${f}-description` : void 0, z = h === "numeric", _ = z ? "text" : h, D = k || (z ? "^[0-9]*$" : void 0), N = c === void 0 && z ? !1 : c, M = !!e, U = !M && !!s, $ = [
     {
       kind: "element",
       tag: "label",
-      attrs: { class: "label", for: k },
+      attrs: { class: "label", for: f },
       children: [{ kind: "text", value: a }]
     },
     {
       kind: "element",
       tag: "input",
       attrs: {
-        "aria-describedby": w,
-        "aria-invalid": !f && !q && !!r ? "true" : void 0,
-        autocomplete: C === !1 ? "off" : C || void 0,
+        "aria-describedby": x,
+        "aria-invalid": !M && !U && !!r ? "true" : void 0,
+        autocomplete: q === !1 ? "off" : q || void 0,
         class: "input",
-        disabled: f,
-        id: k,
-        inputmode: E ? "numeric" : void 0,
-        name: S || void 0,
-        pattern: H,
-        readonly: q,
-        required: !!l,
-        spellcheck: A === void 0 ? void 0 : String(A),
-        type: T,
-        value: x
+        disabled: M,
+        id: f,
+        inputmode: z ? "numeric" : void 0,
+        name: w || void 0,
+        pattern: D,
+        readonly: U,
+        required: !!p,
+        spellcheck: N === void 0 ? void 0 : String(N),
+        type: _,
+        value: L
       },
       children: []
     }
   ];
-  return v && z.push({
+  return E && $.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: w },
-    children: [{ kind: "text", value: v }]
+    attrs: { class: "description", id: x },
+    children: [{ kind: "text", value: E }]
   }), {
     kind: "element",
     tag: "div",
     attrs: {
       class: "set-input",
-      "data-size": p,
-      "data-inline-size": y === "fit" ? "fit" : void 0
+      "data-size": l,
+      "data-inline-size": S === "fit" ? "fit" : void 0
     },
-    children: z
+    children: $
   };
 }
-function Gi(t) {
-  return h(Se(t));
+function sn(t) {
+  return m(Be(t));
 }
-const Zi = {
+const ln = {
   name: "input",
   description: "Use `input` to collect a single line of text from users.",
   output: { element: "div", class: "set-input" },
@@ -6402,7 +6567,7 @@ const Zi = {
       }
     ]
   }
-}, xe = "0 0 6714.6 1200", Ee = "0 0 600 1200", ze = [
+}, Oe = "0 0 6714.6 1200", Pe = "0 0 600 1200", Re = [
   { x: 0, y: 0 },
   { x: 300, y: 0 },
   { x: 150, y: 300 },
@@ -6411,11 +6576,11 @@ const Zi = {
   { x: 300, y: 600 },
   { x: 150, y: 900 },
   { x: 450, y: 900 }
-], Ce = "M0 956h98V571L87 391h2l124 320h89l123-320h3l-11 180v385h98V276H384L260 608h-5L131 276H0zm879.94 10c184 0 223-46 223-272 0-225-39-271-223-271-186 0-224 46-224 271 0 226 38 272 224 272m0-93c-102 0-123-30-123-179 0-147 21-177 123-177 100 0 121 30 121 177 0 149-21 179-121 179m361.44 83h103V686c0-141 20-169 112-169 73 0 88 18 88 107v332h103V624c0-167-28-202-163-202-95 0-120 16-147 92h-5v-82h-91zm769.16 10c184 0 223-46 223-272 0-225-39-271-223-271-186 0-224 46-224 271 0 226 38 272 224 272m0-93c-102 0-123-30-123-179 0-147 21-177 123-177 100 0 121 30 121 177 0 149-21 179-121 179m363.25-65c-4 132 30 158 202 158 173 0 208-25 208-150 0-118-33-146-191-170-94-14-114-26-114-74 0-50 18-60 103-60 76 0 92 9 96 52h97c-3-118-36-142-194-142-166 0-201 25-201 146 0 114 31 141 182 162 101 13 122 28 122 82 0 53-18 64-103 64-88 0-107-11-110-68zm558.97 363h102V902h5c20 54 41 64 123 64 160 0 193-45 193-270 0-227-34-274-198-274-83 0-105 11-123 65h-4v-55h-98zm209-298c-93 0-112-30-112-179 0-148 19-178 112-178s113 30 113 179c0 148-20 178-113 178m656.46 83h88V610c0-156-34-187-197-187-150 0-181 27-179 157h97c1-61 15-74 85-74 82 0 99 18 99 105v24h-72c-187 0-226 30-226 179 0 126 28 152 162 152 92 0 116-13 138-74h5zm-8-243c-1 135-22 163-119 163-65 0-79-13-79-75 0-74 18-88 107-88zm551.75 95c-10 56-26 67-89 67-100 0-121-31-121-181s20-181 117-181c65 0 81 14 91 79h101c-4-141-37-170-188-170-185 0-224 46-224 272s39 272 226 272c147 0 179-26 186-158zm547.03 9c-15 48-31 58-96 58-96 0-117-23-123-136h324c5-263-32-317-214-317-172 0-207 46-207 271 0 227 38 273 223 273 139 0 172-25 190-149zm-218-160c4-122 24-146 114-146 88 0 108 24 112 146zm787.56 299h93l-1-734h-102l1 266h-5c-19-54-40-65-120-65-162 0-196 46-196 272s35 271 200 271c84 0 105-11 125-65h5zm-115-82c-94 0-114-30-114-180s20-180 114-180c93 0 112 30 112 180s-19 180-112 180", Le = 1163, vt = () => ({
+], We = "M0 956h98V571L87 391h2l124 320h89l123-320h3l-11 180v385h98V276H384L260 608h-5L131 276H0zm879.94 10c184 0 223-46 223-272 0-225-39-271-223-271-186 0-224 46-224 271 0 226 38 272 224 272m0-93c-102 0-123-30-123-179 0-147 21-177 123-177 100 0 121 30 121 177 0 149-21 179-121 179m361.44 83h103V686c0-141 20-169 112-169 73 0 88 18 88 107v332h103V624c0-167-28-202-163-202-95 0-120 16-147 92h-5v-82h-91zm769.16 10c184 0 223-46 223-272 0-225-39-271-223-271-186 0-224 46-224 271 0 226 38 272 224 272m0-93c-102 0-123-30-123-179 0-147 21-177 123-177 100 0 121 30 121 177 0 149-21 179-121 179m363.25-65c-4 132 30 158 202 158 173 0 208-25 208-150 0-118-33-146-191-170-94-14-114-26-114-74 0-50 18-60 103-60 76 0 92 9 96 52h97c-3-118-36-142-194-142-166 0-201 25-201 146 0 114 31 141 182 162 101 13 122 28 122 82 0 53-18 64-103 64-88 0-107-11-110-68zm558.97 363h102V902h5c20 54 41 64 123 64 160 0 193-45 193-270 0-227-34-274-198-274-83 0-105 11-123 65h-4v-55h-98zm209-298c-93 0-112-30-112-179 0-148 19-178 112-178s113 30 113 179c0 148-20 178-113 178m656.46 83h88V610c0-156-34-187-197-187-150 0-181 27-179 157h97c1-61 15-74 85-74 82 0 99 18 99 105v24h-72c-187 0-226 30-226 179 0 126 28 152 162 152 92 0 116-13 138-74h5zm-8-243c-1 135-22 163-119 163-65 0-79-13-79-75 0-74 18-88 107-88zm551.75 95c-10 56-26 67-89 67-100 0-121-31-121-181s20-181 117-181c65 0 81 14 91 79h101c-4-141-37-170-188-170-185 0-224 46-224 272s39 272 226 272c147 0 179-26 186-158zm547.03 9c-15 48-31 58-96 58-96 0-117-23-123-136h324c5-263-32-317-214-317-172 0-207 46-207 271 0 227 38 273 223 273 139 0 172-25 190-149zm-218-160c4-122 24-146 114-146 88 0 108 24 112 146zm787.56 299h93l-1-734h-102l1 266h-5c-19-54-40-65-120-65-162 0-196 46-196 272s35 271 200 271c84 0 105-11 125-65h5zm-115-82c-94 0-114-30-114-180s20-180 114-180c93 0 112 30 112 180s-19 180-112 180", Ue = 1163, It = () => ({
   kind: "element",
   tag: "g",
   attrs: { class: "mark" },
-  children: ze.map(({ x: t, y: n }) => ({
+  children: Re.map(({ x: t, y: n }) => ({
     kind: "element",
     tag: "rect",
     attrs: {
@@ -6426,19 +6591,19 @@ const Zi = {
     },
     children: []
   }))
-}), Me = () => ({
+}), $e = () => ({
   kind: "element",
   tag: "g",
-  attrs: { class: "word", transform: `translate(${Le} 0)` },
+  attrs: { class: "word", transform: `translate(${Ue} 0)` },
   children: [
     {
       kind: "element",
       tag: "path",
-      attrs: { d: Ce },
+      attrs: { d: We },
       children: []
     }
   ]
-}), ft = (t, n) => ({
+}), Tt = (t, n) => ({
   kind: "element",
   tag: "svg",
   attrs: {
@@ -6448,13 +6613,13 @@ const Zi = {
   },
   children: n
 });
-function qe() {
-  return ft(xe, [vt(), Me()]);
+function Ge() {
+  return Tt(Oe, [It(), $e()]);
 }
-function Ie() {
-  return ft(Ee, [vt()]);
+function Ze() {
+  return Tt(Pe, [It()]);
 }
-function Te({
+function Fe({
   animated: t,
   id: n,
   label: e,
@@ -6462,7 +6627,7 @@ function Te({
   tone: r = "default",
   variant: a = "primary"
 }) {
-  const o = g(n), d = !!t && (a === "primary" || a === "graphic"), s = [
+  const o = v(n), d = !!t && (a === "primary" || a === "graphic"), s = [
     {
       kind: "element",
       tag: "span",
@@ -6471,7 +6636,7 @@ function Te({
     }
   ];
   return d && s.push(
-    a === "graphic" ? Ie() : qe()
+    a === "graphic" ? Ze() : Ge()
   ), {
     kind: "element",
     tag: "div",
@@ -6486,10 +6651,10 @@ function Te({
     children: s
   };
 }
-function Fi(t) {
-  return h(Te(t));
+function pn(t) {
+  return m(Fe(t));
 }
-const ji = {
+const cn = {
   name: "logo",
   description: "Use `logo` to display the brand mark.",
   output: { element: "div", class: "set-logo" },
@@ -6577,7 +6742,7 @@ const ji = {
     ]
   }
 };
-function Ae({
+function je({
   banner: t,
   centerMain: n,
   children: e,
@@ -6588,18 +6753,18 @@ function Ae({
   id: d,
   stickyHeader: s
 }) {
-  const l = g(d), p = [];
-  return t && p.push({ kind: "raw", html: t }), p.push({
+  const p = v(d), l = [];
+  return t && l.push({ kind: "raw", html: t }), l.push({
     kind: "element",
     tag: "header",
     attrs: { class: "header" },
     children: [{ kind: "raw", html: r }]
-  }), p.push({
+  }), l.push({
     kind: "element",
     tag: "main",
     attrs: { class: "main" },
     children: e ? [{ kind: "raw", html: e }] : []
-  }), p.push({
+  }), l.push({
     kind: "element",
     tag: "footer",
     attrs: { class: "footer" },
@@ -6613,15 +6778,15 @@ function Ae({
       "data-header-border": a,
       "data-header-size": o,
       "data-sticky-header": s,
-      id: l
+      id: p
     },
-    children: p
+    children: l
   };
 }
-function Ki(t) {
-  return h(Ae(t));
+function un(t) {
+  return m(je(t));
 }
-const Xi = {
+const hn = {
   name: "page",
   description: "Use `page` as the primary layout for header, main, and footer regions.",
   output: { element: "div", class: "set-page" },
@@ -6711,13 +6876,13 @@ const Xi = {
     ]
   }
 };
-function _e({
+function Ke({
   children: t,
   id: n,
   padding: e = "md",
   surface: i
 }) {
-  const r = g(n);
+  const r = v(n);
   return {
     kind: "element",
     tag: "div",
@@ -6730,10 +6895,10 @@ function _e({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function Qi(t) {
-  return h(_e(t));
+function mn(t) {
+  return m(Ke(t));
 }
-const Yi = {
+const kn = {
   name: "panel",
   description: "Use `panel` to group related content in a contained region.",
   output: { element: "div", class: "set-panel" },
@@ -6784,14 +6949,14 @@ const Yi = {
     ]
   }
 };
-function De({
+function Xe({
   children: t,
   id: n,
   size: e = "md",
   tone: i = "default",
   variant: r = "tile"
 } = {}) {
-  const a = g(n);
+  const a = v(n);
   return {
     kind: "element",
     tag: "div",
@@ -6805,10 +6970,10 @@ function De({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function Ji(t = {}) {
-  return h(De(t));
+function gn(t = {}) {
+  return m(Xe(t));
 }
-const tn = {
+const bn = {
   name: "pattern",
   description: "Use `pattern` to render repeated visual language components behind content.",
   output: { element: "div", class: "set-pattern" },
@@ -6875,22 +7040,22 @@ const tn = {
     ]
   }
 };
-function en(t) {
-  return ye({
+function vn(t) {
+  return He({
     ...t,
     alt: "",
     fit: "cover",
     priority: !0
   });
 }
-function He({
+function Qe({
   children: t,
   contentTheme: n,
   id: e,
   media: i,
   surface: r
 }) {
-  const a = g(e), o = n ? r ?? "default" : r, d = [
+  const a = v(e), o = n ? r ?? "default" : r, d = [
     {
       kind: "element",
       tag: "div",
@@ -6915,10 +7080,10 @@ function He({
     children: d
   };
 }
-function nn(t) {
-  return h(He(t));
+function fn(t) {
+  return m(Qe(t));
 }
-const rn = {
+const yn = {
   name: "poster",
   description: "Use `poster` to layer content over background media.",
   output: { element: "div", class: "set-poster" },
@@ -6989,7 +7154,7 @@ const rn = {
     ]
   }
 };
-function Ve({
+function Ye({
   align: t = "start",
   children: n,
   hangingPunctuation: e,
@@ -6999,7 +7164,7 @@ function Ve({
   monospaced: o,
   responsive: d
 }) {
-  const s = g(i);
+  const s = v(i);
   return {
     kind: "element",
     tag: "div",
@@ -7016,10 +7181,10 @@ function Ve({
     children: [{ kind: "raw", html: n }]
   };
 }
-function an(t) {
-  return h(Ve(t));
+function wn(t) {
+  return m(Ye(t));
 }
-const on = {
+const Sn = {
   name: "prose",
   description: "Use `prose` to style rich-text markup.",
   output: { element: "div", class: "set-prose" },
@@ -7113,7 +7278,7 @@ const on = {
     ]
   }
 };
-function Ne({
+function Je({
   description: t,
   disabled: n,
   id: e,
@@ -7123,37 +7288,37 @@ function Ne({
   name: o,
   orientation: d = "vertical",
   required: s,
-  size: l = "md",
-  value: p
+  size: p = "md",
+  value: l
 }) {
-  const c = e.trim(), u = o.trim(), m = p?.trim();
+  const c = e.trim(), h = o.trim(), b = l?.trim();
   if (!c)
     throw new Error("id must be a non-empty string.");
-  if (!I(c))
+  if (!V(c))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  if (!u)
+  if (!h)
     throw new Error("name must be a non-empty string.");
   if (r.length < 2)
     throw new Error("radios must include at least 2 options.");
-  const y = r.map((b, x) => {
-    const w = b.value.trim(), E = b.label.trim(), T = b.description?.trim();
-    if (!w)
-      throw new Error(`radios[${x}].value must be non-empty.`);
-    if (!E)
-      throw new Error(`radios[${x}].label must be non-empty.`);
+  const S = r.map((k, L) => {
+    const x = k.value.trim(), z = k.label.trim(), _ = k.description?.trim();
+    if (!x)
+      throw new Error(`radios[${L}].value must be non-empty.`);
+    if (!z)
+      throw new Error(`radios[${L}].label must be non-empty.`);
     return {
-      description: T,
-      disabled: !!b.disabled,
-      label: E,
-      value: w
+      description: _,
+      disabled: !!k.disabled,
+      label: z,
+      value: x
     };
   });
-  if (new Set(y.map((b) => b.value)).size !== y.length)
+  if (new Set(S.map((k) => k.value)).size !== S.length)
     throw new Error("radios values must be unique.");
-  const v = !!n, C = y.map((b) => {
-    const x = !!b.disabled, w = b.description ? `${c}-${b.value}-description` : void 0, E = [
+  const E = !!n, q = S.map((k) => {
+    const L = !!k.disabled, x = k.description ? `${c}-${k.value}-description` : void 0, z = [
       {
         kind: "element",
         tag: "label",
@@ -7163,14 +7328,14 @@ function Ne({
             kind: "element",
             tag: "input",
             attrs: {
-              "aria-describedby": w,
-              checked: m === b.value,
+              "aria-describedby": x,
+              checked: b === k.value,
               class: "radio",
-              disabled: x,
-              name: u,
-              required: !!s && !v && !x,
+              disabled: L,
+              name: h,
+              required: !!s && !E && !L,
               type: "radio",
-              value: b.value
+              value: k.value
             },
             children: []
           },
@@ -7178,45 +7343,45 @@ function Ne({
             kind: "element",
             tag: "span",
             attrs: {},
-            children: [{ kind: "text", value: b.label }]
+            children: [{ kind: "text", value: k.label }]
           }
         ]
       }
     ];
-    return b.description && E.push({
+    return k.description && z.push({
       kind: "element",
       tag: "p",
-      attrs: { class: "radio-description", id: w },
-      children: [{ kind: "text", value: b.description }]
+      attrs: { class: "radio-description", id: x },
+      children: [{ kind: "text", value: k.description }]
     }), {
       kind: "element",
       tag: "div",
       attrs: { class: "radio-field" },
-      children: E
+      children: z
     };
   });
-  return bt({
-    children: h({
+  return qt({
+    children: m({
       kind: "element",
       tag: "div",
       attrs: {
         class: "set-radios",
         "data-orientation": d,
-        "data-size": l
+        "data-size": p
       },
-      children: C
+      children: q
     }),
     description: t,
-    disabled: v,
+    disabled: E,
     id: c,
     invalid: i,
     legend: a
   });
 }
-function dn(t) {
-  return h(Ne(t));
+function xn(t) {
+  return m(Je(t));
 }
-const sn = {
+const En = {
   name: "radios",
   description: "Use `radios` to let users select one option from a short list.",
   output: { element: "fieldset", class: "set-fieldset" },
@@ -7365,7 +7530,7 @@ const sn = {
     ]
   }
 };
-function Oe({
+function ti({
   appOverscrollBehavior: t,
   appRoot: n,
   brand: e = "mnsp",
@@ -7375,7 +7540,7 @@ function Oe({
   lang: o,
   theme: d
 }) {
-  const s = g(a);
+  const s = v(a);
   return {
     kind: "element",
     tag: "div",
@@ -7392,10 +7557,10 @@ function Oe({
     children: i ? [{ kind: "raw", html: i }] : []
   };
 }
-function ln(t) {
-  return h(Oe(t));
+function zn(t) {
+  return m(ti(t));
 }
-const pn = {
+const Cn = {
   name: "root",
   description: "Mandatory top-level `root` wrapper for the Set system.",
   output: { element: "div", class: "set" },
@@ -7488,13 +7653,13 @@ const pn = {
     ]
   }
 };
-function Pe({
+function ei({
   id: t,
   label: n,
   size: e = "md",
   tone: i = "default"
 } = {}) {
-  const r = g(t), o = [
+  const r = v(t), o = [
     {
       kind: "element",
       tag: "svg",
@@ -7545,10 +7710,10 @@ function Pe({
     children: o
   };
 }
-function cn(t = {}) {
-  return h(Pe(t));
+function Ln(t = {}) {
+  return m(ei(t));
 }
-const un = {
+const Mn = {
   name: "spinner",
   description: "Use `spinner` to indicate loading or in-progress state.",
   output: { element: "span", class: "set-spinner" },
@@ -7606,7 +7771,7 @@ const un = {
     ]
   }
 };
-function Be({
+function ii({
   align: t = "stretch",
   as: n = "div",
   children: e,
@@ -7614,7 +7779,7 @@ function Be({
   id: r,
   responsive: a
 }) {
-  const o = g(r);
+  const o = v(r);
   return {
     kind: "element",
     tag: n,
@@ -7628,10 +7793,10 @@ function Be({
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function hn(t) {
-  return h(Be(t));
+function qn(t) {
+  return m(ii(t));
 }
-const mn = {
+const In = {
   name: "stack",
   description: "Use `stack` to lay out content in a vertical column.",
   output: {
@@ -7702,13 +7867,13 @@ const mn = {
     ]
   }
 };
-function Re({
+function ni({
   children: t,
   contentTheme: n,
   id: e,
   variant: i = "default"
 }) {
-  const r = g(e);
+  const r = v(e);
   return {
     kind: "element",
     tag: "div",
@@ -7721,10 +7886,10 @@ function Re({
     children: [{ kind: "raw", html: t }]
   };
 }
-function kn(t) {
-  return h(Re(t));
+function Tn(t) {
+  return m(ni(t));
 }
-const gn = {
+const An = {
   name: "surface",
   description: "Use `surface` to set a colour context for nested content.",
   output: { element: "div", class: "set-surface" },
@@ -7776,7 +7941,7 @@ const gn = {
     ]
   }
 };
-function We({
+function ri({
   checked: t,
   description: n,
   disabled: e,
@@ -7786,10 +7951,10 @@ function We({
   size: o = "md",
   value: d
 }) {
-  const s = g(i), l = n?.trim();
-  if (l && !s)
+  const s = v(i), p = n?.trim();
+  if (p && !s)
     throw new Error("id must be provided when description is provided.");
-  const p = l ? `${s}-description` : void 0, c = [
+  const l = p ? `${s}-description` : void 0, c = [
     {
       kind: "element",
       tag: "label",
@@ -7799,7 +7964,7 @@ function We({
           kind: "element",
           tag: "input",
           attrs: {
-            "aria-describedby": p,
+            "aria-describedby": l,
             checked: !!t,
             class: "switch",
             disabled: !!e,
@@ -7820,11 +7985,11 @@ function We({
       ]
     }
   ];
-  return l && c.push({
+  return p && c.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: p },
-    children: [{ kind: "text", value: l }]
+    attrs: { class: "description", id: l },
+    children: [{ kind: "text", value: p }]
   }), {
     kind: "element",
     tag: "div",
@@ -7832,10 +7997,10 @@ function We({
     children: c
   };
 }
-function bn(t) {
-  return h(We(t));
+function _n(t) {
+  return m(ri(t));
 }
-const vn = {
+const Dn = {
   name: "switch",
   description: "Use `switch` to let users instantly toggle a setting on or off.",
   output: { element: "div", class: "set-switch" },
@@ -7943,7 +8108,7 @@ const vn = {
     ]
   }
 };
-function Ue({
+function ai({
   autocomplete: t,
   description: n,
   disabled: e,
@@ -7953,69 +8118,69 @@ function Ue({
   name: o,
   readOnly: d,
   required: s,
-  resize: l = "vertical",
-  rows: p = 2,
+  resize: p = "vertical",
+  rows: l = 2,
   size: c = "md",
-  spellcheck: u,
-  value: m,
-  inlineSize: y = "full"
+  spellcheck: h,
+  value: b,
+  inlineSize: S = "full"
 }) {
-  const k = i.trim(), v = n?.trim(), C = t === !1 ? !1 : t?.trim(), S = o?.trim(), b = m;
-  if (!k)
+  const f = i.trim(), E = n?.trim(), q = t === !1 ? !1 : t?.trim(), w = o?.trim(), k = b;
+  if (!f)
     throw new Error("id must be a non-empty string.");
-  if (!I(k))
+  if (!V(f))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  if (!Number.isInteger(p) || p < 2)
+  if (!Number.isInteger(l) || l < 2)
     throw new Error("rows must be an integer greater than or equal to 2.");
-  const x = v ? `${k}-description` : void 0, w = !!e, E = !w && !!d, H = [
+  const L = E ? `${f}-description` : void 0, x = !!e, z = !x && !!d, D = [
     {
       kind: "element",
       tag: "label",
-      attrs: { class: "label", for: k },
+      attrs: { class: "label", for: f },
       children: [{ kind: "text", value: a }]
     },
     {
       kind: "element",
       tag: "textarea",
       attrs: {
-        "aria-describedby": x,
-        "aria-invalid": !w && !E && !!r ? "true" : void 0,
-        autocomplete: C === !1 ? "off" : C || void 0,
+        "aria-describedby": L,
+        "aria-invalid": !x && !z && !!r ? "true" : void 0,
+        autocomplete: q === !1 ? "off" : q || void 0,
         class: "textarea",
-        disabled: w,
-        id: k,
-        name: S || void 0,
-        readonly: E,
+        disabled: x,
+        id: f,
+        name: w || void 0,
+        readonly: z,
         required: !!s,
-        rows: String(p),
-        spellcheck: u === void 0 ? void 0 : String(u)
+        rows: String(l),
+        spellcheck: h === void 0 ? void 0 : String(h)
       },
-      children: [{ kind: "text", value: b || "" }]
+      children: [{ kind: "text", value: k || "" }]
     }
   ];
-  return v && H.push({
+  return E && D.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: x },
-    children: [{ kind: "text", value: v }]
+    attrs: { class: "description", id: L },
+    children: [{ kind: "text", value: E }]
   }), {
     kind: "element",
     tag: "div",
     attrs: {
       class: "set-textarea",
-      "data-resize": l === "none" ? "none" : void 0,
+      "data-resize": p === "none" ? "none" : void 0,
       "data-size": c,
-      "data-inline-size": y === "fit" ? "fit" : void 0
+      "data-inline-size": S === "fit" ? "fit" : void 0
     },
-    children: H
+    children: D
   };
 }
-function fn(t) {
-  return h(Ue(t));
+function Vn(t) {
+  return m(ai(t));
 }
-const yn = {
+const Hn = {
   name: "textarea",
   description: "Use `textarea` to collect multiple lines of text from users.",
   output: { element: "div", class: "set-textarea" },
@@ -8204,166 +8369,166 @@ const yn = {
     ]
   }
 };
-function wn() {
-  Mt(), At(), Vt(), Ot(), Wt(), $t(), jt(), Qt();
+function Nn() {
+  $t(), jt(), Yt(), te(), re(), oe(), pe(), he();
 }
 export {
-  pt as SET_ALERT_EVENT_BEFORE_DISMISS,
-  ct as SET_ALERT_EVENT_DISMISS,
-  je as SET_ALERT_SPEC,
-  R as SET_ALERT_TAG_NAME,
-  hi as SET_AVATAR_SPEC,
-  ki as SET_BADGE_SPEC,
-  ht as SET_BANNER_EVENT_BEFORE_DISMISS,
-  mt as SET_BANNER_EVENT_DISMISS,
-  Ye as SET_BANNER_SPEC,
-  W as SET_BANNER_TAG_NAME,
-  fi as SET_BLOCKQUOTE_SPEC,
-  wi as SET_BOX_SPEC,
-  Ze as SET_BUTTON_SPEC,
-  xi as SET_CARD_SPEC,
-  zi as SET_CHECKBOX_SPEC,
-  Li as SET_CONTAINER_SPEC,
-  qi as SET_DETAILS_SPEC,
-  Ti as SET_DIVIDER_SPEC,
-  ni as SET_EXPANDER_SPEC,
-  _i as SET_FIELDSET_SPEC,
-  Hi as SET_FIGURE_SPEC,
-  Pi as SET_GRID_ITEM_SPEC,
-  Oi as SET_GRID_SPEC,
-  Ri as SET_HEADING_SPEC,
-  $e as SET_ICON_NAMES,
-  Ge as SET_ICON_SPEC,
-  Wi as SET_IMAGE_SPEC,
-  $i as SET_INLINE_SPEC,
-  Zi as SET_INPUT_SPEC,
-  kt as SET_LIGHTSWITCH_EVENT_CHANGE,
-  ti as SET_LIGHTSWITCH_SPEC,
-  Q as SET_LIGHTSWITCH_STORAGE_KEY,
-  $ as SET_LIGHTSWITCH_TAG_NAME,
-  Xe as SET_LINK_SPEC,
-  ji as SET_LOGO_SPEC,
-  gt as SET_MENU_EVENT_CHOOSE,
-  ii as SET_MENU_SPEC,
-  G as SET_MENU_TAG_NAME,
-  ai as SET_NAV_SPEC,
-  Z as SET_NAV_TAG_NAME,
-  Xi as SET_PAGE_SPEC,
-  Yi as SET_PANEL_SPEC,
-  tn as SET_PATTERN_SPEC,
-  rn as SET_POSTER_SPEC,
-  on as SET_PROSE_SPEC,
-  sn as SET_RADIOS_SPEC,
-  di as SET_RANGE_SPEC,
-  F as SET_RANGE_TAG_NAME,
-  pn as SET_ROOT_SPEC,
-  li as SET_SIDEBAR_SPEC,
-  j as SET_SIDEBAR_TAG_NAME,
-  un as SET_SPINNER_SPEC,
-  mn as SET_STACK_SPEC,
-  gn as SET_SURFACE_SPEC,
-  vn as SET_SWITCH_SPEC,
-  yn as SET_TEXTAREA_SPEC,
-  bi as SET_TEXT_SPEC,
-  ci as SET_VIDEO_SPEC,
-  K as SET_VIDEO_TAG_NAME,
-  Lt as buildSetAlert,
-  oe as buildSetAvatar,
-  de as buildSetBadge,
-  Tt as buildSetBanner,
-  se as buildSetBlockquote,
-  le as buildSetBox,
-  it as buildSetButton,
-  pe as buildSetCard,
-  ce as buildSetCheckbox,
-  ue as buildSetContainer,
-  he as buildSetDetails,
-  me as buildSetDivider,
-  Pt as buildSetExpander,
-  bt as buildSetFieldset,
-  ke as buildSetFigure,
-  ge as buildSetGrid,
-  be as buildSetGridItem,
-  ve as buildSetHeading,
-  O as buildSetIcon,
-  fe as buildSetImage,
-  we as buildSetInline,
-  Se as buildSetInput,
-  Ht as buildSetLightswitch,
-  ut as buildSetLink,
-  Te as buildSetLogo,
-  Nt as buildSetMenu,
-  Rt as buildSetNav,
-  Ae as buildSetPage,
-  _e as buildSetPanel,
-  De as buildSetPattern,
-  He as buildSetPoster,
-  Ve as buildSetProse,
-  Ne as buildSetRadios,
-  Ut as buildSetRange,
-  Oe as buildSetRoot,
-  Ft as buildSetSidebar,
-  Pe as buildSetSpinner,
-  Be as buildSetStack,
-  Re as buildSetSurface,
-  We as buildSetSwitch,
-  X as buildSetText,
-  Ue as buildSetTextarea,
-  Kt as buildSetVideo,
-  Mt as defineSetAlert,
-  At as defineSetBanner,
-  wn as defineSetComponents,
-  Vt as defineSetLightswitch,
-  Ot as defineSetMenu,
-  Wt as defineSetNav,
-  $t as defineSetRange,
-  jt as defineSetSidebar,
-  Qt as defineSetVideo,
-  te as getSetInitials,
-  Fe as renderSetAlert,
-  ui as renderSetAvatar,
-  mi as renderSetBadge,
-  Qe as renderSetBanner,
-  vi as renderSetBlockquote,
-  yi as renderSetBox,
-  nt as renderSetButton,
-  Si as renderSetCard,
-  Ei as renderSetCheckbox,
-  Ci as renderSetContainer,
-  Mi as renderSetDetails,
-  Ii as renderSetDivider,
-  Bt as renderSetExpander,
-  Ai as renderSetFieldset,
-  Di as renderSetFigure,
-  Vi as renderSetGrid,
-  Ni as renderSetGridItem,
-  Bi as renderSetHeading,
-  xt as renderSetIcon,
-  ye as renderSetImage,
-  Ui as renderSetInline,
-  Gi as renderSetInput,
-  Je as renderSetLightswitch,
-  Ke as renderSetLink,
-  Fi as renderSetLogo,
-  ei as renderSetMenu,
-  ri as renderSetNav,
-  Ki as renderSetPage,
-  Qi as renderSetPanel,
-  Ji as renderSetPattern,
-  nn as renderSetPoster,
-  en as renderSetPosterImage,
-  an as renderSetProse,
-  dn as renderSetRadios,
-  oi as renderSetRange,
-  ln as renderSetRoot,
-  si as renderSetSidebar,
-  cn as renderSetSpinner,
-  hn as renderSetStack,
-  kn as renderSetSurface,
-  bn as renderSetSwitch,
-  gi as renderSetText,
-  fn as renderSetTextarea,
-  pi as renderSetVideo,
-  h as serializeSetNode
+  St as SET_ALERT_EVENT_BEFORE_DISMISS,
+  xt as SET_ALERT_EVENT_DISMISS,
+  pi as SET_ALERT_SPEC,
+  Z as SET_ALERT_TAG_NAME,
+  qi as SET_AVATAR_SPEC,
+  Ti as SET_BADGE_SPEC,
+  zt as SET_BANNER_EVENT_BEFORE_DISMISS,
+  Ct as SET_BANNER_EVENT_DISMISS,
+  mi as SET_BANNER_SPEC,
+  F as SET_BANNER_TAG_NAME,
+  Vi as SET_BLOCKQUOTE_SPEC,
+  Ni as SET_BOX_SPEC,
+  si as SET_BUTTON_SPEC,
+  Oi as SET_CARD_SPEC,
+  Ri as SET_CHECKBOX_SPEC,
+  Ui as SET_CONTAINER_SPEC,
+  Gi as SET_DETAILS_SPEC,
+  Fi as SET_DIVIDER_SPEC,
+  fi as SET_EXPANDER_SPEC,
+  Ki as SET_FIELDSET_SPEC,
+  Qi as SET_FIGURE_SPEC,
+  en as SET_GRID_ITEM_SPEC,
+  tn as SET_GRID_SPEC,
+  rn as SET_HEADING_SPEC,
+  oi as SET_ICON_NAMES,
+  di as SET_ICON_SPEC,
+  an as SET_IMAGE_SPEC,
+  dn as SET_INLINE_SPEC,
+  ln as SET_INPUT_SPEC,
+  Lt as SET_LIGHTSWITCH_EVENT_CHANGE,
+  gi as SET_LIGHTSWITCH_SPEC,
+  dt as SET_LIGHTSWITCH_STORAGE_KEY,
+  K as SET_LIGHTSWITCH_TAG_NAME,
+  ui as SET_LINK_SPEC,
+  cn as SET_LOGO_SPEC,
+  Mt as SET_MENU_EVENT_CHOOSE,
+  vi as SET_MENU_SPEC,
+  X as SET_MENU_TAG_NAME,
+  wi as SET_NAV_SPEC,
+  Q as SET_NAV_TAG_NAME,
+  hn as SET_PAGE_SPEC,
+  kn as SET_PANEL_SPEC,
+  bn as SET_PATTERN_SPEC,
+  yn as SET_POSTER_SPEC,
+  Sn as SET_PROSE_SPEC,
+  En as SET_RADIOS_SPEC,
+  xi as SET_RANGE_SPEC,
+  Y as SET_RANGE_TAG_NAME,
+  Cn as SET_ROOT_SPEC,
+  zi as SET_SIDEBAR_SPEC,
+  J as SET_SIDEBAR_TAG_NAME,
+  Mn as SET_SPINNER_SPEC,
+  In as SET_STACK_SPEC,
+  An as SET_SURFACE_SPEC,
+  Dn as SET_SWITCH_SPEC,
+  Hn as SET_TEXTAREA_SPEC,
+  _i as SET_TEXT_SPEC,
+  Li as SET_VIDEO_SPEC,
+  tt as SET_VIDEO_TAG_NAME,
+  Ut as buildSetAlert,
+  Se as buildSetAvatar,
+  xe as buildSetBadge,
+  Ft as buildSetBanner,
+  Ee as buildSetBlockquote,
+  ze as buildSetBox,
+  ut as buildSetButton,
+  Ce as buildSetCard,
+  Le as buildSetCheckbox,
+  Me as buildSetContainer,
+  qe as buildSetDetails,
+  Ie as buildSetDivider,
+  ee as buildSetExpander,
+  qt as buildSetFieldset,
+  Te as buildSetFigure,
+  Ae as buildSetGrid,
+  _e as buildSetGridItem,
+  De as buildSetHeading,
+  P as buildSetIcon,
+  Ve as buildSetImage,
+  Ne as buildSetInline,
+  Be as buildSetInput,
+  Qt as buildSetLightswitch,
+  Et as buildSetLink,
+  Fe as buildSetLogo,
+  Jt as buildSetMenu,
+  ne as buildSetNav,
+  je as buildSetPage,
+  Ke as buildSetPanel,
+  Xe as buildSetPattern,
+  Qe as buildSetPoster,
+  Ye as buildSetProse,
+  Je as buildSetRadios,
+  ae as buildSetRange,
+  ti as buildSetRoot,
+  le as buildSetSidebar,
+  ei as buildSetSpinner,
+  ii as buildSetStack,
+  ni as buildSetSurface,
+  ri as buildSetSwitch,
+  et as buildSetText,
+  ai as buildSetTextarea,
+  ce as buildSetVideo,
+  $t as defineSetAlert,
+  jt as defineSetBanner,
+  Nn as defineSetComponents,
+  Yt as defineSetLightswitch,
+  te as defineSetMenu,
+  re as defineSetNav,
+  oe as defineSetRange,
+  pe as defineSetSidebar,
+  he as defineSetVideo,
+  ge as getSetInitials,
+  li as renderSetAlert,
+  Mi as renderSetAvatar,
+  Ii as renderSetBadge,
+  hi as renderSetBanner,
+  Di as renderSetBlockquote,
+  Hi as renderSetBox,
+  ht as renderSetButton,
+  Bi as renderSetCard,
+  Pi as renderSetCheckbox,
+  Wi as renderSetContainer,
+  $i as renderSetDetails,
+  Zi as renderSetDivider,
+  ie as renderSetExpander,
+  ji as renderSetFieldset,
+  Xi as renderSetFigure,
+  Yi as renderSetGrid,
+  Ji as renderSetGridItem,
+  nn as renderSetHeading,
+  Ot as renderSetIcon,
+  He as renderSetImage,
+  on as renderSetInline,
+  sn as renderSetInput,
+  ki as renderSetLightswitch,
+  ci as renderSetLink,
+  pn as renderSetLogo,
+  bi as renderSetMenu,
+  yi as renderSetNav,
+  un as renderSetPage,
+  mn as renderSetPanel,
+  gn as renderSetPattern,
+  fn as renderSetPoster,
+  vn as renderSetPosterImage,
+  wn as renderSetProse,
+  xn as renderSetRadios,
+  Si as renderSetRange,
+  zn as renderSetRoot,
+  Ei as renderSetSidebar,
+  Ln as renderSetSpinner,
+  qn as renderSetStack,
+  Tn as renderSetSurface,
+  _n as renderSetSwitch,
+  Ai as renderSetText,
+  Vn as renderSetTextarea,
+  Ci as renderSetVideo,
+  m as serializeSetNode
 };
 //# sourceMappingURL=index.js.map