@monospaced/set-core 0.16.0 → 0.17.0

package/dist/index.js

@@ -30,7 +30,7 @@ function m(t) {
 function H(t) {
   return /^[A-Za-z][\w:-]*$/.test(t);
 }
-function v(t) {
+function b(t) {
   if (t === void 0) return;
   const n = t.trim();
   if (n) {
@@ -792,21 +792,21 @@ function R({
   size: r = "md",
   title: a
 }) {
-  const o = St[i];
-  if (!o)
+  const d = St[i];
+  if (!d)
     throw new Error(`Unknown icon name: ${i}`);
-  const d = v(n), l = a?.trim();
-  if (!t && !l)
+  const o = b(n), s = a?.trim();
+  if (!t && !s)
     throw new Error("title must be non-empty when ariaHidden is false.");
-  if (!t && !d)
+  if (!t && !o)
     throw new Error("id must be provided when ariaHidden is false.");
-  const p = t ? void 0 : `${d}-title`, s = [];
-  return t || s.push({
+  const p = t ? void 0 : `${o}-title`, l = [];
+  return t || l.push({
     kind: "element",
     tag: "title",
     attrs: { id: p },
-    children: [{ kind: "text", value: l }]
-  }), s.push(...xt(o)), {
+    children: [{ kind: "text", value: s }]
+  }), l.push(...xt(d)), {
     kind: "element",
     tag: "svg",
     attrs: {
@@ -817,14 +817,14 @@ function R({
       "data-size": r,
       fill: "none",
       height: "24",
-      id: d,
+      id: o,
       role: t ? void 0 : "img",
       stroke: "currentColor",
       "stroke-width": "1.75",
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    children: s
+    children: l
   };
 }
 function Wt(t) {
@@ -950,7 +950,7 @@ function Ut({
   size: e = "md",
   tone: i = "default"
 } = {}) {
-  const r = v(t), o = [
+  const r = b(t), d = [
     {
       kind: "element",
       tag: "svg",
@@ -969,13 +969,13 @@ function Ut({
         [360, 660],
         [360, 360],
         [360, 60]
-      ].map(([d, l]) => ({
+      ].map(([o, s]) => ({
         kind: "element",
         tag: "rect",
         attrs: {
           class: "cell",
-          x: String(d),
-          y: String(l),
+          x: String(o),
+          y: String(s),
           width: "180",
           height: "180"
         },
@@ -983,7 +983,7 @@ function Ut({
       }))
     }
   ];
-  return n && o.push({
+  return n && d.push({
     kind: "element",
     tag: "span",
     attrs: { class: "visually-hidden" },
@@ -998,7 +998,7 @@ function Ut({
       id: r,
       role: n ? "status" : void 0
     },
-    children: o
+    children: d
   };
 }
 function bt(t = {}) {
@@ -1079,23 +1079,23 @@ function ht(t) {
     controls: i,
     disabled: r,
     disclosure: a,
-    form: o,
-    haspopup: d,
-    id: l,
+    form: d,
+    haspopup: o,
+    id: s,
     icon: p,
-    iconMirrored: s,
+    iconMirrored: l,
     iconPlacement: c = "start",
     label: h,
-    labelVisibility: b = "visible",
-    name: w,
-    size: f = "md",
+    labelVisibility: g = "visible",
+    name: y,
+    size: v = "md",
     tone: z = "default",
-    type: q,
-    value: x
-  } = t, k = p || void 0, C = !!k;
-  if (b !== "visible" && !C)
+    type: M,
+    value: S
+  } = t, w = p || void 0, x = !!w;
+  if (g !== "visible" && !x)
     throw new Error("labelVisibility requires icon when label is not visible.");
-  const E = C && k ? {
+  const E = x && w ? {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
@@ -1104,8 +1104,8 @@ function ht(t) {
         kind: "raw",
         html: Wt({
           ariaHidden: !0,
-          mirrored: s,
-          name: k,
+          mirrored: l,
+          name: w,
           size: "fill"
         })
       },
@@ -1116,27 +1116,27 @@ function ht(t) {
         }
       ] : []
     ]
-  } : null, S = {
+  } : null, L = {
     kind: "element",
     tag: "span",
     attrs: { class: "label" },
     children: [{ kind: "text", value: h }]
-  }, I = n ? {
+  }, A = n ? {
     kind: "element",
     tag: "span",
     attrs: { class: "status" },
     children: [{ kind: "text", value: ", busy" }]
-  } : null, A = n && !C ? {
+  } : null, V = n && !x ? {
     kind: "element",
     tag: "span",
     attrs: { class: "spinner-overlay" },
     children: [
       {
         kind: "raw",
-        html: bt({ size: $t[f] })
+        html: bt({ size: $t[v] })
       }
     ]
-  } : null, V = E ? c === "end" ? [S, E] : [E, S] : A ? [A, S] : [S], M = I ? [...V, I] : V, N = Et(n);
+  } : null, q = E ? c === "end" ? [L, E] : [E, L] : V ? [V, L] : [L], I = A ? [...q, A] : q, N = Et(n);
   return {
     kind: "element",
     tag: "button",
@@ -1144,21 +1144,21 @@ function ht(t) {
       "aria-controls": a && i || void 0,
       "aria-disabled": N["aria-disabled"],
       "aria-expanded": a ? "false" : void 0,
-      "aria-haspopup": d || void 0,
+      "aria-haspopup": o || void 0,
       class: "set-button",
       "data-activity": N["data-activity"],
       "data-appearance": e,
-      "data-label-visibility": b === "visible" ? void 0 : b,
-      "data-size": f,
+      "data-label-visibility": g === "visible" ? void 0 : g,
+      "data-size": v,
       "data-tone": z === "neutral" ? "neutral" : void 0,
       disabled: !!r,
-      form: o || void 0,
-      id: l || void 0,
-      name: w || void 0,
-      type: q || "button",
-      value: x || void 0
+      form: d || void 0,
+      id: s || void 0,
+      name: y || void 0,
+      type: M || "button",
+      value: S || void 0
     },
-    children: M
+    children: I
   };
 }
 function mt(t) {
@@ -1404,16 +1404,16 @@ function Kt({
   inlineSize: i = "full",
   message: r,
   size: a = "md",
-  tone: o,
-  title: d
+  tone: d,
+  title: o
 }) {
-  const l = v(e), p = n.trim() === "" ? U : n, s = [];
-  return d && s.push({
+  const s = b(e), p = n.trim() === "" ? U : n, l = [];
+  return o && l.push({
     kind: "element",
     tag: "p",
     attrs: { class: "title" },
-    children: [{ kind: "text", value: d }]
-  }), s.push({
+    children: [{ kind: "text", value: o }]
+  }), l.push({
     kind: "element",
     tag: "p",
     attrs: { class: "message" },
@@ -1427,9 +1427,9 @@ function Kt({
       "data-dismissible-label": t ? p : void 0,
       "data-inline-size": i === "fit" ? "fit" : void 0,
       "data-size": a,
-      "data-tone": o || void 0,
-      id: l,
-      role: jt(o)
+      "data-tone": d || void 0,
+      id: s,
+      role: jt(d)
     },
     children: [
       {
@@ -1439,7 +1439,7 @@ function Kt({
         children: [
           R({
             ariaHidden: !0,
-            name: Ft(o),
+            name: Ft(d),
             size: a
           })
         ]
@@ -1448,7 +1448,7 @@ function Kt({
         kind: "element",
         tag: "div",
         attrs: { class: "content" },
-        children: s
+        children: l
       }
     ]
   };
@@ -1652,28 +1652,28 @@ function Ct(t) {
     download: i,
     href: r,
     id: a,
-    icon: o,
-    iconPlacement: d = "start",
-    label: l,
+    icon: d,
+    iconPlacement: o = "start",
+    label: s,
     labelVisibility: p = "visible",
-    rel: s,
+    rel: l,
     size: c = "md",
     target: h,
-    tone: b = "default",
-    underline: w
-  } = t, f = v(a), z = o?.trim() || void 0;
+    tone: g = "default",
+    underline: y
+  } = t, v = b(a), z = d?.trim() || void 0;
   if (p !== "visible" && !!!z)
     throw new Error("labelVisibility requires icon when label is not visible.");
-  const x = Qt(i), k = z ? {
+  const S = Qt(i), w = z ? {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
     children: [{ kind: "raw", html: z }]
-  } : null, C = {
+  } : null, x = {
     kind: "element",
     tag: "span",
     attrs: { class: "label" },
-    children: [{ kind: "text", value: l }]
+    children: [{ kind: "text", value: s }]
   };
   return {
     kind: "element",
@@ -1684,15 +1684,15 @@ function Ct(t) {
       "data-appearance": n === "text" ? void 0 : n,
       "data-label-visibility": p === "visible" ? void 0 : p,
       "data-size": c,
-      "data-tone": b === "neutral" ? "neutral" : void 0,
-      "data-underline": w && n === "text" ? !0 : void 0,
-      download: x,
+      "data-tone": g === "neutral" ? "neutral" : void 0,
+      "data-underline": y && n === "text" ? !0 : void 0,
+      download: S,
       href: r,
-      id: f,
-      rel: x ? void 0 : s || void 0,
-      target: x ? void 0 : h || void 0
+      id: v,
+      rel: S ? void 0 : l || void 0,
+      target: S ? void 0 : h || void 0
     },
-    children: k ? d === "end" ? [C, k] : [k, C] : [C]
+    children: w ? o === "end" ? [x, w] : [w, x] : [x]
   };
 }
 function vi(t) {
@@ -1904,11 +1904,11 @@ function Jt({
   dismissibleLabel: i = j,
   id: r,
   message: a,
-  tone: o
+  tone: d
 }) {
   if (!!t != !!n)
     throw new Error("actionHref and actionLabel must be provided together.");
-  const d = v(r), l = i.trim() === "" ? j : i, p = [{ kind: "text", value: a }];
+  const o = b(r), s = i.trim() === "" ? j : i, p = [{ kind: "text", value: a }];
   return t && n && (p.push({ kind: "text", value: " " }), p.push(
     Ct({
       href: t,
@@ -1923,9 +1923,9 @@ function Jt({
       "data-set-content-theme": "dark",
       "data-set-surface": "default",
       "data-dismissible": e,
-      "data-dismissible-label": e ? l : void 0,
-      "data-tone": o || void 0,
-      id: d
+      "data-dismissible-label": e ? s : void 0,
+      "data-tone": d || void 0,
+      id: o
     },
     children: [
       {
@@ -2067,111 +2067,110 @@ const wi = {
 }, K = "set-image";
 function ee({
   adaptive: t,
-  animated: n,
-  alt: e = "",
-  aspectRatio: i,
-  fit: r = "intrinsic",
-  gravity: a = "C",
-  height: o,
+  alt: n = "",
+  aspectRatio: e,
+  fit: i = "intrinsic",
+  gravity: r = "C",
+  height: a,
   id: d,
-  lazy: l,
-  leadSrc: p,
-  priority: s,
-  radius: c,
-  shadow: h,
-  sizes: b,
-  sources: w,
-  src: f,
-  srcSet: z,
-  still: q,
-  width: x
+  lazy: o,
+  leadSrc: s,
+  priority: p,
+  radius: l,
+  shadow: c,
+  sizes: h,
+  sources: g,
+  src: y,
+  srcSet: v,
+  stillSrc: z,
+  width: M
 }) {
-  const k = r === "cover", C = v(d), E = f.trim(), S = z?.trim(), I = p?.trim(), A = q?.trim(), V = b?.trim(), M = w?.map((u, L) => {
-    const T = u.srcSet.trim(), y = u.media?.trim(), g = u.type?.trim(), Nt = u.sizes?.trim(), Bt = u.leadSrc?.trim(), Ot = u.still?.trim();
+  const S = i === "cover", w = b(d), x = y.trim(), E = v?.trim(), L = s?.trim(), A = z?.trim(), V = h?.trim(), q = g?.map((u, C) => {
+    const T = u.srcSet.trim(), f = u.media?.trim(), k = u.type?.trim(), Nt = u.sizes?.trim(), Bt = u.leadSrc?.trim(), Ot = u.stillSrc?.trim();
     if (!T)
-      throw new Error(`sources[${L}].srcSet must be non-empty.`);
+      throw new Error(`sources[${C}].srcSet must be non-empty.`);
     return {
       height: u.height,
       leadSrc: Bt || void 0,
-      media: y || void 0,
+      media: f || void 0,
       sizes: Nt || void 0,
       srcSet: T,
-      still: Ot || void 0,
-      type: g || void 0,
+      stillSrc: Ot || void 0,
+      type: k || void 0,
       width: u.width
     };
   }) || [];
-  if (!E)
+  if (!x)
     throw new Error("src must be a non-empty string.");
   if (t && [
+    x,
     E,
-    S,
-    ...M.map((u) => u.srcSet)
+    ...q.map((u) => u.srcSet)
   ].some((u) => u?.includes("#")))
     throw new Error("adaptive sources must not contain URL fragments.");
-  const N = !!(n && t), nt = !!(n && I), $ = !!I || M.some((u) => u.leadSrc);
-  if (!n && $)
-    throw new Error("leadSrc requires animated.");
-  if (n) {
+  const I = !!A, N = !!(I && t), nt = !!(I && L), $ = !!L || q.some((u) => u.leadSrc);
+  if (!I && $)
+    throw new Error("leadSrc requires a stillSrc.");
+  if (!I && q.some((u) => u.stillSrc))
+    throw new Error("sources stillSrc requires a top-level stillSrc.");
+  if (I) {
     const u = [
+      x,
       E,
-      S,
-      I,
-      ...M.flatMap((y) => [y.srcSet, y.leadSrc])
-    ].filter((y) => !!y), L = u.filter((y) => y.includes("{scheme}"));
-    if (t && L.length !== u.length)
+      L,
+      ...q.flatMap((f) => [f.srcSet, f.leadSrc])
+    ].filter((f) => !!f), C = u.filter((f) => f.includes("{scheme}"));
+    if (t && C.length !== u.length)
       throw new Error(
         "adaptive animated sources must contain a {scheme} placeholder."
       );
-    if (!t && L.length > 0)
+    if (!t && C.length > 0)
       throw new Error(
         "the {scheme} placeholder requires adaptive to enable light/dark."
       );
-    if (!A)
-      throw new Error("animated requires a still.");
     if ([
       A,
-      ...M.map((y) => y.still)
-    ].filter((y) => !!y).some((y) => y.includes("#")))
-      throw new Error("animated still must not contain URL fragments.");
+      ...q.map((f) => f.stillSrc)
+    ].filter((f) => !!f).some((f) => f.includes("#")))
+      throw new Error("stillSrc must not contain URL fragments.");
   }
-  const kt = (u, L) => u.split(/,\s+/).map((T) => {
-    const [y, ...g] = T.trim().split(/\s+/);
-    if (!y || g.length > 1)
+  const kt = (u, C) => u.split(/,\s+/).map((T) => {
+    const [f, ...k] = T.trim().split(/\s+/);
+    if (!f || k.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(" ");
+    return [`${f}#${C}`, ...k].join(" ");
   }).join(", "), rt = (u) => {
-    const L = {
+    const C = {
       kind: "element",
       tag: "img",
       attrs: {
-        alt: e,
+        alt: n,
         class: "img",
-        "data-scheme": u && M.length === 0 ? u : void 0,
-        fetchpriority: s ? "high" : void 0,
-        height: k ? void 0 : o ? String(o) : void 0,
-        loading: l && !s ? "lazy" : void 0,
-        sizes: M.length > 0 ? void 0 : V || void 0,
-        src: u ? `${E}#${u}` : E,
-        srcset: S && u ? kt(S, u) : S || void 0,
-        width: k ? void 0 : x ? String(x) : void 0
+        "data-scheme": u && q.length === 0 ? u : void 0,
+        fetchpriority: p ? "high" : void 0,
+        height: S ? void 0 : a ? String(a) : void 0,
+        loading: o && !p ? "lazy" : void 0,
+        sizes: q.length > 0 ? void 0 : V || void 0,
+        src: u ? `${x}#${u}` : x,
+        srcset: E && u ? kt(E, u) : E || void 0,
+        width: S ? void 0 : M ? String(M) : void 0
       },
       children: []
     };
-    if (M.length === 0)
-      return L;
-    const T = M.map((y) => ({
+    if (q.length === 0)
+      return C;
+    const T = q.map((f) => ({
       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
+        height: f.height ? String(f.height) : void 0,
+        media: f.media,
+        sizes: f.sizes,
+        srcset: u ? kt(f.srcSet, u) : f.srcSet,
+        type: f.type,
+        width: f.width ? String(f.width) : void 0
       },
       children: []
     }));
@@ -2179,21 +2178,21 @@ function ee({
       kind: "element",
       tag: "picture",
       attrs: { "data-scheme": u },
-      children: [...T, L]
+      children: [...T, C]
     };
-  }, at = "(prefers-reduced-motion: reduce)", W = (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) => ({
+  }, at = "(prefers-reduced-motion: reduce)", W = (u, C) => C ? u.replaceAll("{scheme}", C) : u, ot = (u, C) => C ? `${u}#${C}` : u, gt = (u) => {
+    const C = q.filter((k) => k.stillSrc).map((k) => ({
       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
+        height: k.height ? String(k.height) : void 0,
+        media: k.media ? `${at} and ${k.media}` : at,
+        srcset: ot(k.stillSrc, u),
+        width: k.width ? String(k.width) : void 0
       },
       children: []
     }));
-    L.push({
+    C.push({
       kind: "element",
       tag: "source",
       attrs: {
@@ -2202,31 +2201,31 @@ function ee({
       },
       children: []
     });
-    const T = M.map((g) => ({
+    const T = q.map((k) => ({
       kind: "element",
       tag: "source",
       attrs: {
-        height: g.height ? String(g.height) : void 0,
-        media: g.media,
-        sizes: g.sizes,
-        srcset: W(g.srcSet, u),
-        type: g.type,
-        width: g.width ? String(g.width) : void 0
+        height: k.height ? String(k.height) : void 0,
+        media: k.media,
+        sizes: k.sizes,
+        srcset: W(k.srcSet, u),
+        type: k.type,
+        width: k.width ? String(k.width) : void 0
       },
       children: []
-    })), y = {
+    })), f = {
       kind: "element",
       tag: "img",
       attrs: {
-        alt: e,
+        alt: n,
         class: "img",
-        fetchpriority: s ? "high" : void 0,
-        height: k ? void 0 : o ? String(o) : void 0,
-        loading: l && !s ? "lazy" : void 0,
-        sizes: M.length > 0 ? void 0 : V || void 0,
-        src: W(E, u),
-        srcset: S ? W(S, u) : void 0,
-        width: k ? void 0 : x ? String(x) : void 0
+        fetchpriority: p ? "high" : void 0,
+        height: S ? void 0 : a ? String(a) : void 0,
+        loading: o && !p ? "lazy" : void 0,
+        sizes: q.length > 0 ? void 0 : V || void 0,
+        src: W(x, u),
+        srcset: E ? W(E, u) : void 0,
+        width: S ? void 0 : M ? String(M) : void 0
       },
       children: []
     };
@@ -2234,44 +2233,44 @@ function ee({
       kind: "element",
       tag: "picture",
       attrs: { "data-scheme": u },
-      children: [...L, ...T, y]
+      children: [...C, ...T, f]
     };
   }, Vt = (u) => {
-    const L = "(prefers-reduced-motion: no-preference)", T = M.map((g) => {
-      if (g.leadSrc)
+    const C = "(prefers-reduced-motion: no-preference)", T = q.map((k) => {
+      if (k.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: W(g.leadSrc, u),
-            type: g.type,
-            width: g.width ? String(g.width) : void 0
+            height: k.height ? String(k.height) : void 0,
+            media: k.media ? `${C} and ${k.media}` : C,
+            sizes: k.sizes,
+            srcset: W(k.leadSrc, u),
+            type: k.type,
+            width: k.width ? String(k.width) : void 0
           },
           children: []
         };
-    }).filter((g) => !!g);
+    }).filter((k) => !!k);
     T.push({
       kind: "element",
       tag: "source",
       attrs: {
-        media: L,
-        sizes: M.length > 0 ? void 0 : V || void 0,
-        srcset: W(I, u)
+        media: C,
+        sizes: q.length > 0 ? void 0 : V || void 0,
+        srcset: W(L, u)
       },
       children: []
     });
-    const y = {
+    const f = {
       kind: "element",
       tag: "img",
       attrs: {
         alt: "",
         class: "img",
-        height: k ? void 0 : o ? String(o) : void 0,
+        height: S ? void 0 : a ? String(a) : void 0,
         src: ot(A, u),
-        width: k ? void 0 : x ? String(x) : void 0
+        width: S ? void 0 : M ? String(M) : void 0
       },
       children: []
     };
@@ -2279,24 +2278,24 @@ function ee({
       kind: "element",
       tag: "picture",
       attrs: { "data-scheme": u, "data-layer": "lead" },
-      children: [...T, y]
+      children: [...T, f]
     };
-  }, dt = (u) => nt ? [gt(u), Vt(u)] : [gt(u)], Ht = n ? N ? [...dt("light"), ...dt("dark")] : dt() : t ? [rt("light"), rt("dark")] : [rt()], G = [];
-  return o && G.push(`--set-image-block-size: ${o / 16}rem`), x && G.push(`--set-image-inline-size: ${x / 16}rem`), {
+  }, dt = (u) => nt ? [gt(u), Vt(u)] : [gt(u)], Ht = I ? N ? [...dt("light"), ...dt("dark")] : dt() : t ? [rt("light"), rt("dark")] : [rt()], G = [];
+  return a && G.push(`--set-image-block-size: ${a / 16}rem`), M && G.push(`--set-image-inline-size: ${M / 16}rem`), {
     kind: "element",
     tag: K,
     attrs: {
       class: "set-image",
       "data-adaptive": !!t,
-      "data-animated": !!n,
+      "data-animated": !!I,
       "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,
+      "data-aspect-ratio": S && !a ? e : void 0,
+      "data-fluid": i === "fluid",
+      "data-gravity": S && r !== "C" ? r : void 0,
+      "data-shadow": !!c,
+      "data-object-fit": S ? "cover" : void 0,
+      "data-radius": !!l,
+      id: w,
       style: G.length > 0 ? G.join("; ") : void 0
     },
     children: Ht
@@ -2336,12 +2335,7 @@ const Si = {
   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.",
+      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 an animated image (opted in by `stillSrc`), it pairs light/dark webp instead, via a `{scheme}` placeholder in the URLs.",
       type: { kind: "boolean" }
     },
     alt: {
@@ -2427,11 +2421,11 @@ const Si = {
             type: { kind: "string" }
           },
           leadSrc: {
-            description: "Intro overlay for this source in an `animated` sequence.",
+            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.",
+          stillSrc: {
+            description: "Reduced-motion still for this source's animated asset. For a light/dark still, use an adaptive SVG.",
             type: { kind: "string" }
           },
           type: {
@@ -2450,12 +2444,11 @@ const Si = {
       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.",
+      description: "An intro overlay that sequences an animated image (requires `stillSrc`): `leadSrc` plays once, then the component reveals `src` after a fixed hold. Follows the same `{scheme}` rules as animated sources (see `stillSrc`).",
       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",
+    stillSrc: {
+      description: "Reduced-motion still; providing it marks the image as animated (e.g. an animated `webp` in `src`). The still is shown when 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`. With `adaptive`, the animated `src`/`srcSet`/`sources` URLs carry no Cloudinary version and a `{scheme}` placeholder — matching Screen's animated exports — which the component substitutes across a light/dark pair; without it, a single unthemed animated asset renders. Add a `leadSrc` to sequence: it plays once as an overlay, then reveals `src` after a fixed hold.",
       type: { kind: "string" }
     },
     src: {
@@ -2479,7 +2472,7 @@ const Si = {
       {
         target: { on: "host" },
         attribute: "data-animated",
-        condition: { kind: "when-truthy", prop: "animated" }
+        condition: { kind: "when-non-empty", prop: "stillSrc" }
       },
       {
         target: { on: "host" },
@@ -2598,7 +2591,7 @@ function oe({
   labelLight: i = pt,
   size: r = "md"
 }) {
-  const a = v(n), o = e.trim() === "" ? lt : e, d = i.trim() === "" ? pt : i;
+  const a = b(n), d = e.trim() === "" ? lt : e, o = i.trim() === "" ? pt : i;
   return {
     kind: "element",
     tag: X,
@@ -2617,8 +2610,8 @@ function oe({
           type: "button"
         },
         children: [
-          vt("dark", o),
-          vt("light", d)
+          vt("dark", d),
+          vt("light", o)
         ]
       }
     ]
@@ -2776,31 +2769,31 @@ function se({
   size: i = "md",
   triggerActivity: r,
   triggerIcon: a,
-  triggerIconMirrored: o,
-  triggerIconPlacement: d,
-  triggerLabel: l,
+  triggerIconMirrored: d,
+  triggerIconPlacement: o,
+  triggerLabel: s,
   triggerLabelVisibility: p
 }) {
-  const s = n.trim();
-  if (!s)
+  const l = n.trim();
+  if (!l)
     throw new Error("id must be a non-empty string.");
-  if (!H(s))
+  if (!H(l))
     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 c = `${s}-button`, h = `${s}-popup`, b = e.map((w) => ({
+  const c = `${l}-button`, h = `${l}-popup`, g = e.map((y) => ({
     kind: "element",
     tag: "button",
     attrs: {
-      "aria-disabled": w.disabled ? "true" : void 0,
-      "data-item-id": w.id || void 0,
+      "aria-disabled": y.disabled ? "true" : void 0,
+      "data-item-id": y.id || void 0,
       role: "menuitem",
       tabindex: "-1",
       type: "button"
     },
-    children: [{ kind: "text", value: w.label }]
+    children: [{ kind: "text", value: y.label }]
   }));
   return {
     kind: "element",
@@ -2809,7 +2802,7 @@ function se({
       class: "set-menu",
       "data-align": t === "start" ? void 0 : t,
       "data-size": i,
-      id: s
+      id: l
     },
     children: [
       {
@@ -2824,10 +2817,10 @@ function se({
             disclosure: !0,
             haspopup: "menu",
             icon: a,
-            iconMirrored: o,
-            iconPlacement: d,
+            iconMirrored: d,
+            iconPlacement: o,
             id: c,
-            label: l,
+            label: s,
             labelVisibility: p,
             size: i,
             tone: "neutral",
@@ -2845,7 +2838,7 @@ function se({
           id: h,
           role: "menu"
         },
-        children: b
+        children: g
       }
     ]
   };
@@ -2956,9 +2949,9 @@ function le() {
           e.preventDefault(), this.#d(!0);
           return;
         }
-        const a = this.ownerDocument.activeElement, o = this.#c(), d = o.indexOf(a);
+        const a = this.ownerDocument.activeElement, d = this.#c(), o = d.indexOf(a);
         if (a === i) {
-          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#l(0)), e.key === "ArrowDown" && (e.preventDefault(), this.#l(0)), e.key === "ArrowUp" && (e.preventDefault(), this.#l(o.length - 1));
+          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#l(0)), e.key === "ArrowDown" && (e.preventDefault(), this.#l(0)), e.key === "ArrowUp" && (e.preventDefault(), this.#l(d.length - 1));
           return;
         }
         if (r.contains(a)) {
@@ -2966,7 +2959,7 @@ function le() {
             e.preventDefault(), this.#s(a) || (this.#h(a), this.#d(!0));
             return;
           }
-          e.key === "ArrowDown" && (e.preventDefault(), this.#o(d + 1)), e.key === "ArrowUp" && (e.preventDefault(), this.#o(d - 1)), e.key === "Home" && (e.preventDefault(), this.#o(0)), e.key === "End" && (e.preventDefault(), this.#o(o.length - 1)), e.key === "Tab" && this.#d(!1);
+          e.key === "ArrowDown" && (e.preventDefault(), this.#o(o + 1)), e.key === "ArrowUp" && (e.preventDefault(), this.#o(o - 1)), e.key === "Home" && (e.preventDefault(), this.#o(0)), e.key === "End" && (e.preventDefault(), this.#o(d.length - 1)), e.key === "Tab" && this.#d(!1);
         }
       }, this.#i = (e) => {
         const i = e.relatedTarget;
@@ -3133,7 +3126,7 @@ function pe({
   label: i = ct,
   size: r = "md"
 } = {}) {
-  const a = v(e), o = i.trim() === "" ? ct : i;
+  const a = b(e), d = i.trim() === "" ? ct : i;
   return {
     kind: "element",
     tag: "button",
@@ -3161,7 +3154,7 @@ function pe({
             kind: "element",
             tag: "span",
             attrs: { class: "visually-hidden" },
-            children: [{ kind: "text", value: o }]
+            children: [{ kind: "text", value: d }]
           }
         ]
       }
@@ -3244,15 +3237,15 @@ function ue({
   expanderPosition: i = "start",
   id: r,
   items: a,
-  label: o,
-  size: d = "md"
+  label: d,
+  size: o = "md"
 }) {
-  const l = v(r), p = e?.trim() || void 0, s = n?.trim();
-  if (t && !s)
+  const s = b(r), p = e?.trim() || void 0, l = n?.trim();
+  if (t && !l)
     throw new Error(
       "contentId must be a non-empty string when collapsible is set."
     );
-  if (s && !H(s))
+  if (l && !H(l))
     throw new Error(
       "contentId must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
@@ -3281,15 +3274,15 @@ function ue({
       "data-collapsible": t,
       "data-expander-label": t && p ? p : void 0,
       "data-expander-position": t ? i : void 0,
-      "data-size": d,
-      id: l
+      "data-size": o,
+      id: s
     },
     children: [
       {
         kind: "element",
         tag: "nav",
         attrs: {
-          "aria-label": o || void 0,
+          "aria-label": d || void 0,
           class: "nav"
         },
         children: [
@@ -3298,7 +3291,7 @@ function ue({
             tag: "div",
             attrs: {
               class: "content",
-              id: s
+              id: l
             },
             children: [
               {
@@ -3519,20 +3512,20 @@ function me({
   inlineSize: i = "full",
   label: r,
   max: a,
-  min: o,
-  name: d,
-  size: l = "md",
+  min: d,
+  name: o,
+  size: s = "md",
   step: p,
-  value: s
+  value: l
 }) {
-  const c = e.trim(), h = t?.trim(), b = d?.trim();
+  const c = e.trim(), h = t?.trim(), g = o?.trim();
   if (!c)
     throw new Error("id must be a non-empty string.");
   if (!H(c))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const w = h ? `${c}-description` : void 0, f = [
+  const y = h ? `${c}-description` : void 0, v = [
     {
       kind: "element",
       tag: "div",
@@ -3548,7 +3541,7 @@ function me({
           kind: "element",
           tag: "output",
           attrs: { class: "output", for: c },
-          children: s != null ? [{ kind: "text", value: String(s) }] : []
+          children: l != null ? [{ kind: "text", value: String(l) }] : []
         }
       ]
     },
@@ -3556,24 +3549,24 @@ function me({
       kind: "element",
       tag: "input",
       attrs: {
-        "aria-describedby": w,
+        "aria-describedby": y,
         class: "range",
         disabled: !!n,
         id: c,
         max: a != null ? String(a) : void 0,
-        min: o != null ? String(o) : void 0,
-        name: b || void 0,
+        min: d != null ? String(d) : void 0,
+        name: g || void 0,
         step: p != null ? String(p) : void 0,
         type: "range",
-        value: s != null ? String(s) : void 0
+        value: l != null ? String(l) : void 0
       },
       children: []
     }
   ];
-  return h && f.push({
+  return h && v.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: w },
+    attrs: { class: "description", id: y },
     children: [{ kind: "text", value: h }]
   }), {
     kind: "element",
@@ -3581,9 +3574,9 @@ function me({
     attrs: {
       class: "set-range",
       "data-inline-size": i === "fit" ? "fit" : void 0,
-      "data-size": l
+      "data-size": s
     },
-    children: f
+    children: v
   };
 }
 function Ii(t) {
@@ -3628,15 +3621,15 @@ function ke() {
         "value"
       );
       if (!i?.get || !i.set) return;
-      const r = i.get, a = i.set, o = () => this.#i();
+      const r = i.get, a = i.set, d = () => this.#i();
       Object.defineProperty(e, "value", {
         configurable: !0,
         enumerable: i.enumerable,
         get() {
           return r.call(this);
         },
-        set(d) {
-          a.call(this, d), o();
+        set(o) {
+          a.call(this, o), d();
         }
       }), this.#t = e;
     }
@@ -3798,11 +3791,11 @@ function ve({
   collapseLabel: i = O,
   footer: r,
   header: a,
-  id: o,
-  surface: d,
-  triggerLabel: l = ut
+  id: d,
+  surface: o,
+  triggerLabel: s = ut
 }) {
-  const p = o.trim(), s = i.trim() || O, c = l.trim() || ut;
+  const p = d.trim(), l = i.trim() || O, c = s.trim() || ut;
   if (!p)
     throw new Error("id must be a non-empty string.");
   if (!H(p))
@@ -3829,14 +3822,14 @@ function ve({
     attrs: { class: "footer" },
     children: [{ kind: "raw", html: r }]
   });
-  const b = `${p}-panel`;
+  const g = `${p}-panel`;
   return {
     kind: "element",
     tag: tt,
     attrs: {
       class: "set-sidebar",
       "data-above-notebook": t,
-      "data-collapse-label": s !== O ? s : void 0,
+      "data-collapse-label": l !== O ? l : void 0,
       "data-button-size": n,
       id: p
     },
@@ -3848,7 +3841,7 @@ function ve({
         children: [
           ht({
             appearance: "text",
-            controls: b,
+            controls: g,
             disclosure: !0,
             icon: "panel-left",
             iconMirrored: "rtl",
@@ -3865,8 +3858,8 @@ function ve({
         tag: "div",
         attrs: {
           class: "sidebar",
-          "data-set-surface": d,
-          id: b,
+          "data-set-surface": o,
+          id: g,
           tabindex: "-1"
         },
         children: h
@@ -4167,17 +4160,17 @@ function ye({
   height: i,
   id: r,
   loop: a,
-  muted: o,
-  playsInline: d,
-  poster: l,
+  muted: d,
+  playsInline: o,
+  poster: s,
   preload: p,
-  src: s,
+  src: l,
   width: c
 }) {
-  const h = v(r), b = s.trim(), w = l?.trim();
-  if (!b)
+  const h = b(r), g = l.trim(), y = s?.trim();
+  if (!g)
     throw new Error("src must be a non-empty string.");
-  const f = {
+  const v = {
     kind: "element",
     tag: "video",
     attrs: {
@@ -4186,11 +4179,11 @@ function ye({
       controls: !!n,
       height: i ? String(i) : void 0,
       loop: !!a,
-      muted: !!o,
-      playsinline: !!d,
-      poster: w || void 0,
+      muted: !!d,
+      playsinline: !!o,
+      poster: y || void 0,
       preload: p,
-      src: b,
+      src: g,
       width: c ? String(c) : void 0
     },
     children: []
@@ -4203,7 +4196,7 @@ function ye({
       "data-fluid": e === "fluid",
       id: h
     },
-    children: [f]
+    children: [v]
   };
 }
 function Di(t) {
@@ -4383,27 +4376,27 @@ function ze(t) {
     return r[0];
   const a = e.slice(1).find(Ee);
   if (a) {
-    const d = B(a);
-    return d ? `${r[0]}${d}` : void 0;
+    const o = B(a);
+    return o ? `${r[0]}${o}` : void 0;
   }
   if (e.length === 2) {
-    const d = B(e[1]);
-    if (!d) return;
-    r.push(d);
-    const l = e[1].split("-").filter(Boolean);
-    if (l.length === 2) {
-      const p = B(l[1]);
+    const o = B(e[1]);
+    if (!o) return;
+    r.push(o);
+    const s = e[1].split("-").filter(Boolean);
+    if (s.length === 2) {
+      const p = B(s[1]);
       p && r.push(p);
     }
     return r.slice(0, 3).join("");
   }
   if (e.length === 3) {
-    const d = B(e[1]), l = B(e[2]);
-    return !d || !l ? void 0 : (r.push(d, l), r.slice(0, 3).join(""));
+    const o = B(e[1]), s = B(e[2]);
+    return !o || !s ? void 0 : (r.push(o, s), r.slice(0, 3).join(""));
   }
-  const o = B(e.at(-1) || "");
-  if (o)
-    return r.push(o), r.slice(0, 3).join("");
+  const d = B(e.at(-1) || "");
+  if (d)
+    return r.push(d), r.slice(0, 3).join("");
 }
 const Le = {
   bot: "robot-1",
@@ -4464,43 +4457,43 @@ function Ae({
   entity: i = "person",
   id: r,
   initials: a,
-  name: o,
-  size: d = "md",
-  src: l
+  name: d,
+  size: o = "md",
+  src: s
 }) {
-  const p = v(r), s = Me(a), c = P(o), h = P(l), b = qe({
+  const p = b(r), l = Me(a), c = P(d), h = P(s), g = qe({
     alt: t,
     ariaHidden: n,
     name: c
-  }), w = s || ze(c), f = !!h, z = Ie({
+  }), y = l || ze(c), v = !!h, z = Ie({
     color: e,
     name: c
-  }), q = {
+  }), M = {
     "aria-hidden": n ? "true" : void 0,
-    "aria-label": !n && !f ? b : void 0,
+    "aria-label": !n && !v ? g : void 0,
     class: "set-avatar",
     "data-color": z === "neutral" ? void 0 : z,
     "data-entity": i === "person" ? void 0 : i,
-    "data-size": d,
+    "data-size": o,
     id: p,
-    role: !n && !f ? "img" : void 0
+    role: !n && !v ? "img" : void 0
   };
-  let x;
-  return f ? x = {
+  let S;
+  return v ? S = {
     kind: "element",
     tag: "img",
     attrs: {
-      alt: n ? "" : b || "",
+      alt: n ? "" : g || "",
       class: "img",
       src: h
     },
     children: []
-  } : w ? x = {
+  } : y ? S = {
     kind: "element",
     tag: "span",
     attrs: { class: "initials" },
-    children: [{ kind: "text", value: w }]
-  } : x = {
+    children: [{ kind: "text", value: y }]
+  } : S = {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
@@ -4514,8 +4507,8 @@ function Ae({
   }, {
     kind: "element",
     tag: "span",
-    attrs: q,
-    children: [x]
+    attrs: M,
+    children: [S]
   };
 }
 function Hi(t) {
@@ -4635,7 +4628,7 @@ function Te({
   size: i = "md",
   tone: r
 }) {
-  const a = v(n);
+  const a = b(n);
   return {
     kind: "element",
     tag: "span",
@@ -4728,25 +4721,25 @@ function it({
   id: i,
   linkVisited: r = !0,
   measured: a,
-  monospaced: o,
-  responsive: d,
-  size: l = "md",
+  monospaced: d,
+  responsive: o,
+  size: s = "md",
   tone: p = "default"
 }) {
-  const s = v(i), c = n === "p" ? "p" : "span", h = c === "p", b = h ? t ?? "start" : void 0;
+  const l = b(i), c = n === "p" ? "p" : "span", h = c === "p", g = h ? t ?? "start" : void 0;
   return {
     kind: "element",
     tag: c,
     attrs: {
       class: "set-text",
-      "data-align": b && b !== "start" ? b : void 0,
+      "data-align": g && g !== "start" ? g : void 0,
       "data-link-visited": r ? void 0 : "off",
       "data-measured": h ? a ?? !0 : void 0,
-      "data-monospaced": o,
-      "data-responsive": d,
-      "data-size": l,
+      "data-monospaced": d,
+      "data-responsive": o,
+      "data-size": s,
       "data-tone": p === "muted" ? "muted" : void 0,
-      id: s
+      id: l
     },
     children: [{ kind: "raw", html: e }]
   };
@@ -4885,16 +4878,16 @@ function _e({
   measured: i = !0,
   quote: r,
   responsive: a = !1,
-  size: o = "md"
+  size: d = "md"
 }) {
-  const d = v(e);
+  const o = b(e);
   return {
     kind: "element",
     tag: "figure",
     attrs: {
       class: "set-blockquote",
       "data-align": t === "start" ? void 0 : t,
-      id: d
+      id: o
     },
     children: [
       {
@@ -4908,7 +4901,7 @@ function _e({
             children: r,
             measured: i,
             responsive: a,
-            size: o
+            size: d
           })
         ]
       },
@@ -5007,11 +5000,11 @@ function De({
   id: i,
   paddingBlock: r = "md",
   paddingInline: a = "md",
-  radius: o,
-  responsive: d,
-  surface: l
+  radius: d,
+  responsive: o,
+  surface: s
 }) {
-  const p = v(i);
+  const p = b(i);
   return {
     kind: "element",
     tag: "div",
@@ -5019,11 +5012,11 @@ function De({
       class: "set-box",
       "data-background": t === "default" ? void 0 : t,
       "data-border": n,
-      "data-set-surface": l,
+      "data-set-surface": s,
       "data-padding-block": r,
       "data-padding-inline": a,
-      "data-radius": o,
-      "data-responsive": d,
+      "data-radius": d,
+      "data-responsive": o,
       id: p
     },
     children: e ? [{ kind: "raw", html: e }] : []
@@ -5152,17 +5145,17 @@ function Ve({
   id: i,
   note: r,
   surface: a,
-  title: o
+  title: d
 }) {
-  const d = v(i), l = n ? `h${n}` : "div", p = e ? [
+  const o = b(i), s = n ? `h${n}` : "div", p = e ? [
     {
       kind: "element",
       tag: "a",
       attrs: { href: e },
-      children: [{ kind: "text", value: o }]
+      children: [{ kind: "text", value: d }]
     }
-  ] : [{ kind: "text", value: o }], s = r ? [{ kind: "raw", html: r }] : [];
-  r && e && s.push({
+  ] : [{ kind: "text", value: d }], l = r ? [{ kind: "raw", html: r }] : [];
+  r && e && l.push({
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
@@ -5184,7 +5177,7 @@ function Ve({
     },
     {
       kind: "element",
-      tag: l,
+      tag: s,
       attrs: { class: "title" },
       children: p
     },
@@ -5199,14 +5192,14 @@ function Ve({
     kind: "element",
     tag: "p",
     attrs: { class: "note" },
-    children: s
+    children: l
   }), {
     kind: "element",
     tag: "div",
     attrs: {
       class: "set-card",
       "data-set-surface": a,
-      id: d
+      id: o
     },
     children: c
   };
@@ -5289,15 +5282,15 @@ function He({
   id: i,
   invalid: r,
   label: a,
-  name: o,
-  required: d,
-  size: l = "md",
+  name: d,
+  required: o,
+  size: s = "md",
   value: p
 }) {
-  const s = v(i), c = n?.trim();
-  if (c && !s)
+  const l = b(i), c = n?.trim();
+  if (c && !l)
     throw new Error("id must be provided when description is provided.");
-  const h = c ? `${s}-description` : void 0, b = !!e, f = [
+  const h = c ? `${l}-description` : void 0, g = !!e, v = [
     {
       kind: "element",
       tag: "label",
@@ -5308,13 +5301,13 @@ function He({
           tag: "input",
           attrs: {
             "aria-describedby": h,
-            "aria-invalid": !b && !!r ? "true" : void 0,
+            "aria-invalid": !g && !!r ? "true" : void 0,
             checked: !!t,
             class: "checkbox",
-            disabled: b,
-            id: s,
-            name: o || void 0,
-            required: !!d,
+            disabled: g,
+            id: l,
+            name: d || void 0,
+            required: !!o,
             type: "checkbox",
             value: p || void 0
           },
@@ -5329,7 +5322,7 @@ function He({
       ]
     }
   ];
-  return c && f.push({
+  return c && v.push({
     kind: "element",
     tag: "p",
     attrs: { class: "description", id: h },
@@ -5337,8 +5330,8 @@ function He({
   }), {
     kind: "element",
     tag: "div",
-    attrs: { class: "set-checkbox", "data-size": l },
-    children: f
+    attrs: { class: "set-checkbox", "data-size": s },
+    children: v
   };
 }
 function ji(t) {
@@ -5480,7 +5473,7 @@ function Ne({
   id: e,
   maxInlineSize: i = "default"
 }) {
-  const r = v(e);
+  const r = b(e);
   return {
     kind: "element",
     tag: "div",
@@ -5560,7 +5553,7 @@ function Be({
   summary: i,
   inlineSize: r = "full"
 }) {
-  const a = v(n);
+  const a = b(n);
   return {
     kind: "element",
     tag: "details",
@@ -5672,7 +5665,7 @@ function Oe({
   orientation: n = "horizontal",
   tone: e = "default"
 } = {}) {
-  const i = v(t);
+  const i = b(t);
   return {
     kind: "element",
     tag: n === "horizontal" ? "hr" : "span",
@@ -5758,16 +5751,16 @@ function Tt({
   id: i,
   invalid: r,
   legend: a,
-  inlineSize: o = "full"
+  inlineSize: d = "full"
 }) {
-  const d = n?.trim(), l = i.trim();
-  if (!l)
+  const o = n?.trim(), s = i.trim();
+  if (!s)
     throw new Error("id must be a non-empty string.");
-  if (!H(l))
+  if (!H(s))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const p = d ? `${l}-description` : void 0, s = !!e, c = !s && !!r, h = [
+  const p = o ? `${s}-description` : void 0, l = !!e, c = !l && !!r, h = [
     {
       kind: "element",
       tag: "legend",
@@ -5775,21 +5768,21 @@ function Tt({
       children: [{ kind: "text", value: a }]
     }
   ];
-  return d && h.push({
+  return o && h.push({
     kind: "element",
     tag: "p",
     attrs: { class: "description", id: p },
-    children: [{ kind: "text", value: d }]
+    children: [{ kind: "text", value: o }]
   }), t && h.push({ kind: "raw", html: t }), {
     kind: "element",
     tag: "fieldset",
     attrs: {
-      "aria-describedby": d ? p : void 0,
+      "aria-describedby": o ? p : void 0,
       "aria-invalid": c ? "true" : void 0,
       class: "set-fieldset",
-      "data-inline-size": o === "fit" ? "fit" : void 0,
-      disabled: s,
-      id: l
+      "data-inline-size": d === "fit" ? "fit" : void 0,
+      disabled: l,
+      id: s
     },
     children: h
   };
@@ -5893,7 +5886,7 @@ function Pe({
   inlineSize: r = "full",
   responsive: a = !1
 }) {
-  const o = v(i);
+  const d = b(i);
   return {
     kind: "element",
     tag: "figure",
@@ -5901,7 +5894,7 @@ function Pe({
       class: "set-figure",
       "data-align": t === "start" ? void 0 : t,
       "data-inline-size": r === "full" ? void 0 : r,
-      id: o
+      id: d
     },
     children: [
       { kind: "raw", html: e },
@@ -6002,7 +5995,7 @@ function Re({
   gap: n = "default",
   id: e
 }) {
-  const i = v(e);
+  const i = b(e);
   return {
     kind: "element",
     tag: "div",
@@ -6031,18 +6024,18 @@ function We({
   colSpanNarrow: i,
   colSpanWide: r,
   colStart: a,
-  colStartNarrow: o,
-  colStartWide: d,
-  id: l,
+  colStartNarrow: d,
+  colStartWide: o,
+  id: s,
   justify: p,
-  rowSpan: s,
+  rowSpan: l,
   rowSpanNarrow: c,
   rowSpanWide: h,
-  rowStart: b,
-  rowStartNarrow: w,
-  rowStartWide: f
+  rowStart: g,
+  rowStartNarrow: y,
+  rowStartWide: v
 }) {
-  const z = v(l);
+  const z = b(s);
   return {
     kind: "element",
     tag: "div",
@@ -6051,17 +6044,17 @@ function We({
       "data-align": t,
       "data-justify": p,
       "data-col-span-narrow": _(i),
-      "data-col-start-narrow": _(o),
+      "data-col-start-narrow": _(d),
       "data-col-span": _(e),
       "data-col-start": _(a),
       "data-col-span-wide": _(r),
-      "data-col-start-wide": _(d),
+      "data-col-start-wide": _(o),
       "data-row-span-narrow": _(c),
-      "data-row-start-narrow": _(w),
-      "data-row-span": _(s),
-      "data-row-start": _(b),
+      "data-row-start-narrow": _(y),
+      "data-row-span": _(l),
+      "data-row-start": _(g),
       "data-row-span-wide": _(h),
-      "data-row-start-wide": _(f),
+      "data-row-start-wide": _(v),
       id: z
     },
     children: n ? [{ kind: "raw", html: n }] : []
@@ -6290,9 +6283,9 @@ function Ue({
   opticalAlign: i,
   responsive: r,
   size: a = "md",
-  text: o
+  text: d
 }) {
-  const d = v(n);
+  const o = b(n);
   return {
     kind: "element",
     tag: e ? `h${e}` : "span",
@@ -6302,9 +6295,9 @@ function Ue({
       "data-optical-align": i,
       "data-responsive": r,
       "data-size": a,
-      id: d
+      id: o
     },
-    children: [{ kind: "text", value: o }]
+    children: [{ kind: "text", value: d }]
   };
 }
 function cn(t) {
@@ -6412,9 +6405,9 @@ function $e({
   gap: i = "md",
   id: r,
   justify: a = "start",
-  nowrap: o
+  nowrap: d
 }) {
-  const d = v(r);
+  const o = b(r);
   return {
     kind: "element",
     tag: n,
@@ -6423,8 +6416,8 @@ function $e({
       "data-align": t === "center" ? void 0 : t,
       "data-gap": i,
       "data-justify": a === "start" ? void 0 : a,
-      "data-nowrap": o,
-      id: d
+      "data-nowrap": d,
+      id: o
     },
     children: e ? [{ kind: "raw", html: e }] : []
   };
@@ -6524,28 +6517,28 @@ function Ge({
   id: i,
   invalid: r,
   label: a,
-  name: o,
-  pattern: d,
-  readOnly: l,
+  name: d,
+  pattern: o,
+  readOnly: s,
   required: p,
-  size: s = "md",
+  size: l = "md",
   spellcheck: c,
   type: h = "text",
-  value: b,
-  inlineSize: w = "full"
+  value: g,
+  inlineSize: y = "full"
 }) {
-  const f = i.trim(), z = n?.trim(), q = t === !1 ? !1 : t?.trim(), x = o?.trim(), k = d?.trim(), C = b;
-  if (!f)
+  const v = i.trim(), z = n?.trim(), M = t === !1 ? !1 : t?.trim(), S = d?.trim(), w = o?.trim(), x = g;
+  if (!v)
     throw new Error("id must be a non-empty string.");
-  if (!H(f))
+  if (!H(v))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const E = z ? `${f}-description` : void 0, S = h === "numeric", I = S ? "text" : h, A = k || (S ? "^[0-9]*$" : void 0), V = c === void 0 && S ? !1 : c, M = !!e, N = !M && !!l, $ = [
+  const E = z ? `${v}-description` : void 0, L = h === "numeric", A = L ? "text" : h, V = w || (L ? "^[0-9]*$" : void 0), q = c === void 0 && L ? !1 : c, I = !!e, N = !I && !!s, $ = [
     {
       kind: "element",
       tag: "label",
-      attrs: { class: "label", for: f },
+      attrs: { class: "label", for: v },
       children: [{ kind: "text", value: a }]
     },
     {
@@ -6553,19 +6546,19 @@ function Ge({
       tag: "input",
       attrs: {
         "aria-describedby": E,
-        "aria-invalid": !M && !N && !!r ? "true" : void 0,
-        autocomplete: q === !1 ? "off" : q || void 0,
+        "aria-invalid": !I && !N && !!r ? "true" : void 0,
+        autocomplete: M === !1 ? "off" : M || void 0,
         class: "input",
-        disabled: M,
-        id: f,
-        inputmode: S ? "numeric" : void 0,
-        name: x || void 0,
-        pattern: A,
+        disabled: I,
+        id: v,
+        inputmode: L ? "numeric" : void 0,
+        name: S || void 0,
+        pattern: V,
         readonly: N,
         required: !!p,
-        spellcheck: V === void 0 ? void 0 : String(V),
-        type: I,
-        value: C
+        spellcheck: q === void 0 ? void 0 : String(q),
+        type: A,
+        value: x
       },
       children: []
     }
@@ -6580,8 +6573,8 @@ function Ge({
     tag: "div",
     attrs: {
       class: "set-input",
-      "data-size": s,
-      "data-inline-size": w === "fit" ? "fit" : void 0
+      "data-size": l,
+      "data-inline-size": y === "fit" ? "fit" : void 0
     },
     children: $
   };
@@ -6844,7 +6837,7 @@ function ti({
   tone: r = "default",
   variant: a = "primary"
 }) {
-  const o = v(n), d = !!t && (a === "primary" || a === "graphic"), l = [
+  const d = b(n), o = !!t && (a === "primary" || a === "graphic"), s = [
     {
       kind: "element",
       tag: "span",
@@ -6852,20 +6845,20 @@ function ti({
       children: [{ kind: "text", value: e }]
     }
   ];
-  return d && l.push(
+  return o && s.push(
     a === "graphic" ? Je() : Ye()
   ), {
     kind: "element",
     tag: "div",
     attrs: {
       class: "set-logo",
-      "data-animated": d,
+      "data-animated": o,
       "data-size": i,
       "data-tone": r === "neutral" ? "neutral" : void 0,
       "data-variant": a === "primary" ? void 0 : a,
-      id: o
+      id: d
     },
-    children: l
+    children: s
   };
 }
 function bn(t) {
@@ -6966,22 +6959,22 @@ function ei({
   footer: i,
   header: r,
   headerBorder: a,
-  headerSize: o = "md",
-  id: d,
-  stickyHeader: l
+  headerSize: d = "md",
+  id: o,
+  stickyHeader: s
 }) {
-  const p = v(d), s = [];
-  return t && s.push({ kind: "raw", html: t }), s.push({
+  const p = b(o), l = [];
+  return t && l.push({ kind: "raw", html: t }), l.push({
     kind: "element",
     tag: "header",
     attrs: { class: "header" },
     children: [{ kind: "raw", html: r }]
-  }), s.push({
+  }), l.push({
     kind: "element",
     tag: "main",
     attrs: { class: "main" },
     children: e ? [{ kind: "raw", html: e }] : []
-  }), s.push({
+  }), l.push({
     kind: "element",
     tag: "footer",
     attrs: { class: "footer" },
@@ -6993,11 +6986,11 @@ function ei({
       class: "set-page",
       "data-center-main": n,
       "data-header-border": a,
-      "data-header-size": o,
-      "data-sticky-header": l,
+      "data-header-size": d,
+      "data-sticky-header": s,
       id: p
     },
-    children: s
+    children: l
   };
 }
 function fn(t) {
@@ -7099,7 +7092,7 @@ function ii({
   padding: e = "md",
   surface: i
 }) {
-  const r = v(n);
+  const r = b(n);
   return {
     kind: "element",
     tag: "div",
@@ -7173,7 +7166,7 @@ function ni({
   tone: i = "default",
   variant: r = "tile"
 } = {}) {
-  const a = v(n);
+  const a = b(n);
   return {
     kind: "element",
     tag: "div",
@@ -7272,7 +7265,7 @@ function ri({
   media: i,
   surface: r
 }) {
-  const a = v(e), o = n ? r ?? "default" : r, d = [
+  const a = b(e), d = n ? r ?? "default" : r, o = [
     {
       kind: "element",
       tag: "div",
@@ -7280,7 +7273,7 @@ function ri({
       children: [{ kind: "raw", html: i }]
     }
   ];
-  return t && d.push({
+  return t && o.push({
     kind: "element",
     tag: "div",
     attrs: { class: "content" },
@@ -7291,10 +7284,10 @@ function ri({
     attrs: {
       class: "set-poster",
       "data-set-content-theme": n,
-      "data-set-surface": o,
+      "data-set-surface": d,
       id: a
     },
-    children: d
+    children: o
   };
 }
 function Ln(t) {
@@ -7378,10 +7371,10 @@ function ai({
   id: i,
   linkVisited: r = !0,
   measured: a = !0,
-  monospaced: o,
-  responsive: d
+  monospaced: d,
+  responsive: o
 }) {
-  const l = v(i);
+  const s = b(i);
   return {
     kind: "element",
     tag: "div",
@@ -7391,9 +7384,9 @@ function ai({
       "data-hanging-punctuation": e,
       "data-link-visited": r ? void 0 : "off",
       "data-measured": a,
-      "data-monospaced": o,
-      "data-responsive": d,
-      id: l
+      "data-monospaced": d,
+      "data-responsive": o,
+      id: s
     },
     children: [{ kind: "raw", html: n }]
   };
@@ -7502,13 +7495,13 @@ function oi({
   invalid: i,
   radios: r,
   legend: a,
-  name: o,
-  orientation: d = "vertical",
-  required: l,
+  name: d,
+  orientation: o = "vertical",
+  required: s,
   size: p = "md",
-  value: s
+  value: l
 }) {
-  const c = e.trim(), h = o.trim(), b = s?.trim();
+  const c = e.trim(), h = d.trim(), g = l?.trim();
   if (!c)
     throw new Error("id must be a non-empty string.");
   if (!H(c))
@@ -7519,23 +7512,23 @@ function oi({
     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 w = r.map((k, C) => {
-    const E = k.value.trim(), S = k.label.trim(), I = k.description?.trim();
+  const y = r.map((w, x) => {
+    const E = w.value.trim(), L = w.label.trim(), A = w.description?.trim();
     if (!E)
-      throw new Error(`radios[${C}].value must be non-empty.`);
-    if (!S)
-      throw new Error(`radios[${C}].label must be non-empty.`);
+      throw new Error(`radios[${x}].value must be non-empty.`);
+    if (!L)
+      throw new Error(`radios[${x}].label must be non-empty.`);
     return {
-      description: I,
-      disabled: !!k.disabled,
-      label: S,
+      description: A,
+      disabled: !!w.disabled,
+      label: L,
       value: E
     };
   });
-  if (new Set(w.map((k) => k.value)).size !== w.length)
+  if (new Set(y.map((w) => w.value)).size !== y.length)
     throw new Error("radios values must be unique.");
-  const z = !!n, q = w.map((k) => {
-    const C = !!k.disabled, E = k.description ? `${c}-${k.value}-description` : void 0, S = [
+  const z = !!n, M = y.map((w) => {
+    const x = !!w.disabled, E = w.description ? `${c}-${w.value}-description` : void 0, L = [
       {
         kind: "element",
         tag: "label",
@@ -7546,13 +7539,13 @@ function oi({
             tag: "input",
             attrs: {
               "aria-describedby": E,
-              checked: b === k.value,
+              checked: g === w.value,
               class: "radio",
-              disabled: C,
+              disabled: x,
               name: h,
-              required: !!l && !z && !C,
+              required: !!s && !z && !x,
               type: "radio",
-              value: k.value
+              value: w.value
             },
             children: []
           },
@@ -7560,21 +7553,21 @@ function oi({
             kind: "element",
             tag: "span",
             attrs: {},
-            children: [{ kind: "text", value: k.label }]
+            children: [{ kind: "text", value: w.label }]
           }
         ]
       }
     ];
-    return k.description && S.push({
+    return w.description && L.push({
       kind: "element",
       tag: "p",
       attrs: { class: "radio-description", id: E },
-      children: [{ kind: "text", value: k.description }]
+      children: [{ kind: "text", value: w.description }]
     }), {
       kind: "element",
       tag: "div",
       attrs: { class: "radio-field" },
-      children: S
+      children: L
     };
   });
   return Tt({
@@ -7583,10 +7576,10 @@ function oi({
       tag: "div",
       attrs: {
         class: "set-radios",
-        "data-orientation": d,
+        "data-orientation": o,
         "data-size": p
       },
-      children: q
+      children: M
     }),
     description: t,
     disabled: z,
@@ -7754,10 +7747,10 @@ function di({
   children: i,
   dir: r,
   id: a,
-  lang: o,
-  theme: d
+  lang: d,
+  theme: o
 }) {
-  const l = v(a);
+  const s = b(a);
   return {
     kind: "element",
     tag: "div",
@@ -7766,9 +7759,9 @@ function di({
       "data-app-root": n,
       "data-app-overscroll-behavior": t === "none" ? "none" : void 0,
       "data-set-brand": e,
-      "data-set-theme": d,
-      id: l,
-      lang: o === "" ? void 0 : o,
+      "data-set-theme": o,
+      id: s,
+      lang: d === "" ? void 0 : d,
       dir: r
     },
     children: i ? [{ kind: "raw", html: i }] : []
@@ -7878,7 +7871,7 @@ function si({
   id: r,
   responsive: a
 }) {
-  const o = v(r);
+  const d = b(r);
   return {
     kind: "element",
     tag: n,
@@ -7887,7 +7880,7 @@ function si({
       "data-align": t === "stretch" ? void 0 : t,
       "data-gap": i,
       "data-responsive": a,
-      id: o
+      id: d
     },
     children: e ? [{ kind: "raw", html: e }] : []
   };
@@ -7972,7 +7965,7 @@ function li({
   id: e,
   variant: i = "default"
 }) {
-  const r = v(e);
+  const r = b(e);
   return {
     kind: "element",
     tag: "div",
@@ -8047,13 +8040,13 @@ function pi({
   id: i,
   label: r,
   name: a,
-  size: o = "md",
-  value: d
+  size: d = "md",
+  value: o
 }) {
-  const l = v(i), p = n?.trim();
-  if (p && !l)
+  const s = b(i), p = n?.trim();
+  if (p && !s)
     throw new Error("id must be provided when description is provided.");
-  const s = p ? `${l}-description` : void 0, c = [
+  const l = p ? `${s}-description` : void 0, c = [
     {
       kind: "element",
       tag: "label",
@@ -8063,15 +8056,15 @@ function pi({
           kind: "element",
           tag: "input",
           attrs: {
-            "aria-describedby": s,
+            "aria-describedby": l,
             checked: !!t,
             class: "switch",
             disabled: !!e,
-            id: l,
+            id: s,
             name: a || void 0,
             role: "switch",
             type: "checkbox",
-            value: d || void 0
+            value: o || void 0
           },
           children: []
         },
@@ -8087,12 +8080,12 @@ function pi({
   return p && c.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: s },
+    attrs: { class: "description", id: l },
     children: [{ kind: "text", value: p }]
   }), {
     kind: "element",
     tag: "div",
-    attrs: { class: "set-switch", "data-size": o },
+    attrs: { class: "set-switch", "data-size": d },
     children: c
   };
 }
@@ -8214,55 +8207,55 @@ function ci({
   id: i,
   invalid: r,
   label: a,
-  name: o,
-  readOnly: d,
-  required: l,
+  name: d,
+  readOnly: o,
+  required: s,
   resize: p = "vertical",
-  rows: s = 2,
+  rows: l = 2,
   size: c = "md",
   spellcheck: h,
-  value: b,
-  inlineSize: w = "full"
+  value: g,
+  inlineSize: y = "full"
 }) {
-  const f = i.trim(), z = n?.trim(), q = t === !1 ? !1 : t?.trim(), x = o?.trim(), k = b;
-  if (!f)
+  const v = i.trim(), z = n?.trim(), M = t === !1 ? !1 : t?.trim(), S = d?.trim(), w = g;
+  if (!v)
     throw new Error("id must be a non-empty string.");
-  if (!H(f))
+  if (!H(v))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  if (!Number.isInteger(s) || s < 2)
+  if (!Number.isInteger(l) || l < 2)
     throw new Error("rows must be an integer greater than or equal to 2.");
-  const C = z ? `${f}-description` : void 0, E = !!e, S = !E && !!d, A = [
+  const x = z ? `${v}-description` : void 0, E = !!e, L = !E && !!o, V = [
     {
       kind: "element",
       tag: "label",
-      attrs: { class: "label", for: f },
+      attrs: { class: "label", for: v },
       children: [{ kind: "text", value: a }]
     },
     {
       kind: "element",
       tag: "textarea",
       attrs: {
-        "aria-describedby": C,
-        "aria-invalid": !E && !S && !!r ? "true" : void 0,
-        autocomplete: q === !1 ? "off" : q || void 0,
+        "aria-describedby": x,
+        "aria-invalid": !E && !L && !!r ? "true" : void 0,
+        autocomplete: M === !1 ? "off" : M || void 0,
         class: "textarea",
         disabled: E,
-        id: f,
-        name: x || void 0,
-        readonly: S,
-        required: !!l,
-        rows: String(s),
+        id: v,
+        name: S || void 0,
+        readonly: L,
+        required: !!s,
+        rows: String(l),
         spellcheck: h === void 0 ? void 0 : String(h)
       },
-      children: [{ kind: "text", value: k || "" }]
+      children: [{ kind: "text", value: w || "" }]
     }
   ];
-  return z && A.push({
+  return z && V.push({
     kind: "element",
     tag: "p",
-    attrs: { class: "description", id: C },
+    attrs: { class: "description", id: x },
     children: [{ kind: "text", value: z }]
   }), {
     kind: "element",
@@ -8271,9 +8264,9 @@ function ci({
       class: "set-textarea",
       "data-resize": p === "none" ? "none" : void 0,
       "data-size": c,
-      "data-inline-size": w === "fit" ? "fit" : void 0
+      "data-inline-size": y === "fit" ? "fit" : void 0
     },
-    children: A
+    children: V
   };
 }
 function Pn(t) {