@elmethis/qwik 0.0.33 → 0.0.35

package/lib/index.qwik.cjs

@@ -655,13 +655,15 @@ const icon$3 = "_icon_19g82_1";
 const styles$w = {
   icon: icon$3
 };
-const ElmInlineIcon = qwik.component$(({ src, alt }) => {
+const ElmInlineIcon = qwik.component$(({ src, alt, width, height, size = 16 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", {
     class: styles$w.icon,
     children: /* @__PURE__ */ jsxRuntime.jsx("img", {
       src,
       alt,
-      class: styles$w.icon
+      class: styles$w.icon,
+      width: width ?? size,
+      height: height ?? size
     })
   });
 });
@@ -739,7 +741,8 @@ const ElmInlineText = qwik.component$((props) => {
       rel: "noopener noreferrer",
       children: [
         props.favicon && /* @__PURE__ */ jsxRuntime.jsx(ElmInlineIcon, {
-          src: props.favicon
+          src: props.favicon,
+          alt: `Favicon of ${props.text}`
         }),
         wrappedVnode
       ]
@@ -2200,30 +2203,24 @@ const ElmSquareLoadingIcon = qwik.component$(({ size = "3rem", dimensions = 4 })
     }, `${rowIndex}-${columnIndex}`)))
   });
 });
-const image$1 = "_image_slok6_12";
-const fallback = "_fallback_slok6_37";
+const image$1 = "_image_sf1wj_12";
+const fallback = "_fallback_sf1wj_34";
 const styles$h = {
-  "block-image": "_block-image_slok6_1",
-  "image-container": "_image-container_slok6_12",
+  "block-image": "_block-image_sf1wj_1",
+  "image-container": "_image-container_sf1wj_12",
   image: image$1,
   fallback,
-  "caption-box": "_caption-box_slok6_45",
-  "modal-container": "_modal-container_slok6_57"
+  "caption-box": "_caption-box_sf1wj_44",
+  "modal-container": "_modal-container_sf1wj_56"
 };
 const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, height, enableModal = true, srcset, sizes, style }) => {
   const isLoading = qwik.useSignal(true);
   const isShowModal = qwik.useSignal(false);
-  const modalRef = qwik.useSignal();
   const handleImageLoad = qwik.$(() => {
     isLoading.value = false;
   });
   const handleToggleModal = qwik.$(() => {
     if (enableModal && !isLoading.value) {
-      if (isShowModal.value) {
-        modalRef.value?.hidePopover();
-      } else {
-        modalRef.value?.showPopover();
-      }
       isShowModal.value = !isShowModal.value;
     }
   });
@@ -2243,10 +2240,12 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
     }
   });
   const Modal = /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ref: modalRef,
     class: styles$h["modal-container"],
+    style: {
+      pointerEvents: isShowModal.value ? "auto" : "none",
+      "--opacity": isShowModal.value ? 1 : 0
+    },
     onClick$: handleToggleModal,
-    popover: "manual",
     children: ImageComponent
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("figure", {

package/lib/index.qwik.mjs

@@ -653,13 +653,15 @@ const icon$3 = "_icon_19g82_1";
 const styles$w = {
   icon: icon$3
 };
-const ElmInlineIcon = component$(({ src, alt }) => {
+const ElmInlineIcon = component$(({ src, alt, width, height, size = 16 }) => {
   return /* @__PURE__ */ jsx("span", {
     class: styles$w.icon,
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: styles$w.icon
+      class: styles$w.icon,
+      width: width ?? size,
+      height: height ?? size
     })
   });
 });
@@ -737,7 +739,8 @@ const ElmInlineText = component$((props) => {
       rel: "noopener noreferrer",
       children: [
         props.favicon && /* @__PURE__ */ jsx(ElmInlineIcon, {
-          src: props.favicon
+          src: props.favicon,
+          alt: `Favicon of ${props.text}`
         }),
         wrappedVnode
       ]
@@ -2198,30 +2201,24 @@ const ElmSquareLoadingIcon = component$(({ size = "3rem", dimensions = 4 }) => {
     }, `${rowIndex}-${columnIndex}`)))
   });
 });
