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

package/dist/components/form/ElmTextField.vue2.mjs

@@ -0,0 +1,124 @@
+import { defineComponent, mergeModels, ref, useModel, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, resolveDynamicComponent, vModelDynamic, createVNode } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import { nanoid } from "nanoid";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["id", "type", "placeholder", "disabled", "aria-required"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTextField",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    maxLength: {},
+    suffix: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: {},
+    isPassword: { type: Boolean, default: false },
+    required: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const id = nanoid();
+    const isFocused = ref(false);
+    const props = __props;
+    const input = useModel(__props, "modelValue");
+    const type = ref(props.isPassword ? "password" : "text");
+    const handleDelete = () => {
+      if (!props.loading && !props.disabled) input.value = "";
+    };
+    const handleVisibleSwitch = () => {
+      if (!props.loading && !props.disabled)
+        type.value = type.value === "text" ? "password" : "text";
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.wrapper),
+        style: normalizeStyle({
+          "--border-color": isFocused.value ? "#59b57c" : "transparent",
+          backgroundColor: _ctx.disabled || _ctx.loading ? "rgba(0,0,0,0.15)" : void 0
+        })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createElementVNode("label", {
+            for: unref(id),
+            class: normalizeClass(_ctx.$style.label),
+            style: normalizeStyle({ "--color": isFocused.value ? "#59b57c" : void 0 })
+          }, [
+            createElementVNode("span", null, toDisplayString(_ctx.label), 1),
+            _ctx.required ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.requierd)
+            }, "*", 2)) : createCommentVNode("", true)
+          ], 14, _hoisted_1),
+          _ctx.maxLength != null ? (openBlock(), createBlock(ElmInlineText, {
+            key: 0,
+            text: `${input.value.length} / ${_ctx.maxLength}`,
+            color: input.value.length > _ctx.maxLength ? "#c56565" : "gray",
+            size: "0.75rem"
+          }, null, 8, ["text", "color"])) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.body)
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), {
+            class: normalizeClass(_ctx.$style["left-icon"])
+          }, null, 8, ["class"])),
+          withDirectives(createElementVNode("input", {
+            id: unref(id),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => input.value = $event),
+            type: type.value,
+            class: normalizeClass(_ctx.$style.input),
+            placeholder: _ctx.placeholder,
+            onFocus: _cache[1] || (_cache[1] = ($event) => isFocused.value = true),
+            onBlur: _cache[2] || (_cache[2] = ($event) => isFocused.value = false),
+            disabled: _ctx.disabled || _ctx.loading,
+            style: normalizeStyle({
+              cursor: _ctx.disabled ? "not-allowed" : _ctx.loading ? "progress" : "auto"
+            }),
+            "aria-required": _ctx.required
+          }, null, 46, _hoisted_2), [
+            [vModelDynamic, input.value]
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["icon-box"])
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style.suffix)
+            }, [
+              _ctx.suffix != null ? (openBlock(), createBlock(ElmInlineText, {
+                key: 0,
+                text: _ctx.suffix
+              }, null, 8, ["text"])) : createCommentVNode("", true)
+            ], 2),
+            _ctx.isPassword ? (openBlock(), createBlock(unref(Icon), {
+              key: 0,
+              icon: type.value === "text" ? "heroicons:eye" : "heroicons:eye-slash",
+              class: normalizeClass(_ctx.$style.icon),
+              onClick: handleVisibleSwitch
+            }, null, 8, ["icon", "class"])) : createCommentVNode("", true),
+            createVNode(unref(Icon), {
+              icon: "heroicons:backspace-16-solid",
+              class: normalizeClass(_ctx.$style.icon),
+              onClick: handleDelete
+            }, null, 8, ["class"])
+          ], 2)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.loading),
+          style: normalizeStyle({
+            opacity: _ctx.loading ? 0.2 : 0
+          })
+        }, null, 6)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmTextField.vue3.mjs

