@jasonshimmy/custom-elements-runtime 2.2.3 → 2.2.5

package/dist/ssr.d.ts

@@ -1,6 +1,27 @@
 /**
  * SSR entrypoint — small re-export so consumers can import SSR-only helpers
  * without pulling them into the main client runtime bundle.
+ *
+ * renderToString accepts an optional second argument to control SSR behavior:
+ *
+ *   renderToString(vnode, { injectSvgNamespace?: boolean })
+ *
+ * - injectSvgNamespace (default: true): when true, the SSR renderer will
+ *   inject the standard SVG namespace attribute (xmlns="http://www.w3.org/2000/svg")
+ *   onto `<svg>` elements that do not already provide an explicit `xmlns`.
+ *   This matches the client runtime behavior (createElementNS) and avoids
+ *   hydration/namespace mismatches. Set to `false` to opt out and keep SSR
+ *   output minimal.
+ *
+ * Examples
+ *
+ *   // Default (injects xmlns for <svg> if missing)
+ *   import { renderToString } from '@custom-elements/ssr';
+ *   const html = renderToString(vnodeTree);
+ *
+ *   // Opt-out
+ *   const htmlNoNs = renderToString(vnodeTree, { injectSvgNamespace: false });
  */
 export { renderToString } from './runtime/vdom-ssr';
 export type { VNode } from './runtime/types';
+export type { RenderOptions } from './runtime/vdom-ssr';

package/dist/{transitions-m6FraTTL.js → transitions-DCIjMqzG.js}

@@ -1,5 +1,5 @@
-import { anchorBlock as ye } from "./custom-elements-runtime.directives.es.js";
-const $e = `/*
+import { anchorBlock as $e } from "./custom-elements-runtime.directives.es.js";
+const ye = `/*
  * Custom Elements Variables CSS
  * CSS variables for colors and fonts
  */
