@elmethis/qwik 0.0.10 → 0.0.11

package/lib/index.qwik.cjs

@@ -1290,7 +1290,7 @@ const ElmFragmentIdentifier = qwik.component$(({ id }) => {
     children: "#"
   });
 });
-const styles$6 = '.heading-common {\n  margin: 0;\n  position: relative;\n  font-size: var(--font-size);\n  line-height: var(--font-size);\n  opacity: var(--opacity);\n  transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n  position: absolute;\n  content: "";\n  bottom: -4px;\n  left: 0;\n  width: 100%;\n  height: 0.25px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: transform 800ms;\n  transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n  position: absolute;\n  content: "";\n  bottom: -6px;\n  left: 45%;\n  width: 10%;\n  height: 2px;\n  background-color: rgba(0, 0, 0, 0.6);\n  transition: transform 800ms;\n  transform: scaleY(var(--scale));\n  transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n  background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2 {\n  border-bottom: solid 1px rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h2 {\n  border-color: rgba(255, 255, 255, 0.5);\n}\n.h2::after {\n  position: absolute;\n  content: "";\n  right: 2px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::after {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n.h2::before {\n  position: absolute;\n  content: "";\n  right: 10px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::before {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n\n.h3 {\n  box-sizing: border-box;\n  padding-left: 0.75rem;\n}\n.h3::after {\n  position: absolute;\n  content: "";\n  width: 3px;\n  height: 12px;\n  top: calc(50% - 8px);\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h3::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h4 {\n  position: relative;\n}\n\n.h5 {\n  position: relative;\n}\n\n.h6 {\n  position: relative;\n}';
+const styles$6 = '.heading-common {\n  margin: 0;\n  position: relative;\n  font-size: var(--font-size);\n  line-height: var(--font-size);\n  opacity: var(--opacity);\n  transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n  position: absolute;\n  content: "";\n  bottom: -4px;\n  left: 0;\n  width: 100%;\n  height: 0.25px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: transform 800ms;\n  transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n  position: absolute;\n  content: "";\n  bottom: -6px;\n  left: 45%;\n  width: 10%;\n  height: 2px;\n  background-color: rgba(0, 0, 0, 0.6);\n  transition: transform 800ms;\n  transform: scaleY(var(--scale));\n  transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n  background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2::after {\n  position: absolute;\n  content: "";\n  right: 2px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::after {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n.h2::before {\n  position: absolute;\n  content: "";\n  right: 10px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::before {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n.h2__underline {\n  overflow: hidden;\n  position: absolute;\n  content: "";\n  bottom: -6px;\n  left: 0;\n  width: 100%;\n  height: 0.25px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: transform 800ms;\n  transform: scaleX(var(--scale));\n  transform-origin: left;\n}\n[data-theme=dark] .h2__underline {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h3 {\n  box-sizing: border-box;\n  padding-left: 0.75rem;\n}\n.h3::after {\n  position: absolute;\n  content: "";\n  width: 3px;\n  height: 12px;\n  top: calc(50% - 8px);\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h3::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h4 {\n  position: relative;\n}\n\n.h5 {\n  position: relative;\n}\n\n.h6 {\n  position: relative;\n}';
 const SIZE_MAP = Object.freeze({
   1: 1.5,
   2: 1.4,
@@ -1313,7 +1313,9 @@ const ElmHeading = qwik.component$(({ level, text, id }) => {
       "--font-size": `${SIZE_MAP[level]}em`
     },
     children: [
-      text,
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        children: text
+      }),
       /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}),
       id && /* @__PURE__ */ jsxRuntime.jsx("span", {
         style: {
@@ -1322,6 +1324,10 @@ const ElmHeading = qwik.component$(({ level, text, id }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmFragmentIdentifier, {
           id
         })
+      }),
+      level === 2 && /* @__PURE__ */ jsxRuntime.jsx("span", {
+        class: "h2__underline",
+        "aria-hidden": "true"
       })
     ]
   });

package/lib/index.qwik.mjs

@@ -1288,7 +1288,7 @@ const ElmFragmentIdentifier = component$(({ id }) => {
     children: "#"
   });
 });