@@ -0,0 +1,46 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("@keyframes _loading_bthl1_19{0%{transform-origin:0%;transform:scaleX(0)}40%{transform-origin:0%;transform:scaleX(1)}60%{transform-origin:100%;transform:scaleX(1)}to{transform-origin:100%;transform:scaleX(0)}}._loading_bthl1_19{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#6987b8;transition:opacity .2s;pointer-events:none;animation-name:_loading_bthl1_19;animation-iteration-count:infinite;animation-duration:1.6s}._wrapper_bthl1_33{overflow:hidden;position:relative;box-sizing:border-box;width:100%;padding:.25rem;border-radius:.25rem;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s,background-color .2s;border-style:solid;border-width:1px;border-color:var(--border-color);background-color:#fffc;box-shadow:0 0 .25rem #00000026}[data-theme=dark] ._wrapper_bthl1_33{background-color:#ffffff26;box-shadow:0 0 .25rem #000000bf}._header_bthl1_55{box-sizing:border-box;height:.75rem;padding:0 .25rem;display:flex;justify-content:space-between}._label_bthl1_63{display:inline;margin:0;padding:0;font-size:.75rem;line-height:.75rem;height:.75rem;vertical-align:top;transition:color .2s;color:#000000a6;color:var(--color, rgba(0, 0, 0, .65))}[data-theme=dark] ._label_bthl1_63{color:#ffffffa6;color:var(--color, rgba(255, 255, 255, .65))}._requierd_bthl1_78{padding-inline:.25rem;color:#c56565;font-weight:700}._body_bthl1_84{display:flex;justify-content:space-between;align-items:center;padding-right:.5rem}._left-icon_bthl1_91{margin:auto .25rem;width:24px;height:24px;display:flex;justify-content:center;align-items:center;opacity:.7}[data-theme=dark] ._left-icon_bthl1_91{filter:invert(1)}._input_bthl1_104{all:unset;box-sizing:border-box;padding:.5rem;width:100%;color:#000000b3;caret-color:#000000b3}._input_bthl1_104::-moz-placeholder{opacity:.5}._input_bthl1_104::placeholder{opacity:.5}[data-theme=dark] ._input_bthl1_104::-moz-placeholder{opacity:.7}[data-theme=dark] ._input_bthl1_104::placeholder{opacity:.7}._input_bthl1_104::-moz-selection{background-color:#000000b3;color:#ffffffb3}._input_bthl1_104::selection{background-color:#000000b3;color:#ffffffb3}[data-theme=dark] ._input_bthl1_104{color:#ffffffb3;caret-color:#ffffffb3}[data-theme=dark] ._input_bthl1_104::-moz-selection{background-color:#ffffffb3;color:#000000b3}[data-theme=dark] ._input_bthl1_104::selection{background-color:#ffffffb3;color:#000000b3}._icon-box_bthl1_131{display:flex;justify-content:space-between;align-items:center}._icon_bthl1_131{box-sizing:border-box;border-radius:50%;padding:.25rem;width:28px;height:28px;transition:background-color .2s;color:gray;cursor:pointer}._icon_bthl1_131:hover{background-color:#80808033}._suffix_bthl1_151{opacity:.6;padding:0 .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const loading = "_loading_bthl1_19";
+const wrapper = "_wrapper_bthl1_33";
+const header = "_header_bthl1_55";
+const label = "_label_bthl1_63";
+const requierd = "_requierd_bthl1_78";
+const body = "_body_bthl1_84";
+const input = "_input_bthl1_104";
+const icon = "_icon_bthl1_131";
+const suffix = "_suffix_bthl1_151";
+const style0 = {
+  loading,
+  wrapper,
+  header,
+  label,
+  requierd,
+  body,
+  "left-icon": "_left-icon_bthl1_91",
+  input,
+  "icon-box": "_icon-box_bthl1_131",
+  icon,
+  suffix
+};
+export {
+  body,
+  style0 as default,
+  header,
+  icon,
+  input,
+  label,
+  loading,
+  requierd,
+  suffix,
+  wrapper
+};

package/dist/components/{headings/ElmHeading3.stories.d.ts → form/ElmTotp.stories.d.ts}

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

package/dist/components/form/ElmTotp.vue.d.ts

@@ -0,0 +1,12 @@
+export interface ElmTotpProps {
+    length: number;
+    focusOnMount?: boolean;
+    loading?: boolean;
+}
+declare const _default: import('vue').DefineComponent<ElmTotpProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTotpProps> & Readonly<{}>, {
+    loading: boolean;
+    focusOnMount: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    targetRef: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmTotp.vue.mjs

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

package/dist/components/form/ElmTotp.vue2.mjs

@@ -0,0 +1,102 @@
+import { defineComponent, ref, computed, onMounted, nextTick, createElementBlock, openBlock, createElementVNode, withDirectives, normalizeClass, createVNode, Fragment, renderList, unref, createCommentVNode, toDisplayString, vModelText } from "vue";
+import { Icon } from "@iconify/vue";
+import { useFocus } from "@vueuse/core";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["maxlength", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTotp",
+  props: {
+    length: {},
+    focusOnMount: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const inputModel = ref("");
+    const paddedInputRef = computed(() => {
+      return inputModel.value.padEnd(props.length, " ");
+    });
+    const targetRef = ref(null);
+    const { focused } = useFocus(targetRef);
+    const selectedIndex = ref(0);
+    const select = (index) => {
+      selectText(index);
+      selectedIndex.value = index;
+    };
+    const selectText = (index) => {
+      if (targetRef.value) {
+        targetRef.value.focus();
+        targetRef.value.setSelectionRange(index, index + 1);
+      }
+    };
+    const handleInput = () => {
+      if (focused.value && selectedIndex.value !== null) {
+        if (selectedIndex.value < props.length - 1) {
+          select(selectedIndex.value + 1);
+        } else {
+          select(0);
+        }
+      }
+    };
+    const onInputChange = () => {
+      var _a;
+      const inputValue = ((_a = targetRef.value) == null ? void 0 : _a.value) ?? "";
+      inputModel.value = inputValue.slice(0, props.length);
+      handleInput();
+    };
+    const reset = () => {
+      inputModel.value = "";
+      nextTick(() => select(0));
+    };
+    onMounted(() => {
+      inputModel.value = "";
+      if (props.focusOnMount) nextTick(() => select(0));
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.container)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(paddedInputRef.value.split(""), (char, index) => {
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass([
+                _ctx.$style["char-box"],
+                {
+                  [_ctx.$style.focused]: unref(focused) && selectedIndex.value === index,
+                  [_ctx.$style.loading]: _ctx.loading
+                }
+              ]),
+              onClick: ($event) => select(index)
+            }, [
+              char !== " " ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(_ctx.$style.char)
+              }, toDisplayString(char), 3)) : createCommentVNode("", true)
+            ], 10, _hoisted_1);
+          }), 256)),
+          createVNode(unref(Icon), {
+            icon: "heroicons:backspace",
+            class: normalizeClass(_ctx.$style.icon),
+            onClick: reset
+          }, null, 8, ["class"])
+        ], 2),
+        withDirectives(createElementVNode("input", {
+          "aria-hidden": "",
+          type: "text",
+          class: normalizeClass(_ctx.$style["dummy-input"]),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputModel.value = $event),
+          ref_key: "targetRef",
+          ref: targetRef,
+          maxlength: _ctx.length,
+          onInput: onInputChange,
+          disabled: _ctx.loading
+        }, null, 42, _hoisted_2), [
+          [vModelText, inputModel.value]
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmTotp.vue3.mjs

@@ -0,0 +1,34 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._dummy-input_gewi2_1{all:unset;height:0px}._container_gewi2_6{display:flex;align-items:center;gap:.5rem;cursor:pointer}._char-box_gewi2_13{display:flex;justify-content:center;align-items:center;width:3.5rem;height:4rem;border:solid 1px #ccc;border-radius:.25rem;transition:border-color .1s,background-color .1s,opacity .1s;background-color:#00000006}[data-theme=dark] ._char-box_gewi2_13{background-color:#ffffff06}._focused_gewi2_28{border-color:#6987b8;background-color:#6987b80d}._loading_gewi2_33{opacity:.5;background-color:#0003}[data-theme=dark] ._loading_gewi2_33{background-color:#fff3}._char_gewi2_13{font-size:1.75rem;font-family:monospace;color:#000000b3}[data-theme=dark] ._char_gewi2_13{color:#ffffffb3}._icon_gewi2_50{width:24px;height:24px;padding:.5rem;border-radius:50%;transition:background-color .2s;color:#000000b3}._icon_gewi2_50:hover{background-color:#0000000d}[data-theme=dark] ._icon_gewi2_50{color:#ffffffb3}[data-theme=dark] ._icon_gewi2_50:hover{background-color:#ffffff0d}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const container = "_container_gewi2_6";
+const focused = "_focused_gewi2_28";
+const loading = "_loading_gewi2_33";
+const char = "_char_gewi2_13";
+const icon = "_icon_gewi2_50";
+const style0 = {
+  "dummy-input": "_dummy-input_gewi2_1",
+  container,
+  "char-box": "_char-box_gewi2_13",
+  focused,
+  loading,
+  char,
+  icon
+};
+export {
+  char,
+  container,
+  style0 as default,
+  focused,
+  icon,
+  loading
+};

package/dist/components/icon/ElmArrowIcon.stories.d.ts

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

package/dist/components/icon/ElmArrowIcon.vue.d.ts

@@ -0,0 +1,26 @@
+import { Property } from 'csstype';
+export interface ElmArrowIconProps {
+    /**
+     * Specifies the direction of the arrow.
+     */
+    direction?: "up" | "down" | "left" | "right";
+    /**
+     * Specifies whether the arrow is in loading state.
+     */
+    loading?: boolean;
+    /**
+     * Specifies whether the arrow is in pending state.
+     */
+    pending?: boolean;
+    /**
+     * Specifies the size of the arrow.
+     */
+    size?: Property.Height;
+}
+declare const _default: import('vue').DefineComponent<ElmArrowIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmArrowIconProps> & Readonly<{}>, {
+    size: Property.Height;
+    loading: boolean;
+    pending: boolean;
+    direction: "up" | "down" | "left" | "right";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/icon/ElmArrowIcon.vue.mjs

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

package/dist/components/icon/ElmArrowIcon.vue2.mjs

@@ -0,0 +1,31 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmArrowIcon",
+  props: {
+    direction: { default: "right" },
+    loading: { type: Boolean, default: false },
+    pending: { type: Boolean, default: false },
+    size: { default: "2rem" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          _ctx.$style.arrow,
+          {
+            [_ctx.$style.normal]: !_ctx.loading && !_ctx.pending,
+            [_ctx.$style.loading]: _ctx.loading,
+            [_ctx.$style.pending]: !_ctx.loading && _ctx.pending
+          }
+        ]),
+        style: normalizeStyle({
+          "--size": _ctx.size,
+          transform: _ctx.direction === "up" ? "rotate(270deg)" : _ctx.direction === "down" ? "rotate(90deg)" : _ctx.direction === "left" ? "rotate(180deg)" : "rotate(0deg)"
+        })
+      }, null, 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/icon/ElmArrowIcon.vue3.mjs

@@ -0,0 +1,29 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("@keyframes _loading_hcczr_27{0%{background-position:200% 0%}33%{background-position:100% 0%}66%{background-position:100% 0%}to{background-position:0% 0%}}._arrow_hcczr_15{width:var(--size);height:var(--size);background:linear-gradient(to right,#000000b3 0,#000000b3 50%,#0003 50%);background-size:200% 100%;clip-path:polygon(50% 33%,0% 33%,0% 66%,50% 66%,50% 100%,100% 50%,50% 0%)}[data-theme=dark] ._arrow_hcczr_15{background:linear-gradient(to right,#ffffffb3 0,#ffffffb3 50%,#fff3 50%);background-size:200% 100%}._loading_hcczr_27{animation-name:_loading_hcczr_27;animation-duration:1.6s;animation-iteration-count:infinite}._normal_hcczr_33{background:#000000b3;transition:background .4s}[data-theme=dark] ._normal_hcczr_33{background:#ffffffb3}._pending_hcczr_41{background:#0003;transition:background .4s}[data-theme=dark] ._pending_hcczr_41{background:#fff3}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const arrow = "_arrow_hcczr_15";
+const loading = "_loading_hcczr_27";
+const normal = "_normal_hcczr_33";
+const pending = "_pending_hcczr_41";
+const style0 = {
+  arrow,
+  loading,
+  normal,
+  pending
+};
+export {
+  arrow,
+  style0 as default,
+  loading,
+  normal,
+  pending
+};

package/dist/components/icon/ElmBookmarkIcon.stories.d.ts

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

package/dist/components/icon/ElmBookmarkIcon.vue.d.ts

@@ -0,0 +1,7 @@
+export interface ElmBookmarkIconProps {
+    name?: string;
+    href: string;
+    favicon?: string;
+}
+declare const _default: import('vue').DefineComponent<ElmBookmarkIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBookmarkIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLAnchorElement>;
+export default _default;

package/dist/components/icon/ElmBookmarkIcon.vue.mjs

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

package/dist/components/icon/ElmBookmarkIcon.vue2.mjs

@@ -0,0 +1,45 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, createElementVNode, unref, createVNode } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+const _hoisted_1 = ["href"];
+const _hoisted_2 = ["src", "alt"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmBookmarkIcon",
+  props: {
+    name: {},
+    href: {},
+    favicon: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("a", {
+        class: normalizeClass(_ctx.$style.wrapper),
+        href: _ctx.href,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, [
+        _ctx.favicon != null ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.favicon),
+          src: _ctx.favicon,
+          alt: `favicon of ${_ctx.name ?? _ctx.href}`
+        }, null, 10, _hoisted_2)) : (openBlock(), createBlock(unref(Icon), {
+          key: 1,
+          icon: "mdi:globe",
+          class: normalizeClass(_ctx.$style["favicon-svg"])
+        }, null, 8, ["class"])),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.text)
+        }, [
+          createVNode(ElmInlineText, {
+            text: _ctx.name ?? _ctx.href,
+            size: ".6rem"
+          }, null, 8, ["text"])
+        ], 2)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/icon/ElmBookmarkIcon.vue3.mjs

