@elmethis/core 0.1.0

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

@@ -0,0 +1,29 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmDivider",
+  props: {
+    margin: {}
+  },
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("hr", {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass(_ctx.$style.divider),
+        style: normalizeStyle({
+          "--scale": targetIsVisible.value ? 1 : 0,
+          "--margin-block": _ctx.margin
+        })
+      }, null, 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._divider_z5wle_1{margin-block:var(--margin-block);position:relative;display:block;width:100%;overflow:visible;border:none;border-bottom:1px solid rgba(0,0,0,.3);transform:scaleX(var(--scale));transition:transform 1.2s}[data-theme=dark] ._divider_z5wle_1{border-bottom-color:#ffffff4d}._divider_z5wle_1:before{position:absolute;content:"";height:5px;width:5px;top:-2px;border-radius:50%;background-color:#0009;left:0}[data-theme=dark] ._divider_z5wle_1:before{background-color:#fff9}._divider_z5wle_1:after{position:absolute;content:"";height:5px;width:5px;top:-2px;border-radius:50%;background-color:#0009;right:0}[data-theme=dark] ._divider_z5wle_1:after{background-color:#fff9}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const divider = "_divider_z5wle_1";
+const style0 = {
+  divider
+};
+export {
+  style0 as default,
+  divider
+};

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

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

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

@@ -0,0 +1,8 @@
+export interface ElmFragmentIdentifierProps {
+    /**
+     * ID of the heading element.
+     */
+    id: string;
+}
+declare const _default: import('vue').DefineComponent<ElmFragmentIdentifierProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmFragmentIdentifierProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

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

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

@@ -0,0 +1,62 @@
+import { defineComponent, onMounted, nextTick, createElementBlock, openBlock, normalizeClass, createVNode, unref } from "vue";
+import { useClipboard } from "@vueuse/core";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiAnchor, mdiLinkVariant } from "@mdi/js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmFragmentIdentifier",
+  props: {
+    id: {}
+  },
+  setup(__props) {
+    const handleHashClick = (id) => {
+      const url = new URL(window.location.href);
+      url.hash = id;
+      window.history.replaceState(null, "", url.toString());
+      const target = document.getElementById(id);
+      if (target != null) {
+        target.scrollIntoView({ behavior: "smooth" });
+      }
+    };
+    const handleLinkClick = (id) => {
+      const url = new URL(window.location.href);
+      url.hash = id;
+      window.history.replaceState(null, "", url.toString());
+      copy(window.location.href);
+    };
+    const { copy } = useClipboard();
+    onMounted(() => {
+      nextTick(() => {
+        const hash = window.location.hash;
+        if (hash && hash.startsWith("#")) {
+          const element = document.querySelector(hash);
+          if (element) {
+            element.scrollIntoView({ behavior: "smooth" });
+          }
+        }
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.fragment)
+      }, [
+        createVNode(ElmMdiIcon, {
+          size: "1.25rem",
+          color: "#6987b8",
+          d: unref(mdiAnchor),
+          class: normalizeClass(_ctx.$style.icon),
+          onClick: _cache[0] || (_cache[0] = ($event) => handleHashClick(_ctx.id))
+        }, null, 8, ["d", "class"]),
+        createVNode(ElmMdiIcon, {
+          size: "1.25rem",
+          color: "#6987b8",
+          d: unref(mdiLinkVariant),
+          class: normalizeClass(_ctx.$style.icon),
+          onClick: _cache[1] || (_cache[1] = ($event) => handleLinkClick(_ctx.id))
+        }, null, 8, ["d", "class"])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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_e7xfw_1{display:flex;justify-content:flex-end;align-items:center}._icon_e7xfw_7{padding:.25rem;border-radius:.25rem;transition:background-color .2s;cursor:pointer}._icon_e7xfw_7:hover{background-color:#0000001a}[data-theme=dark] ._icon_e7xfw_7:hover{background-color:#ffffff1a}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const fragment = "_fragment_e7xfw_1";
+const icon = "_icon_e7xfw_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/typography/ElmInlineText.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmInlineText } from './ElmInlineText.vue';
+declare const meta: Meta<typeof ElmInlineText>;
+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/typography/ElmInlineText.vue.d.ts

@@ -0,0 +1,61 @@
+import { Property } from 'csstype';
+export interface ElmInlineTextProps {
+    /**
+     * The text to display.
+     */
+    text: string;
+    /**
+     * Specifies the color of the text.
+     *
+     * e.g.) `'red'`, `'#ff0000'`, `'rgba(255, 0, 0, 0.5)'`
+     */
+    color?: Property.Color;
+    /**
+     * Specifies the font size of the text.
+     */
+    size?: Property.FontSize;
+    /**
+     * Specifies whether the text should be bold.
+     */
+    bold?: boolean;
+    /**
+     * Specifies whether the text should be italic.
+     */
+    italic?: boolean;
+    /**
+     * Specifies whether the text should be underlined.
+     */
+    underline?: boolean;
+    /**
+     * 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<{}>, {
+    size: Property.FontSize;
+    code: boolean;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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,98 @@
+import { defineComponent, useCssModule, createElementBlock, createBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, createTextVNode, createVNode, toDisplayString, unref, resolveDynamicComponent, h } from "vue";
+import { getLuminance } from "polished";
+import ElmInlineIcon from "../icon/ElmInlineIcon.vue.mjs";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiOpenInNew } from "@mdi/js";
+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(ElmMdiIcon, {
+          d: unref(mdiOpenInNew),
+          size: _ctx.size ? String(_ctx.size) : void 0,
+          color: "gray",
+          style: { "opacity": "0.75" }
+        }, null, 8, ["d", "size"])
+      ], 14, _hoisted_1)) : (openBlock(), createBlock(resolveDynamicComponent(render()), { key: 1 }));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._text_s0nwe_1{padding:0;margin:0;white-space:pre-line;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_s0nwe_1::-moz-selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}._text_s0nwe_1::selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}[data-theme=dark] ._text_s0nwe_1{color:#ffffffb3;color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._text_s0nwe_1::-moz-selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._text_s0nwe_1::selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}._code_s0nwe_22{margin-inline:.25rem;padding:2px .5em;font-size:calc(1em - 2px);border-radius:.125rem;background-color:#00000013;font-family:"Source Code Pro" monospace}._link_s0nwe_31{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_s0nwe_31:hover{background-color:#6987b833}._link_s0nwe_31:active{color:#59b57c;background-color:#59b57c33}._link_s0nwe_31:visited{color:#9771bd;border-bottom:dashed 1px #9771bd}._link_s0nwe_31:visited:hover{background-color:#9771bd33}._link_s0nwe_31:visited:active{color:#59b57c;background-color:#59b57c33}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const text = "_text_s0nwe_1";
+const code = "_code_s0nwe_22";
+const link = "_link_s0nwe_31";
+const style0 = {
+  text,
+  code,
+  link
+};
+export {
+  code,
+  style0 as default,
+  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
+};