-const image$1 = "_image_slok6_12";
-const fallback = "_fallback_slok6_37";
+const image$1 = "_image_sf1wj_12";
+const fallback = "_fallback_sf1wj_34";
 const styles$h = {
-  "block-image": "_block-image_slok6_1",
-  "image-container": "_image-container_slok6_12",
+  "block-image": "_block-image_sf1wj_1",
+  "image-container": "_image-container_sf1wj_12",
   image: image$1,
   fallback,
-  "caption-box": "_caption-box_slok6_45",
-  "modal-container": "_modal-container_slok6_57"
+  "caption-box": "_caption-box_sf1wj_44",
+  "modal-container": "_modal-container_sf1wj_56"
 };
 const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height, enableModal = true, srcset, sizes, style }) => {
   const isLoading = useSignal(true);
   const isShowModal = useSignal(false);
-  const modalRef = useSignal();
   const handleImageLoad = $(() => {
     isLoading.value = false;
   });
   const handleToggleModal = $(() => {
     if (enableModal && !isLoading.value) {
-      if (isShowModal.value) {
-        modalRef.value?.hidePopover();
-      } else {
-        modalRef.value?.showPopover();
-      }
       isShowModal.value = !isShowModal.value;
     }
   });
@@ -2241,10 +2238,12 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     }
   });
   const Modal = /* @__PURE__ */ jsx("div", {
-    ref: modalRef,
     class: styles$h["modal-container"],
+    style: {
+      pointerEvents: isShowModal.value ? "auto" : "none",
+      "--opacity": isShowModal.value ? 1 : 0
+    },
     onClick$: handleToggleModal,
-    popover: "manual",
     children: ImageComponent
   });
   return /* @__PURE__ */ jsxs("figure", {

package/lib/style.css

@@ -995,7 +995,7 @@
 }
 [data-theme=dark] ._square_13xd3_24 {
   background-color: #b0b5be;
-}._block-image_slok6_1 {
+}._block-image_sf1wj_1 {
   margin-block: var(--margin-block, 0);
   margin-inline: 0;
   display: flex;
@@ -1006,32 +1006,31 @@
   width: 100%;
 }
 
-._image-container_slok6_12 {
+._image-container_sf1wj_12 {
   width: 100%;
   height: 100%;
   position: relative;
-
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-._image_slok6_12 {
-  box-sizing: border-box;
+._image_sf1wj_12 {
   max-width: 100%;
   max-height: min(100%, 100vh);
   height: auto;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0.125rem oklch(from black l c h / 0.1);
+  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);
   transition: opacity 400ms;
   opacity: var(--opacity, 1);
   user-select: none;
   aspect-ratio: var(--aspect-ratio, auto);
-
   cursor: var(--cursor);
 }
 
-._fallback_slok6_37 {
+._fallback_sf1wj_34 {
+  width: 100%;
+  height: 100%;
   inset: 0 0 auto auto;
   position: absolute;
   transition: opacity 400ms;
@@ -1039,7 +1038,7 @@
   pointer-events: none;
 }
 
-._caption-box_slok6_45 {
+._caption-box_sf1wj_44 {
   box-sizing: border-box;
   padding: 0rem 1rem;
   display: flex;
@@ -1051,59 +1050,20 @@
   transition: opacity 400ms;
 }
 
-._modal-container_slok6_57 {
-  width: 100%;
+._modal-container_sf1wj_56 {
+  width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
-  overflow: hidden;
-  opacity: 0;
-  transform: scale(0.95);
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  margin: auto;
-  pointer-events: none;
-  transition:
-    opacity 200ms,
-    transform 200ms,
-    display 200ms allow-discrete,
-    overlay 200ms allow-discrete;
-
-  &::backdrop {
-    background-color: oklch(from #23262a l c h / 0.8);
-    opacity: 0;
-
-    transition:
-      background-color 200ms,
-      opacity 200ms,
-      display 200ms allow-discrete,
-      overlay 200ms allow-discrete;
-  }
-
-  &:popover-open {
-    opacity: 1;
-    transform: scale(1);
-    pointer-events: auto;
-
-    &::backdrop {
-      opacity: 1;
-    }
-  }
-}
-
-@starting-style {
-  ._modal-container_slok6_57:popover-open {
-    opacity: 0;
-    transform: scale(0.95);
-
-    &::backdrop {
-      opacity: 0;
-    }
-  }
-}
-._file_eqa3m_1 {
+  position: fixed;
+  inset: 0 0 auto auto;
+  z-index: 100;
+  background-color: rgba(35, 38, 42, 0.8);
+  cursor: zoom-out;
+  opacity: var(--opacity, 1);
+  transition: opacity 200ms;
+}._file_eqa3m_1 {
   margin-block: var(--margin-block, 0);
   padding: 1rem;
   display: grid;

package/lib-types/components/icon/elm-inline-icon.d.ts

@@ -1,3 +1,4 @@
+import { Numberish } from "@builder.io/qwik";
 export interface ElmInlineIconProps {
     /**
      * The source URL of the icon.
@@ -7,5 +8,8 @@ export interface ElmInlineIconProps {
      * The alt text for the icon.
      */
     alt?: string;
+    width?: Numberish;
+    height?: Numberish;
+    size?: Numberish;
 }
 export declare const ElmInlineIcon: import("@builder.io/qwik").Component<ElmInlineIconProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "publishConfig": {
     "access": "public"
   },
@@ -38,30 +38,30 @@
   "devDependencies": {
     "@builder.io/qwik": "1.19.0",
     "@eslint/js": "latest",
-    "@storybook/addon-docs": "8.6.17",
-    "@storybook/addon-essentials": "8.6.17",
+    "@storybook/addon-docs": "8",
+    "@storybook/addon-essentials": "8.6.18",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "20.19.0",
-    "eslint": "10.0.2",
-    "eslint-plugin-qwik": "1.19.1",
+    "@types/node": "25.5.0",
+    "eslint": "10.0.3",
+    "eslint-plugin-qwik": "1.19.2",
     "globals": "17.4.0",
-    "jarkup-ts": "^0.8.0",
+    "jarkup-ts": "^0.9.0",
     "np": "^11.0.2",
     "prettier": "3.6.2",
     "sass": "^1.97.3",
     "storybook": "8",
     "storybook-framework-qwik": "^0.4.0",
     "typescript": "5.4.5",
-    "typescript-eslint": "8.56.1",
+    "typescript-eslint": "8.57.1",
     "undici": "*",
     "vite": "^6.4.1",
     "vite-tsconfig-paths": "^6.1.1"
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "katex": "^0.16.33",
+    "katex": "^0.16.38",
     "lodash-es": "^4.17.23",
-    "marked": "^17.0.3",
+    "marked": "^17.0.4",
     "polished": "^4.3.1",
     "shiki": "^4.0.1"
   },