@monospaced/set-core 0.13.0 → 0.14.0

package/dist/index.js

@@ -1,4 +1,4 @@
-const Nt = /* @__PURE__ */ new Set([
+const Bt = /* @__PURE__ */ new Set([
   "area",
   "base",
   "br",
@@ -13,17 +13,17 @@ const Nt = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
-function ft(t) {
+function yt(t) {
   return t.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
-function Bt(t) {
-  return Object.entries(t).flatMap(([n, e]) => e === !1 || e == null ? [] : e === !0 ? [n] : [`${n}="${ft(String(e))}"`]).join(" ");
+function Ot(t) {
+  return Object.entries(t).flatMap(([n, e]) => e === !1 || e == null ? [] : e === !0 ? [n] : [`${n}="${yt(String(e))}"`]).join(" ");
 }
 function m(t) {
-  if (t.kind === "text") return ft(t.value);
+  if (t.kind === "text") return yt(t.value);
   if (t.kind === "raw") return t.html;
-  const n = Bt(t.attrs), e = n ? `<${t.tag} ${n}>` : `<${t.tag}>`;
-  if (Nt.has(t.tag)) return e;
+  const n = Ot(t.attrs), e = n ? `<${t.tag} ${n}>` : `<${t.tag}>`;
+  if (Bt.has(t.tag)) return e;
   const i = t.children.map(m).join("");
   return `${e}${i}</${t.tag}>`;
 }
@@ -44,7 +44,7 @@ function v(t) {
 function O(t) {
   return t == null ? void 0 : t.trim().replace(/\s+/g, " ") || void 0;
 }
-const yt = {
+const wt = {
   adjustment: [
     {
       tag: "g",
@@ -775,13 +775,13 @@ const yt = {
       ]
     }
   ]
-}, oi = Object.keys(yt);
-function wt(t) {
+}, si = Object.keys(wt);
+function St(t) {
   return t.map((n) => ({
     kind: "element",
     tag: n.tag,
     attrs: n.attrs,
-    children: n.children ? wt(n.children) : []
+    children: n.children ? St(n.children) : []
   }));
 }
 function P({
@@ -792,7 +792,7 @@ function P({
   size: r = "md",
   title: a
 }) {
-  const o = yt[i];
+  const o = wt[i];
   if (!o)
     throw new Error(`Unknown icon name: ${i}`);
   const d = v(n), s = a?.trim();
@@ -806,7 +806,7 @@ function P({
     tag: "title",
     attrs: { id: p },
     children: [{ kind: "text", value: s }]
-  }), l.push(...wt(o)), {
+  }), l.push(...St(o)), {
     kind: "element",
     tag: "svg",
     attrs: {
@@ -827,10 +827,10 @@ function P({
     children: l
   };
 }
-function Ot(t) {
+function Pt(t) {
   return m(P(t));
 }
-const di = {
+const li = {
   name: "icon",
   description: "Use `icon` to render a Set icon.",
   output: { element: "svg", class: "set-icon" },
@@ -944,7 +944,7 @@ const di = {
     ]
   }
 };
-function ut(t) {
+function ht(t) {
   const {
     appearance: n = "outline",
     controls: e,
@@ -966,14 +966,14 @@ function ut(t) {
   } = t, w = s || void 0, k = !!w;
   if (h !== "visible" && !k)
     throw new Error("labelVisibility requires icon when label is not visible.");
-  const L = k && w ? {
+  const C = k && w ? {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
     children: [
       {
         kind: "raw",
-        html: Ot({
+        html: Pt({
           ariaHidden: !0,
           mirrored: p,
           name: w,
@@ -1006,13 +1006,13 @@ function ut(t) {
       type: E || "button",
       value: q || void 0
     },
-    children: L ? l === "end" ? [x, L] : [L, x] : [x]
+    children: C ? l === "end" ? [x, C] : [C, x] : [x]
   };
 }
-function ht(t) {
-  return m(ut(t));
+function mt(t) {
+  return m(ht(t));
 }
-const si = {
+const pi = {
   name: "button",
   description: "Use `button` to let users trigger actions.",
   output: { element: "button", class: "set-button" },
@@ -1195,10 +1195,10 @@ const si = {
       }
     ]
   }
-}, Z = "set-alert", St = "set-alert-before-dismiss", xt = "set-alert-dismiss", W = "Dismiss alert";
-function Pt(t, n) {
+}, Z = "set-alert", xt = "set-alert-before-dismiss", Et = "set-alert-dismiss", W = "Dismiss alert";
+function Rt(t, n) {
   const e = n.createElement("div");
-  return e.setAttribute("data-part", "close"), e.innerHTML = ht({
+  return e.setAttribute("data-part", "close"), e.innerHTML = mt({
     appearance: "text",
     icon: "close",
     label: t,
@@ -1207,7 +1207,7 @@ function Pt(t, n) {
     tone: "neutral"
   }), e;
 }
-function Rt(t) {
+function Wt(t) {
   switch (t) {
     case "success":
       return "check-circle";
@@ -1221,10 +1221,10 @@ function Rt(t) {
       return "sticky-note";
   }
 }
-function Wt(t) {
+function Ut(t) {
   return t === "warning" || t === "error" ? "alert" : "status";
 }
-function Ut({
+function $t({
   dismissible: t,
   dismissibleLabel: n = W,
   id: e,
@@ -1256,7 +1256,7 @@ function Ut({
       "data-size": a,
       "data-tone": o || void 0,
       id: s,
-      role: Wt(o)
+      role: Ut(o)
     },
     children: [
       {
@@ -1266,7 +1266,7 @@ function Ut({
         children: [
           P({
             ariaHidden: !0,
-            name: Rt(o),
+            name: Wt(o),
             size: a
           })
         ]
@@ -1280,24 +1280,24 @@ function Ut({
     ]
   };
 }
-function li(t) {
-  return m(Ut(t));
+function ci(t) {
+  return m($t(t));
 }
-function $t() {
+function Gt() {
   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(
-        St,
+        xt,
         {
           bubbles: !0,
           cancelable: !0
         }
       );
       this.dispatchEvent(r) && (this.dispatchEvent(
-        new CustomEvent(xt, {
+        new CustomEvent(Et, {
           bubbles: !0
         })
       ), this.remove());
@@ -1310,7 +1310,7 @@ function $t() {
     }
     #e() {
       this.querySelector('[data-part="close"]') || this.append(
-        Pt(
+        Rt(
           this.getAttribute("data-dismissible-label") ?? W,
           this.ownerDocument
         )
@@ -1319,7 +1319,7 @@ function $t() {
   }
   customElements.define(Z, t);
 }
-const pi = {
+const ui = {
   name: "alert",
   description: "Use `alert` to surface short, important messages.",
   output: {
@@ -1374,12 +1374,12 @@ const pi = {
     }
   },
   events: {
-    [St]: {
+    [xt]: {
       bubbles: !0,
       cancelable: !0,
       description: "Fired before the alert is removed by a dismiss action. Call `preventDefault()` to keep the alert mounted."
     },
-    [xt]: {
+    [Et]: {
       bubbles: !0,
       description: "Fired after the alert has been removed by an allowed dismiss action."
     }
@@ -1468,11 +1468,11 @@ const pi = {
     ]
   }
 };
-function Gt(t) {
+function Zt(t) {
   if (t)
     return t === !0 ? !0 : t;
 }
-function Et(t) {
+function zt(t) {
   const {
     appearance: n = "text",
     current: e,
@@ -1491,12 +1491,12 @@ function Et(t) {
   } = 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 w = Gt(i), k = E ? {
+  const w = Zt(i), k = E ? {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
     children: [{ kind: "raw", html: E }]
-  } : null, L = {
+  } : null, C = {
     kind: "element",
     tag: "span",
     attrs: { class: "label" },
@@ -1519,13 +1519,13 @@ function Et(t) {
       rel: w ? void 0 : l || void 0,
       target: w ? void 0 : h || void 0
     },
-    children: k ? d === "end" ? [L, k] : [k, L] : [L]
+    children: k ? d === "end" ? [C, k] : [k, C] : [C]
   };
 }
-function ci(t) {
-  return m(Et(t));
+function hi(t) {
+  return m(zt(t));
 }
-const ui = {
+const mi = {
   name: "link",
   description: "Use `link` to navigate to another page or resource.",
   output: { element: "a", class: "set-link" },
@@ -1712,10 +1712,10 @@ const ui = {
       }
     ]
   }
-}, F = "set-banner", zt = "set-banner-before-dismiss", Ct = "set-banner-dismiss", j = "Dismiss banner";
-function Zt(t, n) {
+}, F = "set-banner", Lt = "set-banner-before-dismiss", Ct = "set-banner-dismiss", j = "Dismiss banner";
+function Ft(t, n) {
   const e = n.createElement("div");
-  return e.setAttribute("data-part", "close"), e.innerHTML = ht({
+  return e.setAttribute("data-part", "close"), e.innerHTML = mt({
     appearance: "text",
     icon: "close",
     label: t,
@@ -1724,7 +1724,7 @@ function Zt(t, n) {
     tone: "neutral"
   }), e;
 }
-function Ft({
+function jt({
   actionHref: t,
   actionLabel: n,
   dismissible: e = !0,
@@ -1737,7 +1737,7 @@ function Ft({
     throw new Error("actionHref and actionLabel must be provided together.");
   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({
+    zt({
       href: t,
       label: n,
       underline: !0
@@ -1764,17 +1764,17 @@ function Ft({
     ]
   };
 }
-function hi(t) {
-  return m(Ft(t));
+function ki(t) {
+  return m(jt(t));
 }
-function jt() {
+function Kt() {
   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(
-        zt,
+        Lt,
         {
           bubbles: !0,
           cancelable: !0
@@ -1794,7 +1794,7 @@ function jt() {
     }
     #e() {
       this.querySelector('[data-part="close"]') || this.append(
-        Zt(
+        Ft(
           this.getAttribute("data-dismissible-label") ?? j,
           this.ownerDocument
         )
@@ -1803,7 +1803,7 @@ function jt() {
   }
   customElements.define(F, t);
 }
-const mi = {
+const gi = {
   name: "banner",
   description: "Use `banner` to display a prominent site-wide message.",
   output: { element: F, class: "set-banner" },
@@ -1848,7 +1848,7 @@ const mi = {
     }
   },
   events: {
-    [zt]: {
+    [Lt]: {
       bubbles: !0,
       cancelable: !0,
       description: "Fired before the banner is removed by a dismiss action. Call `preventDefault()` to keep the banner mounted."
@@ -1891,369 +1891,862 @@ const mi = {
       }
     ]
   }
-}, 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 Xt(t) {
-  return t === "dark" ? "moon" : "sunny";
-}
-function gt(t, n) {
-  return {
-    kind: "element",
-    tag: "span",
-    attrs: { class: "option", "data-option": t },
-    children: [
-      {
-        kind: "element",
-        tag: "span",
-        attrs: { class: "icon-wrapper" },
-        children: [
-          P({
-            ariaHidden: !0,
-            name: Xt(t),
-            size: "fill"
-          })
-        ]
-      },
-      {
-        kind: "element",
-        tag: "span",
-        attrs: { class: "label" },
-        children: [{ kind: "text", value: n }]
-      }
-    ]
-  };
-}
-function Qt({
-  appearance: t = "text",
-  id: n,
-  labelDark: e = st,
-  labelLight: i = lt,
-  size: r = "md"
+}, K = "set-image";
+function Xt({
+  adaptive: t,
+  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 a = v(n), o = e.trim() === "" ? st : e, d = i.trim() === "" ? lt : i;
-  return {
+  const k = r === "cover", C = v(d), x = f.trim(), z = E?.trim(), _ = p?.trim(), D = q?.trim(), N = b?.trim(), M = S?.map((u, L) => {
+    const I = u.srcSet.trim(), y = u.media?.trim(), g = u.type?.trim(), Vt = u.sizes?.trim(), Ht = u.leadSrc?.trim(), Nt = u.still?.trim();
+    if (!I)
+      throw new Error(`sources[${L}].srcSet must be non-empty.`);
+    return {
+      height: u.height,
+      leadSrc: Ht || void 0,
+      media: y || void 0,
+      sizes: Vt || void 0,
+      srcSet: I,
+      still: Nt || void 0,
+      type: g || void 0,
+      width: u.width
+    };
+  }) || [];
+  if (!x)
+    throw new Error("src must be a non-empty string.");
+  if (t && [
+    x,
+    z,
+    ...M.map((u) => u.srcSet)
+  ].some((u) => u?.includes("#")))
+    throw new Error("adaptive sources must not contain URL fragments.");
+  const U = !!(n && t), nt = !!(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), L = u.filter((y) => y.includes("{scheme}"));
+    if (t && L.length !== u.length)
+      throw new Error(
+        "adaptive animated sources must contain a {scheme} placeholder."
+      );
+    if (!t && L.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 kt = (u, L) => 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 [`${y}#${L}`, ...g].join(" ");
+  }).join(", "), rt = (u) => {
+    const L = {
+      kind: "element",
+      tag: "img",
+      attrs: {
+        alt: e,
+        class: "img",
+        "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 ? kt(z, u) : z || void 0,
+        width: k ? void 0 : w ? String(w) : void 0
+      },
+      children: []
+    };
+    if (M.length === 0)
+      return L;
+    const I = M.map((y) => ({
+      kind: "element",
+      tag: "source",
+      attrs: {
+        height: y.height ? String(y.height) : void 0,
+        media: y.media,
+        sizes: y.sizes,
+        srcset: u ? kt(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": u },
+      children: [...I, L]
+    };
+  }, at = "(prefers-reduced-motion: reduce)", R = (u, L) => L ? u.replaceAll("{scheme}", L) : u, ot = (u, L) => L ? `${u}#${L}` : u, gt = (u) => {
+    const L = M.filter((g) => g.still).map((g) => ({
+      kind: "element",
+      tag: "source",
+      attrs: {
+        height: g.height ? String(g.height) : void 0,
+        media: g.media ? `${at} and ${g.media}` : at,
+        srcset: ot(g.still, u),
+        width: g.width ? String(g.width) : void 0
+      },
+      children: []
+    }));
+    L.push({
+      kind: "element",
+      tag: "source",
+      attrs: {
+        media: at,
+        srcset: ot(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: [...L, ...I, y]
+    };
+  }, _t = (u) => {
+    const L = "(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 ? `${L} and ${g.media}` : L,
+            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: L,
+        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: ot(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]
+    };
+  }, dt = (u) => nt ? [gt(u), _t(u)] : [gt(u)], Dt = n ? U ? [...dt("light"), ...dt("dark")] : dt() : t ? [rt("light"), rt("dark")] : [rt()], 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: K,
     attrs: {
-      class: "set-lightswitch",
-      id: a
+      class: "set-image",
+      "data-adaptive": !!t,
+      "data-animated": !!n,
+      "data-sequenced": nt,
+      "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: C,
+      style: G.length > 0 ? G.join("; ") : void 0
     },
-    children: [
-      {
-        kind: "element",
-        tag: "button",
-        attrs: {
-          class: "toggle",
-          "data-appearance": t,
-          "data-size": r,
-          type: "button"
-        },
-        children: [
-          gt("dark", o),
-          gt("light", d)
-        ]
-      }
-    ]
+    children: Dt
   };
 }
-function ki(t) {
-  return m(Qt(t));
+function Qt(t) {
+  return m(Xt(t));
 }
 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 = Kt(this.#u());
-      r === this.#r() ? this.#d() : this.#n(r), this.#a(), this.dispatchEvent(
-        new CustomEvent(Lt, {
-          bubbles: !0,
-          detail: { stored: !!this.#i(), theme: r }
-        })
-      );
-    };
+  const t = "(prefers-reduced-motion: reduce)";
+  class n extends HTMLElement {
     connectedCallback() {
-      this.removeEventListener("click", this.#t), this.addEventListener("click", this.#t), this.#i() && this.#a();
-    }
-    disconnectedCallback() {
-      this.removeEventListener("click", this.#t);
-    }
-    #e() {
-      try {
-        return this.ownerDocument.defaultView?.localStorage;
-      } catch {
-        return;
-      }
-    }
-    #i() {
-      try {
-        const e = this.#e()?.getItem(dt);
-        return e === "light" || e === "dark" ? e : void 0;
-      } catch {
-        return;
-      }
-    }
-    #n(e) {
-      try {
-        this.#e()?.setItem(dt, e);
-      } catch {
-      }
-    }
-    #d() {
-      try {
-        this.#e()?.removeItem(dt);
-      } catch {
-      }
-    }
-    #r() {
-      const e = this.ownerDocument.defaultView;
-      return !e || typeof e.matchMedia != "function" ? "light" : e.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }
-    #c() {
-      return this.closest(".set");
-    }
-    #s() {
-      const e = this.#c()?.getAttribute("data-set-theme");
-      return e === "light" || e === "dark" ? e : void 0;
-    }
-    #u() {
-      return this.#i() ?? this.#s() ?? this.#r();
-    }
-    #a() {
-      const e = this.#c();
-      if (!e) return;
-      const i = this.#i();
-      i ? e.setAttribute("data-set-theme", i) : e.removeAttribute("data-set-theme");
+      const i = this.querySelectorAll('[data-layer="lead"]');
+      if (!(i.length === 0 || this.ownerDocument.defaultView?.matchMedia?.(t).matches))
+        for (const a of i) this.#t(a);
+    }
+    // Drive the overlay's hide from playback readiness rather than render, so a
+    // slow connection can't clip the hand-off before the frames have loaded.
+    #t(i) {
+      const r = i.querySelector("img");
+      if (!r) return;
+      i.style.animation = "none";
+      const a = () => {
+        i.offsetWidth, i.style.animation = "";
+      };
+      r.complete ? a() : r.addEventListener("load", a, { once: !0 });
     }
   }
-  customElements.define(K, t);
+  customElements.define(K, n);
 }
-const gi = {
-  name: "lightswitch",
-  description: "Use `lightswitch` to let users toggle between light and dark themes.",
-  output: { element: K, class: "set-lightswitch" },
+const bi = {
+  name: "image",
+  description: "Use `image` to render a responsive image with intrinsic, fluid, or cover fit, and optional art-directed `sources`.",
+  output: { element: K, class: "set-image" },
   content: { kind: "none" },
   props: {
-    appearance: {
-      default: "text",
-      description: "Visual appearance of the toggle button.",
-      type: { kind: "enum", values: ["outline", "solid", "text"] }
+    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. 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: {
+      default: "",
+      description: "Alternative text. Leave empty for decorative images.",
+      type: { kind: "string" }
+    },
+    gravity: {
+      default: "C",
+      description: "Focal point used when cropping.",
+      ignoredWhen: '`fit` is not `"cover"`',
+      type: {
+        kind: "enum",
+        values: ["N", "NE", "E", "SE", "S", "SW", "W", "NW", "C"]
+      }
+    },
+    radius: {
+      default: !1,
+      description: "Applies the default corner radius.",
+      type: { kind: "boolean" }
+    },
+    aspectRatio: {
+      description: "Aspect ratio applied to the wrapper.",
+      ignoredWhen: '`fit` is not `"cover"`, or `height` is set',
+      type: {
+        kind: "enum",
+        values: ["1:1", "4:5", "3:2", "16:9", "21:9"]
+      }
+    },
+    fit: {
+      default: "intrinsic",
+      description: "Layout mode. `intrinsic` renders at the image's own dimensions, `fluid` scales to the container's full inline size at the active source's aspect ratio, `cover` renders a cropped fill (`object-fit: cover`) sized by the wrapper. For `fluid`, provide candidates sized for large viewports via `srcSet`/`sources` so upscaled rendering stays sharp.",
+      type: { kind: "enum", values: ["intrinsic", "fluid", "cover"] }
+    },
+    shadow: {
+      default: !1,
+      description: "Applies a drop shadow to the image.",
+      type: { kind: "boolean" }
+    },
+    height: {
+      description: "Height in pixels. Under `intrinsic` and `fluid`, an aspect-ratio hint — with `width`, reserves the correctly shaped box before load; rendered height follows the aspect ratio. Under `cover`, the wrapper's block size, overriding `aspectRatio`.",
+      type: { kind: "number" }
     },
     id: {
       description: "DOM id.",
       type: { kind: "string" }
     },
-    labelDark: {
-      default: st,
-      description: "Accessible label of the switch-to-dark action.",
+    lazy: {
+      default: !1,
+      description: "Defers loading until the image is near the viewport.",
+      type: { kind: "boolean" }
+    },
+    priority: {
+      default: !1,
+      description: "Marks the image as high priority for fetch.",
+      type: { kind: "boolean" }
+    },
+    sizes: {
+      description: "`sizes` attribute used with `srcSet`.",
+      ignoredWhen: "`sources` are provided",
       type: { kind: "string" }
     },
-    labelLight: {
-      default: lt,
-      description: "Accessible label of the switch-to-light action.",
+    sources: {
+      description: "Responsive sources rendered inside a `<picture>`.",
+      type: {
+        kind: "array",
+        itemShape: {
+          height: {
+            description: "Intrinsic height in pixels.",
+            type: { kind: "number" }
+          },
+          media: {
+            description: "`media` condition evaluated for the source.",
+            type: { kind: "string" }
+          },
+          sizes: {
+            description: "`sizes` attribute for the source.",
+            type: { kind: "string" }
+          },
+          srcSet: {
+            description: "Candidate sources for this media entry.",
+            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" }
+          },
+          width: {
+            description: "Intrinsic width in pixels.",
+            type: { kind: "number" }
+          }
+        }
+      }
+    },
+    srcSet: {
+      description: "Candidate sources for the fallback image.",
       type: { kind: "string" }
     },
-    size: {
-      default: "md",
-      description: "Size variant.",
-      type: { kind: "enum", values: ["sm", "md", "lg"] }
-    }
-  },
-  events: {
-    [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."
+    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,
+      type: { kind: "string" }
+    },
+    width: {
+      description: "Width in pixels. Under `intrinsic`, the rendered width, capped at the container; under `fluid`, an aspect-ratio hint; under `cover`, the wrapper's inline size (`aspectRatio` still derives the block size while `height` is unset).",
+      type: { kind: "number" }
     }
   },
+  events: {},
   rules: {
     attributes: [
       {
         target: { on: "host" },
-        attribute: "id",
-        condition: { kind: "when-non-empty", prop: "id" },
-        value: { kind: "prop", prop: "id" }
+        attribute: "data-adaptive",
+        condition: { kind: "when-truthy", prop: "adaptive" }
       },
       {
-        target: { on: "descendant", selector: "button" },
-        attribute: "class",
-        condition: { kind: "always" },
-        value: { kind: "literal", text: "toggle" }
+        target: { on: "host" },
+        attribute: "data-animated",
+        condition: { kind: "when-truthy", prop: "animated" }
       },
       {
-        target: { on: "descendant", selector: "button" },
-        attribute: "data-appearance",
-        condition: { kind: "always" },
-        value: { kind: "prop", prop: "appearance" }
+        target: { on: "host" },
+        attribute: "data-sequenced",
+        condition: { kind: "when-non-empty", prop: "leadSrc" }
       },
       {
-        target: { on: "descendant", selector: "button" },
-        attribute: "data-size",
-        condition: { kind: "always" },
-        value: { kind: "prop", prop: "size" }
+        target: { on: "host" },
+        attribute: "data-object-fit",
+        condition: { kind: "when-equals", prop: "fit", to: "cover" },
+        value: { kind: "literal", text: "cover" }
       },
       {
-        target: { on: "descendant", selector: "button" },
-        attribute: "type",
-        condition: { kind: "always" },
-        value: { kind: "literal", text: "button" }
-      }
-    ]
-  }
-}, X = "set-menu", Mt = "set-menu-choose";
-function Jt({
-  align: t = "start",
-  id: n,
-  items: e,
-  size: i = "md",
-  triggerIcon: r,
-  triggerIconMirrored: a,
-  triggerIconPlacement: o,
-  triggerLabel: d,
-  triggerLabelVisibility: s
-}) {
-  const p = n.trim();
-  if (!p)
-    throw new Error("id must be a non-empty string.");
-  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 l = `${p}-button`, c = `${p}-popup`, h = e.map((b) => ({
-    kind: "element",
-    tag: "button",
-    attrs: {
-      "aria-disabled": b.disabled ? "true" : void 0,
-      "data-item-id": b.id || void 0,
-      role: "menuitem",
-      tabindex: "-1",
-      type: "button"
-    },
-    children: [{ kind: "text", value: b.label }]
-  }));
+        target: { on: "host" },
+        attribute: "data-shadow",
+        condition: { kind: "when-truthy", prop: "shadow" }
+      },
+      {
+        target: { on: "host" },
+        attribute: "data-radius",
+        condition: { kind: "when-truthy", prop: "radius" }
+      },
+      {
+        target: { on: "host" },
+        attribute: "data-fluid",
+        condition: { kind: "when-equals", prop: "fit", to: "fluid" }
+      },
+      {
+        target: { on: "descendant", selector: "img" },
+        attribute: "class",
+        condition: { kind: "always" },
+        value: { kind: "literal", text: "img" }
+      },
+      {
+        target: { on: "descendant", selector: "img" },
+        attribute: "alt",
+        condition: { kind: "always" },
+        value: { kind: "prop", prop: "alt" }
+      },
+      {
+        target: { on: "descendant", selector: "img" },
+        attribute: "src",
+        condition: { kind: "always" },
+        value: { kind: "template", pattern: "{src}" }
+      },
+      {
+        target: { on: "descendant", selector: "img" },
+        attribute: "srcset",
+        condition: { kind: "when-non-empty", prop: "srcSet" },
+        value: { kind: "prop", prop: "srcSet" }
+      },
+      {
+        target: { on: "descendant", selector: "img" },
+        attribute: "fetchpriority",
+        condition: { kind: "when-truthy", prop: "priority" },
+        value: { kind: "literal", text: "high" }
+      },
+      {
+        target: { on: "descendant", selector: "img" },
+        attribute: "loading",
+        condition: {
+          kind: "all",
+          of: [
+            { kind: "when-truthy", prop: "lazy" },
+            { kind: "not", of: { kind: "when-truthy", prop: "priority" } }
+          ]
+        },
+        value: { kind: "literal", text: "lazy" }
+      },
+      {
+        target: { on: "host" },
+        attribute: "id",
+        condition: { kind: "when-non-empty", prop: "id" },
+        value: { kind: "prop", prop: "id" }
+      }
+    ]
+  }
+}, X = "set-lightswitch", Mt = "set-lightswitch-change", st = "set-theme", lt = "Switch to dark theme", pt = "Switch to light theme";
+function Jt(t) {
+  return t === "dark" ? "light" : "dark";
+}
+function te(t) {
+  return t === "dark" ? "moon" : "sunny";
+}
+function bt(t, n) {
   return {
     kind: "element",
-    tag: X,
-    attrs: {
-      class: "set-menu",
-      "data-align": t === "start" ? void 0 : t,
-      "data-size": i,
-      id: p
-    },
+    tag: "span",
+    attrs: { class: "option", "data-option": t },
     children: [
       {
         kind: "element",
-        tag: "div",
-        attrs: { "data-part": "trigger" },
+        tag: "span",
+        attrs: { class: "icon-wrapper" },
         children: [
-          ut({
-            appearance: "outline",
-            controls: c,
-            disclosure: !0,
-            haspopup: "menu",
-            icon: r,
-            iconMirrored: a,
-            iconPlacement: o,
-            id: l,
-            label: d,
-            labelVisibility: s,
-            size: i,
-            tone: "neutral",
-            type: "button"
+          P({
+            ariaHidden: !0,
+            name: te(t),
+            size: "fill"
           })
         ]
       },
       {
         kind: "element",
-        tag: "div",
+        tag: "span",
+        attrs: { class: "label" },
+        children: [{ kind: "text", value: n }]
+      }
+    ]
+  };
+}
+function ee({
+  appearance: t = "text",
+  id: n,
+  labelDark: e = lt,
+  labelLight: i = pt,
+  size: r = "md"
+}) {
+  const a = v(n), o = e.trim() === "" ? lt : e, d = i.trim() === "" ? pt : i;
+  return {
+    kind: "element",
+    tag: X,
+    attrs: {
+      class: "set-lightswitch",
+      id: a
+    },
+    children: [
+      {
+        kind: "element",
+        tag: "button",
         attrs: {
-          "aria-labelledby": l,
-          class: "popup",
-          hidden: !0,
-          id: c,
-          role: "menu"
+          class: "toggle",
+          "data-appearance": t,
+          "data-size": r,
+          type: "button"
         },
-        children: h
+        children: [
+          bt("dark", o),
+          bt("light", d)
+        ]
       }
     ]
   };
 }
-function bi(t) {
-  return m(Jt(t));
+function vi(t) {
+  return m(ee(t));
 }
-function te() {
+function ie() {
   if (customElements.get(X)) return;
   class t extends HTMLElement {
-    #t;
-    #e;
-    #i;
-    #n;
+    #t = (e) => {
+      const i = e.target;
+      if (!(i instanceof Element) || !i.closest("button")) return;
+      const r = Jt(this.#u());
+      r === this.#r() ? this.#d() : this.#n(r), this.#a(), this.dispatchEvent(
+        new CustomEvent(Mt, {
+          bubbles: !0,
+          detail: { stored: !!this.#i(), theme: r }
+        })
+      );
+    };
     connectedCallback() {
-      this.#p(), this.#o(!1), this.#k();
+      this.removeEventListener("click", this.#t), this.addEventListener("click", this.#t), this.#i() && this.#a();
     }
     disconnectedCallback() {
-      this.#p();
+      this.removeEventListener("click", this.#t);
+    }
+    #e() {
+      try {
+        return this.ownerDocument.defaultView?.localStorage;
+      } catch {
+        return;
+      }
+    }
+    #i() {
+      try {
+        const e = this.#e()?.getItem(st);
+        return e === "light" || e === "dark" ? e : void 0;
+      } catch {
+        return;
+      }
+    }
+    #n(e) {
+      try {
+        this.#e()?.setItem(st, e);
+      } catch {
+      }
     }
     #d() {
-      return this.querySelector(
-        '[data-part="trigger"] .set-button'
-      );
+      try {
+        this.#e()?.removeItem(st);
+      } catch {
+      }
     }
     #r() {
-      return this.querySelector('[role="menu"]');
+      const e = this.ownerDocument.defaultView;
+      return !e || typeof e.matchMedia != "function" ? "light" : e.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     #c() {
-      return Array.from(
-        this.querySelectorAll('[role="menuitem"]')
-      );
+      return this.closest(".set");
     }
-    #s(e) {
-      return e.getAttribute("aria-disabled") === "true";
+    #s() {
+      const e = this.#c()?.getAttribute("data-set-theme");
+      return e === "light" || e === "dark" ? e : void 0;
     }
     #u() {
-      return this.hasAttribute("data-open");
-    }
-    #a(e) {
-      const i = this.#c();
-      if (i.length === 0) return;
-      const r = (e % i.length + i.length) % i.length;
-      i[r]?.focus();
-    }
-    #l(e = 0) {
-      const i = this.#r(), r = this.#d();
-      !i || !r || (i.hidden = !1, this.setAttribute("data-open", ""), r.setAttribute("aria-expanded", "true"), this.#a(e));
-    }
-    #o(e = !1) {
-      const i = this.#r(), r = this.#d();
-      !i || !r || (i.hidden = !0, this.removeAttribute("data-open"), r.setAttribute("aria-expanded", "false"), e && r.focus());
+      return this.#i() ?? this.#s() ?? this.#r();
     }
-    #h(e) {
-      const r = Array.from(
-        this.querySelectorAll('[role="menuitem"]')
-      ).indexOf(e);
-      this.dispatchEvent(
-        new CustomEvent(Mt, {
-          bubbles: !0,
-          detail: {
-            id: e.getAttribute("data-item-id") || void 0,
-            index: r,
-            label: e.textContent || ""
-          }
-        })
-      );
+    #a() {
+      const e = this.#c();
+      if (!e) return;
+      const i = this.#i();
+      i ? e.setAttribute("data-set-theme", i) : e.removeAttribute("data-set-theme");
     }
-    #k() {
-      this.#t = (e) => {
-        const i = e.target;
-        if (!(i instanceof Element)) return;
-        if (i.closest('[data-part="trigger"] .set-button')) {
-          if (this.#u()) {
-            this.#o();
-            return;
+  }
+  customElements.define(X, t);
+}
+const fi = {
+  name: "lightswitch",
+  description: "Use `lightswitch` to let users toggle between light and dark themes.",
+  output: { element: X, class: "set-lightswitch" },
+  content: { kind: "none" },
+  props: {
+    appearance: {
+      default: "text",
+      description: "Visual appearance of the toggle button.",
+      type: { kind: "enum", values: ["outline", "solid", "text"] }
+    },
+    id: {
+      description: "DOM id.",
+      type: { kind: "string" }
+    },
+    labelDark: {
+      default: lt,
+      description: "Accessible label of the switch-to-dark action.",
+      type: { kind: "string" }
+    },
+    labelLight: {
+      default: pt,
+      description: "Accessible label of the switch-to-light action.",
+      type: { kind: "string" }
+    },
+    size: {
+      default: "md",
+      description: "Size variant.",
+      type: { kind: "enum", values: ["sm", "md", "lg"] }
+    }
+  },
+  events: {
+    [Mt]: {
+      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."
+    }
+  },
+  rules: {
+    attributes: [
+      {
+        target: { on: "host" },
+        attribute: "id",
+        condition: { kind: "when-non-empty", prop: "id" },
+        value: { kind: "prop", prop: "id" }
+      },
+      {
+        target: { on: "descendant", selector: "button" },
+        attribute: "class",
+        condition: { kind: "always" },
+        value: { kind: "literal", text: "toggle" }
+      },
+      {
+        target: { on: "descendant", selector: "button" },
+        attribute: "data-appearance",
+        condition: { kind: "always" },
+        value: { kind: "prop", prop: "appearance" }
+      },
+      {
+        target: { on: "descendant", selector: "button" },
+        attribute: "data-size",
+        condition: { kind: "always" },
+        value: { kind: "prop", prop: "size" }
+      },
+      {
+        target: { on: "descendant", selector: "button" },
+        attribute: "type",
+        condition: { kind: "always" },
+        value: { kind: "literal", text: "button" }
+      }
+    ]
+  }
+}, Q = "set-menu", qt = "set-menu-choose";
+function ne({
+  align: t = "start",
+  id: n,
+  items: e,
+  size: i = "md",
+  triggerIcon: r,
+  triggerIconMirrored: a,
+  triggerIconPlacement: o,
+  triggerLabel: d,
+  triggerLabelVisibility: s
+}) {
+  const p = n.trim();
+  if (!p)
+    throw new Error("id must be a non-empty string.");
+  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 l = `${p}-button`, c = `${p}-popup`, h = e.map((b) => ({
+    kind: "element",
+    tag: "button",
+    attrs: {
+      "aria-disabled": b.disabled ? "true" : void 0,
+      "data-item-id": b.id || void 0,
+      role: "menuitem",
+      tabindex: "-1",
+      type: "button"
+    },
+    children: [{ kind: "text", value: b.label }]
+  }));
+  return {
+    kind: "element",
+    tag: Q,
+    attrs: {
+      class: "set-menu",
+      "data-align": t === "start" ? void 0 : t,
+      "data-size": i,
+      id: p
+    },
+    children: [
+      {
+        kind: "element",
+        tag: "div",
+        attrs: { "data-part": "trigger" },
+        children: [
+          ht({
+            appearance: "outline",
+            controls: c,
+            disclosure: !0,
+            haspopup: "menu",
+            icon: r,
+            iconMirrored: a,
+            iconPlacement: o,
+            id: l,
+            label: d,
+            labelVisibility: s,
+            size: i,
+            tone: "neutral",
+            type: "button"
+          })
+        ]
+      },
+      {
+        kind: "element",
+        tag: "div",
+        attrs: {
+          "aria-labelledby": l,
+          class: "popup",
+          hidden: !0,
+          id: c,
+          role: "menu"
+        },
+        children: h
+      }
+    ]
+  };
+}
+function yi(t) {
+  return m(ne(t));
+}
+function re() {
+  if (customElements.get(Q)) return;
+  class t extends HTMLElement {
+    #t;
+    #e;
+    #i;
+    #n;
+    connectedCallback() {
+      this.#p(), this.#o(!1), this.#k();
+    }
+    disconnectedCallback() {
+      this.#p();
+    }
+    #d() {
+      return this.querySelector(
+        '[data-part="trigger"] .set-button'
+      );
+    }
+    #r() {
+      return this.querySelector('[role="menu"]');
+    }
+    #c() {
+      return Array.from(
+        this.querySelectorAll('[role="menuitem"]')
+      );
+    }
+    #s(e) {
+      return e.getAttribute("aria-disabled") === "true";
+    }
+    #u() {
+      return this.hasAttribute("data-open");
+    }
+    #a(e) {
+      const i = this.#c();
+      if (i.length === 0) return;
+      const r = (e % i.length + i.length) % i.length;
+      i[r]?.focus();
+    }
+    #l(e = 0) {
+      const i = this.#r(), r = this.#d();
+      !i || !r || (i.hidden = !1, this.setAttribute("data-open", ""), r.setAttribute("aria-expanded", "true"), this.#a(e));
+    }
+    #o(e = !1) {
+      const i = this.#r(), r = this.#d();
+      !i || !r || (i.hidden = !0, this.removeAttribute("data-open"), r.setAttribute("aria-expanded", "false"), e && r.focus());
+    }
+    #h(e) {
+      const r = Array.from(
+        this.querySelectorAll('[role="menuitem"]')
+      ).indexOf(e);
+      this.dispatchEvent(
+        new CustomEvent(qt, {
+          bubbles: !0,
+          detail: {
+            id: e.getAttribute("data-item-id") || void 0,
+            index: r,
+            label: e.textContent || ""
+          }
+        })
+      );
+    }
+    #k() {
+      this.#t = (e) => {
+        const i = e.target;
+        if (!(i instanceof Element)) return;
+        if (i.closest('[data-part="trigger"] .set-button')) {
+          if (this.#u()) {
+            this.#o();
+            return;
           }
           this.#l(0);
           return;
@@ -2298,13 +2791,13 @@ function te() {
       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(X, t);
+  customElements.define(Q, t);
 }
-const vi = {
+const wi = {
   name: "menu",
   description: "Use `menu` to show a list of actions from a trigger button.",
   output: {
-    element: X,
+    element: Q,
     class: "set-menu"
   },
   content: {
@@ -2378,7 +2871,7 @@ const vi = {
     }
   },
   events: {
-    [Mt]: {
+    [qt]: {
       bubbles: !0,
       description: "Fired when a menu item is activated.",
       detail: "{ id?: string; index: number; label: string }"
@@ -2438,15 +2931,15 @@ const vi = {
       }
     ]
   }
-}, pt = "Menu";
-function ee({
+}, ct = "Menu";
+function ae({
   controlsId: t,
   expanded: n,
   id: e,
-  label: i = pt,
+  label: i = ct,
   size: r = "md"
 } = {}) {
-  const a = v(e), o = i.trim() === "" ? pt : i;
+  const a = v(e), o = i.trim() === "" ? ct : i;
   return {
     kind: "element",
     tag: "button",
@@ -2481,10 +2974,10 @@ function ee({
     ]
   };
 }
-function ie(t = {}) {
-  return m(ee(t));
+function oe(t = {}) {
+  return m(ae(t));
 }
-const fi = {
+const Si = {
   name: "expander",
   description: "Use `expander` as a toggle for disclosure regions such as menus.",
   output: { element: "button", class: "set-expander" },
@@ -2504,7 +2997,7 @@ const fi = {
       type: { kind: "string" }
     },
     label: {
-      default: pt,
+      default: ct,
       description: "Accessible label.",
       type: { kind: "text" }
     },
@@ -2549,8 +3042,8 @@ const fi = {
       }
     ]
   }
-}, Q = "set-nav", bt = "data-set-scroll-locked";
-function ne({
+}, Y = "set-nav", vt = "data-set-scroll-locked";
+function de({
   collapsible: t,
   contentId: n,
   expanderLabel: e,
@@ -2588,7 +3081,7 @@ function ne({
   }));
   return {
     kind: "element",
-    tag: Q,
+    tag: Y,
     attrs: {
       class: "set-nav",
       "data-collapsible": t,
@@ -2627,11 +3120,11 @@ function ne({
     ]
   };
 }
-function yi(t) {
-  return m(ne(t));
+function xi(t) {
+  return m(de(t));
 }
-function re() {
-  if (customElements.get(Q)) return;
+function se() {
+  if (customElements.get(Y)) return;
   class t extends HTMLElement {
     #t;
     #e;
@@ -2657,7 +3150,7 @@ function re() {
       const i = e.querySelector(".content");
       i && e.insertAdjacentHTML(
         "afterbegin",
-        `<div data-part="expander">${ie({
+        `<div data-part="expander">${oe({
           controlsId: i.id || void 0,
           label: this.getAttribute("data-expander-label") || void 0,
           size: this.getAttribute("data-size") === "sm" ? "md" : "lg"
@@ -2690,10 +3183,10 @@ function re() {
       const i = this.ownerDocument.documentElement;
       if (i) {
         if (e) {
-          i.setAttribute(bt, "");
+          i.setAttribute(vt, "");
           return;
         }
-        i.removeAttribute(bt);
+        i.removeAttribute(vt);
       }
     }
     #o() {
@@ -2707,12 +3200,12 @@ function re() {
       ), this.#i = void 0, this.#n = void 0, this.#e = void 0;
     }
   }
-  customElements.define(Q, t);
+  customElements.define(Y, t);
 }
-const wi = {
+const Ei = {
   name: "nav",
   description: "Use `nav` to render a primary navigation list.",
-  output: { element: Q, class: "set-nav" },
+  output: { element: Y, class: "set-nav" },
   content: { kind: "structured", prop: "items" },
   props: {
     items: {
@@ -2824,8 +3317,8 @@ const wi = {
       }
     ]
   }
-}, Y = "set-range";
-function ae({
+}, J = "set-range";
+function le({
   description: t,
   disabled: n,
   id: e,
@@ -2890,7 +3383,7 @@ function ae({
     children: [{ kind: "text", value: h }]
   }), {
     kind: "element",
-    tag: Y,
+    tag: J,
     attrs: {
       class: "set-range",
       "data-inline-size": i === "fit" ? "fit" : void 0,
@@ -2899,11 +3392,11 @@ function ae({
     children: f
   };
 }
-function Si(t) {
-  return m(ae(t));
+function zi(t) {
+  return m(le(t));
 }
-function oe() {
-  if (customElements.get(Y)) return;
+function pe() {
+  if (customElements.get(J)) return;
   class t extends HTMLElement {
     #t;
     #e = (e) => {
@@ -2957,12 +3450,12 @@ function oe() {
       this.#t && (delete this.#t.value, this.#t = void 0);
     }
   }
-  customElements.define(Y, t);
+  customElements.define(J, t);
 }
-const xi = {
+const Li = {
   name: "range",
   description: "Use `range` to let users pick a numeric value along a scale.",
-  output: { element: Y, class: "set-range" },
+  output: { element: J, class: "set-range" },
   content: { kind: "text", prop: "label" },
   props: {
     description: {
@@ -3091,9 +3584,9 @@ const xi = {
       }
     ]
   }
-}, J = "set-sidebar", de = "(min-width: 68em)", B = "Collapse sidebar", ct = "Open sidebar";
-function se(t, n) {
-  return `<div data-part="close">${ht({
+}, tt = "set-sidebar", ce = "(min-width: 68em)", B = "Collapse sidebar", ut = "Open sidebar";
+function ue(t, n) {
+  return `<div data-part="close">${mt({
     appearance: "text",
     icon: "panel-left",
     iconMirrored: "rtl",
@@ -3104,7 +3597,7 @@ function se(t, n) {
     type: "button"
   })}</div>`;
 }
-function le({
+function he({
   aboveNotebook: t = "persistent",
   buttonSize: n = "md",
   children: e,
@@ -3113,9 +3606,9 @@ function le({
   header: a,
   id: o,
   surface: d,
-  triggerLabel: s = ct
+  triggerLabel: s = ut
 }) {
-  const p = o.trim(), l = i.trim() || B, c = s.trim() || ct;
+  const p = o.trim(), l = i.trim() || B, c = s.trim() || ut;
   if (!p)
     throw new Error("id must be a non-empty string.");
   if (!V(p))
@@ -3145,7 +3638,7 @@ function le({
   const b = `${p}-panel`;
   return {
     kind: "element",
-    tag: J,
+    tag: tt,
     attrs: {
       class: "set-sidebar",
       "data-above-notebook": t,
@@ -3159,7 +3652,7 @@ function le({
         tag: "div",
         attrs: { "data-part": "trigger" },
         children: [
-          ut({
+          ht({
             appearance: "text",
             controls: b,
             disclosure: !0,
@@ -3193,11 +3686,11 @@ function le({
     ]
   };
 }
-function Ei(t) {
-  return m(le(t));
+function Ci(t) {
+  return m(he(t));
 }
-function pe() {
-  if (customElements.get(J)) return;
+function me() {
+  if (customElements.get(tt)) return;
   class t extends HTMLElement {
     #t;
     #e;
@@ -3244,7 +3737,7 @@ function pe() {
       const i = e.querySelector(".header"), r = this.getAttribute("data-collapse-label") || B, a = this.getAttribute("data-button-size") ?? "md";
       i?.insertAdjacentHTML(
         "beforeend",
-        se(r, a)
+        ue(r, a)
       );
     }
     #o() {
@@ -3319,7 +3812,7 @@ function pe() {
     }
     #f() {
       const e = this.ownerDocument.defaultView;
-      e && (typeof e.matchMedia == "function" && (this.#t = e.matchMedia(de), this.#n = () => {
+      e && (typeof e.matchMedia == "function" && (this.#t = e.matchMedia(ce), this.#n = () => {
         this.#g();
       }, this.#t.addEventListener("change", this.#n), this.#g()), this.#e = (i) => {
         const r = i.target;
@@ -3346,13 +3839,13 @@ function pe() {
       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(tt, t);
 }
-const zi = {
+const Mi = {
   name: "sidebar",
   description: "Use `sidebar` for a side panel alongside main content.",
   output: {
-    element: J,
+    element: tt,
     class: "set-sidebar"
   },
   content: {
@@ -3407,7 +3900,7 @@ const zi = {
       }
     },
     triggerLabel: {
-      default: ct,
+      default: ut,
       description: "Accessible label for the open button.",
       type: { kind: "string" }
     }
@@ -3472,8 +3965,8 @@ const zi = {
       }
     ]
   }
-}, tt = "set-video";
-function ce({
+}, et = "set-video";
+function ke({
   autoPlay: t,
   controls: n,
   fit: e = "intrinsic",
@@ -3510,7 +4003,7 @@ function ce({
   };
   return {
     kind: "element",
-    tag: tt,
+    tag: et,
     attrs: {
       class: "set-video",
       "data-fluid": e === "fluid",
@@ -3519,12 +4012,12 @@ function ce({
     children: [f]
   };
 }
-function Ci(t) {
-  return m(ce(t));
+function qi(t) {
+  return m(ke(t));
 }
-const ue = "(prefers-reduced-motion: reduce)";
-function he() {
-  if (customElements.get(tt)) return;
+const ge = "(prefers-reduced-motion: reduce)";
+function be() {
+  if (customElements.get(et)) return;
   class t extends HTMLElement {
     #t = !1;
     #e;
@@ -3533,7 +4026,7 @@ function he() {
       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(ue), this.#i = () => {
+      !i || typeof i.matchMedia != "function" || (this.#e = i.matchMedia(ge), this.#i = () => {
         this.#n();
       }, this.#e.addEventListener("change", this.#i), this.#n());
     }
@@ -3546,12 +4039,12 @@ function he() {
       })));
     }
   }
-  customElements.define(tt, t);
+  customElements.define(et, t);
 }
-const Li = {
+const Ii = {
   name: "video",
   description: "Use `video` to render a video with intrinsic or fluid fit and native playback behavior.",
-  output: { element: tt, class: "set-video" },
+  output: { element: et, class: "set-video" },
   content: { kind: "none" },
   props: {
     autoPlay: {
@@ -3676,17 +4169,17 @@ const Li = {
     ]
   }
 };
-function me(t) {
+function ve(t) {
   return t ? /[A-Za-z]/.test(t) : !1;
 }
-function ke(t) {
+function fe(t) {
   return /^[a-z]/.test(t);
 }
 function H(t) {
   const n = t.charAt(0);
-  return me(n) ? n : void 0;
+  return ve(n) ? n : void 0;
 }
-function ge(t) {
+function ye(t) {
   const n = O(t);
   if (!n) return;
   const e = n.split(" "), i = H(e[0]);
@@ -3694,7 +4187,7 @@ function ge(t) {
   const r = [i.toUpperCase()];
   if (e.length === 1)
     return r[0];
-  const a = e.slice(1).find(ke);
+  const a = e.slice(1).find(fe);
   if (a) {
     const d = H(a);
     return d ? `${r[0]}${d}` : void 0;
@@ -3718,12 +4211,12 @@ function ge(t) {
   if (o)
     return r.push(o), r.slice(0, 3).join("");
 }
-const be = {
+const we = {
   bot: "robot-1",
   organization: "city-6",
   person: "user-1",
   team: "member"
-}, vt = [
+}, ft = [
   "01",
   "02",
   "03",
@@ -3734,13 +4227,13 @@ const be = {
   "08",
   "09"
 ];
-function ve(t) {
+function Se(t) {
   let n = 5381;
   for (const e of t)
     n = n * 33 ^ e.charCodeAt(0);
   return n >>> 0;
 }
-function fe(t) {
+function xe(t) {
   if (t == null) return;
   const n = O(t);
   if (n) {
@@ -3751,7 +4244,7 @@ function fe(t) {
     return n;
   }
 }
-function ye({
+function Ee({
   alt: t,
   ariaHidden: n,
   name: e
@@ -3759,18 +4252,18 @@ function ye({
   if (!n)
     return O(t) || O(e) || "Avatar";
 }
-function we({
+function ze({
   color: t,
   name: n
 }) {
   if (t) return t;
   if (n) {
-    const e = ve(n) % vt.length;
-    return vt[e];
+    const e = Se(n) % ft.length;
+    return ft[e];
   }
   return "neutral";
 }
-function Se({
+function Le({
   alt: t,
   ariaHidden: n,
   color: e,
@@ -3781,11 +4274,11 @@ function Se({
   size: d = "md",
   src: s
 }) {
-  const p = v(r), l = fe(a), c = O(o), h = O(s), b = ye({
+  const p = v(r), l = xe(a), c = O(o), h = O(s), b = Ee({
     alt: t,
     ariaHidden: n,
     name: c
-  }), S = l || ge(c), f = !!h, E = we({
+  }), S = l || ye(c), f = !!h, E = ze({
     color: e,
     name: c
   }), q = {
@@ -3820,7 +4313,7 @@ function Se({
     children: [
       P({
         ariaHidden: !0,
-        name: be[i],
+        name: we[i],
         size: "fill"
       })
     ]
@@ -3831,10 +4324,10 @@ function Se({
     children: [w]
   };
 }
-function Mi(t) {
-  return m(Se(t));
+function Ti(t) {
+  return m(Le(t));
 }
-const qi = {
+const Ai = {
   name: "avatar",
   description: "Use `avatar` to visually represent a person, team, or entity.",
   output: { element: "span", class: "set-avatar" },
@@ -3941,7 +4434,7 @@ const qi = {
     ]
   }
 };
-function xe({
+function Ce({
   floating: t,
   id: n,
   label: e,
@@ -3962,10 +4455,10 @@ function xe({
     children: [{ kind: "text", value: e }]
   };
 }
-function Ii(t) {
-  return m(xe(t));
+function _i(t) {
+  return m(Ce(t));
 }
-const Ti = {
+const Di = {
   name: "badge",
   description: "Use `badge` to annotate content with a short label.",
   output: { element: "span", class: "set-badge" },
@@ -4034,7 +4527,7 @@ const Ti = {
     ]
   }
 };
-function et({
+function it({
   align: t,
   as: n,
   children: e,
@@ -4064,10 +4557,10 @@ function et({
     children: [{ kind: "raw", html: e }]
   };
 }
-function Ai(t) {
-  return m(et(t));
+function Vi(t) {
+  return m(it(t));
 }
-const _i = {
+const Hi = {
   name: "text",
   description: "Use `text` for inline or paragraph body copy.",
   output: {
@@ -4191,7 +4684,7 @@ const _i = {
     ]
   }
 };
-function Ee({
+function Me({
   align: t = "start",
   attribution: n,
   id: e,
@@ -4215,7 +4708,7 @@ function Ee({
         tag: "blockquote",
         attrs: { class: "quote" },
         children: [
-          et({
+          it({
             align: t,
             as: "p",
             children: r,
@@ -4230,7 +4723,7 @@ function Ee({
         tag: "figcaption",
         attrs: { class: "attribution" },
         children: [
-          et({
+          it({
             as: "span",
             children: n,
             responsive: a,
@@ -4241,10 +4734,10 @@ function Ee({
     ]
   };
 }
-function Di(t) {
-  return m(Ee(t));
+function Ni(t) {
+  return m(Me(t));
 }
-const Vi = {
+const Bi = {
   name: "blockquote",
   description: "Use `blockquote` to display a quote with attribution.",
   output: { element: "figure", class: "set-blockquote" },
@@ -4313,7 +4806,7 @@ const Vi = {
     ]
   }
 };
-function ze({
+function qe({
   background: t = "default",
   border: n,
   children: e,
@@ -4342,10 +4835,10 @@ function ze({
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function Hi(t) {
-  return m(ze(t));
+function Oi(t) {
+  return m(qe(t));
 }
-const Ni = {
+const Pi = {
   name: "box",
   description: "Use `box` to inset content.",
   output: { element: "div", class: "set-box" },
@@ -4458,7 +4951,7 @@ const Ni = {
     ]
   }
 };
-function Ce({
+function Ie({
   description: t,
   headingLevel: n,
   href: e,
@@ -4524,10 +5017,10 @@ function Ce({
     children: c
   };
 }
-function Bi(t) {
-  return m(Ce(t));
+function Ri(t) {
+  return m(Ie(t));
 }
-const Oi = {
+const Wi = {
   name: "card",
   description: "Use `card` to display a summary for a single topic.",
   output: {
@@ -4595,7 +5088,7 @@ const Oi = {
     ]
   }
 };
-function Le({
+function Te({
   checked: t,
   description: n,
   disabled: e,
@@ -4654,10 +5147,10 @@ function Le({
     children: f
   };
 }
-function Pi(t) {
-  return m(Le(t));
+function Ui(t) {
+  return m(Te(t));
 }
-const Ri = {
+const $i = {
   name: "checkbox",
   description: "Use `checkbox` to let users toggle a single option on or off.",
   output: { element: "div", class: "set-checkbox" },
@@ -4787,7 +5280,7 @@ const Ri = {
     ]
   }
 };
-function Me({
+function Ae({
   children: t,
   gutter: n = "default",
   id: e,
@@ -4806,10 +5299,10 @@ function Me({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function Wi(t) {
-  return m(Me(t));
+function Gi(t) {
+  return m(Ae(t));
 }
-const Ui = {
+const Zi = {
   name: "container",
   description: "Use `container` to wrap page-level content.",
   output: { element: "div", class: "set-container" },
@@ -4866,7 +5359,7 @@ const Ui = {
     ]
   }
 };
-function qe({
+function _e({
   children: t,
   id: n,
   open: e,
@@ -4918,10 +5411,10 @@ function qe({
     ]
   };
 }
-function $i(t) {
-  return m(qe(t));
+function Fi(t) {
+  return m(_e(t));
 }
-const Gi = {
+const ji = {
   name: "details",
   description: "Use `details` to let users expand and collapse a section of content.",
   output: { element: "details", class: "set-details" },
@@ -4980,7 +5473,7 @@ const Gi = {
     ]
   }
 };
-function Ie({
+function De({
   id: t,
   orientation: n = "horizontal",
   tone: e = "default"
@@ -4999,10 +5492,10 @@ function Ie({
     children: []
   };
 }
-function Zi(t = {}) {
-  return m(Ie(t));
+function Ki(t = {}) {
+  return m(De(t));
 }
-const Fi = {
+const Xi = {
   name: "divider",
   description: "Use `divider` to separate sections with a rule.",
   output: {
@@ -5064,7 +5557,7 @@ const Fi = {
     ]
   }
 };
-function qt({
+function It({
   children: t,
   description: n,
   disabled: e,
@@ -5107,10 +5600,10 @@ function qt({
     children: h
   };
 }
-function ji(t) {
-  return m(qt(t));
+function Qi(t) {
+  return m(It(t));
 }
-const Ki = {
+const Yi = {
   name: "fieldset",
   description: "Use `fieldset` to group related form controls under a legend.",
   output: { element: "fieldset", class: "set-fieldset" },
@@ -5198,7 +5691,7 @@ const Ki = {
     ]
   }
 };
-function Te({
+function Ve({
   align: t = "start",
   caption: n,
   children: e,
@@ -5223,7 +5716,7 @@ function Te({
         tag: "figcaption",
         attrs: { class: "figcaption" },
         children: [
-          et({
+          it({
             as: "span",
             children: n,
             responsive: a,
@@ -5234,10 +5727,10 @@ function Te({
     ]
   };
 }
-function Xi(t) {
-  return m(Te(t));
+function Ji(t) {
+  return m(Ve(t));
 }
-const Qi = {
+const tn = {
   name: "figure",
   description: "Use `figure` to present media with a caption.",
   output: { element: "figure", class: "set-figure" },
@@ -5310,7 +5803,7 @@ const Qi = {
   if (t !== void 0)
     return String(t);
 };
-function Ae({
+function He({
   children: t,
   gap: n = "default",
   id: e
@@ -5334,10 +5827,10 @@ function Ae({
     ]
   };
 }
-function Yi(t) {
-  return m(Ae(t));
+function en(t) {
+  return m(He(t));
 }
-function _e({
+function Ne({
   align: t,
   children: n,
   colSpan: e,
@@ -5380,10 +5873,10 @@ function _e({
     children: n ? [{ kind: "raw", html: n }] : []
   };
 }
-function Ji(t) {
-  return m(_e(t));
+function nn(t) {
+  return m(Ne(t));
 }
-const tn = {
+const rn = {
   name: "grid",
   description: "Use `grid` to lay out content in a 12-column responsive grid.",
   output: { element: "div", class: "set-grid" },
@@ -5429,7 +5922,7 @@ const tn = {
   min: 1,
   max: 12,
   integer: !0
-}, en = {
+}, an = {
   name: "grid-item",
   description: "Use `grid-item` to place content within a `grid` layout.",
   output: { element: "div", class: "set-grid-item" },
@@ -5596,7 +6089,7 @@ const tn = {
     ]
   }
 };
-function De({
+function Be({
   align: t = "start",
   id: n,
   level: e,
@@ -5620,10 +6113,10 @@ function De({
     children: [{ kind: "text", value: o }]
   };
 }
-function nn(t) {
-  return m(De(t));
+function on(t) {
+  return m(Be(t));
 }
-const rn = {
+const dn = {
   name: "heading",
   description: "Use `heading` to render heading text with consistent type.",
   output: {
@@ -5646,456 +6139,38 @@ const rn = {
     align: {
       default: "start",
       description: "Text alignment.",
-      type: { kind: "enum", values: ["start", "center", "end"] }
-    },
-    id: {
-      description: "DOM id.",
-      type: { kind: "string" }
-    },
-    level: {
-      description: "Semantic heading level. Renders a `<span>` when omitted.",
-      type: { kind: "enum", values: [1, 2, 3, 4, 5, 6] }
-    },
-    opticalAlign: {
-      default: !1,
-      description: "Optically aligns left sidebearing-heavy glyphs with the content edge.",
-      type: { kind: "boolean" }
-    },
-    responsive: {
-      default: !1,
-      description: "Scales type across breakpoints.",
-      type: { kind: "boolean" }
-    },
-    size: {
-      default: "md",
-      description: "Size variant.",
-      type: {
-        kind: "enum",
-        values: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"]
-      }
-    },
-    text: {
-      description: "Heading text.",
-      required: !0,
-      type: { kind: "text" }
-    }
-  },
-  events: {},
-  rules: {
-    attributes: [
-      {
-        target: { on: "host" },
-        attribute: "data-align",
-        condition: {
-          kind: "when-in",
-          prop: "align",
-          values: ["center", "end"]
-        },
-        value: { kind: "prop", prop: "align" }
-      },
-      {
-        target: { on: "host" },
-        attribute: "data-optical-align",
-        condition: { kind: "when-truthy", prop: "opticalAlign" }
-      },
-      {
-        target: { on: "host" },
-        attribute: "data-responsive",
-        condition: { kind: "when-truthy", prop: "responsive" }
-      },
-      {
-        target: { on: "host" },
-        attribute: "data-size",
-        condition: { kind: "always" },
-        value: { kind: "prop", prop: "size" }
-      },
-      {
-        target: { on: "host" },
-        attribute: "id",
-        condition: { kind: "when-non-empty", prop: "id" },
-        value: { kind: "prop", prop: "id" }
-      }
-    ]
-  }
-};
-function Ve({
-  adaptive: t,
-  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 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: 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 (!x)
-    throw new Error("src must be a non-empty string.");
-  if (t && [
-    x,
-    z,
-    ...M.map((u) => u.srcSet)
-  ].some((u) => u?.includes("#")))
-    throw new Error("adaptive sources must not contain URL fragments.");
-  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 [`${y}#${C}`, ...g].join(" ");
-  }).join(", "), nt = (u) => {
-    const C = {
-      kind: "element",
-      tag: "img",
-      attrs: {
-        alt: e,
-        class: "img",
-        "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 (M.length === 0)
-      return C;
-    const I = M.map((y) => ({
-      kind: "element",
-      tag: "source",
-      attrs: {
-        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": u },
-      children: [...I, C]
-    };
-  }, 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-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 He(t) {
-  return m(Ve(t));
-}
-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" },
-  content: { kind: "none" },
-  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. 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: {
-      default: "",
-      description: "Alternative text. Leave empty for decorative images.",
-      type: { kind: "string" }
-    },
-    gravity: {
-      default: "C",
-      description: "Focal point used when cropping.",
-      ignoredWhen: '`fit` is not `"cover"`',
-      type: {
-        kind: "enum",
-        values: ["N", "NE", "E", "SE", "S", "SW", "W", "NW", "C"]
-      }
-    },
-    radius: {
-      default: !1,
-      description: "Applies the default corner radius.",
-      type: { kind: "boolean" }
-    },
-    aspectRatio: {
-      description: "Aspect ratio applied to the wrapper.",
-      ignoredWhen: '`fit` is not `"cover"`, or `height` is set',
-      type: {
-        kind: "enum",
-        values: ["1:1", "4:5", "3:2", "16:9", "21:9"]
-      }
-    },
-    fit: {
-      default: "intrinsic",
-      description: "Layout mode. `intrinsic` renders at the image's own dimensions, `fluid` scales to the container's full inline size at the active source's aspect ratio, `cover` renders a cropped fill (`object-fit: cover`) sized by the wrapper. For `fluid`, provide candidates sized for large viewports via `srcSet`/`sources` so upscaled rendering stays sharp.",
-      type: { kind: "enum", values: ["intrinsic", "fluid", "cover"] }
-    },
-    shadow: {
-      default: !1,
-      description: "Applies a drop shadow to the image.",
-      type: { kind: "boolean" }
-    },
-    height: {
-      description: "Height in pixels. Under `intrinsic` and `fluid`, an aspect-ratio hint — with `width`, reserves the correctly shaped box before load; rendered height follows the aspect ratio. Under `cover`, the wrapper's block size, overriding `aspectRatio`.",
-      type: { kind: "number" }
+      type: { kind: "enum", values: ["start", "center", "end"] }
     },
     id: {
       description: "DOM id.",
       type: { kind: "string" }
     },
-    lazy: {
+    level: {
+      description: "Semantic heading level. Renders a `<span>` when omitted.",
+      type: { kind: "enum", values: [1, 2, 3, 4, 5, 6] }
+    },
+    opticalAlign: {
       default: !1,
-      description: "Defers loading until the image is near the viewport.",
+      description: "Optically aligns left sidebearing-heavy glyphs with the content edge.",
       type: { kind: "boolean" }
     },
-    priority: {
+    responsive: {
       default: !1,
-      description: "Marks the image as high priority for fetch.",
+      description: "Scales type across breakpoints.",
       type: { kind: "boolean" }
     },
-    sizes: {
-      description: "`sizes` attribute used with `srcSet`.",
-      ignoredWhen: "`sources` are provided",
-      type: { kind: "string" }
-    },
-    sources: {
-      description: "Responsive sources rendered inside a `<picture>`.",
+    size: {
+      default: "md",
+      description: "Size variant.",
       type: {
-        kind: "array",
-        itemShape: {
-          height: {
-            description: "Intrinsic height in pixels.",
-            type: { kind: "number" }
-          },
-          media: {
-            description: "`media` condition evaluated for the source.",
-            type: { kind: "string" }
-          },
-          sizes: {
-            description: "`sizes` attribute for the source.",
-            type: { kind: "string" }
-          },
-          srcSet: {
-            description: "Candidate sources for this media entry.",
-            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" }
-          },
-          width: {
-            description: "Intrinsic width in pixels.",
-            type: { kind: "number" }
-          }
-        }
+        kind: "enum",
+        values: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"]
       }
     },
-    srcSet: {
-      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.",
+    text: {
+      description: "Heading text.",
       required: !0,
-      type: { kind: "string" }
-    },
-    width: {
-      description: "Width in pixels. Under `intrinsic`, the rendered width, capped at the container; under `fluid`, an aspect-ratio hint; under `cover`, the wrapper's inline size (`aspectRatio` still derives the block size while `height` is unset).",
-      type: { kind: "number" }
+      type: { kind: "text" }
     }
   },
   events: {},
@@ -6103,81 +6178,29 @@ const an = {
     attributes: [
       {
         target: { on: "host" },
-        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",
-        condition: { kind: "when-equals", prop: "fit", to: "cover" },
-        value: { kind: "literal", text: "cover" }
+        attribute: "data-align",
+        condition: {
+          kind: "when-in",
+          prop: "align",
+          values: ["center", "end"]
+        },
+        value: { kind: "prop", prop: "align" }
       },
       {
         target: { on: "host" },
-        attribute: "data-shadow",
-        condition: { kind: "when-truthy", prop: "shadow" }
+        attribute: "data-optical-align",
+        condition: { kind: "when-truthy", prop: "opticalAlign" }
       },
       {
         target: { on: "host" },
-        attribute: "data-radius",
-        condition: { kind: "when-truthy", prop: "radius" }
+        attribute: "data-responsive",
+        condition: { kind: "when-truthy", prop: "responsive" }
       },
       {
         target: { on: "host" },
-        attribute: "data-fluid",
-        condition: { kind: "when-equals", prop: "fit", to: "fluid" }
-      },
-      {
-        target: { on: "descendant", selector: "img" },
-        attribute: "class",
-        condition: { kind: "always" },
-        value: { kind: "literal", text: "img" }
-      },
-      {
-        target: { on: "descendant", selector: "img" },
-        attribute: "alt",
-        condition: { kind: "always" },
-        value: { kind: "prop", prop: "alt" }
-      },
-      {
-        target: { on: "descendant", selector: "img" },
-        attribute: "src",
+        attribute: "data-size",
         condition: { kind: "always" },
-        value: { kind: "template", pattern: "{src}" }
-      },
-      {
-        target: { on: "descendant", selector: "img" },
-        attribute: "srcset",
-        condition: { kind: "when-non-empty", prop: "srcSet" },
-        value: { kind: "prop", prop: "srcSet" }
-      },
-      {
-        target: { on: "descendant", selector: "img" },
-        attribute: "fetchpriority",
-        condition: { kind: "when-truthy", prop: "priority" },
-        value: { kind: "literal", text: "high" }
-      },
-      {
-        target: { on: "descendant", selector: "img" },
-        attribute: "loading",
-        condition: {
-          kind: "all",
-          of: [
-            { kind: "when-truthy", prop: "lazy" },
-            { kind: "not", of: { kind: "when-truthy", prop: "priority" } }
-          ]
-        },
-        value: { kind: "literal", text: "lazy" }
+        value: { kind: "prop", prop: "size" }
       },
       {
         target: { on: "host" },
@@ -6188,7 +6211,7 @@ const an = {
     ]
   }
 };
-function Ne({
+function Oe({
   align: t = "center",
   as: n = "div",
   children: e,
@@ -6212,10 +6235,10 @@ function Ne({
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function on(t) {
-  return m(Ne(t));
+function sn(t) {
+  return m(Oe(t));
 }
-const dn = {
+const ln = {
   name: "inline",
   description: "Use `inline` to lay out content in a horizontal row.",
   output: {
@@ -6300,7 +6323,7 @@ const dn = {
     ]
   }
 };
-function Be({
+function Pe({
   autocomplete: t,
   description: n,
   disabled: e,
@@ -6317,7 +6340,7 @@ function Be({
   value: b,
   inlineSize: S = "full"
 }) {
-  const f = i.trim(), E = n?.trim(), q = t === !1 ? !1 : t?.trim(), w = o?.trim(), k = d?.trim(), L = b;
+  const f = i.trim(), E = n?.trim(), q = t === !1 ? !1 : t?.trim(), w = o?.trim(), k = d?.trim(), C = b;
   if (!f)
     throw new Error("id must be a non-empty string.");
   if (!V(f))
@@ -6348,7 +6371,7 @@ function Be({
         required: !!p,
         spellcheck: N === void 0 ? void 0 : String(N),
         type: _,
-        value: L
+        value: C
       },
       children: []
     }
@@ -6369,10 +6392,10 @@ function Be({
     children: $
   };
 }
-function sn(t) {
-  return m(Be(t));
+function pn(t) {
+  return m(Pe(t));
 }
-const ln = {
+const cn = {
   name: "input",
   description: "Use `input` to collect a single line of text from users.",
   output: { element: "div", class: "set-input" },
@@ -6567,7 +6590,7 @@ const ln = {
       }
     ]
   }
-}, Oe = "0 0 6714.6 1200", Pe = "0 0 600 1200", Re = [
+}, Re = "0 0 6714.6 1200", We = "0 0 600 1200", Ue = [
   { x: 0, y: 0 },
   { x: 300, y: 0 },
   { x: 150, y: 300 },
@@ -6576,11 +6599,11 @@ const ln = {
   { x: 300, y: 600 },
   { x: 150, y: 900 },
   { x: 450, y: 900 }
-], 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 = () => ({
+], $e = "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", Ge = 1163, Tt = () => ({
   kind: "element",
   tag: "g",
   attrs: { class: "mark" },
-  children: Re.map(({ x: t, y: n }) => ({
+  children: Ue.map(({ x: t, y: n }) => ({
     kind: "element",
     tag: "rect",
     attrs: {
@@ -6591,19 +6614,19 @@ const ln = {
     },
     children: []
   }))
-}), $e = () => ({
+}), Ze = () => ({
   kind: "element",
   tag: "g",
-  attrs: { class: "word", transform: `translate(${Ue} 0)` },
+  attrs: { class: "word", transform: `translate(${Ge} 0)` },
   children: [
     {
       kind: "element",
       tag: "path",
-      attrs: { d: We },
+      attrs: { d: $e },
       children: []
     }
   ]
-}), Tt = (t, n) => ({
+}), At = (t, n) => ({
   kind: "element",
   tag: "svg",
   attrs: {
@@ -6613,13 +6636,13 @@ const ln = {
   },
   children: n
 });
-function Ge() {
-  return Tt(Oe, [It(), $e()]);
+function Fe() {
+  return At(Re, [Tt(), Ze()]);
 }
-function Ze() {
-  return Tt(Pe, [It()]);
+function je() {
+  return At(We, [Tt()]);
 }
-function Fe({
+function Ke({
   animated: t,
   id: n,
   label: e,
@@ -6636,7 +6659,7 @@ function Fe({
     }
   ];
   return d && s.push(
-    a === "graphic" ? Ze() : Ge()
+    a === "graphic" ? je() : Fe()
   ), {
     kind: "element",
     tag: "div",
@@ -6651,10 +6674,10 @@ function Fe({
     children: s
   };
 }
-function pn(t) {
-  return m(Fe(t));
+function un(t) {
+  return m(Ke(t));
 }
-const cn = {
+const hn = {
   name: "logo",
   description: "Use `logo` to display the brand mark.",
   output: { element: "div", class: "set-logo" },
@@ -6742,7 +6765,7 @@ const cn = {
     ]
   }
 };
-function je({
+function Xe({
   banner: t,
   centerMain: n,
   children: e,
@@ -6783,10 +6806,10 @@ function je({
     children: l
   };
 }
-function un(t) {
-  return m(je(t));
+function mn(t) {
+  return m(Xe(t));
 }
-const hn = {
+const kn = {
   name: "page",
   description: "Use `page` as the primary layout for header, main, and footer regions.",
   output: { element: "div", class: "set-page" },
@@ -6876,7 +6899,7 @@ const hn = {
     ]
   }
 };
-function Ke({
+function Qe({
   children: t,
   id: n,
   padding: e = "md",
@@ -6895,10 +6918,10 @@ function Ke({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function mn(t) {
-  return m(Ke(t));
+function gn(t) {
+  return m(Qe(t));
 }
-const kn = {
+const bn = {
   name: "panel",
   description: "Use `panel` to group related content in a contained region.",
   output: { element: "div", class: "set-panel" },
@@ -6949,7 +6972,7 @@ const kn = {
     ]
   }
 };
-function Xe({
+function Ye({
   children: t,
   id: n,
   size: e = "md",
@@ -6970,10 +6993,10 @@ function Xe({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function gn(t = {}) {
-  return m(Xe(t));
+function vn(t = {}) {
+  return m(Ye(t));
 }
-const bn = {
+const fn = {
   name: "pattern",
   description: "Use `pattern` to render repeated visual language components behind content.",
   output: { element: "div", class: "set-pattern" },
@@ -7040,15 +7063,15 @@ const bn = {
     ]
   }
 };
-function vn(t) {
-  return He({
+function yn(t) {
+  return Qt({
     ...t,
     alt: "",
     fit: "cover",
     priority: !0
   });
 }
-function Qe({
+function Je({
   children: t,
   contentTheme: n,
   id: e,
@@ -7080,10 +7103,10 @@ function Qe({
     children: d
   };
 }
-function fn(t) {
-  return m(Qe(t));
+function wn(t) {
+  return m(Je(t));
 }
-const yn = {
+const Sn = {
   name: "poster",
   description: "Use `poster` to layer content over background media.",
   output: { element: "div", class: "set-poster" },
@@ -7154,7 +7177,7 @@ const yn = {
     ]
   }
 };
-function Ye({
+function ti({
   align: t = "start",
   children: n,
   hangingPunctuation: e,
@@ -7181,10 +7204,10 @@ function Ye({
     children: [{ kind: "raw", html: n }]
   };
 }
-function wn(t) {
-  return m(Ye(t));
+function xn(t) {
+  return m(ti(t));
 }
-const Sn = {
+const En = {
   name: "prose",
   description: "Use `prose` to style rich-text markup.",
   output: { element: "div", class: "set-prose" },
@@ -7278,7 +7301,7 @@ const Sn = {
     ]
   }
 };
-function Je({
+function ei({
   description: t,
   disabled: n,
   id: e,
@@ -7302,12 +7325,12 @@ function Je({
     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 S = r.map((k, L) => {
+  const S = r.map((k, C) => {
     const x = k.value.trim(), z = k.label.trim(), _ = k.description?.trim();
     if (!x)
-      throw new Error(`radios[${L}].value must be non-empty.`);
+      throw new Error(`radios[${C}].value must be non-empty.`);
     if (!z)
-      throw new Error(`radios[${L}].label must be non-empty.`);
+      throw new Error(`radios[${C}].label must be non-empty.`);
     return {
       description: _,
       disabled: !!k.disabled,
@@ -7318,7 +7341,7 @@ function Je({
   if (new Set(S.map((k) => k.value)).size !== S.length)
     throw new Error("radios values must be unique.");
   const E = !!n, q = S.map((k) => {
-    const L = !!k.disabled, x = k.description ? `${c}-${k.value}-description` : void 0, z = [
+    const C = !!k.disabled, x = k.description ? `${c}-${k.value}-description` : void 0, z = [
       {
         kind: "element",
         tag: "label",
@@ -7331,9 +7354,9 @@ function Je({
               "aria-describedby": x,
               checked: b === k.value,
               class: "radio",
-              disabled: L,
+              disabled: C,
               name: h,
-              required: !!s && !E && !L,
+              required: !!s && !E && !C,
               type: "radio",
               value: k.value
             },
@@ -7360,7 +7383,7 @@ function Je({
       children: z
     };
   });
-  return qt({
+  return It({
     children: m({
       kind: "element",
       tag: "div",
@@ -7378,10 +7401,10 @@ function Je({
     legend: a
   });
 }
-function xn(t) {
-  return m(Je(t));
+function zn(t) {
+  return m(ei(t));
 }
-const En = {
+const Ln = {
   name: "radios",
   description: "Use `radios` to let users select one option from a short list.",
   output: { element: "fieldset", class: "set-fieldset" },
@@ -7530,7 +7553,7 @@ const En = {
     ]
   }
 };
-function ti({
+function ii({
   appOverscrollBehavior: t,
   appRoot: n,
   brand: e = "mnsp",
@@ -7557,10 +7580,10 @@ function ti({
     children: i ? [{ kind: "raw", html: i }] : []
   };
 }
-function zn(t) {
-  return m(ti(t));
+function Cn(t) {
+  return m(ii(t));
 }
-const Cn = {
+const Mn = {
   name: "root",
   description: "Mandatory top-level `root` wrapper for the Set system.",
   output: { element: "div", class: "set" },
@@ -7653,7 +7676,7 @@ const Cn = {
     ]
   }
 };
-function ei({
+function ni({
   id: t,
   label: n,
   size: e = "md",
@@ -7710,10 +7733,10 @@ function ei({
     children: o
   };
 }
-function Ln(t = {}) {
-  return m(ei(t));
+function qn(t = {}) {
+  return m(ni(t));
 }
-const Mn = {
+const In = {
   name: "spinner",
   description: "Use `spinner` to indicate loading or in-progress state.",
   output: { element: "span", class: "set-spinner" },
@@ -7771,7 +7794,7 @@ const Mn = {
     ]
   }
 };
-function ii({
+function ri({
   align: t = "stretch",
   as: n = "div",
   children: e,
@@ -7793,10 +7816,10 @@ function ii({
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function qn(t) {
-  return m(ii(t));
+function Tn(t) {
+  return m(ri(t));
 }
-const In = {
+const An = {
   name: "stack",
   description: "Use `stack` to lay out content in a vertical column.",
   output: {
@@ -7867,7 +7890,7 @@ const In = {
     ]
   }
 };
-function ni({
+function ai({
   children: t,
   contentTheme: n,
   id: e,
@@ -7886,10 +7909,10 @@ function ni({
     children: [{ kind: "raw", html: t }]
   };
 }
-function Tn(t) {
-  return m(ni(t));
+function _n(t) {
+  return m(ai(t));
 }
-const An = {
+const Dn = {
   name: "surface",
   description: "Use `surface` to set a colour context for nested content.",
   output: { element: "div", class: "set-surface" },
@@ -7941,7 +7964,7 @@ const An = {
     ]
   }
 };
-function ri({
+function oi({
   checked: t,
   description: n,
   disabled: e,
@@ -7997,10 +8020,10 @@ function ri({
     children: c
   };
 }
-function _n(t) {
-  return m(ri(t));
+function Vn(t) {
+  return m(oi(t));
 }
-const Dn = {
+const Hn = {
   name: "switch",
   description: "Use `switch` to let users instantly toggle a setting on or off.",
   output: { element: "div", class: "set-switch" },
@@ -8108,7 +8131,7 @@ const Dn = {
     ]
   }
 };
-function ai({
+function di({
   autocomplete: t,
   description: n,
   disabled: e,
@@ -8134,7 +8157,7 @@ function ai({
     );
   if (!Number.isInteger(l) || l < 2)
     throw new Error("rows must be an integer greater than or equal to 2.");
-  const L = E ? `${f}-description` : void 0, x = !!e, z = !x && !!d, D = [
+  const C = E ? `${f}-description` : void 0, x = !!e, z = !x && !!d, D = [
     {
       kind: "element",
       tag: "label",
@@ -8145,7 +8168,7 @@ function ai({
       kind: "element",
       tag: "textarea",
       attrs: {
-        "aria-describedby": L,
+        "aria-describedby": C,
         "aria-invalid": !x && !z && !!r ? "true" : void 0,
         autocomplete: q === !1 ? "off" : q || void 0,
         class: "textarea",
@@ -8163,7 +8186,7 @@ function ai({
   return E && D.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: L },
+    attrs: { class: "description", id: C },
     children: [{ kind: "text", value: E }]
   }), {
     kind: "element",
@@ -8177,10 +8200,10 @@ function ai({
     children: D
   };
 }
-function Vn(t) {
-  return m(ai(t));
+function Nn(t) {
+  return m(di(t));
 }
-const Hn = {
+const Bn = {
   name: "textarea",
   description: "Use `textarea` to collect multiple lines of text from users.",
   output: { element: "div", class: "set-textarea" },
@@ -8369,166 +8392,168 @@ const Hn = {
     ]
   }
 };
-function Nn() {
-  $t(), jt(), Yt(), te(), re(), oe(), pe(), he();
+function On() {
+  Gt(), Kt(), Yt(), ie(), re(), se(), pe(), me(), be();
 }
 export {
-  St as SET_ALERT_EVENT_BEFORE_DISMISS,
-  xt as SET_ALERT_EVENT_DISMISS,
-  pi as SET_ALERT_SPEC,
+  xt as SET_ALERT_EVENT_BEFORE_DISMISS,
+  Et as SET_ALERT_EVENT_DISMISS,
+  ui 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,
+  Ai as SET_AVATAR_SPEC,
+  Di as SET_BADGE_SPEC,
+  Lt as SET_BANNER_EVENT_BEFORE_DISMISS,
   Ct as SET_BANNER_EVENT_DISMISS,
-  mi as SET_BANNER_SPEC,
+  gi 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,
+  Bi as SET_BLOCKQUOTE_SPEC,
+  Pi as SET_BOX_SPEC,
+  pi as SET_BUTTON_SPEC,
+  Wi as SET_CARD_SPEC,
+  $i as SET_CHECKBOX_SPEC,
+  Zi as SET_CONTAINER_SPEC,
+  ji as SET_DETAILS_SPEC,
+  Xi as SET_DIVIDER_SPEC,
+  Si as SET_EXPANDER_SPEC,
+  Yi as SET_FIELDSET_SPEC,
+  tn as SET_FIGURE_SPEC,
+  an as SET_GRID_ITEM_SPEC,
+  rn as SET_GRID_SPEC,
+  dn as SET_HEADING_SPEC,
+  si as SET_ICON_NAMES,
+  li as SET_ICON_SPEC,
+  bi as SET_IMAGE_SPEC,
+  K as SET_IMAGE_TAG_NAME,
+  ln as SET_INLINE_SPEC,
+  cn as SET_INPUT_SPEC,
+  Mt as SET_LIGHTSWITCH_EVENT_CHANGE,
+  fi as SET_LIGHTSWITCH_SPEC,
+  st as SET_LIGHTSWITCH_STORAGE_KEY,
+  X as SET_LIGHTSWITCH_TAG_NAME,
+  mi as SET_LINK_SPEC,
+  hn as SET_LOGO_SPEC,
+  qt as SET_MENU_EVENT_CHOOSE,
+  wi as SET_MENU_SPEC,
+  Q as SET_MENU_TAG_NAME,
+  Ei as SET_NAV_SPEC,
+  Y as SET_NAV_TAG_NAME,
+  kn as SET_PAGE_SPEC,
+  bn as SET_PANEL_SPEC,
+  fn as SET_PATTERN_SPEC,
+  Sn as SET_POSTER_SPEC,
+  En as SET_PROSE_SPEC,
+  Ln as SET_RADIOS_SPEC,
+  Li as SET_RANGE_SPEC,
+  J as SET_RANGE_TAG_NAME,
+  Mn as SET_ROOT_SPEC,
+  Mi as SET_SIDEBAR_SPEC,
+  tt as SET_SIDEBAR_TAG_NAME,
+  In as SET_SPINNER_SPEC,
+  An as SET_STACK_SPEC,
+  Dn as SET_SURFACE_SPEC,
+  Hn as SET_SWITCH_SPEC,
+  Bn as SET_TEXTAREA_SPEC,
+  Hi as SET_TEXT_SPEC,
+  Ii as SET_VIDEO_SPEC,
+  et as SET_VIDEO_TAG_NAME,
+  $t as buildSetAlert,
+  Le as buildSetAvatar,
+  Ce as buildSetBadge,
+  jt as buildSetBanner,
+  Me as buildSetBlockquote,
+  qe as buildSetBox,
+  ht as buildSetButton,
+  Ie as buildSetCard,
+  Te as buildSetCheckbox,
+  Ae as buildSetContainer,
+  _e as buildSetDetails,
+  De as buildSetDivider,
+  ae as buildSetExpander,
+  It as buildSetFieldset,
+  Ve as buildSetFigure,
+  He as buildSetGrid,
+  Ne as buildSetGridItem,
+  Be 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,
+  Xt as buildSetImage,
+  Oe as buildSetInline,
+  Pe as buildSetInput,
+  ee as buildSetLightswitch,
+  zt as buildSetLink,
+  Ke as buildSetLogo,
+  ne as buildSetMenu,
+  de as buildSetNav,
+  Xe as buildSetPage,
+  Qe as buildSetPanel,
+  Ye as buildSetPattern,
+  Je as buildSetPoster,
+  ti as buildSetProse,
+  ei as buildSetRadios,
+  le as buildSetRange,
+  ii as buildSetRoot,
+  he as buildSetSidebar,
+  ni as buildSetSpinner,
+  ri as buildSetStack,
+  ai as buildSetSurface,
+  oi as buildSetSwitch,
+  it as buildSetText,
+  di as buildSetTextarea,
+  ke as buildSetVideo,
+  Gt as defineSetAlert,
+  Kt as defineSetBanner,
+  On as defineSetComponents,
+  Yt as defineSetImage,
+  ie as defineSetLightswitch,
+  re as defineSetMenu,
+  se as defineSetNav,
+  pe as defineSetRange,
+  me as defineSetSidebar,
+  be as defineSetVideo,
+  ye as getSetInitials,
+  ci as renderSetAlert,
+  Ti as renderSetAvatar,
+  _i as renderSetBadge,
+  ki as renderSetBanner,
+  Ni as renderSetBlockquote,
+  Oi as renderSetBox,
+  mt as renderSetButton,
+  Ri as renderSetCard,
+  Ui as renderSetCheckbox,
+  Gi as renderSetContainer,
+  Fi as renderSetDetails,
+  Ki as renderSetDivider,
+  oe as renderSetExpander,
+  Qi as renderSetFieldset,
+  Ji as renderSetFigure,
+  en as renderSetGrid,
+  nn as renderSetGridItem,
+  on as renderSetHeading,
+  Pt as renderSetIcon,
+  Qt as renderSetImage,
+  sn as renderSetInline,
+  pn as renderSetInput,
+  vi as renderSetLightswitch,
+  hi as renderSetLink,
+  un as renderSetLogo,
+  yi as renderSetMenu,
+  xi as renderSetNav,
+  mn as renderSetPage,
+  gn as renderSetPanel,
+  vn as renderSetPattern,
+  wn as renderSetPoster,
+  yn as renderSetPosterImage,
+  xn as renderSetProse,
+  zn as renderSetRadios,
+  zi as renderSetRange,
+  Cn as renderSetRoot,
+  Ci as renderSetSidebar,
+  qn as renderSetSpinner,
+  Tn as renderSetStack,
+  _n as renderSetSurface,
+  Vn as renderSetSwitch,
+  Vi as renderSetText,
+  Nn as renderSetTextarea,
+  qi as renderSetVideo,
   m as serializeSetNode
 };
 //# sourceMappingURL=index.js.map