@@ -139,7 +139,7 @@ function De(e) {
   return e.replace(/url\s*\(\s*['"]?javascript:[^)]*\)/gi, "").replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/expression\s*\([^)]*\)/gi, "");
 }
 const pe = ke`
-  ${$e}
+  ${ye}
   :host,
   *,
   ::before,
@@ -833,7 +833,8 @@ const Ce = {
   "peer-hover": (e, r) => `.peer:hover ~ ${e}{${r}}`,
   "peer-focus": (e, r) => `.peer:focus ~ ${e}{${r}}`,
   "peer-checked": (e, r) => `.peer:checked ~ ${e}{${r}}`,
-  "peer-disabled": (e, r) => `.peer:disabled ~ ${e}{${r}}`
+  "peer-disabled": (e, r) => `.peer:disabled ~ ${e}{${r}}`,
+  "dark-class": (e, r) => `:host(.dark) ${e}{${r}}`
 }, oe = {
   sm: "(min-width:640px)",
   md: "(min-width:768px)",
@@ -872,11 +873,11 @@ function ae(e) {
   const c = o.slice(0, n), s = o.slice(n + 1);
   if (!te[c]) return null;
   if (s.includes("/")) {
-    const [t, a] = s.split("/").map(($) => parseFloat($));
+    const [t, a] = s.split("/").map((y) => parseFloat(y));
     if (Number.isNaN(t) || Number.isNaN(a) || a === 0)
       return null;
     const d = t / a * 100;
-    return te[c].map(($) => `${$}:${d}%;`).join("");
+    return te[c].map((y) => `${y}:${d}%;`).join("");
   }
   const u = parseFloat(s);
   if (Number.isNaN(u)) return null;
@@ -890,10 +891,10 @@ function ce(e) {
   if (s === "reverse")
     return u ? "--cer-space-x-reverse:1;" : "--cer-space-y-reverse:1;";
   if (s.includes("/")) {
-    const [d, $] = s.split("/").map((A) => parseFloat(A));
-    if (Number.isNaN(d) || Number.isNaN($) || $ === 0)
+    const [d, y] = s.split("/").map((A) => parseFloat(A));
+    if (Number.isNaN(d) || Number.isNaN(y) || y === 0)
       return null;
-    const v = d / $ * 100, C = r ? "-" : "";
+    const v = d / y * 100, C = r ? "-" : "";
     return u ? `--cer-space-x-reverse:0;& > :not([hidden]) ~ :not([hidden]){margin-inline-start:calc(${C}${v}% * calc(1 - var(--cer-space-x-reverse)));margin-inline-end:calc(${C}${v}% * var(--cer-space-x-reverse));}` : `--cer-space-y-reverse:0;& > :not([hidden]) ~ :not([hidden]){margin-top:calc(${C}${v}% * calc(1 - var(--cer-space-y-reverse)));margin-bottom:calc(${C}${v}% * var(--cer-space-y-reverse));}`;
   }
   const m = parseFloat(s);
@@ -940,7 +941,7 @@ function se(e) {
       if (n.includes("var(")) {
         const u = /var\([^)]*\)/.exec(n);
         if (u) {
-          const m = u[0], t = o * 100, a = `color-mix(in srgb, ${m} ${t}%, rgba(0 0 0 / 0) ${100 - t}%)`, d = /#([0-9a-f]{6}|[0-9a-f]{3})/i.exec(m), $ = /^([a-z-]+):/.exec(n), v = $ ? $[1] : "background-color";
+          const m = u[0], t = o * 100, a = `color-mix(in srgb, ${m} ${t}%, rgba(0 0 0 / 0) ${100 - t}%)`, d = /#([0-9a-f]{6}|[0-9a-f]{3})/i.exec(m), y = /^([a-z-]+):/.exec(n), v = y ? y[1] : "background-color";
           if (d) {
             const A = `rgb(${J(d[0])} / ${o})`, f = m.replace(
               /#([0-9a-f]{6}|[0-9a-f]{3})/i,
@@ -967,7 +968,7 @@ function se(e) {
     if (c.includes("var(")) {
       const u = /var\([^)]*\)/.exec(c);
       if (u) {
-        const m = u[0], t = o * 100, a = `color-mix(in srgb, ${m} ${t}%, rgba(0 0 0 / 0) ${100 - t}%)`, d = /#([0-9a-f]{6}|[0-9a-f]{3})/i.exec(m), $ = /^([a-z-]+):/.exec(c), v = $ ? $[1] : null;
+        const m = u[0], t = o * 100, a = `color-mix(in srgb, ${m} ${t}%, rgba(0 0 0 / 0) ${100 - t}%)`, d = /#([0-9a-f]{6}|[0-9a-f]{3})/i.exec(m), y = /^([a-z-]+):/.exec(c), v = y ? y[1] : null;
         if (d && v) {
           const A = `rgb(${J(d[0])} / ${o})`, f = m.replace(
             /#([0-9a-f]{6}|[0-9a-f]{3})/i,
@@ -1104,7 +1105,7 @@ function Le(e) {
   const c = new Set(n), s = [[], [], [], []], u = {}, m = (f, p = !1) => {
     const g = p ? `dark|${f}` : f;
     if (g in u) return u[g];
-    const b = $(f, p);
+    const b = y(f, p);
     return u[g] = b, b;
   }, t = (f) => {
     const p = f.some((k) => ne.includes(k)), g = f.some(
@@ -1132,12 +1133,12 @@ function Le(e) {
     even: ":nth-child(even)",
     "focus-within": ":focus-within",
     "focus-visible": ":focus-visible"
-  }, $ = (f, p = !1) => {
+  }, y = (f, p = !1) => {
     const g = a(f);
     let b = "", k = !1;
     for (const i of g) {
-      let y = i;
-      if (y.startsWith("!") && (k = !0, y = y.slice(1)), re[y] || ae(y) || ce(y) || de(y) || se(y) || le(y) || Z(y)) {
+      let $ = i;
+      if ($.startsWith("!") && (k = !0, $ = $.slice(1)), re[$] || ae($) || ce($) || de($) || se($) || le($) || Z($)) {
         b = i;
         break;
       }
@@ -1162,9 +1163,9 @@ function Le(e) {
     for (const i of h) {
       if (i === "dark" || ne.includes(i) || i.startsWith("@") && (ie.includes(i.slice(1)) || i.match(/^@\[.+\]$/)))
         continue;
-      const y = _e(i);
-      if (y) {
-        S = y;
+      const $ = _e(i);
+      if ($) {
+        S = $;
         continue;
       }
       const F = d[i];
@@ -1176,8 +1177,8 @@ function Le(e) {
       typeof E == "function" && (l = E(l, _).split("{")[0]);
     }
     const D = W.join(""), L = V.join("");
-    function Q(i, y) {
-      if (!y) return i;
+    function Q(i, $) {
+      if (!$) return i;
       let F = 0, E = 0;
       if (i.length && (i[0] === ">" || i[0] === "+" || i[0] === "~" || i[0] === " ")) {
         let j = 1;
@@ -1185,30 +1186,30 @@ function Le(e) {
         for (; j < i.length; j++) {
           const z = i[j];
           if (z === "[" ? F++ : z === "]" && F > 0 ? F-- : z === "(" ? E++ : z === ")" && E > 0 && E--, F === 0 && E === 0 && (i[j] === ">" || i[j] === "+" || i[j] === "~" || i[j] === " "))
-            return i.slice(0, j) + y + i.slice(j);
+            return i.slice(0, j) + $ + i.slice(j);
         }
-        return i + y;
+        return i + $;
       }
       for (let j = 0; j < i.length; j++) {
         const z = i[j];
         if (z === "[" ? F++ : z === "]" && F > 0 ? F-- : z === "(" ? E++ : z === ")" && E > 0 && E--, F === 0 && E === 0 && (z === ">" || z === "+" || z === "~" || z === " "))
-          return i.slice(0, j) + y + i.slice(j);
+          return i.slice(0, j) + $ + i.slice(j);
       }
-      return i + y;
+      return i + $;
     }
     if (S)
       if (S.includes("&")) {
-        const i = S.indexOf("&"), y = S.slice(0, i), F = S.slice(i + 1), E = w + D;
+        const i = S.indexOf("&"), $ = S.slice(0, i), F = S.slice(i + 1), E = w + D;
         if (W.length === 0)
           l = l.replace(
             w,
-            y + E + L + F
+            $ + E + L + F
           );
         else {
           const j = Q(F, L);
           l = l.replace(
             w,
-            y + E + j
+            $ + E + j
           );
         }
       } else
@@ -1416,7 +1417,7 @@ function Ne(e, r) {
     name: t,
     enterFrom: a,
     enterActive: d,
-    enterTo: $,
+    enterTo: y,
     leaveFrom: v,
     leaveActive: C,
     leaveTo: A,
@@ -1430,15 +1431,15 @@ function Ne(e, r) {
     onLeaveCancelled: T
   } = e;
   let h;
-  o && X[o] ? (h = { ...X[o] }, a && (h.enterFrom = a), d && (h.enterActive = d), $ && (h.enterTo = $), v && (h.leaveFrom = v), C && (h.leaveActive = C), A && (h.leaveTo = A)) : h = {
+  o && X[o] ? (h = { ...X[o] }, a && (h.enterFrom = a), d && (h.enterActive = d), y && (h.enterTo = y), v && (h.leaveFrom = v), C && (h.leaveActive = C), A && (h.leaveTo = A)) : h = {
     enterFrom: a,
     enterActive: d,
-    enterTo: $,
+    enterTo: y,
     leaveFrom: v,
     leaveActive: C,
     leaveTo: A
   };
-  const R = t || (o ? `transition-${o}` : "transition"), _ = ye(n ? r : [], R);
+  const R = t || (o ? `transition-${o}` : "transition"), _ = $e(n ? r : [], R);
   return _._transition = {
     name: R,
     classes: h,
@@ -1470,7 +1471,7 @@ function Be(e, r) {
     appear: t = !1,
     css: a = !0,
     name: d,
-    class: $,
+    class: y,
     style: v,
     enterFrom: C,
     enterActive: A,
@@ -1526,7 +1527,7 @@ function Be(e, r) {
     key: P,
     props: {
       attrs: {
-        ...$ ? { class: $ } : {},
+        ...y ? { class: y } : {},
         ...V ? { style: V } : {}
       },
       _transitionGroup: {
@@ -1603,4 +1604,4 @@ export {
   De as s,
   X as t
 };
-//# sourceMappingURL=transitions-m6FraTTL.js.map
+//# sourceMappingURL=transitions-DCIjMqzG.js.map