@elmethis/qwik 1.0.0-alpha.29 → 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"