@elmethis/qwik 0.0.36 → 0.0.38

package/lib/index.qwik.cjs

@@ -10,7 +10,7 @@ const marked = require("marked");
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$A = {
+const styles$B = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -70,7 +70,7 @@ const Typescript = qwik.component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$z = {
+const styles$A = {
   path
 };
 const Bash = qwik.component$(({ size = 24, ...props }) => {
@@ -86,7 +86,7 @@ const Bash = qwik.component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
-        class: styles$z.path,
+        class: styles$A.path,
         d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
@@ -527,12 +527,12 @@ const C = qwik.component$(({ size = 24, ...props }) => {
   });
 });
 const icon$4 = "_icon_1gvln_1";
-const styles$y = {
+const styles$z = {
   icon: icon$4
 };
 const ElmMdiIcon = qwik.component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", {
-    class: styles$y.icon,
+    class: styles$z.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -641,7 +641,7 @@ const text$3 = "_text_1gswr_1";
 const code$1 = "_code_1gswr_12";
 const kbd = "_kbd_1gswr_21";
 const link$1 = "_link_1gswr_47";
-const styles$x = {
+const styles$y = {
   text: text$3,
   code: code$1,
   kbd,
@@ -651,17 +651,17 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$3 = "_icon_19g82_1";
-const styles$w = {
+const icon$3 = "_icon_1tbvt_1";
+const styles$x = {
   icon: icon$3
 };
 const ElmInlineIcon = qwik.component$(({ src, alt, width, height, size = 16 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    class: styles$w.icon,
+    class: styles$x.icon,
     children: /* @__PURE__ */ jsxRuntime.jsx("img", {
       src,
       alt,
-      class: styles$w.icon,
+      class: styles$x.icon,
       width: width ?? size,
       height: height ?? size
     })
@@ -674,7 +674,7 @@ const ElmInlineText = qwik.component$((props) => {
   }) : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("kbd", {
-      class: styles$x.kbd,
+      class: styles$y.kbd,
       children: vnode
     });
   }
@@ -700,13 +700,13 @@ const ElmInlineText = qwik.component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("code", {
-      class: styles$x.code,
+      class: styles$y.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxRuntime.jsxs("ruby", {
-      class: styles$x.text,
+      class: styles$y.text,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: vnode
@@ -719,7 +719,7 @@ const ElmInlineText = qwik.component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsxRuntime.jsx("span", {
     class: [
-      styles$x.text,
+      styles$y.text,
       textStyles.text
     ],
     style: {
@@ -732,7 +732,7 @@ const ElmInlineText = qwik.component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxRuntime.jsxs("a", {
-      class: styles$x.link,
+      class: styles$y.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -751,7 +751,7 @@ const ElmInlineText = qwik.component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$v = {
+const styles$w = {
   code
 };
 const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" }) => {
@@ -776,7 +776,7 @@ const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" })
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx("pre", {
-    class: styles$v.code,
+    class: styles$w.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -795,17 +795,17 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("figure", {
-    class: styles$A["code-block"],
+    class: styles$B["code-block"],
     style,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$A["language-icon"],
+        class: styles$B["language-icon"],
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$A.caption,
+        class: styles$B.caption,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -814,7 +814,7 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$A["copy-icon"],
+        class: styles$B["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -823,10 +823,10 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", {
-        class: styles$A.divider
+        class: styles$B.divider
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$A.code,
+        class: styles$B.code,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -846,7 +846,7 @@ const ElmKatex = qwik.component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$u = {
+const styles$v = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -855,13 +855,13 @@ const ElmParallax = qwik.component$(({ images }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$u["parallax-watcher"],
+        class: styles$v["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$u.parallax,
+        class: styles$v.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -871,6 +871,52 @@ const ElmParallax = qwik.component$(({ images }) => {
     ]
   });
 });
+const tab = "_tab_hloyu_18";
+const active$2 = "_active_hloyu_40";
+const styles$u = {
+  "elm-tabs": "_elm-tabs_hloyu_1",
+  "tab-container": "_tab-container_hloyu_18",
+  tab,
+  active: active$2,
+  "tab-content-container": "_tab-content-container_hloyu_51",
+  "tab-content": "_tab-content_hloyu_51"
+};
+const ElmTabs = qwik.component$(({ tabLabels, tabContents }) => {
+  const selectedTabIndex = qwik.useSignal(0);
+  const selectTab = qwik.$((index) => {
+    selectedTabIndex.value = index;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: styles$u["elm-tabs"],
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: styles$u["tab-container"],
+        children: tabLabels.map((tabLabel, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: [
+            styles$u["tab"],
+            {
+              [styles$u["active"]]: selectedTabIndex.value === index
+            }
+          ],
+          onClick$: () => selectTab(index),
+          children: tabLabel
+        }, index))
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: styles$u["tab-content-container"],
+        children: tabContents.map((content2, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: [
+            styles$u["tab-content"],
+            {
+              [styles$u["active"]]: selectedTabIndex.value === index
+            }
+          ],
+          children: content2
+        }, index))
+      })
+    ]
+  });
+});
 const toggle = "_toggle_pbyu8_1";
 const summary = "_summary_pbyu8_14";
 const content$2 = "_content_pbyu8_60";
@@ -3022,6 +3068,24 @@ const ElmJarkup = qwik.component$((props) => {
             expression: component.props.expression,
             block: true
           }, key);
+        case "Tabs": {
+          const labels = [];
+          const contents = [];
+          for (const tab2 of component.slots.default) {
+            labels.push(tab2.slots.labels);
+            contents.push(tab2.slots.contents);
+          }
+          const renderedLabels = labels.map((label2, index2) => /* @__PURE__ */ jsxRuntime.jsx("span", {
+            children: render(label2)
+          }, index2));
+          const renderedContents = contents.map((content2, index2) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+            children: render(content2)
+          }, index2));
+          return /* @__PURE__ */ jsxRuntime.jsx(ElmTabs, {
+            tabLabels: renderedLabels,
+            tabContents: renderedContents
+          });
+        }
         case "Table":
           return /* @__PURE__ */ jsxRuntime.jsxs(ElmTable, {
             caption: component.props?.caption,
@@ -3359,6 +3423,7 @@ exports.ElmTableBody = ElmTableBody;
 exports.ElmTableCell = ElmTableCell;
 exports.ElmTableHeader = ElmTableHeader;
 exports.ElmTableRow = ElmTableRow;
+exports.ElmTabs = ElmTabs;
 exports.ElmTextField = ElmTextField;
 exports.ElmToggle = ElmToggle;
 exports.ElmToggleTheme = ElmToggleTheme;

package/lib/index.qwik.mjs

@@ -8,7 +8,7 @@ import { marked } from "marked";
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$A = {
+const styles$B = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -68,7 +68,7 @@ const Typescript = component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$z = {
+const styles$A = {
   path
 };
 const Bash = component$(({ size = 24, ...props }) => {
@@ -84,7 +84,7 @@ const Bash = component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsx("path", {
-        class: styles$z.path,
+        class: styles$A.path,
         d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
       }),
       /* @__PURE__ */ jsx("path", {
@@ -525,12 +525,12 @@ const C = component$(({ size = 24, ...props }) => {
   });
 });
 const icon$4 = "_icon_1gvln_1";
-const styles$y = {
+const styles$z = {
   icon: icon$4
 };
 const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsx("svg", {
-    class: styles$y.icon,
+    class: styles$z.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -639,7 +639,7 @@ const text$3 = "_text_1gswr_1";
 const code$1 = "_code_1gswr_12";
 const kbd = "_kbd_1gswr_21";
 const link$1 = "_link_1gswr_47";
-const styles$x = {
+const styles$y = {
   text: text$3,
   code: code$1,
   kbd,
@@ -649,17 +649,17 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$3 = "_icon_19g82_1";
-const styles$w = {
+const icon$3 = "_icon_1tbvt_1";
+const styles$x = {
   icon: icon$3
 };
 const ElmInlineIcon = component$(({ src, alt, width, height, size = 16 }) => {
   return /* @__PURE__ */ jsx("span", {
-    class: styles$w.icon,
+    class: styles$x.icon,
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: styles$w.icon,
+      class: styles$x.icon,
       width: width ?? size,
       height: height ?? size
     })
@@ -672,7 +672,7 @@ const ElmInlineText = component$((props) => {
   }) : /* @__PURE__ */ jsx(Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsx("kbd", {
-      class: styles$x.kbd,
+      class: styles$y.kbd,
       children: vnode
     });
   }
@@ -698,13 +698,13 @@ const ElmInlineText = component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsx("code", {
-      class: styles$x.code,
+      class: styles$y.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxs("ruby", {
-      class: styles$x.text,
+      class: styles$y.text,
       children: [
         /* @__PURE__ */ jsx("span", {
           children: vnode
@@ -717,7 +717,7 @@ const ElmInlineText = component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsx("span", {
     class: [
-      styles$x.text,
+      styles$y.text,
       textStyles.text
     ],
     style: {
@@ -730,7 +730,7 @@ const ElmInlineText = component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxs("a", {
-      class: styles$x.link,
+      class: styles$y.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -749,7 +749,7 @@ const ElmInlineText = component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$v = {
+const styles$w = {
   code
 };
 const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
@@ -774,7 +774,7 @@ const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
     }
   });
   return /* @__PURE__ */ jsx("pre", {
-    class: styles$v.code,
+    class: styles$w.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -793,17 +793,17 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
     }
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: styles$A["code-block"],
+    class: styles$B["code-block"],
     style,
     children: [
       /* @__PURE__ */ jsx("span", {
-        class: styles$A["language-icon"],
+        class: styles$B["language-icon"],
         children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsx("span", {
-        class: styles$A.caption,
+        class: styles$B.caption,
         children: /* @__PURE__ */ jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -812,7 +812,7 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$A["copy-icon"],
+        class: styles$B["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -821,10 +821,10 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("hr", {
-        class: styles$A.divider
+        class: styles$B.divider
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$A.code,
+        class: styles$B.code,
         children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -844,7 +844,7 @@ const ElmKatex = component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$u = {
+const styles$v = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -853,13 +853,13 @@ const ElmParallax = component$(({ images }) => {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$u["parallax-watcher"],
+        class: styles$v["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsx("div", {
-        class: styles$u.parallax,
+        class: styles$v.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -869,6 +869,52 @@ const ElmParallax = component$(({ images }) => {
     ]
   });
 });
+const tab = "_tab_hloyu_18";
+const active$2 = "_active_hloyu_40";
+const styles$u = {
+  "elm-tabs": "_elm-tabs_hloyu_1",
+  "tab-container": "_tab-container_hloyu_18",
+  tab,
+  active: active$2,
+  "tab-content-container": "_tab-content-container_hloyu_51",
+  "tab-content": "_tab-content_hloyu_51"
+};
+const ElmTabs = component$(({ tabLabels, tabContents }) => {
+  const selectedTabIndex = useSignal(0);
+  const selectTab = $((index) => {
+    selectedTabIndex.value = index;
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: styles$u["elm-tabs"],
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: styles$u["tab-container"],
+        children: tabLabels.map((tabLabel, index) => /* @__PURE__ */ jsx("div", {
+          class: [
+            styles$u["tab"],
+            {
+              [styles$u["active"]]: selectedTabIndex.value === index
+            }
+          ],
+          onClick$: () => selectTab(index),
+          children: tabLabel
+        }, index))
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles$u["tab-content-container"],
+        children: tabContents.map((content2, index) => /* @__PURE__ */ jsx("div", {
+          class: [
+            styles$u["tab-content"],
+            {
+              [styles$u["active"]]: selectedTabIndex.value === index
+            }
+          ],
+          children: content2
+        }, index))
+      })
+    ]
+  });
+});
 const toggle = "_toggle_pbyu8_1";
 const summary = "_summary_pbyu8_14";
 const content$2 = "_content_pbyu8_60";
@@ -3020,6 +3066,24 @@ const ElmJarkup = component$((props) => {
             expression: component.props.expression,
             block: true
           }, key);
+        case "Tabs": {
+          const labels = [];
+          const contents = [];
+          for (const tab2 of component.slots.default) {
+            labels.push(tab2.slots.labels);
+            contents.push(tab2.slots.contents);
+          }
+          const renderedLabels = labels.map((label2, index2) => /* @__PURE__ */ jsx("span", {
+            children: render(label2)
+          }, index2));
+          const renderedContents = contents.map((content2, index2) => /* @__PURE__ */ jsx("div", {
+            children: render(content2)
+          }, index2));
+          return /* @__PURE__ */ jsx(ElmTabs, {
+            tabLabels: renderedLabels,
+            tabContents: renderedContents
+          });
+        }
         case "Table":
           return /* @__PURE__ */ jsxs(ElmTable, {
             caption: component.props?.caption,
@@ -3358,6 +3422,7 @@ export {
   ElmTableCell,
   ElmTableHeader,
   ElmTableRow,
+  ElmTabs,
   ElmTextField,
   ElmToggle,
   ElmToggleTheme,

package/lib/style.css

@@ -184,21 +184,22 @@
 [data-theme=dark] ._text_zryur_1::selection {
   color: #3e434b;
   background-color: var(--color, #cccfd5);
-}._icon_19g82_1 {
+}._icon_1tbvt_1 {
   margin: 0;
   padding: 0;
   display: inline-block;
-  vertical-align: middle;
-  height: 1em;
+  vertical-align: top;
+  width: 0.95lh;
+  height: 0.95lh;
 }
-._icon_19g82_1::selection {
+._icon_1tbvt_1::selection {
   filter: brightness(1000%);
   background-color: var(--color, rgba(0, 0, 0, 0.25));
 }
-[data-theme=dark] ._icon_19g82_1 {
+[data-theme=dark] ._icon_1tbvt_1 {
   color: var(--color, rgba(255, 255, 255, 0.7));
 }
-[data-theme=dark] ._icon_19g82_1::selection {
+[data-theme=dark] ._icon_1tbvt_1::selection {
   color: rgba(0, 0, 0, 0.7);
   background-color: var(--color, rgba(255, 255, 255, 0.25));
 }._code_1sw1e_1 {
@@ -240,7 +241,80 @@
 }
 [data-theme=dark] ._parallax_1kb0k_1 {
   opacity: 0.1;
-}._toggle_pbyu8_1 {
+}._elm-tabs_hloyu_1 {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  border: solid 1px oklch(from black l c h / 0.1);
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0.125rem oklch(from black l c h / 0.1);
+  overflow: hidden;
+
+  background-color: oklch(from white l c h / 0.5);
+
+  [data-theme="dark"] & {
+    background-color: oklch(from black l c h / 0.1);
+  }
+}
+
+._tab-container_hloyu_18 {
+  display: flex;
+  flex-direction: row;
+  border-bottom: solid 1px oklch(from gray l c h / 0.3);
+}
+
+._tab_hloyu_18 {
+  box-sizing: border-box;
+  min-width: 6rem;
+  padding: 1rem;
+  margin: 0;
+  cursor: pointer;
+  border-right: dashed 1px oklch(from gray l c h / 0.2);
+  border-bottom: solid 2px transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition:
+    background-color 200ms,
+    border-color 200ms;
+
+  &._active_hloyu_40 {
+    background-color: oklch(from #7cbac5 l c h / 0.025);
+    border-bottom-color: #7cbac5;
+    cursor: default;
+  }
+
+  &:hover {
+    background-color: oklch(from #7cbac5 l c h / 0.05);
+  }
+}
+
+._tab-content-container_hloyu_51 {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 1em;
+}
+
+._tab-content_hloyu_51 {
+  width: 100%;
+  margin: 0;
+  transition:
+    transform 200ms,
+    opacity 200ms;
+  display: none;
+
+  &._active_hloyu_40 {
+    display: block;
+  }
+
+  @starting-style {
+    transform: translateY(-8px);
+    opacity: 0;
+  }
+}
+._toggle_pbyu8_1 {
   margin-block: var(--margin-block, 0);
   display: grid;
   transition: grid 200ms;

package/lib-types/components/containments/elm-tabs.d.ts

@@ -0,0 +1,6 @@
+import type { JSXOutput } from "@builder.io/qwik";
+export interface ElmTabsProps {
+    tabLabels: JSXOutput[];
+    tabContents: JSXOutput[];
+}
+export declare const ElmTabs: import("@builder.io/qwik").Component<ElmTabsProps>;

package/lib-types/components/containments/elm-tabs.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmTabs } from "./elm-tabs";
+declare const meta: Meta<typeof ElmTabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/lib-types/index.d.ts

@@ -2,6 +2,7 @@ export { ElmCodeBlock, type ElmCodeBlockProps, } from "./components/code/elm-cod
 export { ElmKatex, type ElmKatexProps } from "./components/code/elm-katex";
 export { ElmShikiHighlighter, type ElmShikiHighlighterProps, } from "./components/code/elm-shiki-highlighter";
 export { ElmParallax, type ElmParallaxProps, } from "./components/containments/elm-parallax";
+export { ElmTabs, type ElmTabsProps } from "./components/containments/elm-tabs";
 export { ElmToggle, type ElmToggleProps, } from "./components/containments/elm-toggle";
 export { ElmBlockFallback, type ElmBlockFallbackProps, } from "./components/fallback/elm-block-fallback";
 export { ElmRectangleWave, type ElmRectangleWaveProps, } from "./components/fallback/elm-rectangle-wave";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "publishConfig": {
     "access": "public"
   },
@@ -42,28 +42,28 @@
     "@storybook/addon-essentials": "8.6.18",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "25.5.0",
-    "eslint": "10.0.3",
+    "eslint": "10.1.0",
     "eslint-plugin-qwik": "1.19.2",
     "globals": "17.4.0",
-    "jarkup-ts": "^0.9.0",
+    "jarkup-ts": "^0.11.0",
     "np": "^11.0.2",
-    "prettier": "3.6.2",
-    "sass": "^1.97.3",
+    "prettier": "3.8.1",
+    "sass": "^1.98.0",
     "storybook": "8",
     "storybook-framework-qwik": "^0.4.0",
-    "typescript": "5.4.5",
-    "typescript-eslint": "8.57.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.2",
     "undici": "*",
     "vite": "^6.4.1",
     "vite-tsconfig-paths": "^6.1.1"
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "katex": "^0.16.38",
+    "katex": "^0.16.42",
     "lodash-es": "^4.17.23",
-    "marked": "^17.0.4",
+    "marked": "^17.0.5",
     "polished": "^4.3.1",
-    "shiki": "^4.0.1"
+    "shiki": "^4.0.2"
   },
   "scripts": {
     "build": "qwik build",