@elmethis/qwik 0.0.28 → 0.0.30

package/lib/index.qwik.cjs

@@ -723,7 +723,8 @@ const ElmInlineText = qwik.component$((props) => {
     style: {
       "--color": props.color,
       "--font-size": size,
-      "--background-color": props.backgroundColor
+      "--background-color": props.backgroundColor,
+      ...props.style
     },
     children: vnode
   });
@@ -2673,16 +2674,17 @@ const ElmFragmentIdentifier = qwik.component$(({ id }) => {
     children: "#"
   });
 });
-const h1 = "_h1_1c1xr_10";
-const h2 = "_h2_1c1xr_40";
-const h2__underline = "_h2__underline_1c1xr_68";
-const h3 = "_h3_1c1xr_85";
-const h4 = "_h4_1c1xr_102";
-const h5 = "_h5_1c1xr_106";
-const h6 = "_h6_1c1xr_110";
+const h1 = "_h1_13qod_18";
+const h2 = "_h2_13qod_48";
+const h2__underline = "_h2__underline_13qod_76";
+const h3 = "_h3_13qod_92";
+const h4 = "_h4_13qod_109";
+const h5 = "_h5_13qod_113";
+const h6 = "_h6_13qod_117";
 const styles$8 = {
-  "heading-common": "_heading-common_1c1xr_1",
+  "heading-common": "_heading-common_13qod_1",
   h1,
+  "heading-stretch": "_heading-stretch_13qod_1",
   h2,
   h2__underline,
   h3,
@@ -2757,41 +2759,19 @@ const ElmList = qwik.component$(({ listStyle = "unordered", style }) => {
     });
   }
 });
-const paragraph = "_paragraph_1klqe_1";
+const paragraph = "_paragraph_14h3g_1";
 const styles$6 = {
   paragraph
 };
-const useInView = (props) => {
-  const ref = qwik.useSignal();
-  const isVisible = qwik.useSignal(props?.defaultValue ?? false);
-  qwik.useVisibleTask$(() => {
-    if (!ref.value) return;
-    const observer = new IntersectionObserver(([entry]) => {
-      isVisible.value = entry.isIntersecting;
-    }, {
-      rootMargin: "100px",
-      threshold: 0.1
-    });
-    observer.observe(ref.value);
-    return () => observer.disconnect();
-  });
-  return {
-    ref,
-    isVisible
-  };
-};
 const ElmParagraph = qwik.component$(({ color, backgroundColor }) => {
-  const { ref, isVisible } = useInView();
   return /* @__PURE__ */ jsxRuntime.jsx("p", {
-    ref,
     class: [
       styles$6.paragraph,
       textStyles.text
     ],
     style: {
       "--color": color,
-      "--background-color": backgroundColor,
-      "--opacity": isVisible.value ? 1 : 0
+      "--background-color": backgroundColor
     },
     children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
   });
@@ -3278,6 +3258,25 @@ const useDelayedSignal = (initialValue) => {
     dispatch
   };
 };
+const useInView = (props) => {
+  const ref = qwik.useSignal();
+  const isVisible = qwik.useSignal(props?.defaultValue ?? false);
+  qwik.useVisibleTask$(() => {
+    if (!ref.value) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      isVisible.value = entry.isIntersecting;
+    }, {
+      rootMargin: "100px",
+      threshold: 0.1
+    });
+    observer.observe(ref.value);
+    return () => observer.disconnect();
+  });
+  return {
+    ref,
+    isVisible
+  };
+};
 const useLocalStorage = (key, initialValue) => {
   const state = qwik.useSignal(initialValue);
   qwik.useVisibleTask$(() => {

package/lib/index.qwik.mjs

@@ -721,7 +721,8 @@ const ElmInlineText = component$((props) => {
     style: {
       "--color": props.color,
       "--font-size": size,
-      "--background-color": props.backgroundColor
+      "--background-color": props.backgroundColor,
+      ...props.style
     },
     children: vnode
   });
@@ -2671,16 +2672,17 @@ const ElmFragmentIdentifier = component$(({ id }) => {
     children: "#"
   });
 });
-const h1 = "_h1_1c1xr_10";
-const h2 = "_h2_1c1xr_40";
-const h2__underline = "_h2__underline_1c1xr_68";
-const h3 = "_h3_1c1xr_85";
-const h4 = "_h4_1c1xr_102";
-const h5 = "_h5_1c1xr_106";
-const h6 = "_h6_1c1xr_110";
+const h1 = "_h1_13qod_18";
+const h2 = "_h2_13qod_48";
+const h2__underline = "_h2__underline_13qod_76";
+const h3 = "_h3_13qod_92";
+const h4 = "_h4_13qod_109";
+const h5 = "_h5_13qod_113";
+const h6 = "_h6_13qod_117";
 const styles$8 = {
-  "heading-common": "_heading-common_1c1xr_1",
+  "heading-common": "_heading-common_13qod_1",
   h1,
+  "heading-stretch": "_heading-stretch_13qod_1",
   h2,
   h2__underline,
   h3,
@@ -2755,41 +2757,19 @@ const ElmList = component$(({ listStyle = "unordered", style }) => {
     });
   }
 });
