@elmethis/qwik 1.0.0-alpha.30 → 1.0.0-alpha.31

package/lib/index.qwik.cjs

@@ -42,15 +42,15 @@ const zodToJsonSchema = require("zod-to-json-schema");
 const uuid = require("uuid");
 const autoAnimate = require("@formkit/auto-animate");
 const esToolkit = require("es-toolkit");
-const tab = "_tab_1fco0_14";
-const active$3 = "_active_1fco0_37";
+const tab = "_tab_fka8s_14";
+const active$3 = "_active_fka8s_42";
 const styles$S = {
-  "elm-tabs": "_elm-tabs_1fco0_1",
-  "tab-container": "_tab-container_1fco0_14",
+  "elm-tabs": "_elm-tabs_fka8s_1",
+  "tab-container": "_tab-container_fka8s_14",
   tab,
   active: active$3,
-  "tab-content": "_tab-content_1fco0_48",
-  "tab-content-inner": "_tab-content-inner_1fco0_53"
+  "tab-content": "_tab-content_fka8s_53",
+  "tab-content-inner": "_tab-content-inner_fka8s_58"
 };
 const row$2 = "_row_12wiu_5";
 const open$1 = "_open_12wiu_11";
@@ -65,7 +65,7 @@ const styles$R = {
   both,
   inner
 };
