@elmethis/core 1.0.0-alpha.19 → 1.0.0-alpha.191

package/dist/components/typography/ElmFragmentIdentifier.vue3.mjs

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._fragment_fa0ru_1{display:flex;justify-content:flex-end;align-items:center}._icon_fa0ru_7{padding:.25rem;border-radius:.25rem;width:20px;height:20px;color:#6987b8;transition:background-color .2s;cursor:pointer}._icon_fa0ru_7:hover{background-color:#0000001a}[data-theme=dark] ._icon_fa0ru_7:hover{background-color:#ffffff1a}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const fragment = "_fragment_fa0ru_1";
+const icon = "_icon_fa0ru_7";
+const style0 = {
+  fragment,
+  icon
+};
+export {
+  style0 as default,
+  fragment,
+  icon
+};

package/dist/components/typography/ElmHeading.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmHeading } from './ElmHeading.vue';
+declare const meta: Meta<typeof ElmHeading>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Slot: Story;

package/dist/components/typography/ElmHeading.vue.d.ts

@@ -0,0 +1,49 @@
+import { Property } from 'csstype';
+import { VNode } from 'vue';
+export interface ElmHeadingProps {
+    /**
+     * Text to display
+     */
+    text?: string;
+    /**
+     * Font size of the text. Default is `'1.5rem'`.
+     */
+    size?: Property.FontSize;
+    /**
+     * ID of the heading element.
+     * Default is kebab-cased `text`. (using lodash)
+     */
+    id?: string;
+    /**
+     * Whether to disable fragment identifier.
+     * Default is `false`.
+     */
+    disableFragmentIdentifier?: boolean;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => VNode[];
+    }> & {
+        default?: () => VNode[];
+    };
+    refs: {
+        target: unknown;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ElmHeadingProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmHeadingProps> & Readonly<{}>, {
+    disableFragmentIdentifier: boolean;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: unknown;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/typography/ElmHeading.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmHeading.vue2.mjs";
+import style0 from "./ElmHeading.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmHeading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmHeading as default
+};

package/dist/components/typography/ElmHeading.vue2.mjs

@@ -0,0 +1,72 @@
+import { defineComponent, ref, useSlots, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, resolveDynamicComponent, normalizeStyle, unref, normalizeClass, withCtx, h } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+import { kebabCase } from "lodash-es";
+import ElmFragmentIdentifier from "./ElmFragmentIdentifier.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmHeading",
+  props: {
+    text: {},
+    size: {},
+    id: {},
+    disableFragmentIdentifier: { type: Boolean, default: false },
+    level: { default: 1 }
+  },
+  setup(__props) {
+    const SIZE_MAP = Object.freeze({
+      1: 1.5,
+      2: 1.4,
+      3: 1.3,
+      4: 1.2,
+      5: 1.15,
+      6: 1.1
+    });
+    const props = __props;
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    const slots = useSlots();
+    const renderSlots = () => {
+      if (props.text != null) {
+        return h("span", {}, props.text);
+      } else if (slots.default != null) {
+        return slots.default();
+      } else {
+        return h("span");
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(), createBlock(resolveDynamicComponent(`h${_ctx.level}`), {
+          ref_key: "target",
+          ref: target,
+          class: normalizeClass([_ctx.$style[`h${_ctx.level}`], _ctx.$style["heading-common"]]),
+          id: _ctx.id ?? unref(kebabCase)(_ctx.text),
+          style: normalizeStyle({
+            "--font-size": _ctx.size ?? `${unref(SIZE_MAP)[_ctx.level]}rem`,
+            "--scale": targetIsVisible.value ? 1 : 0,
+            "--opacity": targetIsVisible.value ? 1 : 0
+          })
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(() => renderSlots()))),
+            _ctx.level === 2 ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(_ctx.$style["h2__underline"]),
+              "aria-hidden": ""
+            }, null, 2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["class", "id", "style"])),
+        !_ctx.disableFragmentIdentifier ? (openBlock(), createBlock(ElmFragmentIdentifier, {
+          key: 0,
+          id: _ctx.id ?? unref(kebabCase)(_ctx.text)
+        }, null, 8, ["id"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmHeading.vue3.mjs

@@ -0,0 +1,39 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._heading-common_6xtyu_1{margin-block-start:1.5rem;position:relative;font-size:var(--font-size);line-height:var(--font-size);opacity:var(--opacity);transition:color .4s,opacity .8s;color:#000c}._heading-common_6xtyu_1::-moz-selection{color:#fffc;background-color:#000c}._heading-common_6xtyu_1::selection{color:#fffc;background-color:#000c}[data-theme=dark] ._heading-common_6xtyu_1{color:#fffc}[data-theme=dark] ._heading-common_6xtyu_1::-moz-selection{color:#000c;background-color:#fffc}[data-theme=dark] ._heading-common_6xtyu_1::selection{color:#000c;background-color:#fffc}._h1_6xtyu_22{margin-block-start:.5rem}._h1_6xtyu_22:after{position:absolute;content:"";bottom:-10px;left:0;width:100%;height:.25px;background-color:#00000080;transition:transform .8s;transform:scaleX(var(--scale))}[data-theme=dark] ._h1_6xtyu_22:after{background-color:#ffffff80}._h1_6xtyu_22:before{position:absolute;content:"";bottom:-12px;left:45%;width:10%;height:2px;background-color:#0009;transition:transform .8s;transform:scaleY(var(--scale));transform-origin:top}[data-theme=dark] ._h1_6xtyu_22:before{background-color:#fff9}._h2_6xtyu_55:after{position:absolute;content:"";right:2px;bottom:-4px;width:6px;height:8px;opacity:.8;transform:skew(-25deg);background-color:#000c}[data-theme=dark] ._h2_6xtyu_55:after{background-color:#fffc}._h2_6xtyu_55:before{position:absolute;content:"";right:10px;bottom:-4px;width:6px;height:8px;opacity:.8;transform:skew(-25deg);background-color:#000c}[data-theme=dark] ._h2_6xtyu_55:before{background-color:#fffc}._h2__underline_6xtyu_83{overflow:hidden;position:absolute;content:"";bottom:-6px;left:0;width:100%;height:.25px;background-color:#00000080;transition:transform .8s;transform:scaleX(var(--scale));transform-origin:left}[data-theme=dark] ._h2__underline_6xtyu_83{background-color:#ffffff80}._h3_6xtyu_100{box-sizing:border-box;padding-left:.75rem}._h3_6xtyu_100:after{position:absolute;content:"";width:3px;height:50%;top:25%;left:0;background-color:#000c}[data-theme=dark] ._h3_6xtyu_100:after{background-color:#fffc}._h4_6xtyu_117,._h5_6xtyu_121,._h6_6xtyu_125{position:relative}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const h1 = "_h1_6xtyu_22";
+const h2 = "_h2_6xtyu_55";
+const h2__underline = "_h2__underline_6xtyu_83";
+const h3 = "_h3_6xtyu_100";
+const h4 = "_h4_6xtyu_117";
+const h5 = "_h5_6xtyu_121";
+const h6 = "_h6_6xtyu_125";
+const style0 = {
+  "heading-common": "_heading-common_6xtyu_1",
+  h1,
+  h2,
+  h2__underline,
+  h3,
+  h4,
+  h5,
+  h6
+};
+export {
+  style0 as default,
+  h1,
+  h2,
+  h2__underline,
+  h3,
+  h4,
+  h5,
+  h6
+};

package/dist/components/{inline → typography}/ElmInlineText.stories.d.ts

@@ -5,3 +5,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
 export declare const Colored: Story;
+export declare const Background: Story;
+export declare const Ruby: Story;
+export declare const Link: Story;

package/dist/components/{inline → typography}/ElmInlineText.vue.d.ts

@@ -9,7 +9,7 @@ export interface ElmInlineTextProps {
      *
      * e.g.) `'red'`, `'#ff0000'`, `'rgba(255, 0, 0, 0.5)'`
      */
-    color?: Property.BackgroundColor;
+    color?: Property.Color;
     /**
      * Specifies the font size of the text.
      */
@@ -30,9 +30,30 @@ export interface ElmInlineTextProps {
      * Specifies whether the text should be strikethrough.
      */
     strikethrough?: boolean;
+    /**
+     * Specifies whether the text should be displayed as code.
+     */
+    code?: boolean;
+    /**
+     * Specifies the background color of the text.
+     */
+    backgroundColor?: Property.BackgroundColor;
+    /**
+     * The ruby text to display.
+     */
+    ruby?: string;
+    /**
+     * The URL to navigate to.
+     *
+     * e.g. `https://example.com`
+     */
+    href?: string;
+    favicon?: string;
 }
 declare const _default: import('vue').DefineComponent<ElmInlineTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmInlineTextProps> & Readonly<{}>, {
+    code: boolean;
     bold: boolean;
+    size: Property.FontSize;
     italic: boolean;
     underline: boolean;
     strikethrough: boolean;

package/dist/components/typography/ElmInlineText.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmInlineText.vue2.mjs";
+import style0 from "./ElmInlineText.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmInlineText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmInlineText as default
+};

package/dist/components/typography/ElmInlineText.vue2.mjs

@@ -0,0 +1,95 @@
+import { defineComponent, useCssModule, createElementBlock, createBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, createTextVNode, createVNode, toDisplayString, unref, resolveDynamicComponent, h } from "vue";
+import { Icon } from "@iconify/vue";
+import { getLuminance } from "polished";
+import ElmInlineIcon from "../icon/ElmInlineIcon.vue.mjs";
+const _hoisted_1 = ["href"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmInlineText",
+  props: {
+    text: {},
+    color: {},
+    size: { default: "1em" },
+    bold: { type: Boolean, default: false },
+    italic: { type: Boolean, default: false },
+    underline: { type: Boolean, default: false },
+    strikethrough: { type: Boolean, default: false },
+    code: { type: Boolean, default: false },
+    backgroundColor: {},
+    ruby: {},
+    href: {},
+    favicon: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const style = useCssModule();
+    const render = () => {
+      const backgroundColor = props.backgroundColor != null ? getLuminance(props.backgroundColor) < 0.5 ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)" : void 0;
+      let vnode = h(
+        "span",
+        {
+          class: style.text,
+          style: {
+            "--color": props.color ?? backgroundColor,
+            "--font-size": props.size,
+            "--background-color": props.backgroundColor
+          }
+        },
+        props.text
+      );
+      if (props.strikethrough) {
+        vnode = h("del", {}, vnode);
+      }
+      if (props.italic) {
+        vnode = h("em", {}, vnode);
+      }
+      if (props.underline) {
+        vnode = h("ins", {}, vnode);
+      }
+      if (props.bold) {
+        vnode = h("strong", {}, vnode);
+      }
+      if (props.code) {
+        vnode = h("code", { class: style.code }, vnode);
+      }
+      if (props.ruby) {
+        vnode = h(
+          "ruby",
+          {
+            class: style.text,
+            style: {
+              "--color": props.color ?? backgroundColor,
+              "--font-size": props.size,
+              "--background-color": props.backgroundColor
+            }
+          },
+          [h("span", {}, vnode), h("rt", {}, props.ruby)]
+        );
+      }
+      return vnode;
+    };
+    return (_ctx, _cache) => {
+      return _ctx.href ? (openBlock(), createElementBlock("a", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.link),
+        href: _ctx.href,
+        style: normalizeStyle({ "--font-size": _ctx.size }),
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, [
+        _ctx.favicon ? (openBlock(), createBlock(ElmInlineIcon, {
+          key: 0,
+          src: _ctx.favicon,
+          alt: "favicon"
+        }, null, 8, ["src"])) : createCommentVNode("", true),
+        createTextVNode(" " + toDisplayString(_ctx.text ?? _ctx.href) + " ", 1),
+        createVNode(unref(Icon), {
+          icon: "mdi:external-link",
+          class: normalizeClass(_ctx.$style.icon)
+        }, null, 8, ["class"])
+      ], 14, _hoisted_1)) : (openBlock(), createBlock(resolveDynamicComponent(render()), { key: 1 }));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmInlineText.vue3.mjs

@@ -0,0 +1,29 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._text_10ba4_1{padding:0;margin:0;color:#000000b3;color:var(--color, rgba(0, 0, 0, .7));font-size:1em;font-size:var(--font-size, 1em);line-height:1em;line-height:var(--font-size, 1em);background-color:var(--background-color)}._text_10ba4_1::-moz-selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}._text_10ba4_1::selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}[data-theme=dark] ._text_10ba4_1{color:#ffffffb3;color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._text_10ba4_1::-moz-selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._text_10ba4_1::selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}._code_10ba4_21{margin-inline:.25rem;padding:2px .5em;font-size:calc(1em - 2px);border-radius:.125rem;background-color:#00000013;font-family:"Source Code Pro" monospace}._link_10ba4_30{all:unset;box-sizing:border-box;padding:0 .25rem;font-size:var(--font-size);display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;color:#6987b8;border-radius:.125rem .125rem 0 0;border-bottom:dashed 1px #6987b8;transition:background-color .2s,color .2s}._link_10ba4_30:hover{background-color:#6987b833}._link_10ba4_30:active{color:#59b57c;background-color:#59b57c33}._link_10ba4_30:visited{color:#9771bd;border-bottom:dashed 1px #9771bd}._link_10ba4_30:visited:hover{background-color:#9771bd33}._link_10ba4_30:visited:active{color:#59b57c;background-color:#59b57c33}._link_10ba4_30 ._icon_10ba4_62{width:var(--font-size);height:var(--font-size)}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const text = "_text_10ba4_1";
+const code = "_code_10ba4_21";
+const link = "_link_10ba4_30";
+const icon = "_icon_10ba4_62";
+const style0 = {
+  text,
+  code,
+  link,
+  icon
+};
+export {
+  code,
+  style0 as default,
+  icon,
+  link,
+  text
+};

package/dist/components/typography/ElmList.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmList } from './ElmList.vue';
+declare const meta: Meta<typeof ElmList>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Unordered: Story;
+export declare const Ordered: Story;
+export declare const Nested: Story;

package/dist/components/typography/ElmList.vue.d.ts

@@ -0,0 +1,31 @@
+export interface ElmListProps {
+    /**
+     * The type of list to render.
+     * - `unordered` `<ul/>` for a **bulleted** list
+     * - `ordered` `<ol/>`  for a **numbered** list
+     */
+    listStyle: "unordered" | "ordered";
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        target: unknown;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ElmListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmListProps> & Readonly<{}>, {
+    listStyle: "unordered" | "ordered";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: unknown;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/typography/ElmList.vue.mjs

@@ -0,0 +1,36 @@
+import { defineComponent, ref, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, renderSlot } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmList",
+  props: {
+    listStyle: { default: "unordered" }
+  },
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.listStyle === "unordered" ? "ul" : "ol"), {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass([
+          "elmethis-list-common",
+          _ctx.listStyle === "unordered" ? "elmethis-bulleted-list" : "elmethis-numbered-list"
+        ]),
+        style: normalizeStyle({
+          "--opacity": targetIsVisible.value ? 1 : 0
+        })
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmList.vue3.mjs

@@ -0,0 +1,17 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".elmethis-list-common{margin-block:1rem;opacity:var(--opacity);transition:opacity .8s;box-sizing:border-box;padding-left:1.25rem}.elmethis-bulleted-list li{box-sizing:border-box;padding-left:.5rem;margin-block:.75rem}.elmethis-bulleted-list li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMTYgMTYnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICA+CiAgICA8cGF0aAogICAgICBmaWxsPScjNDQ5NzYzJwogICAgICBvcGFjaXR5PScwLjgnCiAgICAgIGQ9J00zIDMuNzMyYTEuNSAxLjUgMCAwIDEgMi4zMDUtMS4yNjVsNi43MDYgNC4yNjdhMS41IDEuNSAwIDAgMSAwIDIuNTMxbC02LjcwNiA0LjI2OEExLjUgMS41IDAgMCAxIDMgMTIuMjY3VjMuNzMyWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjQgMjQnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9J3RyYW5zcGFyZW50JwogID4KICAgIDxwYXRoCiAgICAgIHN0cm9rZUxpbmVjYXA9J3JvdW5kJwogICAgICBzdHJva2VMaW5lam9pbj0ncm91bmQnCiAgICAgIGQ9J001LjI1IDUuNjUzYzAtLjg1Ni45MTctMS4zOTggMS42NjctLjk4NmwxMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMSAwIDEuOTcybC0xMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMS0xLjY2Ny0uOTg2VjUuNjUzWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjAgMjAnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9JyM0NDk3NjMnCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9J2V2ZW5vZGQnCiAgICAgIGQ9J004LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaJwogICAgICBjbGlwUnVsZT0nZXZlbm9kZCcKICAgIC8+CiAgPC9zdmc+)}.elmethis-numbered-list li{box-sizing:border-box;padding-left:.25rem;margin-block:.75rem;margin-left:.25rem;list-style-type:decimal}.elmethis-numbered-list li::marker{font-weight:700;color:#9771bd}.elmethis-numbered-list li ol li{list-style-type:lower-alpha}.elmethis-numbered-list li ol li ol li{list-style-type:lower-roman}.elmethis-numbered-list li ol li ol li ol li{list-style-type:lower-greek}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import _sfc_main from "./ElmList.vue.mjs";
+
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmParagraph.vue.d.ts

@@ -1,16 +1,19 @@
 export interface ElmParagraphProps {
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {
         target: HTMLParagraphElement;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLParagraphElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmParagraphProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmParagraphProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmParagraphProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmParagraphProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLParagraphElement;
+}, HTMLParagraphElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/typography/ElmParagraph.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmParagraph.vue2.mjs";
+import style0 from "./ElmParagraph.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmParagraph = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmParagraph as default
+};

package/dist/components/typography/ElmParagraph.vue2.mjs

@@ -0,0 +1,27 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmParagraph",
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("p", {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass(_ctx.$style.paragraph),
+        style: normalizeStyle({
+          "--opacity": targetIsVisible.value ? 1 : 0
+        })
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmParagraph.vue3.mjs

@@ -0,0 +1,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._paragraph_19lcl_1{margin-block:2rem;opacity:var(--opacity);transition:opacity .8s;color:#000000b3}._paragraph_19lcl_1::-moz-selection{color:#ffffffb3;background-color:#000000b3}._paragraph_19lcl_1::selection{color:#ffffffb3;background-color:#000000b3}[data-theme=dark] ._paragraph_19lcl_1{color:#ffffffb3}[data-theme=dark] ._paragraph_19lcl_1::-moz-selection{color:#000000b3;background-color:#ffffffb3}[data-theme=dark] ._paragraph_19lcl_1::selection{color:#000000b3;background-color:#ffffffb3}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const paragraph = "_paragraph_19lcl_1";
+const style0 = {
+  paragraph
+};
+export {
+  style0 as default,
+  paragraph
+};

package/dist/components/typography/ElmTypingAnimation.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmTypingAnimation } from './ElmTypingAnimation.vue';
+declare const meta: Meta<typeof ElmTypingAnimation>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/typography/ElmTypingAnimation.vue.d.ts

@@ -0,0 +1,21 @@
+import { Property } from 'csstype';
+export interface ElmTypingAnimationProps {
+    /**
+     * The texts to display.
+     */
+    texts: string[];
+    /**
+     * The interval between each text.
+     */
+    interval?: number;
+    /**
+     * The font size of the text.
+     */
+    fontSize: Property.FontSize<string | number>;
+}
+declare const _default: import('vue').DefineComponent<ElmTypingAnimationProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTypingAnimationProps> & Readonly<{}>, {
+    texts: string[];
+    interval: number;
+    fontSize: Property.FontSize<string | number>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/hooks/useElmethisTheme.mjs

@@ -0,0 +1,43 @@
+import { ref, watch, onMounted } from "vue";
+const LOCAL_STORAGE_KEY = "elmethis-theme";
+function useElmethisTheme() {
+  const isDarkTheme = ref(false);
+  const toggleTheme = () => {
+    isDarkTheme.value = !isDarkTheme.value;
+  };
+  watch(isDarkTheme, () => {
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute(
+        "data-theme",
+        isDarkTheme.value ? "dark" : "light"
+      );
+      const body = document.querySelector("body");
+      if (body != null) {
+        body.style.colorScheme = isDarkTheme.value ? "dark" : "light";
+      }
+      if (localStorage != null) {
+        localStorage.setItem(
+          LOCAL_STORAGE_KEY,
+          isDarkTheme.value ? "dark" : "light"
+        );
+      }
+    }
+  });
+  onMounted(() => {
+    if (typeof document !== "undefined") {
+      const currentTheme = document.documentElement.getAttribute("data-theme");
+      if (currentTheme != null) {
+        isDarkTheme.value = currentTheme === "dark";
+      } else {
+        const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
+        if (localStorageTheme != null) {
+          isDarkTheme.value = localStorageTheme === "dark";
+        }
+      }
+    }
+  });
+  return { isDarkTheme, toggleTheme };
+}
+export {
+  useElmethisTheme
+};