@elmethis/core 1.0.0-alpha.189 → 1.0.0-alpha.190

package/dist/components/table/ElmTable.vue2.mjs

@@ -1,19 +1,54 @@
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
+import { defineComponent, useSlots, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, renderSlot, createElementVNode, createVNode, unref } from "vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import { mdiTable } from "../../node_modules/.pnpm/@mdi_js@7.4.47/node_modules/@mdi/js/mdi.mjs";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = {
+  viewBox: "0 0 24 24",
+  width: "1rem",
+  height: "1rem"
+};
+const _hoisted_3 = ["d"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ElmTable",
   props: {
-    margin: {}
+    margin: {},
+    caption: {}
   },
   setup(__props) {
+    const slots = useSlots();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("table", {
-        class: "table",
+        class: normalizeClass(_ctx.$style.table),
         style: normalizeStyle({
           "--margin-block": _ctx.margin
         })
       }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 4);
+        _ctx.caption != null ? (openBlock(), createElementBlock("caption", _hoisted_1, [
+          createElementVNode("span", {
+            class: normalizeClass(_ctx.$style["caption"])
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style.spacing)
+            }, null, 2),
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style["caption-inner"])
+            }, [
+              (openBlock(), createElementBlock("svg", _hoisted_2, [
+                createElementVNode("path", {
+                  d: unref(mdiTable),
+                  fill: "#6987b8"
+                }, null, 8, _hoisted_3)
+              ])),
+              createVNode(ElmInlineText, { text: _ctx.caption }, null, 8, ["text"])
+            ], 2),
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style.spacing)
+            }, null, 2)
+          ], 2)
+        ])) : createCommentVNode("", true),
+        slots.header != null ? renderSlot(_ctx.$slots, "header", { key: 1 }) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "body")
+      ], 6);
     };
   }
 });

package/dist/components/table/ElmTable.vue3.mjs