-const _hf0$B = (p0) => ({
+const _hf0$C = (p0) => ({
   "--elmethis-scoped-transition-timing-function": p0.transitionTimingFunction ?? "ease-in-out"
 });
 const ElmCollapse = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -86,7 +86,7 @@ const ElmCollapse = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
       },
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$B, [
+    style: core$1._fnSignal(_hf0$C, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -98,7 +98,7 @@ function useBindableSignal({ signal, defaultValue }) {
   const internal = core$1.useSignal(defaultValue);
   return signal ?? internal;
 }
-const _hf0$A = (p0, p1) => p0.selectedValue.value === p1.value;
+const _hf0$B = (p0, p1) => p0.selectedValue.value === p1.value;
 const ElmTabsContext = core$1.createContextId("elmethis.tabs");
 const ElmTabs = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
@@ -174,7 +174,7 @@ const ElmTabPanel = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), /* @__PURE__ */ core$1._jsxSorted(ElmCollapse, null, {
     direction: "row",
-    isOpen: core$1._fnSignal(_hf0$A, [
+    isOpen: core$1._fnSignal(_hf0$B, [
       ctx,
       props
     ]),
@@ -293,8 +293,8 @@ const styles$O = {
 const styles$N = {
   "elm-inline-icon": "_elm-inline-icon_1qs0i_1"
 };
-const _hf0$z = (p0) => p0.width ?? p0.size ?? 16;
-const _hf1$j = (p0) => p0.height ?? p0.size ?? 16;
+const _hf0$A = (p0) => p0.width ?? p0.size ?? 16;
+const _hf1$k = (p0) => p0.height ?? p0.size ?? 16;
 const ElmInlineIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -312,18 +312,18 @@ const ElmInlineIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), /* @__PURE__ */ core$1._jsxSorted("img", {
     alt: core$1._wrapProp(_rawProps, "alt"),
-    height: core$1._fnSignal(_hf1$j, [
+    height: core$1._fnSignal(_hf1$k, [
       _rawProps
     ]),
     src: core$1._wrapProp(_rawProps, "src"),
-    width: core$1._fnSignal(_hf0$z, [
+    width: core$1._fnSignal(_hf0$A, [
       _rawProps
     ])
   }, {
     class: styles$N["elm-inline-icon"]
   }, null, 3, null), 0, "D4_0");
 }, "ElmInlineIcon_component_9LkENpSGozA"));
-const _hf0$y = (p0) => ({
+const _hf0$z = (p0) => ({
   ...p0.style,
   "--elmethis-scoped-color": p0.color,
   "--elmethis-scoped-font-size": p0.size ?? "1em",
@@ -386,7 +386,7 @@ const ElmInlineText = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
       textStyles.text,
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$y, [
+    style: core$1._fnSignal(_hf0$z, [
       _rawProps
     ]),
     ...core$1._getVarProps(rest)
@@ -395,7 +395,7 @@ const ElmInlineText = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
 const styles$M = {
   "elm-paragraph": "_elm-paragraph_rbsk5_1"
 };
-const _hf0$x = (p0) => ({
+const _hf0$y = (p0) => ({
   ...p0.style,
   "--elmethis-scoped-color": p0.color,
   "--elmethis-scoped-background-color": p0.backgroundColor
@@ -413,7 +413,7 @@ const ElmParagraph = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
       textStyles.text,
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$x, [
+    style: core$1._fnSignal(_hf0$y, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -533,8 +533,8 @@ function firstChildMargin(index) {
     marginBlockStart: 0
   } : void 0;
 }
-const _hf0$w = (p0) => p0.props.min ?? 0;
-const _hf1$i = (p0) => p0.props.max;
+const _hf0$x = (p0) => p0.props.min ?? 0;
+const _hf1$j = (p0) => p0.props.max;
 const textFieldInputType = {
   shortText: "text",
   number: "number",
@@ -691,10 +691,10 @@ const basicCatalog = new CatalogRenderer([
   defineRenderer(basic_catalog.SliderApi, (_rawProps) => {
     const value = typeof _rawProps.props.value === "number" ? _rawProps.props.value : Number(_rawProps.ctx.dataContext.resolveDynamicValue(_rawProps.props.value) ?? 0);
     return /* @__PURE__ */ core$1._jsxSorted("input", {
-      max: core$1._fnSignal(_hf1$i, [
+      max: core$1._fnSignal(_hf1$j, [
         _rawProps
       ]),
-      min: core$1._fnSignal(_hf0$w, [
+      min: core$1._fnSignal(_hf0$x, [
         _rawProps
       ]),
       "q-e:change": /* @__PURE__ */ core$1.inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", Number(el.value)), "basicCatalog_defineRenderer_input_q_e_change_U0Dwvjz0O9o"),
@@ -1190,7 +1190,7 @@ const ElmA2ui = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
 const styles$K = {
   "elm-katex": "_elm-katex_189xe_1"
 };
-const _hf0$v = (p0) => p0.value ?? "";
+const _hf0$w = (p0) => p0.value ?? "";
 const ElmKatex = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
     "class",
@@ -1212,7 +1212,7 @@ const ElmKatex = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
       props.block ? styles$K["elm-katex"] : void 0,
       props.class
     ],
-    dangerouslySetInnerHTML: core$1._fnSignal(_hf0$v, [
+    dangerouslySetInnerHTML: core$1._fnSignal(_hf0$w, [
       html
     ]),
     ...core$1._getVarProps(rest)
@@ -1229,8 +1229,8 @@ const styles$J = {
   divider: divider$1,
   code
 };
-const _hf0$u = (p0) => p0.icon.viewBox;
-const _hf1$h = (p0) => p0.size ?? 24;
+const _hf0$v = (p0) => p0.icon.viewBox;
+const _hf1$i = (p0) => p0.size ?? 24;
 const scopeId = (value, key2, suffix) => key2 === "id" ? `${value}-${suffix}` : value.replace(/url\(#([^)]+)\)/g, `url(#$1-${suffix})`);
 const renderNode = (node, suffix, key2) => {
   const attrs = {};
@@ -1249,13 +1249,13 @@ const LanguageGlyph = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
   const suffix = core$1.useId();
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: core$1._fnSignal(_hf0$u, [
+    viewBox: core$1._fnSignal(_hf0$v, [
       _rawProps
     ]),
-    width: core$1._fnSignal(_hf1$h, [
+    width: core$1._fnSignal(_hf1$i, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf1$h, [
+    height: core$1._fnSignal(_hf1$i, [
       _rawProps
     ]),
     class: core$1._wrapProp(_rawProps, "class"),
@@ -1266,13 +1266,13 @@ const LanguageGlyph = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
 const styles$I = {
   "elm-mdi-icon": "_elm-mdi-icon_ihskx_1"
 };
-const _hf0$t = (p0) => ({
+const _hf0$u = (p0) => ({
   "--elmethis-scoped-color": p0.lightColor ?? p0.color ?? "currentColor",
   "--dark-color": p0.darkColor ?? p0.color ?? "currentColor",
   ...p0.style
 });
-const _hf1$g = (p0) => p0.size ?? "1em";
-const _hf2$b = (p0) => p0.color ?? "currentColor";
+const _hf1$h = (p0) => p0.size ?? "1em";
+const _hf2$c = (p0) => p0.color ?? "currentColor";
 const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -1288,17 +1288,17 @@ const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
       styles$I["elm-mdi-icon"],
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$t, [
+    style: core$1._fnSignal(_hf0$u, [
       _rawProps
     ]),
-    width: core$1._fnSignal(_hf1$g, [
+    width: core$1._fnSignal(_hf1$h, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf1$g, [
+    height: core$1._fnSignal(_hf1$h, [
       _rawProps
     ]),
     viewBox: "0 0 24 24",
-    fill: core$1._fnSignal(_hf2$b, [
+    fill: core$1._fnSignal(_hf2$c, [
       _rawProps
     ]),
     xmlns: "http://www.w3.org/2000/svg",
@@ -1309,7 +1309,7 @@ const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
     d: core$1._wrapProp(_rawProps, "d")
   }, null, null, 3, null), 0, "IA_0");
 }, "ElmMdiIcon_component_AUxPCIu3tI0"));
-const _hf0$s = (p0) => p0.size ?? 24;
+const _hf0$t = (p0) => p0.size ?? 24;
 const ElmLanguageIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const normalized = core.normalizeLanguage(_rawProps.language);
   if (normalized === "file") {
@@ -1322,7 +1322,7 @@ const ElmLanguageIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core
   return /* @__PURE__ */ core$1._jsxSorted(LanguageGlyph, {
     icon: core.languageIcons[normalized]
   }, {
-    size: core$1._fnSignal(_hf0$s, [
+    size: core$1._fnSignal(_hf0$t, [
       _rawProps
     ]),
     class: core$1._wrapProp(_rawProps, "class"),
@@ -1441,8 +1441,8 @@ const useClipboard = (options) => {
     copy
   };
 };
-const _hf0$r = (p0) => p0.language ?? "txt";
-const _hf1$f = (p0) => p0.caption || (p0.language ?? "txt");
+const _hf0$s = (p0) => p0.language ?? "txt";
+const _hf1$g = (p0) => p0.caption || (p0.language ?? "txt");
 const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -1463,14 +1463,14 @@ const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
     /* @__PURE__ */ core$1._jsxSorted("span", null, {
       class: styles$J["language-icon"]
     }, /* @__PURE__ */ core$1._jsxSorted(ElmLanguageIcon, null, {
-      language: core$1._fnSignal(_hf0$r, [
+      language: core$1._fnSignal(_hf0$s, [
         _rawProps
       ])
     }, null, 3, "sK_0"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("span", null, {
       class: styles$J.caption
     }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, [
-      core$1._fnSignal(_hf1$f, [
+      core$1._fnSignal(_hf1$g, [
         _rawProps
       ]),
       /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "sK_1")
@@ -1485,7 +1485,7 @@ const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
       class: styles$J.code
     }, /* @__PURE__ */ core$1._jsxSorted(ElmShikiHighlighter, null, {
       code: core$1._wrapProp(_rawProps, "code"),
-      language: core$1._fnSignal(_hf0$r, [
+      language: core$1._fnSignal(_hf0$s, [
         _rawProps
       ])
     }, null, 3, "sK_4"), 1, null)
@@ -1537,13 +1537,13 @@ const styles$F = {
   "error-notice": "_error-notice_p7xym_421",
   "error-message": "_error-message_p7xym_431"
 };
-const _hf0$q = (p0, p1) => ({
+const _hf0$r = (p0, p1) => ({
   "--elmethis-scoped-progress": p1.value,
   "--elmethis-scoped-hover": p0.value ?? 0
 });
-const _hf1$e = (p0) => p0.errorMessage ?? "This audio couldn't be loaded.";
-const _hf2$a = (p0) => p0.value ? "Pause" : "Play";
-const _hf3$9 = (p0) => p0.value ? "Unmute" : "Mute";
+const _hf1$f = (p0) => p0.errorMessage ?? "This audio couldn't be loaded.";
+const _hf2$b = (p0) => p0.value ? "Pause" : "Play";
+const _hf3$a = (p0) => p0.value ? "Unmute" : "Mute";
 const _hf4$5 = (p0, p1) => p0.value ? 0 : p1.value;
 const _hf5$3 = (p0, p1) => ({
   "--elmethis-scoped-volume": p0.value ? 0 : p1.value
@@ -1702,7 +1702,7 @@ const ElmAudioPlayer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$
       hasError.value && styles$F.errored,
       props.class
     ],
-    style: core$1._fnSignal(_hf0$q, [
+    style: core$1._fnSignal(_hf0$r, [
       hoverRatio,
       progress
     ]),
@@ -1807,7 +1807,7 @@ const ElmAudioPlayer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$
       }, null, 3, "CY_2"),
       /* @__PURE__ */ core$1._jsxSorted("span", null, {
         class: styles$F["error-message"]
-      }, core$1._fnSignal(_hf1$e, [
+      }, core$1._fnSignal(_hf1$f, [
         props
       ]), 1, null)
     ], 1, "CY_3") : /* @__PURE__ */ core$1._jsxSorted(jsxRuntime.Fragment, null, null, [
@@ -1905,7 +1905,7 @@ const ElmAudioPlayer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$
             type: "button",
             class: styles$F["play-button"],
             "q-e:click": togglePlay,
-            "aria-label": core$1._fnSignal(_hf2$a, [
+            "aria-label": core$1._fnSignal(_hf2$b, [
               isPlaying
             ]),
             "aria-pressed": core$1._wrapProp(isPlaying)
@@ -1937,7 +1937,7 @@ const ElmAudioPlayer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$
             type: "button",
             class: styles$F["icon-button"],
             "q-e:click": toggleMute,
-            "aria-label": core$1._fnSignal(_hf3$9, [
+            "aria-label": core$1._fnSignal(_hf3$a, [
               isMuted
             ]),
             "aria-pressed": core$1._wrapProp(isMuted)
@@ -2110,10 +2110,10 @@ const useModal = (options = {}) => {
     toggle
   };
 };
-const _hf0$p = (p0) => p0.alt ?? p0.caption ?? "Image";
-const _hf1$d = (p0, p1) => p0 ? void 0 : p1.srcset;
-const _hf2$9 = (p0, p1) => p0 ? void 0 : p1.sizes;
-const _hf3$8 = (p0) => ({
+const _hf0$q = (p0) => p0.alt ?? p0.caption ?? "Image";
+const _hf1$e = (p0, p1) => p0 ? void 0 : p1.srcset;
+const _hf2$a = (p0, p1) => p0 ? void 0 : p1.sizes;
+const _hf3$9 = (p0) => ({
   "--elmethis-scoped-opacity": p0.value ? 1 : 0.01
 });
 const _hf4$4 = (p0) => ({
@@ -2166,7 +2166,7 @@ const ElmBlockImage = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     isLoading
   ]));
   const ImageComponent = (isModal) => /* @__PURE__ */ core$1._jsxSorted("img", {
-    alt: core$1._fnSignal(_hf0$p, [
+    alt: core$1._fnSignal(_hf0$q, [
       props
     ]),
     fetchPriority: isModal ? "low" : "auto",
@@ -2176,12 +2176,12 @@ const ElmBlockImage = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     // Only the inline image owns imgRef; the modal image must not steal it
     // (ElmModal keeps its slot mounted, so both can coexist in the DOM).
     ref: isModal ? void 0 : imgRef,
-    sizes: core$1._fnSignal(_hf2$9, [
+    sizes: core$1._fnSignal(_hf2$a, [
       isModal,
       props
     ]),
     src: core$1._wrapProp(props, "src"),
-    srcset: core$1._fnSignal(_hf1$d, [
+    srcset: core$1._fnSignal(_hf1$e, [
       isModal,
       props
     ]),
@@ -2204,7 +2204,7 @@ const ElmBlockImage = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
   }, core$1._getConstProps(rest), [
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
       class: styles$E["image-container"],
-      style: core$1._fnSignal(_hf3$8, [
+      style: core$1._fnSignal(_hf3$9, [
         isLoading
       ]),
       "q-e:click": handleOpenModal
@@ -2308,7 +2308,7 @@ const styles$A = {
   description,
   link
 };
-const _hf0$o = (p0, p1, p2) => p2.value || p0.image == null ? p1 : {};
+const _hf0$p = (p0, p1, p2) => p2.value || p0.image == null ? p1 : {};
 const ElmBookmark = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -2344,7 +2344,7 @@ const ElmBookmark = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   }, [
     /* @__PURE__ */ core$1._jsxSorted("img", {
       src: core$1._wrapProp(_rawProps, "image"),
-      style: core$1._fnSignal(_hf0$o, [
+      style: core$1._fnSignal(_hf0$p, [
         _rawProps,
         hiddenStyle,
         isError
@@ -2401,8 +2401,8 @@ const styles$z = {
   border,
   content: content$1
 };
-const _hf0$n = (p0) => p0.monochrome ? "var(--elmethis-color-neutral-weak)" : "var(--elmethis-color-primary)";
-const _hf1$c = (p0, p1) => p1.monochrome ? "var(--elmethis-color-neutral-weak)" : p0.value ? "var(--elmethis-color-accent-error)" : "var(--elmethis-color-primary)";
+const _hf0$o = (p0) => p0.monochrome ? "var(--elmethis-color-neutral-weak)" : "var(--elmethis-color-primary)";
+const _hf1$d = (p0, p1) => p1.monochrome ? "var(--elmethis-color-neutral-weak)" : p0.value ? "var(--elmethis-color-accent-error)" : "var(--elmethis-color-primary)";
 const ElmToggle = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
     "class",
@@ -2450,7 +2450,7 @@ const ElmToggle = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
           ]
         }, null, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
           d: js.mdiChevronRight,
-          color: core$1._fnSignal(_hf0$n, [
+          color: core$1._fnSignal(_hf0$o, [
             props
           ]),
           size: "1rem"
@@ -2472,7 +2472,7 @@ const ElmToggle = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
       }, null, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
         d: js.mdiPlus,
         size: "1rem",
-        color: core$1._fnSignal(_hf1$c, [
+        color: core$1._fnSignal(_hf1$d, [
           isOpen,
           props
         ])
@@ -2552,7 +2552,7 @@ const styles$x = {
   warning,
   caution
 };
-const _hf0$m = (p0) => p0.type ?? "note";
+const _hf0$n = (p0) => p0.type ?? "note";
 const ICON_MAP = Object.freeze({
   note: js.mdiInformation,
   tip: js.mdiLightbulbOn,
@@ -2584,7 +2584,7 @@ const ElmCallout = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
         class: styles$x.icon,
         size: "1.25rem"
       }, null, 3, "qp_0"),
-      /* @__PURE__ */ core$1._jsxSorted("span", null, null, core$1._fnSignal(_hf0$m, [
+      /* @__PURE__ */ core$1._jsxSorted("span", null, null, core$1._fnSignal(_hf0$n, [
         _rawProps
       ]), 1, null)
     ], 1, null),
@@ -2645,16 +2645,23 @@ const ElmList = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
     }, core$1._getConstProps(props), /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "jF_2"), 0, "jF_3");
   }
 }, "ElmList_component_aFEzPziW6Gs"));
-const caption = "_caption_14qfo_8";
-const spacing = "_spacing_14qfo_25";
+const caption = "_caption_wl7v3_68";
+const spacing = "_spacing_wl7v3_85";
 const styles$u = {
-  "elm-table": "_elm-table_14qfo_1",
+  "elm-table-frame": "_elm-table-frame_wl7v3_3",
+  "elm-table-scroll": "_elm-table-scroll_wl7v3_50",
+  "elm-table": "_elm-table_wl7v3_3",
   caption,
-  "caption-inner": "_caption-inner_14qfo_18",
-  spacing
+  "caption-inner": "_caption-inner_wl7v3_78",
+  spacing,
+  "sticky-row-header": "_sticky-row-header_wl7v3_96"
 };
 const HasRowHeaderContext = core$1.createContextId("elm.table.HasRowHeader");
 const TableSectionContext = core$1.createContextId("elm.table.Section");
+const _hf0$m = (p0, p1) => p1.value && !p0.value ? "" : void 0;
+const _hf1$c = (p0) => p0.value ? 0 : void 0;
+const _hf2$9 = (p0, p1) => p0.value && p1.caption != null ? "region" : void 0;
+const _hf3$8 = (p0, p1) => p0.value && p1.caption != null ? p1.caption : void 0;
 const ElmTable = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
     "class",
@@ -2670,10 +2677,68 @@ const ElmTable = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
     props
   ]));
   core$1.useContextProvider(HasRowHeaderContext, hasRowHeader);
-  return /* @__PURE__ */ core$1._jsxSplit("table", {
+  const scrollRef = core$1.useSignal();
+  const canScroll = core$1.useSignal(false);
+  const atStart = core$1.useSignal(true);
+  const atEnd = core$1.useSignal(true);
+  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ cleanup }) => {
+    const atEnd2 = core$1._captures[0], atStart2 = core$1._captures[1], canScroll2 = core$1._captures[2], scrollRef2 = core$1._captures[3];
+    const el = scrollRef2.value;
+    if (el == null) return;
+    const measure = () => {
+      const max = el.scrollWidth - el.clientWidth;
+      canScroll2.value = max > 1;
+      atStart2.value = el.scrollLeft <= 1;
+      atEnd2.value = el.scrollLeft >= max - 1;
+    };
+    measure();
+    el.addEventListener("scroll", measure, {
+      passive: true
+    });
+    cleanup(() => el.removeEventListener("scroll", measure));
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(measure);
+      observer.observe(el);
+      cleanup(() => observer.disconnect());
+    }
+  }, "ElmTable_component_useVisibleTask_93J4bNO5KnI", [
+    atEnd,
+    atStart,
+    canScroll,
+    scrollRef
+  ]), {
+    strategy: "document-ready"
+  });
+  return /* @__PURE__ */ core$1._jsxSorted("div", null, {
+    class: styles$u["elm-table-frame"],
+    "data-overflow-start": core$1._fnSignal(_hf0$m, [
+      atStart,
+      canScroll
+    ]),
+    "data-overflow-end": core$1._fnSignal(_hf0$m, [
+      atEnd,
+      canScroll
+    ])
+  }, /* @__PURE__ */ core$1._jsxSorted("div", {
+    "aria-label": core$1._fnSignal(_hf3$8, [
+      canScroll,
+      props
+    ]),
+    ref: scrollRef,
+    role: core$1._fnSignal(_hf2$9, [
+      canScroll,
+      props
+    ])
+  }, {
+    class: styles$u["elm-table-scroll"],
+    tabIndex: core$1._fnSignal(_hf1$c, [
+      canScroll
+    ])
+  }, /* @__PURE__ */ core$1._jsxSplit("table", {
     class: [
       styles$u["elm-table"],
       textStyles.text,
+      hasRowHeader.value && styles$u["sticky-row-header"],
       props.class
     ],
     ...core$1._getVarProps(rest)
@@ -2692,7 +2757,7 @@ const ElmTable = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
       }, null, 3, null)
     ], 1, null), 1, "Yw_1"),
     /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "Yw_2")
-  ], 0, "Yw_3");
+  ], 0, null), 1, null), 1, "Yw_3");
 }, "ElmTable_component_UT2AChu46oY"));
 const styles$t = {
   "elm-table-header": "_elm-table-header_jhft7_1"

package/lib/index.qwik.mjs

@@ -20,15 +20,15 @@ import { zodToJsonSchema } from "zod-to-json-schema";
 import { v7 } from "uuid";
 import autoAnimate from "@formkit/auto-animate";
 import { cloneDeep, isEqual } from "es-toolkit";
-const tab = "_tab_1fco0_14";
-const active$3 = "_active_1fco0_37";
+const tab = "_tab_fka8s_14";
+const active$3 = "_active_fka8s_42";
 const styles$S = {
-  "elm-tabs": "_elm-tabs_1fco0_1",
-  "tab-container": "_tab-container_1fco0_14",
+  "elm-tabs": "_elm-tabs_fka8s_1",
+  "tab-container": "_tab-container_fka8s_14",
   tab,
   active: active$3,
-  "tab-content": "_tab-content_1fco0_48",
-  "tab-content-inner": "_tab-content-inner_1fco0_53"
+  "tab-content": "_tab-content_fka8s_53",
+  "tab-content-inner": "_tab-content-inner_fka8s_58"
 };
 const row$2 = "_row_12wiu_5";
 const open$1 = "_open_12wiu_11";
@@ -43,7 +43,7 @@ const styles$R = {
   both,
   inner
 };
-const _hf0$B = (p0) => ({
+const _hf0$C = (p0) => ({
   "--elmethis-scoped-transition-timing-function": p0.transitionTimingFunction ?? "ease-in-out"
 });
 const ElmCollapse = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
@@ -64,7 +64,7 @@ const ElmCollapse = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
       },
       _rawProps.class
     ],
-    style: _fnSignal(_hf0$B, [
+    style: _fnSignal(_hf0$C, [
       _rawProps
     ]),
     ..._getVarProps(props)
@@ -76,7 +76,7 @@ function useBindableSignal({ signal, defaultValue }) {
   const internal = useSignal(defaultValue);
   return signal ?? internal;
 }
-const _hf0$A = (p0, p1) => p0.selectedValue.value === p1.value;
+const _hf0$B = (p0, p1) => p0.selectedValue.value === p1.value;
 const ElmTabsContext = createContextId("elmethis.tabs");
 const ElmTabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const rest = _restProps(props, [
@@ -152,7 +152,7 @@ const ElmTabPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     ..._getVarProps(rest)
   }, _getConstProps(rest), /* @__PURE__ */ _jsxSorted(ElmCollapse, null, {
     direction: "row",
-    isOpen: _fnSignal(_hf0$A, [
+    isOpen: _fnSignal(_hf0$B, [
       ctx,
       props
     ]),
@@ -271,8 +271,8 @@ const styles$O = {
 const styles$N = {
   "elm-inline-icon": "_elm-inline-icon_1qs0i_1"
 };
-const _hf0$z = (p0) => p0.width ?? p0.size ?? 16;
-const _hf1$j = (p0) => p0.height ?? p0.size ?? 16;
+const _hf0$A = (p0) => p0.width ?? p0.size ?? 16;
+const _hf1$k = (p0) => p0.height ?? p0.size ?? 16;
 const ElmInlineIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
     "class",
@@ -290,18 +290,18 @@ const ElmInlineIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
     ..._getVarProps(props)
   }, _getConstProps(props), /* @__PURE__ */ _jsxSorted("img", {
     alt: _wrapProp(_rawProps, "alt"),
-    height: _fnSignal(_hf1$j, [
+    height: _fnSignal(_hf1$k, [
       _rawProps
     ]),
     src: _wrapProp(_rawProps, "src"),
-    width: _fnSignal(_hf0$z, [
+    width: _fnSignal(_hf0$A, [
       _rawProps
     ])
   }, {
     class: styles$N["elm-inline-icon"]
   }, null, 3, null), 0, "D4_0");
 }, "ElmInlineIcon_component_9LkENpSGozA"));
-const _hf0$y = (p0) => ({
+const _hf0$z = (p0) => ({
   ...p0.style,
   "--elmethis-scoped-color": p0.color,
   "--elmethis-scoped-font-size": p0.size ?? "1em",
@@ -364,7 +364,7 @@ const ElmInlineText = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
       textStyles.text,
       _rawProps.class
     ],
-    style: _fnSignal(_hf0$y, [
+    style: _fnSignal(_hf0$z, [
       _rawProps
     ]),
     ..._getVarProps(rest)
@@ -373,7 +373,7 @@ const ElmInlineText = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
 const styles$M = {
   "elm-paragraph": "_elm-paragraph_rbsk5_1"
 };
-const _hf0$x = (p0) => ({
+const _hf0$y = (p0) => ({
   ...p0.style,
   "--elmethis-scoped-color": p0.color,
   "--elmethis-scoped-background-color": p0.backgroundColor
@@ -391,7 +391,7 @@ const ElmParagraph = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
       textStyles.text,
       _rawProps.class
     ],
-    style: _fnSignal(_hf0$x, [
+    style: _fnSignal(_hf0$y, [
       _rawProps
     ]),
     ..._getVarProps(props)
@@ -511,8 +511,8 @@ function firstChildMargin(index) {
     marginBlockStart: 0
   } : void 0;
 }
-const _hf0$w = (p0) => p0.props.min ?? 0;
-const _hf1$i = (p0) => p0.props.max;
+const _hf0$x = (p0) => p0.props.min ?? 0;
+const _hf1$j = (p0) => p0.props.max;
 const textFieldInputType = {
   shortText: "text",
   number: "number",
@@ -669,10 +669,10 @@ const basicCatalog = new CatalogRenderer([
   defineRenderer(SliderApi, (_rawProps) => {
     const value = typeof _rawProps.props.value === "number" ? _rawProps.props.value : Number(_rawProps.ctx.dataContext.resolveDynamicValue(_rawProps.props.value) ?? 0);
     return /* @__PURE__ */ _jsxSorted("input", {
-      max: _fnSignal(_hf1$i, [
+      max: _fnSignal(_hf1$j, [
         _rawProps
       ]),
-      min: _fnSignal(_hf0$w, [
+      min: _fnSignal(_hf0$x, [
         _rawProps
       ]),
       "q-e:change": /* @__PURE__ */ inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", Number(el.value)), "basicCatalog_defineRenderer_input_q_e_change_U0Dwvjz0O9o"),
@@ -1168,7 +1168,7 @@ const ElmA2ui = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
 const styles$K = {
   "elm-katex": "_elm-katex_189xe_1"
 };
-const _hf0$v = (p0) => p0.value ?? "";
+const _hf0$w = (p0) => p0.value ?? "";
 const ElmKatex = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const rest = _restProps(props, [
     "class",
@@ -1190,7 +1190,7 @@ const ElmKatex = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
       props.block ? styles$K["elm-katex"] : void 0,
       props.class
     ],
-    dangerouslySetInnerHTML: _fnSignal(_hf0$v, [
+    dangerouslySetInnerHTML: _fnSignal(_hf0$w, [
       html
     ]),
     ..._getVarProps(rest)
@@ -1207,8 +1207,8 @@ const styles$J = {
   divider: divider$1,
   code
 };
-const _hf0$u = (p0) => p0.icon.viewBox;
-const _hf1$h = (p0) => p0.size ?? 24;
+const _hf0$v = (p0) => p0.icon.viewBox;
+const _hf1$i = (p0) => p0.size ?? 24;
 const scopeId = (value, key2, suffix) => key2 === "id" ? `${value}-${suffix}` : value.replace(/url\(#([^)]+)\)/g, `url(#$1-${suffix})`);
 const renderNode = (node, suffix, key2) => {
   const attrs = {};
@@ -1227,13 +1227,13 @@ const LanguageGlyph = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
   const suffix = useId();
   return /* @__PURE__ */ _jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: _fnSignal(_hf0$u, [
+    viewBox: _fnSignal(_hf0$v, [
       _rawProps
     ]),
-    width: _fnSignal(_hf1$h, [
+    width: _fnSignal(_hf1$i, [
       _rawProps
     ]),
-    height: _fnSignal(_hf1$h, [
+    height: _fnSignal(_hf1$i, [
       _rawProps
     ]),
     class: _wrapProp(_rawProps, "class"),
@@ -1244,13 +1244,13 @@ const LanguageGlyph = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
 const styles$I = {
   "elm-mdi-icon": "_elm-mdi-icon_ihskx_1"
 };
-const _hf0$t = (p0) => ({
+const _hf0$u = (p0) => ({
   "--elmethis-scoped-color": p0.lightColor ?? p0.color ?? "currentColor",
   "--dark-color": p0.darkColor ?? p0.color ?? "currentColor",
   ...p0.style
 });
-const _hf1$g = (p0) => p0.size ?? "1em";
-const _hf2$b = (p0) => p0.color ?? "currentColor";
+const _hf1$h = (p0) => p0.size ?? "1em";
+const _hf2$c = (p0) => p0.color ?? "currentColor";
 const ElmMdiIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
     "class",
@@ -1266,17 +1266,17 @@ const ElmMdiIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
       styles$I["elm-mdi-icon"],
       _rawProps.class
     ],
-    style: _fnSignal(_hf0$t, [
+    style: _fnSignal(_hf0$u, [
       _rawProps
     ]),
-    width: _fnSignal(_hf1$g, [
+    width: _fnSignal(_hf1$h, [
       _rawProps
     ]),
-    height: _fnSignal(_hf1$g, [
+    height: _fnSignal(_hf1$h, [
       _rawProps
     ]),
     viewBox: "0 0 24 24",
-    fill: _fnSignal(_hf2$b, [
+    fill: _fnSignal(_hf2$c, [
       _rawProps
     ]),
     xmlns: "http://www.w3.org/2000/svg",
@@ -1287,7 +1287,7 @@ const ElmMdiIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
     d: _wrapProp(_rawProps, "d")
   }, null, null, 3, null), 0, "IA_0");
 }, "ElmMdiIcon_component_AUxPCIu3tI0"));
-const _hf0$s = (p0) => p0.size ?? 24;
+const _hf0$t = (p0) => p0.size ?? 24;
 const ElmLanguageIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const normalized = normalizeLanguage(_rawProps.language);
   if (normalized === "file") {
@@ -1300,7 +1300,7 @@ const ElmLanguageIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
   return /* @__PURE__ */ _jsxSorted(LanguageGlyph, {
     icon: languageIcons[normalized]
   }, {
-    size: _fnSignal(_hf0$s, [
+    size: _fnSignal(_hf0$t, [
       _rawProps
     ]),
     class: _wrapProp(_rawProps, "class"),
@@ -1419,8 +1419,8 @@ const useClipboard = (options) => {
     copy
   };
 };
-const _hf0$r = (p0) => p0.language ?? "txt";
-const _hf1$f = (p0) => p0.caption || (p0.language ?? "txt");
+const _hf0$s = (p0) => p0.language ?? "txt";
+const _hf1$g = (p0) => p0.caption || (p0.language ?? "txt");
 const ElmCodeBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
     "class",
@@ -1441,14 +1441,14 @@ const ElmCodeBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
     /* @__PURE__ */ _jsxSorted("span", null, {
       class: styles$J["language-icon"]
     }, /* @__PURE__ */ _jsxSorted(ElmLanguageIcon, null, {
-      language: _fnSignal(_hf0$r, [
+      language: _fnSignal(_hf0$s, [
         _rawProps
       ])
     }, null, 3, "sK_0"), 1, null),
     /* @__PURE__ */ _jsxSorted("span", null, {
       class: styles$J.caption
     }, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, [
-      _fnSignal(_hf1$f, [
+      _fnSignal(_hf1$g, [
         _rawProps
       ]),
       /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "sK_1")
@@ -1463,7 +1463,7 @@ const ElmCodeBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
       class: styles$J.code
     }, /* @__PURE__ */ _jsxSorted(ElmShikiHighlighter, null, {
       code: _wrapProp(_rawProps, "code"),
-      language: _fnSignal(_hf0$r, [
+      language: _fnSignal(_hf0$s, [
         _rawProps
       ])
     }, null, 3, "sK_4"), 1, null)
@@ -1515,13 +1515,13 @@ const styles$F = {
   "error-notice": "_error-notice_p7xym_421",
   "error-message": "_error-message_p7xym_431"
 };
-const _hf0$q = (p0, p1) => ({
+const _hf0$r = (p0, p1) => ({
   "--elmethis-scoped-progress": p1.value,
   "--elmethis-scoped-hover": p0.value ?? 0
 });
-const _hf1$e = (p0) => p0.errorMessage ?? "This audio couldn't be loaded.";
-const _hf2$a = (p0) => p0.value ? "Pause" : "Play";
-const _hf3$9 = (p0) => p0.value ? "Unmute" : "Mute";
+const _hf1$f = (p0) => p0.errorMessage ?? "This audio couldn't be loaded.";
+const _hf2$b = (p0) => p0.value ? "Pause" : "Play";
+const _hf3$a = (p0) => p0.value ? "Unmute" : "Mute";
 const _hf4$5 = (p0, p1) => p0.value ? 0 : p1.value;
 const _hf5$3 = (p0, p1) => ({
   "--elmethis-scoped-volume": p0.value ? 0 : p1.value
@@ -1680,7 +1680,7 @@ const ElmAudioPlayer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       hasError.value && styles$F.errored,
       props.class
     ],
-    style: _fnSignal(_hf0$q, [
+    style: _fnSignal(_hf0$r, [
       hoverRatio,
       progress
     ]),
@@ -1785,7 +1785,7 @@ const ElmAudioPlayer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       }, null, 3, "CY_2"),
       /* @__PURE__ */ _jsxSorted("span", null, {
         class: styles$F["error-message"]
-      }, _fnSignal(_hf1$e, [
+      }, _fnSignal(_hf1$f, [
         props
       ]), 1, null)
     ], 1, "CY_3") : /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
@@ -1883,7 +1883,7 @@ const ElmAudioPlayer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
             type: "button",
             class: styles$F["play-button"],
             "q-e:click": togglePlay,
-            "aria-label": _fnSignal(_hf2$a, [
+            "aria-label": _fnSignal(_hf2$b, [
               isPlaying
             ]),
             "aria-pressed": _wrapProp(isPlaying)
@@ -1915,7 +1915,7 @@ const ElmAudioPlayer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
             type: "button",
             class: styles$F["icon-button"],
             "q-e:click": toggleMute,
-            "aria-label": _fnSignal(_hf3$9, [
+            "aria-label": _fnSignal(_hf3$a, [
               isMuted
             ]),
             "aria-pressed": _wrapProp(isMuted)
@@ -2088,10 +2088,10 @@ const useModal = (options = {}) => {
     toggle
   };
 };
-const _hf0$p = (p0) => p0.alt ?? p0.caption ?? "Image";
-const _hf1$d = (p0, p1) => p0 ? void 0 : p1.srcset;
-const _hf2$9 = (p0, p1) => p0 ? void 0 : p1.sizes;
-const _hf3$8 = (p0) => ({
+const _hf0$q = (p0) => p0.alt ?? p0.caption ?? "Image";
+const _hf1$e = (p0, p1) => p0 ? void 0 : p1.srcset;
+const _hf2$a = (p0, p1) => p0 ? void 0 : p1.sizes;
+const _hf3$9 = (p0) => ({
   "--elmethis-scoped-opacity": p0.value ? 1 : 0.01
 });
 const _hf4$4 = (p0) => ({
@@ -2144,7 +2144,7 @@ const ElmBlockImage = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     isLoading
   ]));
   const ImageComponent = (isModal) => /* @__PURE__ */ _jsxSorted("img", {
-    alt: _fnSignal(_hf0$p, [
+    alt: _fnSignal(_hf0$q, [
       props
     ]),
     fetchPriority: isModal ? "low" : "auto",
@@ -2154,12 +2154,12 @@ const ElmBlockImage = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     // Only the inline image owns imgRef; the modal image must not steal it
     // (ElmModal keeps its slot mounted, so both can coexist in the DOM).
     ref: isModal ? void 0 : imgRef,
-    sizes: _fnSignal(_hf2$9, [
+    sizes: _fnSignal(_hf2$a, [
       isModal,
       props
     ]),
     src: _wrapProp(props, "src"),
-    srcset: _fnSignal(_hf1$d, [
+    srcset: _fnSignal(_hf1$e, [
       isModal,
       props
     ]),
@@ -2182,7 +2182,7 @@ const ElmBlockImage = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
   }, _getConstProps(rest), [
     /* @__PURE__ */ _jsxSorted("div", null, {
       class: styles$E["image-container"],
-      style: _fnSignal(_hf3$8, [
+      style: _fnSignal(_hf3$9, [
         isLoading
       ]),
       "q-e:click": handleOpenModal
@@ -2286,7 +2286,7 @@ const styles$A = {
   description,
   link
 };
-const _hf0$o = (p0, p1, p2) => p2.value || p0.image == null ? p1 : {};
+const _hf0$p = (p0, p1, p2) => p2.value || p0.image == null ? p1 : {};
 const ElmBookmark = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
     "class",
@@ -2322,7 +2322,7 @@ const ElmBookmark = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
   }, [
     /* @__PURE__ */ _jsxSorted("img", {
       src: _wrapProp(_rawProps, "image"),
-      style: _fnSignal(_hf0$o, [
+      style: _fnSignal(_hf0$p, [
         _rawProps,
         hiddenStyle,
         isError
@@ -2379,8 +2379,8 @@ const styles$z = {
   border,
   content: content$1
 };
-const _hf0$n = (p0) => p0.monochrome ? "var(--elmethis-color-neutral-weak)" : "var(--elmethis-color-primary)";
-const _hf1$c = (p0, p1) => p1.monochrome ? "var(--elmethis-color-neutral-weak)" : p0.value ? "var(--elmethis-color-accent-error)" : "var(--elmethis-color-primary)";
+const _hf0$o = (p0) => p0.monochrome ? "var(--elmethis-color-neutral-weak)" : "var(--elmethis-color-primary)";
+const _hf1$d = (p0, p1) => p1.monochrome ? "var(--elmethis-color-neutral-weak)" : p0.value ? "var(--elmethis-color-accent-error)" : "var(--elmethis-color-primary)";
 const ElmToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const rest = _restProps(props, [
     "class",
@@ -2428,7 +2428,7 @@ const ElmToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
           ]
         }, null, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
           d: mdiChevronRight,
-          color: _fnSignal(_hf0$n, [
+          color: _fnSignal(_hf0$o, [
             props
           ]),
           size: "1rem"
@@ -2450,7 +2450,7 @@ const ElmToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
       }, null, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
         d: mdiPlus,
         size: "1rem",
-        color: _fnSignal(_hf1$c, [
+        color: _fnSignal(_hf1$d, [
           isOpen,
           props
         ])
@@ -2530,7 +2530,7 @@ const styles$x = {
   warning,
   caution
 };
-const _hf0$m = (p0) => p0.type ?? "note";
+const _hf0$n = (p0) => p0.type ?? "note";
 const ICON_MAP = Object.freeze({
   note: mdiInformation,
   tip: mdiLightbulbOn,
@@ -2562,7 +2562,7 @@ const ElmCallout = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
         class: styles$x.icon,
         size: "1.25rem"
       }, null, 3, "qp_0"),
-      /* @__PURE__ */ _jsxSorted("span", null, null, _fnSignal(_hf0$m, [
+      /* @__PURE__ */ _jsxSorted("span", null, null, _fnSignal(_hf0$n, [
         _rawProps
       ]), 1, null)
     ], 1, null),
@@ -2623,16 +2623,23 @@ const ElmList = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawPro
     }, _getConstProps(props), /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "jF_2"), 0, "jF_3");
   }
 }, "ElmList_component_aFEzPziW6Gs"));
-const caption = "_caption_14qfo_8";
-const spacing = "_spacing_14qfo_25";
+const caption = "_caption_wl7v3_68";
+const spacing = "_spacing_wl7v3_85";
 const styles$u = {
-  "elm-table": "_elm-table_14qfo_1",
+  "elm-table-frame": "_elm-table-frame_wl7v3_3",
+  "elm-table-scroll": "_elm-table-scroll_wl7v3_50",
+  "elm-table": "_elm-table_wl7v3_3",
   caption,
-  "caption-inner": "_caption-inner_14qfo_18",
-  spacing
+  "caption-inner": "_caption-inner_wl7v3_78",
+  spacing,
+  "sticky-row-header": "_sticky-row-header_wl7v3_96"
 };
 const HasRowHeaderContext = createContextId("elm.table.HasRowHeader");
 const TableSectionContext = createContextId("elm.table.Section");
+const _hf0$m = (p0, p1) => p1.value && !p0.value ? "" : void 0;
+const _hf1$c = (p0) => p0.value ? 0 : void 0;
+const _hf2$9 = (p0, p1) => p0.value && p1.caption != null ? "region" : void 0;
+const _hf3$8 = (p0, p1) => p0.value && p1.caption != null ? p1.caption : void 0;
 const ElmTable = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const rest = _restProps(props, [
     "class",
@@ -2648,10 +2655,68 @@ const ElmTable = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     props
   ]));
   useContextProvider(HasRowHeaderContext, hasRowHeader);
-  return /* @__PURE__ */ _jsxSplit("table", {
+  const scrollRef = useSignal();
+  const canScroll = useSignal(false);
+  const atStart = useSignal(true);
+  const atEnd = useSignal(true);
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
+    const atEnd2 = _captures[0], atStart2 = _captures[1], canScroll2 = _captures[2], scrollRef2 = _captures[3];
+    const el = scrollRef2.value;
+    if (el == null) return;
+    const measure = () => {
+      const max = el.scrollWidth - el.clientWidth;
+      canScroll2.value = max > 1;
+      atStart2.value = el.scrollLeft <= 1;
+      atEnd2.value = el.scrollLeft >= max - 1;
+    };
+    measure();
+    el.addEventListener("scroll", measure, {
+      passive: true
+    });
+    cleanup(() => el.removeEventListener("scroll", measure));
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(measure);
+      observer.observe(el);
+      cleanup(() => observer.disconnect());
+    }
+  }, "ElmTable_component_useVisibleTask_93J4bNO5KnI", [
+    atEnd,
+    atStart,
+    canScroll,
+    scrollRef
+  ]), {
+    strategy: "document-ready"
+  });
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: styles$u["elm-table-frame"],
+    "data-overflow-start": _fnSignal(_hf0$m, [
+      atStart,
+      canScroll
+    ]),
+    "data-overflow-end": _fnSignal(_hf0$m, [
+      atEnd,
+      canScroll
+    ])
+  }, /* @__PURE__ */ _jsxSorted("div", {
+    "aria-label": _fnSignal(_hf3$8, [
+      canScroll,
+      props
+    ]),
+    ref: scrollRef,
+    role: _fnSignal(_hf2$9, [
+      canScroll,
+      props
+    ])
+  }, {
+    class: styles$u["elm-table-scroll"],
+    tabIndex: _fnSignal(_hf1$c, [
+      canScroll
+    ])
+  }, /* @__PURE__ */ _jsxSplit("table", {
     class: [
       styles$u["elm-table"],
       textStyles.text,
+      hasRowHeader.value && styles$u["sticky-row-header"],
       props.class
     ],
     ..._getVarProps(rest)
@@ -2670,7 +2735,7 @@ const ElmTable = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
       }, null, 3, null)
     ], 1, null), 1, "Yw_1"),
     /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Yw_2")
-  ], 0, "Yw_3");
+  ], 0, null), 1, null), 1, "Yw_3");
 }, "ElmTable_component_UT2AChu46oY"));
 const styles$t = {
   "elm-table-header": "_elm-table-header_jhft7_1"

package/lib/q-manifest.json

@@ -1,6 +1,6 @@
 {
 	"version": "1",
-	"manifestHash": "w0o7qg",
+	"manifestHash": "6qicfm",
 	"options": {
 		"target": "lib",
 		"buildMode": "development",
@@ -30,8 +30,8 @@
 	"mapping": {},
 	"bundles": {
 		"../index.qwik.cjs": {
-			"size": 489408,
-			"total": 489408,
+			"size": 491664,
+			"total": 491664,
 			"origins": [
 				"src/components/a2ui/catalog/basic-catalog.tsx",
 				"src/components/a2ui/catalog/block-catalog.tsx",
@@ -187,7 +187,7 @@
 	"assets": {
 		"style.css": {
 			"name": "style.css.css",
-			"size": 79234
+			"size": 81961
 		},
 		"assets/bundle-graph.BqrDAOEV.json": {
 			"name": "bundle-graph.json",

package/lib/style.css

@@ -1,4 +1,4 @@
-._elm-tabs_1fco0_1 {
+._elm-tabs_fka8s_1 {
   margin-block-start: var(--elmethis-margin-block-start);
   display: flex;
   flex-direction: column;
@@ -11,15 +11,20 @@
   background-color: var(--elmethis-color-surface-raised);
 }
 
-._tab-container_1fco0_14 {
+._tab-container_fka8s_14 {
   display: flex;
   flex-direction: row;
   border-bottom: solid 1px oklch(from var(--elmethis-color-primary) l c h / 30%);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--elmethis-color-neutral-weak)
+    var(--elmethis-color-surface-base);
 }
 
-._tab_1fco0_14 {
+._tab_fka8s_14 {
   box-sizing: border-box;
   min-width: 6rem;
+  flex-shrink: 0;
   padding: 1rem;
   margin: 0;
   cursor: pointer;
@@ -34,7 +39,7 @@
   color: var(--elmethis-scoped-color, var(--elmethis-color-neutral));
   user-select: none;
 
-  &._active_1fco0_37 {
+  &._active_fka8s_42 {
     background-color: oklch(from var(--elmethis-color-primary) l c h / 5%);
     border-bottom-color: var(--elmethis-color-primary);
     cursor: default;
@@ -45,12 +50,12 @@
   }
 }
 
-._tab-content_1fco0_48 {
+._tab-content_fka8s_53 {
   width: 100%;
   margin: 0;
 }
 
-._tab-content-inner_1fco0_53 {
+._tab-content-inner_fka8s_58 {
   box-sizing: border-box;
   padding: 1em;
 }
@@ -1754,14 +1759,74 @@
     list-style-type: none;
   }
 }
-._elm-table_14qfo_1 {
+/* Non-scrolling frame: owns the outer spacing and pins the edge shadows so they
+   stay glued to the viewport edges while the table scrolls underneath. */
+._elm-table-frame_wl7v3_3 {
+  position: relative;
+  width: 100%;
   margin-block-start: var(--elmethis-margin-block-start);
+}
+
+._elm-table-frame_wl7v3_3::before,
+._elm-table-frame_wl7v3_3::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  width: 1.5rem;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+._elm-table-frame_wl7v3_3::before {
+  inset-inline-start: 0;
+  background: linear-gradient(
+    to right,
+    oklch(from var(--elmethis-color-surface-sunken) l c h / 50%),
+    transparent
+  );
+}
+
+._elm-table-frame_wl7v3_3::after {
+  inset-inline-end: 0;
+  background: linear-gradient(
+    to left,
+    oklch(from var(--elmethis-color-surface-sunken) l c h / 50%),
+    transparent
+  );
+}
+
+/* Shadows are revealed only when there is content to scroll toward, set from the
+   scroll position in elm-table.tsx. */
+._elm-table-frame_wl7v3_3[data-overflow-start]::before {
+  opacity: 1;
+}
+
+._elm-table-frame_wl7v3_3[data-overflow-end]::after {
+  opacity: 1;
+}
+
+/* The actual scroller. Mirrors the house pattern from elm-code-block. */
+._elm-table-scroll_wl7v3_50 {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--elmethis-color-primary-weak)
+    var(--elmethis-color-surface-base);
+}
+
+._elm-table-scroll_wl7v3_50:focus-visible {
+  outline: 2px solid var(--elmethis-color-primary);
+  outline-offset: 2px;
+}
+
+._elm-table_wl7v3_3 {
   border-collapse: collapse;
   border-spacing: 0;
   box-shadow: 0 0 0.125rem rgb(0 0 0 / 20%);
 }
 
-._caption_14qfo_8 {
+._caption_wl7v3_68 {
   position: relative;
   width: 100%;
   display: inline-flex;
@@ -1771,18 +1836,46 @@
   margin-block-end: 1rem;
 }
 
-._caption-inner_14qfo_18 {
+._caption-inner_wl7v3_78 {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
 }
 
-._spacing_14qfo_25 {
+._spacing_wl7v3_85 {
   flex-grow: 1;
   height: 1px;
   background-color: rgb(128 128 128 / 20%);
 }
+
+/* Sticky label column. When the first column holds row headers, pin it so the
+   labels stay visible while the data columns scroll. The structural
+   `:first-child` selector targets the lead cell of every row regardless of
+   whether the caller threaded a `columnIndex` prop, and an opaque background
+   (matched to each row's stripe) keeps scrolled cells from bleeding through. */
+._sticky-row-header_wl7v3_96 :where(thead, tbody) tr > :first-child {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  box-shadow: 1px 0 0 oklch(from var(--elmethis-color-primary-weak) l c h / 50%);
+}
+
+._sticky-row-header_wl7v3_96 thead tr > :first-child {
+  background-color: var(--elmethis-color-surface-sunken);
+}
+
+._sticky-row-header_wl7v3_96 tbody tr:nth-child(odd) > :first-child {
+  background-color: var(--elmethis-color-surface-raised);
+}
+
+._sticky-row-header_wl7v3_96 tbody tr:nth-child(even) > :first-child {
+  background-color: var(--elmethis-color-surface-base);
+}
+
+._sticky-row-header_wl7v3_96 tbody tr:hover > :first-child {
+  background-color: var(--elmethis-color-surface-sunken);
+}
 ._elm-table-header_jhft7_1 {
   text-align: left;
   transition:

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

@@ -6,6 +6,7 @@ type Story = StoryObj<ElmTabsProps>;
 export declare const Primary: Story;
 export declare const DefaultSelected: Story;
 export declare const Controlled: Story;
+export declare const Scrollable: Story;
 export declare const UncontrolledClickTest: Story;
 export declare const DefaultValueTest: Story;
 export declare const ControlledSignalTest: Story;

package/lib-types/components/table/elm-table.stories.d.ts

@@ -3,4 +3,11 @@ import { type ElmTableProps } from "./elm-table";
 declare const meta: Meta<ElmTableProps>;
 export default meta;
 type Story = StoryObj<ElmTableProps>;
+/**
+ * Wide table inside a narrow (mobile-sized) frame. The table scrolls
+ * horizontally, edge shadows hint at off-screen columns, and the row-header
+ * column stays pinned via `hasRowHeader`. The wrapper becomes a focusable,
+ * labeled scroll region while it overflows.
+ */
+export declare const ScrollableWithRowHeader: Story;
 export declare const Primary: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "1.0.0-alpha.30",
+  "version": "1.0.0-alpha.31",
   "publishConfig": {
     "access": "public"
   },