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

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",