@jasonshimmy/custom-elements-runtime 2.1.1 → 2.2.0

package/dist/{transitions-PEmFOapF.js → transitions-CbxTVf1F.js}

@@ -12,7 +12,7 @@ let J = null;
 function We() {
   return J || (J = new CSSStyleSheet(), J.replaceSync(ve(we))), J;
 }
-function _e(e) {
+function De(e) {
   return e.replace(/url\s*\(\s*['"]?javascript:[^)]*\)/gi, "").replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/expression\s*\([^)]*\)/gi, "");
 }
 const we = xe`
@@ -47,6 +47,8 @@ const we = xe`
     --cer-gradient-from: rgba(255, 255, 255, 0);
     --cer-gradient-to: rgba(255, 255, 255, 0);
     --cer-gradient-stops: var(--cer-gradient-from), var(--cer-gradient-to);
+    /* Default outline style variable */
+    --cer-outline-style: solid;
   }
   button,
   input,
@@ -436,15 +438,22 @@ const we = xe`
   ].forEach(([t, a]) => {
     e[t] = `line-height:${a};--cer-line-height:${a};line-height:var(--cer-line-height,${a});`;
   });
-  const c = [0, 1, 2, 4, 6, 8];
-  for (const t of c) {
+  const l = [0, 1, 2, 4, 6, 8];
+  for (const t of l) {
     const a = `${t}px`;
-    e[`border-${t}`] = `border-width:${a};`, e[`border-t-${t}`] = `border-top-width:${a};`, e[`border-r-${t}`] = `border-right-width:${a};`, e[`border-b-${t}`] = `border-bottom-width:${a};`, e[`border-l-${t}`] = `border-left-width:${a};`, e[`border-x-${t}`] = `border-left-width:${a};border-right-width:${a};`, e[`border-y-${t}`] = `border-top-width:${a};border-bottom-width:${a};`;
+    e[`outline-${t}`] = `outline-style:var(--cer-outline-style);outline-width:${a};`, e[`outline-offset-${t}`] = `outline-offset:${a};`, e[`border-${t}`] = `border-width:${a};`, e[`border-t-${t}`] = `border-top-width:${a};`, e[`border-r-${t}`] = `border-right-width:${a};`, e[`border-b-${t}`] = `border-bottom-width:${a};`, e[`border-l-${t}`] = `border-left-width:${a};`, e[`border-x-${t}`] = `border-left-width:${a};border-right-width:${a};`, e[`border-y-${t}`] = `border-top-width:${a};border-bottom-width:${a};`;
   }
   Object.assign(e, {
     "font-sans": "font-family:var(--cer-font-sans, ui-sans-serif,system-ui,sans-serif);",
     "font-serif": "font-family:var(--cer-font-serif, ui-serif,Georgia,serif);",
     "font-mono": "font-family:var(--cer-font-mono, ui-monospace,SFMono-Regular,monospace);",
+    outline: "outline-style:var(--cer-outline-style);outline-width:1px;",
+    "outline-solid": "--cer-outline-style:solid;outline-style:solid;",
+    "outline-dashed": "--cer-outline-style:dashed;outline-style:dashed;",
+    "outline-dotted": "--cer-outline-style:dotted;outline-style:dotted;",
+    "outline-double": "--cer-outline-style:double;outline-style:double;",
+    "outline-none": "--cer-outline-style:none;outline-style:none;",
+    "outline-hidden": "--cer-outline-style:none;outline:2px solid transparent;outline-offset:2px;",
     border: "border-width:1px;",
     "border-t": "border-top-width:1px;",
     "border-r": "border-right-width:1px;",
@@ -736,16 +745,16 @@ const je = {
 function ae(e) {
   const r = e.startsWith("-"), o = r ? e.slice(1) : e, i = o.lastIndexOf("-");
   if (i === -1) return null;
-  const s = o.slice(0, i), c = o.slice(i + 1);
+  const s = o.slice(0, i), l = o.slice(i + 1);
   if (!te[s]) return null;
-  if (c.includes("/")) {
-    const [t, a] = c.split("/").map((T) => parseFloat(T));
+  if (l.includes("/")) {
+    const [t, a] = l.split("/").map((T) => parseFloat(T));
     if (Number.isNaN(t) || Number.isNaN(a) || a === 0)
       return null;
     const g = t / a * 100;
     return te[s].map((T) => `${T}:${g}%;`).join("");
   }
-  const u = parseFloat(c);
+  const u = parseFloat(l);
   if (Number.isNaN(u)) return null;
   const j = r ? "-" : "";
   return te[s].map((t) => `${t}:calc(${j}${B} * ${u});`).join("");
@@ -753,17 +762,17 @@ function ae(e) {
 function se(e) {
   const r = e.startsWith("-"), i = (r ? e.slice(1) : e).match(/^space-(x|y)-(.+)$/);
   if (!i) return null;
-  const [, s, c] = i, u = s === "x";
-  if (c === "reverse")
+  const [, s, l] = i, u = s === "x";
+  if (l === "reverse")
     return u ? "--cer-space-x-reverse:1;" : "--cer-space-y-reverse:1;";
-  if (c.includes("/")) {
-    const [g, T] = c.split("/").map((z) => parseFloat(z));
+  if (l.includes("/")) {
+    const [g, T] = l.split("/").map((z) => parseFloat(z));
     if (Number.isNaN(g) || Number.isNaN(T) || T === 0)
       return null;
     const A = g / T * 100, S = r ? "-" : "";
     return u ? `--cer-space-x-reverse:0;& > :not([hidden]) ~ :not([hidden]){margin-inline-start:calc(${S}${A}% * calc(1 - var(--cer-space-x-reverse)));margin-inline-end:calc(${S}${A}% * var(--cer-space-x-reverse));}` : `--cer-space-y-reverse:0;& > :not([hidden]) ~ :not([hidden]){margin-top:calc(${S}${A}% * calc(1 - var(--cer-space-y-reverse)));margin-bottom:calc(${S}${A}% * var(--cer-space-y-reverse));}`;
   }
-  const j = parseFloat(c);
+  const j = parseFloat(l);
   if (Number.isNaN(j)) return null;
   const a = `calc(${r ? "-" : ""}${B} * ${j})`;
   return u ? `--cer-space-x-reverse:0;& > :not([hidden]) ~ :not([hidden]){margin-inline-start:calc(${a} * calc(1 - var(--cer-space-x-reverse)));margin-inline-end:calc(${a} * var(--cer-space-x-reverse));}` : `--cer-space-y-reverse:0;& > :not([hidden]) ~ :not([hidden]){margin-top:calc(${a} * calc(1 - var(--cer-space-y-reverse)));margin-bottom:calc(${a} * var(--cer-space-y-reverse));}`;
@@ -786,11 +795,11 @@ const Te = /^(bg|text|border|decoration|shadow|outline|caret|accent|fill|stroke)
 function Se(e) {
   const r = Te.exec(e);
   if (!r) return null;
-  const [, o, i, s = "DEFAULT"] = r, c = he[i]?.[s];
-  if (!c) return null;
-  if (o === "shadow") return `--cer-shadow-color:${c};`;
+  const [, o, i, s = "DEFAULT"] = r, l = he[i]?.[s];
+  if (!l) return null;
+  if (o === "shadow") return `--cer-shadow-color:${l};`;
   const u = Ae[o];
-  return u ? `${u}:${c};` : null;
+  return u ? `${u}:${l};` : null;
 }
 function Fe(e) {
   const r = e.indexOf("/");
@@ -798,21 +807,21 @@ function Fe(e) {
   const o = e.slice(0, r), i = e.slice(r + 1), s = parseInt(i, 10);
   return isNaN(s) || s < 0 || s > 100 ? { base: o } : { base: o, opacity: s / 100 };
 }
-function ce(e) {
+function le(e) {
   const { base: r, opacity: o } = Fe(e), i = Se(r);
   if (i && o !== void 0) {
-    const c = /#([0-9a-f]{6})/i.exec(i);
-    if (c) {
-      const u = ue(c[0]);
+    const l = /#([0-9a-f]{6})/i.exec(i);
+    if (l) {
+      const u = ue(l[0]);
       return i.replace(/#([0-9a-f]{6})/i, `rgb(${u} / ${o})`);
     }
   }
   if (i) return i;
   const s = Q(r);
   if (s && o !== void 0) {
-    const c = /#([0-9a-f]{6})/i.exec(s);
-    if (c) {
-      const u = ue(c[0]);
+    const l = /#([0-9a-f]{6})/i.exec(s);
+    if (l) {
+      const u = ue(l[0]);
       return s.replace(
         /#([0-9a-f]{6})/i,
         `rgb(${u} / ${o})`
@@ -821,18 +830,18 @@ function ce(e) {
   }
   return s;
 }
-function le(e) {
+function ce(e) {
   const r = /^(from|to|via)-([a-z]+)-?(\d{2,3}|DEFAULT)?$/.exec(e);
   if (!r) return null;
-  const [, o, i, s = "DEFAULT"] = r, c = he[i]?.[s];
-  if (!c) return null;
+  const [, o, i, s = "DEFAULT"] = r, l = he[i]?.[s];
+  if (!l) return null;
   switch (o) {
     case "from":
-      return `--cer-gradient-from:${c} var(--cer-gradient-from-position);--cer-gradient-to:rgb(255 255 255 / 0) var(--cer-gradient-to-position);--cer-gradient-stops:var(--cer-gradient-from), var(--cer-gradient-to);`;
+      return `--cer-gradient-from:${l} var(--cer-gradient-from-position);--cer-gradient-to:rgb(255 255 255 / 0) var(--cer-gradient-to-position);--cer-gradient-stops:var(--cer-gradient-from), var(--cer-gradient-to);`;
     case "to":
-      return `--cer-gradient-to:${c} var(--cer-gradient-to-position);`;
+      return `--cer-gradient-to:${l} var(--cer-gradient-to-position);`;
     case "via":
-      return `--cer-gradient-to:rgb(255 255 255 / 0) var(--cer-gradient-to-position);--cer-gradient-stops:var(--cer-gradient-from), ${c} var(--cer-gradient-via-position), var(--cer-gradient-to);`;
+      return `--cer-gradient-to:rgb(255 255 255 / 0) var(--cer-gradient-to-position);--cer-gradient-stops:var(--cer-gradient-from), ${l} var(--cer-gradient-via-position), var(--cer-gradient-to);`;
     default:
       return null;
   }
@@ -899,8 +908,8 @@ function Q(e) {
   if (o === "scale") return `transform:scale(${i});`;
   if (o === "translate-x") return `transform:translateX(${i});`;
   if (o === "translate-y") return `transform:translateY(${i});`;
-  const c = s[o] ?? o.replace(/_/g, "-");
-  return c && i ? `${c}:${i};` : null;
+  const l = s[o] ?? o.replace(/_/g, "-");
+  return l && i ? `${l}:${i};` : null;
 }
 function Ce(e) {
   if (e.startsWith("[") && e.endsWith("]")) {
@@ -933,7 +942,7 @@ function ze(e) {
     return o.css;
   const i = Oe(e);
   if (!i.length) return "";
-  const s = new Set(i), c = [[], [], [], []], u = {}, j = (f, p = !1) => {
+  const s = new Set(i), l = [[], [], [], []], u = {}, j = (f, p = !1) => {
     const d = p ? `dark|${f}` : f;
     if (d in u) return u[d];
     const m = T(f, p);
@@ -969,27 +978,27 @@ function ze(e) {
     let m = "", w = !1;
     for (const n of d) {
       let v = n;
-      if (v.startsWith("!") && (w = !0, v = v.slice(1)), re[v] || ae(v) || se(v) || de(v) || ce(v) || le(v) || Q(v)) {
+      if (v.startsWith("!") && (w = !0, v = v.slice(1)), re[v] || ae(v) || se(v) || de(v) || le(v) || ce(v) || Q(v)) {
         m = n;
         break;
       }
     }
     if (!m) return null;
-    const b = m.replace(/^!/, ""), C = re[b] ?? ae(b) ?? se(b) ?? de(b) ?? ce(b) ?? le(b) ?? Q(b);
+    const b = m.replace(/^!/, ""), C = re[b] ?? ae(b) ?? se(b) ?? de(b) ?? le(b) ?? ce(b) ?? Q(b);
     if (!C) return null;
     const k = d.indexOf(m);
     let h = k >= 0 ? d.slice(0, k) : [];
     p && (h = h.filter((n) => n !== "dark"));
     const P = `.${pe(f)}`, W = w ? C.replace(/;/g, " !important;") : C, x = "__SUBJECT__";
-    let l = x;
-    const _ = [];
+    let c = x;
+    const D = [];
     for (const n of h)
-      n.startsWith("group-") ? (l = `.group:${n.slice(6)} ${l}`, _.push(n)) : n.startsWith("peer-") && (l = l.replace(
+      n.startsWith("group-") ? (c = `.group:${n.slice(6)} ${c}`, D.push(n)) : n.startsWith("peer-") && (c = c.replace(
         x,
         `.peer:${n.slice(5)}~${x}`
-      ), _.push(n));
-    h = h.filter((n) => !_.includes(n));
-    const D = [], V = [];
+      ), D.push(n));
+    h = h.filter((n) => !D.includes(n));
+    const _ = [], V = [];
     let y = null;
     for (const n of h) {
       if (n === "dark" || ie.includes(n) || n.startsWith("@") && (ne.includes(n.slice(1)) || n.match(/^@\[.+\]$/)))
@@ -1001,13 +1010,13 @@ function ze(e) {
       }
       const F = g[n];
       if (F) {
-        y ? V.push(F) : D.push(F);
+        y ? V.push(F) : _.push(F);
         continue;
       }
       const O = je[n];
-      typeof O == "function" && (l = O(l, W).split("{")[0]);
+      typeof O == "function" && (c = O(c, W).split("{")[0]);
     }
-    const I = D.join(""), R = V.join("");
+    const I = _.join(""), R = V.join("");
     function X(n, v) {
       if (!v) return n;
       let F = 0, O = 0;
@@ -1031,30 +1040,30 @@ function ze(e) {
     if (y)
       if (y.includes("&")) {
         const n = y.indexOf("&"), v = y.slice(0, n), F = y.slice(n + 1), O = x + I;
-        if (D.length === 0)
-          l = l.replace(
+        if (_.length === 0)
+          c = c.replace(
             x,
             v + O + R + F
           );
         else {
           const $ = X(F, R);
-          l = l.replace(
+          c = c.replace(
             x,
             v + O + $
           );
         }
       } else
-        l = l.replace(
+        c = c.replace(
           x,
           `${y}${x + I}`
-        ), R && (l = l.replace(x, `${x}${R}`));
+        ), R && (c = c.replace(x, `${x}${R}`));
     else
-      l = l.replace(
+      c = c.replace(
         x,
         x + I + R
       );
-    l = l.replace(new RegExp(x, "g"), P);
-    let U = `${l}{${W}}`;
+    c = c.replace(new RegExp(x, "g"), P);
+    let U = `${c}{${W}}`;
     const Y = h.filter(
       (n) => ie.includes(n)
     ), ee = h.filter(
@@ -1075,18 +1084,18 @@ function ze(e) {
   };
   for (const f of s) {
     const p = a(f), d = p.find(
-      (k) => re[k.replace(/^!/, "")] || ae(k.replace(/^!/, "")) || se(k.replace(/^!/, "")) || de(k.replace(/^!/, "")) || ce(k.replace(/^!/, "")) || le(k.replace(/^!/, "")) || Q(k.replace(/^!/, ""))
+      (k) => re[k.replace(/^!/, "")] || ae(k.replace(/^!/, "")) || se(k.replace(/^!/, "")) || de(k.replace(/^!/, "")) || le(k.replace(/^!/, "")) || ce(k.replace(/^!/, "")) || Q(k.replace(/^!/, ""))
     );
     if (!d) continue;
     const m = p.indexOf(d), w = m >= 0 ? p.slice(0, m) : [], b = t(w), C = j(f);
-    C && c[b].push(C);
+    C && l[b].push(C);
   }
   const A = /^(from|via|to)-[a-z]+-?\d{2,3}?$/;
   for (const f of s)
     if (A.test(f)) {
-      if (c.flat().join("").includes(`.${pe(f)}`)) continue;
+      if (l.flat().join("").includes(`.${pe(f)}`)) continue;
       const d = j(f);
-      d && c[0].push(d);
+      d && l[0].push(d);
     }
   const S = (f) => f.sort((p, d) => {
     const m = (P) => {
@@ -1097,8 +1106,8 @@ function ze(e) {
         xl: 1280,
         "2xl": 1536
       };
-      for (const [x, l] of Object.entries(W))
-        if (P.includes(`@media ${oe[x]}`)) return l;
+      for (const [x, c] of Object.entries(W))
+        if (P.includes(`@media ${oe[x]}`)) return c;
       return -1;
     }, w = (P) => {
       const W = {
@@ -1125,21 +1134,21 @@ function ze(e) {
         "7xl": 1280
         // 80rem
       };
-      for (const [x, l] of Object.entries(W))
-        if (P.includes(`@container ${ge[x]}`)) return l;
+      for (const [x, c] of Object.entries(W))
+        if (P.includes(`@container ${ge[x]}`)) return c;
       if (P.includes("@container (min-width:")) {
         const x = /@container \(min-width:(\d+(?:\.\d+)?)(px|rem|em)/.exec(P);
         if (x) {
-          const l = parseFloat(x[1]), _ = x[2];
-          return _ === "rem" || _ === "em" ? l * 16 : l;
+          const c = parseFloat(x[1]), D = x[2];
+          return D === "rem" || D === "em" ? c * 16 : c;
         }
       }
       return -1;
     }, b = m(p), C = m(d), k = w(p), h = w(d);
     return b >= 0 && C >= 0 && b !== C ? b - C : k >= 0 && h >= 0 && k !== h ? k - h : 0;
   });
-  c[2] = S(c[2]), c[3] = S(c[3]);
-  const z = c.flat().join("");
+  l[2] = S(l[2]), l[3] = S(l[3]);
+  const z = l.flat().join("");
   return K.size >= me && Array.from(K.keys()).slice(
     0,
     Math.floor(me / 2)
@@ -1237,12 +1246,12 @@ const q = {
     leaveTo: "rotate-[90deg] opacity-0"
   }
 };
-function De(e, r) {
+function _e(e, r) {
   const {
     preset: o,
     show: i,
     mode: s = "default",
-    duration: c,
+    duration: l,
     appear: u = !1,
     css: j = !0,
     name: t,
@@ -1275,7 +1284,7 @@ function De(e, r) {
     name: P,
     classes: h,
     mode: s,
-    duration: c,
+    duration: l,
     appear: u,
     css: j,
     state: i ? "visible" : "hidden",
@@ -1296,7 +1305,7 @@ function Be(e, r) {
     tag: o = "div",
     moveClass: i = "transition-transform duration-300",
     preset: s,
-    show: c = !0,
+    show: l = !0,
     mode: u = "default",
     duration: j,
     appear: t = !1,
@@ -1319,8 +1328,8 @@ function Be(e, r) {
     onAfterLeave: W,
     onLeaveCancelled: x
   } = e;
-  let l;
-  s && q[s] ? (l = { ...q[s] }, S && (l.enterFrom = S), z && (l.enterActive = z), f && (l.enterTo = f), p && (l.leaveFrom = p), d && (l.leaveActive = d), m && (l.leaveTo = m)) : l = {
+  let c;
+  s && q[s] ? (c = { ...q[s] }, S && (c.enterFrom = S), z && (c.enterActive = z), f && (c.enterTo = f), p && (c.leaveFrom = p), d && (c.leaveActive = d), m && (c.leaveTo = m)) : c = {
     enterFrom: S,
     enterActive: z,
     enterTo: f,
@@ -1328,8 +1337,8 @@ function Be(e, r) {
     leaveActive: d,
     leaveTo: m
   };
-  const _ = g || (s ? `transition-group-${s}` : "transition-group"), D = [];
-  for (const y of c ? r : [])
+  const D = g || (s ? `transition-group-${s}` : "transition-group"), _ = [];
+  for (const y of l ? r : [])
     if (y && typeof y == "object" && y.tag === "#anchor") {
       const I = Array.isArray(y.children) ? y.children : [];
       for (const R of I)
@@ -1343,27 +1352,27 @@ function Be(e, r) {
               // Preserve original anchor key
             }
           };
-          D.push(X);
+          _.push(X);
         } else
-          D.push(R);
+          _.push(R);
     } else
-      D.push(y);
+      _.push(y);
   const V = (() => {
     if (A)
       return typeof A == "string" ? A : Object.entries(A).map(([y, I]) => `${y}: ${I}`).join("; ");
   })();
   return {
     tag: o,
-    children: D,
-    key: _,
+    children: _,
+    key: D,
     props: {
       attrs: {
         ...T ? { class: T } : {},
         ...V ? { style: V } : {}
       },
       _transitionGroup: {
-        name: _,
-        classes: l,
+        name: D,
+        classes: c,
         moveClass: i,
         mode: u,
         duration: j,
@@ -1403,7 +1412,7 @@ function Re() {
 }
 Re();
 export {
-  De as T,
+  _e as T,
   Pe as a,
   Be as b,
   xe as c,
@@ -1411,7 +1420,7 @@ export {
   We as g,
   ze as j,
   ve as m,
-  _e as s,
+  De as s,
   q as t
 };
-//# sourceMappingURL=transitions-PEmFOapF.js.map
+//# sourceMappingURL=transitions-CbxTVf1F.js.map