-const paragraph = "_paragraph_1klqe_1";
+const paragraph = "_paragraph_14h3g_1";
 const styles$6 = {
   paragraph
 };
-const useInView = (props) => {
-  const ref = useSignal();
-  const isVisible = useSignal(props?.defaultValue ?? false);
-  useVisibleTask$(() => {
-    if (!ref.value) return;
-    const observer = new IntersectionObserver(([entry]) => {
-      isVisible.value = entry.isIntersecting;
-    }, {
-      rootMargin: "100px",
-      threshold: 0.1
-    });
-    observer.observe(ref.value);
-    return () => observer.disconnect();
-  });
-  return {
-    ref,
-    isVisible
-  };
-};
 const ElmParagraph = component$(({ color, backgroundColor }) => {
-  const { ref, isVisible } = useInView();
   return /* @__PURE__ */ jsx("p", {
-    ref,
     class: [
       styles$6.paragraph,
       textStyles.text
     ],
     style: {
       "--color": color,
-      "--background-color": backgroundColor,
-      "--opacity": isVisible.value ? 1 : 0
+      "--background-color": backgroundColor
     },
     children: /* @__PURE__ */ jsx(Slot, {})
   });
@@ -3276,6 +3256,25 @@ const useDelayedSignal = (initialValue) => {
     dispatch
   };
 };
+const useInView = (props) => {
+  const ref = useSignal();
+  const isVisible = useSignal(props?.defaultValue ?? false);
+  useVisibleTask$(() => {
+    if (!ref.value) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      isVisible.value = entry.isIntersecting;
+    }, {
+      rootMargin: "100px",
+      threshold: 0.1
+    });
+    observer.observe(ref.value);
+    return () => observer.disconnect();
+  });
+  return {
+    ref,
+    isVisible
+  };
+};
 const useLocalStorage = (key, initialValue) => {
   const state = useSignal(initialValue);
   useVisibleTask$(() => {

package/lib/style.css

@@ -1416,7 +1416,7 @@
 ._fragment_1kofp_1:active {
   opacity: 0.5;
   transform: translateX(1px) translateY(1px);
-}._heading-common_1c1xr_1 {
+}._heading-common_13qod_1 {
   position: relative;
   font-size: var(--font-size);
   line-height: var(--font-size);
@@ -1425,7 +1425,15 @@
   transition: color 400ms, opacity 800ms;
 }
 
-._h1_1c1xr_10::after {
+@keyframes _heading-stretch_13qod_1 {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+._h1_13qod_18::after {
   position: absolute;
   content: "";
   bottom: -4px;
@@ -1433,13 +1441,13 @@
   width: 100%;
   height: 0.25px;
   background-color: rgba(0, 0, 0, 0.5);
-  transition: transform 800ms;
-  transform: scaleX(var(--scale));
+  transform-origin: left;
+  animation: _heading-stretch_13qod_1 1000ms ease 200ms both;
 }
-[data-theme=dark] ._h1_1c1xr_10::after {
+[data-theme=dark] ._h1_13qod_18::after {
   background-color: rgba(255, 255, 255, 0.5);
 }
-._h1_1c1xr_10::before {
+._h1_13qod_18::before {
   position: absolute;
   content: "";
   bottom: -6px;
@@ -1451,11 +1459,11 @@
   transform: scaleY(var(--scale));
   transform-origin: top;
 }
-[data-theme=dark] ._h1_1c1xr_10::before {
+[data-theme=dark] ._h1_13qod_18::before {
   background-color: rgba(255, 255, 255, 0.6);
 }
 
-._h2_1c1xr_40::after {
+._h2_13qod_48::after {
   position: absolute;
   content: "";
   right: 2px;
@@ -1466,10 +1474,10 @@
   transform: skewX(-25deg);
   background-color: rgba(0, 0, 0, 0.8);
 }
-[data-theme=dark] ._h2_1c1xr_40::after {
+[data-theme=dark] ._h2_13qod_48::after {
   background-color: rgba(255, 255, 255, 0.8);
 }
-._h2_1c1xr_40::before {
+._h2_13qod_48::before {
   position: absolute;
   content: "";
   right: 10px;
@@ -1480,10 +1488,10 @@
   transform: skewX(-25deg);
   background-color: rgba(0, 0, 0, 0.8);
 }
-[data-theme=dark] ._h2_1c1xr_40::before {
+[data-theme=dark] ._h2_13qod_48::before {
   background-color: rgba(255, 255, 255, 0.8);
 }
-._h2__underline_1c1xr_68 {
+._h2__underline_13qod_76 {
   overflow: hidden;
   position: absolute;
   content: "";
@@ -1492,19 +1500,18 @@
   width: 100%;
   height: 0.25px;
   background-color: rgba(0, 0, 0, 0.5);
-  transition: transform 800ms;
-  transform: scaleX(var(--scale));
   transform-origin: left;
+  animation: _heading-stretch_13qod_1 1000ms ease 200ms both;
 }
-[data-theme=dark] ._h2__underline_1c1xr_68 {
+[data-theme=dark] ._h2__underline_13qod_76 {
   background-color: rgba(255, 255, 255, 0.5);
 }
 
-._h3_1c1xr_85 {
+._h3_13qod_92 {
   box-sizing: border-box;
   padding-left: 0.75rem;
 }
-._h3_1c1xr_85::after {
+._h3_13qod_92::after {
   position: absolute;
   content: "";
   width: 3px;
@@ -1513,19 +1520,19 @@
   left: 0;
   background-color: rgba(0, 0, 0, 0.5);
 }
-[data-theme=dark] ._h3_1c1xr_85::after {
+[data-theme=dark] ._h3_13qod_92::after {
   background-color: rgba(255, 255, 255, 0.5);
 }
 
-._h4_1c1xr_102 {
+._h4_13qod_109 {
   position: relative;
 }
 
-._h5_1c1xr_106 {
+._h5_13qod_113 {
   position: relative;
 }
 
-._h6_1c1xr_110 {
+._h6_13qod_117 {
   position: relative;
 }._elmethis-list-common_6g6c5_1 {
   margin-block: var(--margin-block, 0);
@@ -1569,21 +1576,20 @@
 }
 ._elmethis-numbered-list_6g6c5_24 li ol li ol li ol li {
   list-style-type: lower-greek;
-}._paragraph_1klqe_1 {
-  opacity: var(--opacity, 0);
+}._paragraph_14h3g_1 {
   transition: opacity 800ms;
   color: var(--color, #606875);
   background-color: var(--background-color, inherit);
   margin-block: var(--margin-block, 0);
 }
-._paragraph_1klqe_1::selection {
+._paragraph_14h3g_1::selection {
   color: rgba(255, 255, 255, 0.7);
   background-color: rgba(0, 0, 0, 0.7);
 }
-[data-theme=dark] ._paragraph_1klqe_1 {
+[data-theme=dark] ._paragraph_14h3g_1 {
   color: rgba(255, 255, 255, 0.7);
 }
-[data-theme=dark] ._paragraph_1klqe_1::selection {
+[data-theme=dark] ._paragraph_14h3g_1::selection {
   color: rgba(0, 0, 0, 0.7);
   background-color: rgba(255, 255, 255, 0.7);
 }._table_x2nyq_1 {

package/lib-types/components/typography/elm-inline-text.d.ts

@@ -1,5 +1,6 @@
 import { type CSSProperties } from "@builder.io/qwik";
 export interface ElmInlineTextProps {
+    style?: CSSProperties;
     /**
      * The text to display.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "publishConfig": {
     "access": "public"
   },