@@ -0,0 +1,27 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._table_zpzea_1{margin-block:var(--margin-block);border-collapse:collapse;border-spacing:0;box-shadow:0 0 .125rem #0003;overflow:hidden;border-radius:.125rem;color:#000000b3}[data-theme=dark] ._table_zpzea_1{color:#ffffffb3}._caption_zpzea_14{position:relative;width:100%;display:inline-flex;justify-content:center;align-items:center;gap:1rem;margin-block-end:1rem}._caption-inner_zpzea_24{display:inline-flex;justify-content:center;align-items:center;gap:.25rem}._spacing_zpzea_31{flex-grow:1;height:1px;background-color:#80808033}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const table = "_table_zpzea_1";
+const caption = "_caption_zpzea_14";
+const spacing = "_spacing_zpzea_31";
+const style0 = {
+  table,
+  caption,
+  "caption-inner": "_caption-inner_zpzea_24",
+  spacing
+};
+export {
+  caption,
+  style0 as default,
+  spacing,
+  table
+};

package/dist/components/table/ElmTableBody.vue.d.ts

@@ -1,9 +1,12 @@
+import { default as ElmTableRow } from './ElmTableRow.vue';
 export interface ElmTableBodyProps {
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default: InstanceType<typeof ElmTableRow>[];
+    }> & {
+        default: InstanceType<typeof ElmTableRow>[];
     };
     refs: {};
     rootEl: HTMLTableSectionElement;

package/dist/components/table/ElmTableCell.vue.d.ts

@@ -1,3 +1,4 @@
+import { VNodeChild } from 'vue';
 export interface ElmTableCellProps {
     /**
      * Whether the cell is a header cell.
@@ -11,8 +12,10 @@ export interface ElmTableCellProps {
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default: VNodeChild;
+    }> & {
+        default: VNodeChild;
     };
     refs: {};
     rootEl: any;

package/dist/components/table/ElmTableCell.vue.mjs

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("td.cell[data-v-7bedd3ac]{padding:.75rem 1rem;border-bottom:solid 1px rgba(0,0,0,.15);border-right:dotted 1px rgba(0,0,0,.1)}[data-theme=dark] td.cell[data-v-7bedd3ac]{border-bottom-color:#ffffff26;border-right-color:#ffffff1a}th.cell[data-v-7bedd3ac]{padding:.75rem 1rem;border-right:dotted 1px rgba(255,255,255,.25)}[data-theme=dark] th.cell[data-v-7bedd3ac]{border-right:dotted 1px rgba(0,0,0,.25)}"));
+      elementStyle.appendChild(document.createTextNode("td.cell[data-v-43a0650e]{padding:.75rem 1rem;border-top:1px solid rgba(0,0,0,.15);border-right:1px dotted rgba(0,0,0,.1)}[data-theme=dark] td.cell[data-v-43a0650e]{border-top-color:#ffffff26;border-right-color:#ffffff1a}th.cell[data-v-43a0650e]{padding:.75rem 1rem;border-right:1px dotted rgba(0,0,0,.15)}[data-theme=dark] th.cell[data-v-43a0650e]{border-right:1px dotted rgba(255,255,255,.15)}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -13,7 +13,7 @@
 import _sfc_main from "./ElmTableCell.vue2.mjs";
 
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const ElmTableCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7bedd3ac"]]);
+const ElmTableCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43a0650e"]]);
 export {
   ElmTableCell as default
 };

package/dist/components/table/ElmTableHeader.vue.d.ts

@@ -1,9 +1,12 @@
+import { default as ElmTableRow } from './ElmTableRow.vue';
 export interface ElmTableHeaderProps {
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default: InstanceType<typeof ElmTableRow>;
+    }> & {
+        default: InstanceType<typeof ElmTableRow>;
     };
     refs: {};
     rootEl: HTMLTableSectionElement;

package/dist/components/table/ElmTableHeader.vue3.mjs

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".elmethis-table-header-thead{text-align:left;background-color:#000c;color:#fffc;transition:background-color .4s,color .4s}[data-theme=dark] .elmethis-table-header-thead{background-color:#fffc;color:#000c}.elmethis-table-header-thead tr td,.elmethis-table-header-thead tr th{color:#ffffffb3}[data-theme=dark] .elmethis-table-header-thead tr td,[data-theme=dark] .elmethis-table-header-thead tr th{color:#000000b3}.elmethis-table-header-thead tr td::-moz-selection,.elmethis-table-header-thead tr th::-moz-selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}.elmethis-table-header-thead tr td::selection,.elmethis-table-header-thead tr th::selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] .elmethis-table-header-thead tr td::-moz-selection,[data-theme=dark] .elmethis-table-header-thead tr th::-moz-selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}[data-theme=dark] .elmethis-table-header-thead tr td::selection,[data-theme=dark] .elmethis-table-header-thead tr th::selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}"));
+      elementStyle.appendChild(document.createTextNode(".elmethis-table-header-thead{text-align:left;transition:background-color .4s,color .4s;border-bottom:2px solid rgba(128,128,128,.5)}.elmethis-table-header-thead tr td::-moz-selection,.elmethis-table-header-thead tr th::-moz-selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}.elmethis-table-header-thead tr td::selection,.elmethis-table-header-thead tr th::selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] .elmethis-table-header-thead tr td::-moz-selection,[data-theme=dark] .elmethis-table-header-thead tr th::-moz-selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}[data-theme=dark] .elmethis-table-header-thead tr td::selection,[data-theme=dark] .elmethis-table-header-thead tr th::selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {

package/dist/components/table/ElmTableRow.vue.d.ts

@@ -1,9 +1,12 @@
+import { default as ElmTableCell } from './ElmTableCell.vue';
 export interface ElmTableRowProps {
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default: InstanceType<typeof ElmTableCell>[];
+    }> & {
+        default: InstanceType<typeof ElmTableCell>[];
     };
     refs: {};
     rootEl: HTMLTableRowElement;

package/dist/components/table/ElmTableRow.vue.mjs

@@ -1,10 +1,13 @@
-import { defineComponent, createElementBlock, openBlock, renderSlot } from "vue";
+import { defineComponent, useSlots, createElementBlock, openBlock, Fragment, renderList, createVNode, resolveDynamicComponent } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ElmTableRow",
   setup(__props) {
+    const slots = useSlots();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("tr", null, [
-        renderSlot(_ctx.$slots, "default")
+        (openBlock(), createElementBlock(Fragment, null, renderList(slots, (cell) => {
+          return createVNode(resolveDynamicComponent(cell));
+        }), 64))
       ]);
     };
   }

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

@@ -1,4 +1,5 @@
 export interface ElmBlockQuoteProps {
+    cite?: string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

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

@@ -1,7 +1,15 @@
-import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot, createCommentVNode, createElementVNode, toDisplayString, unref } from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
+import { mdiFormatQuoteOpen, mdiFormatQuoteClose } from "../../node_modules/.pnpm/@mdi_js@7.4.47/node_modules/@mdi/js/mdi.mjs";
+const _hoisted_1 = ["cite"];
+const _hoisted_2 = ["href"];
+const _hoisted_3 = ["d"];
+const _hoisted_4 = ["d"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ElmBlockQuote",
+  props: {
+    cite: {}
+  },
   setup(__props) {
     const target = ref(null);
     const targetIsVisible = ref(false);
@@ -15,10 +23,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(_ctx.$style.blockquote),
         style: normalizeStyle({
           "--opacity": targetIsVisible.value ? 1 : 0
-        })
+        }),
+        cite: _ctx.cite
       }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 6);
+        renderSlot(_ctx.$slots, "default"),
+        _ctx.cite ? (openBlock(), createElementBlock("cite", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.cite)
+        }, [
+          createElementVNode("a", {
+            href: _ctx.cite,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, toDisplayString(_ctx.cite), 9, _hoisted_2)
+        ], 2)) : createCommentVNode("", true),
+        (openBlock(), createElementBlock("svg", {
+          class: normalizeClass(_ctx.$style.icon),
+          style: { "top": "0.25rem", "left": "0.25rem" },
+          viewBox: "0 0 24 24",
+          width: "1rem",
+          height: "1rem"
+        }, [
+          createElementVNode("path", { d: unref(mdiFormatQuoteOpen) }, null, 8, _hoisted_3)
+        ], 2)),
+        (openBlock(), createElementBlock("svg", {
+          class: normalizeClass(_ctx.$style.icon),
+          style: { "bottom": "0.25rem", "right": "0.25rem" },
+          viewBox: "0 0 24 24",
+          width: "1rem",
+          height: "1rem"
+        }, [
+          createElementVNode("path", { d: unref(mdiFormatQuoteClose) }, null, 8, _hoisted_4)
+        ], 2))
+      ], 14, _hoisted_1);
     };
   }
 });

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

@@ -3,18 +3,24 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("._blockquote_1oj4b_1{margin-block:2rem;opacity:var(--opacity);transition:opacity .8s;box-sizing:border-box;margin:0;padding:.125rem 1.5rem;border-left:4px solid rgba(0,0,0,.2)}[data-theme=dark] ._blockquote_1oj4b_1{border-left-color:#fff3}"));
+      elementStyle.appendChild(document.createTextNode("._blockquote_jhmbg_1{position:relative;margin-block:2rem;opacity:var(--opacity);transition:opacity .8s;box-sizing:border-box;margin:0;padding:1.5rem .5rem 1.5rem 1.5rem;background-color:#868e9c0d;border-left:4px solid rgba(0,0,0,.2)}[data-theme=dark] ._blockquote_jhmbg_1{border-left-color:#fff3}._cite_jhmbg_16{position:absolute;font-size:.75rem;line-height:.75rem;bottom:.5rem;right:2rem}._cite_jhmbg_16 a{all:unset;color:#6987b8;padding:0 .25rem;border-radius:.125rem;cursor:pointer;transition:background-color .1s}._cite_jhmbg_16 a:hover{background-color:#6987b826}._icon_jhmbg_35{position:absolute;padding:0;margin:0;width:1rem;height:1rem;fill:#868e9c}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-const blockquote = "_blockquote_1oj4b_1";
+const blockquote = "_blockquote_jhmbg_1";
+const cite = "_cite_jhmbg_16";
+const icon = "_icon_jhmbg_35";
 const style0 = {
-  blockquote
+  blockquote,
+  cite,
+  icon
 };
 export {
   blockquote,
-  style0 as default
+  cite,
+  style0 as default,
+  icon
 };

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

@@ -1,4 +1,4 @@
-export type AlertType = 'note' | 'tip' | 'important' | 'warning' | 'caution';
+export type AlertType = "note" | "tip" | "important" | "warning" | "caution";
 export interface ElmCalloutProps {
     /**
      * Type of alert

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

@@ -1,6 +1,6 @@
 import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createVNode, renderSlot } from "vue";
 import { Icon } from "@iconify/vue";
-import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+import ElmInlineText from "./ElmInlineText.vue.mjs";
 import { rgba } from "polished";
 import { useIntersectionObserver } from "@vueuse/core";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/{headings/ElmHeading1.stories.d.ts → typography/ElmHeading.stories.d.ts}

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

@@ -6,3 +6,5 @@ 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

@@ -38,10 +38,22 @@ export interface ElmInlineTextProps {
      * 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.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
+};