-const styles$6 = '.heading-common {\n  margin: 0;\n  position: relative;\n  font-size: var(--font-size);\n  line-height: var(--font-size);\n  opacity: var(--opacity);\n  transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n  position: absolute;\n  content: "";\n  bottom: -4px;\n  left: 0;\n  width: 100%;\n  height: 0.25px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: transform 800ms;\n  transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n  position: absolute;\n  content: "";\n  bottom: -6px;\n  left: 45%;\n  width: 10%;\n  height: 2px;\n  background-color: rgba(0, 0, 0, 0.6);\n  transition: transform 800ms;\n  transform: scaleY(var(--scale));\n  transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n  background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2 {\n  border-bottom: solid 1px rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h2 {\n  border-color: rgba(255, 255, 255, 0.5);\n}\n.h2::after {\n  position: absolute;\n  content: "";\n  right: 2px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::after {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n.h2::before {\n  position: absolute;\n  content: "";\n  right: 10px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::before {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n\n.h3 {\n  box-sizing: border-box;\n  padding-left: 0.75rem;\n}\n.h3::after {\n  position: absolute;\n  content: "";\n  width: 3px;\n  height: 12px;\n  top: calc(50% - 8px);\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h3::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h4 {\n  position: relative;\n}\n\n.h5 {\n  position: relative;\n}\n\n.h6 {\n  position: relative;\n}';
+const styles$6 = '.heading-common {\n  margin: 0;\n  position: relative;\n  font-size: var(--font-size);\n  line-height: var(--font-size);\n  opacity: var(--opacity);\n  transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n  position: absolute;\n  content: "";\n  bottom: -4px;\n  left: 0;\n  width: 100%;\n  height: 0.25px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: transform 800ms;\n  transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n  position: absolute;\n  content: "";\n  bottom: -6px;\n  left: 45%;\n  width: 10%;\n  height: 2px;\n  background-color: rgba(0, 0, 0, 0.6);\n  transition: transform 800ms;\n  transform: scaleY(var(--scale));\n  transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n  background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2::after {\n  position: absolute;\n  content: "";\n  right: 2px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::after {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n.h2::before {\n  position: absolute;\n  content: "";\n  right: 10px;\n  bottom: -4px;\n  width: 6px;\n  height: 8px;\n  opacity: 0.8;\n  transform: skewX(-25deg);\n  background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::before {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n.h2__underline {\n  overflow: hidden;\n  position: absolute;\n  content: "";\n  bottom: -6px;\n  left: 0;\n  width: 100%;\n  height: 0.25px;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: transform 800ms;\n  transform: scaleX(var(--scale));\n  transform-origin: left;\n}\n[data-theme=dark] .h2__underline {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h3 {\n  box-sizing: border-box;\n  padding-left: 0.75rem;\n}\n.h3::after {\n  position: absolute;\n  content: "";\n  width: 3px;\n  height: 12px;\n  top: calc(50% - 8px);\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h3::after {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h4 {\n  position: relative;\n}\n\n.h5 {\n  position: relative;\n}\n\n.h6 {\n  position: relative;\n}';
 const SIZE_MAP = Object.freeze({
   1: 1.5,
   2: 1.4,
@@ -1311,7 +1311,9 @@ const ElmHeading = component$(({ level, text, id }) => {
       "--font-size": `${SIZE_MAP[level]}em`
     },
     children: [
-      text,
+      /* @__PURE__ */ jsx("span", {
+        children: text
+      }),
       /* @__PURE__ */ jsx(Slot, {}),
       id && /* @__PURE__ */ jsx("span", {
         style: {
@@ -1320,6 +1322,10 @@ const ElmHeading = component$(({ level, text, id }) => {
         children: /* @__PURE__ */ jsx(ElmFragmentIdentifier, {
           id
         })
+      }),
+      level === 2 && /* @__PURE__ */ jsx("span", {
+        class: "h2__underline",
+        "aria-hidden": "true"
       })
     ]
   });

package/lib-types/components/navigation/elm-breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import { type QRLEventHandlerMulti } from "@builder.io/qwik";
+export interface ElmBreadcrumbProps {
+    links: Array<{
+        /**
+         * The text to display.
+         */
+        text: string;
+        /**
+         * The action to perform when the link is clicked.
+         */
+        onClick$?: QRLEventHandlerMulti<PointerEvent, HTMLElement>;
+    }>;
+}
+export declare const ElmBreadcrumb: import("@builder.io/qwik").Component<ElmBreadcrumbProps>;

package/lib-types/components/navigation/elm-breadcrumb.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmBreadcrumb } from "./elm-breadcrumb";
+declare const meta: Meta<typeof ElmBreadcrumb>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Long: Story;

package/package.json

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