@@ -0,0 +1,27 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._wrapper_19n7v_1{all:unset;box-sizing:border-box;padding:.5rem;width:5rem;height:5.5rem;border-radius:.25rem;display:flex;flex-direction:column;align-items:center;justify-content:space-around;cursor:pointer;transition:background-color .1s}._wrapper_19n7v_1:hover{background-color:#0000001a}[data-theme=dark] ._wrapper_19n7v_1:hover{background-color:#ffffff1a}._favicon_19n7v_22{width:2.5rem;height:2.5rem}._favicon-svg_19n7v_27{width:2.5rem;height:2.5rem;color:#000000b3}[data-theme=dark] ._favicon-svg_19n7v_27{color:#ffffffb3}._text_19n7v_36{width:4rem;text-align:center;vertical-align:middle;line-height:.75rem;overflow:hidden;text-overflow:ellipsis}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const wrapper = "_wrapper_19n7v_1";
+const favicon = "_favicon_19n7v_22";
+const text = "_text_19n7v_36";
+const style0 = {
+  wrapper,
+  favicon,
+  "favicon-svg": "_favicon-svg_19n7v_27",
+  text
+};
+export {
+  style0 as default,
+  favicon,
+  text,
+  wrapper
+};

package/dist/components/icon/ElmCubeIcon.vue.d.ts

@@ -6,5 +6,5 @@ export interface ElmCubeIconProps {
 }
 declare const _default: import('vue').DefineComponent<ElmCubeIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmCubeIconProps> & Readonly<{}>, {
     size: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/icon/ElmCubeIcon.vue.mjs

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

package/dist/components/icon/ElmCubeIcon.vue2.mjs

@@ -0,0 +1,41 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, Fragment, renderList, createElementVNode } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmCubeIcon",
+  props: {
+    size: { default: 128 }
+  },
+  setup(__props) {
+    const props = __props;
+    const commonTranslateZ = computed(() => `translateZ(${props.size / 2}px)`);
+    const faces = [
+      { name: "front", rotate: "" },
+      { name: "back", rotate: "rotateY(180deg)" },
+      { name: "left", rotate: "rotateY(-90deg)" },
+      { name: "right", rotate: "rotateY(90deg)" },
+      { name: "top", rotate: "rotateX(90deg)" },
+      { name: "bottom", rotate: "rotateX(-90deg)" }
+    ];
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.cube),
+        style: normalizeStyle({
+          width: `${_ctx.size}px`,
+          height: `${_ctx.size}px`
+        })
+      }, [
+        (openBlock(), createElementBlock(Fragment, null, renderList(faces, (face) => {
+          return createElementVNode("div", {
+            key: face.name,
+            class: normalizeClass(_ctx.$style.face),
+            style: normalizeStyle({
+              transform: `${face.rotate} ${commonTranslateZ.value}`
+            })
+          }, null, 6);
+        }), 64))
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/icon/ElmCubeIcon.vue3.mjs

@@ -0,0 +1,24 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._cube_oh6hr_1{position:relative;transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-45deg);animation:_elmethis-cube-icon-rotate_oh6hr_1 1.5s infinite linear}._face_oh6hr_8{position:absolute;width:100%;height:100%;border-radius:2px;display:flex;justify-content:center;align-items:center;font-weight:700;backface-visibility:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-style:solid;border-width:1px;border-color:#000000b3;background-color:#fff3}[data-theme=dark] ._face_oh6hr_8{border-color:#ffffffb3;background-color:#0003}@keyframes _elmethis-cube-icon-rotate_oh6hr_1{0%{transform:rotateX(-30deg) rotateY(-45deg) rotate(0)}to{transform:rotateX(-30deg) rotateY(315deg) rotate(360deg)}}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const cube = "_cube_oh6hr_1";
+const face = "_face_oh6hr_8";
+const style0 = {
+  cube,
+  "elmethis-cube-icon-rotate": "_elmethis-cube-icon-rotate_oh6hr_1",
+  face
+};
+export {
+  cube,
+  style0 as default,
+  face
+};

package/dist/components/icon/ElmDotLoadingIcon.vue.d.ts

@@ -12,7 +12,7 @@ export interface ElmDotLoadingIconProps {
     size?: Property.Width<string | number>;
 }
 declare const _default: import('vue').DefineComponent<ElmDotLoadingIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmDotLoadingIconProps> & Readonly<{}>, {
-    size: Property.Width<string | number>;
     color: Property.BackgroundColor;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    size: Property.Width<string | number>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;