@nmorph/nmorph-ui-kit 2.2.40 → 2.2.41

package/dist/components/data/nmorph-tag-list/NmorphTagList.css

@@ -0,0 +1 @@
+.nmorph-list--common .nmorph-tag-item--common{border:none}

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue.js

@@ -1,21 +1,26 @@
+import './NmorphTagList.css';
 import n from "./NmorphTagList.vue2.js";
-import { openBlock as e, createElementBlock as t, normalizeClass as l, Fragment as s, renderList as a, createBlock as m, mergeProps as i } from "vue";
-import c from "../../../_virtual/_plugin-vue_export-helper.js";
-function p(f, d, _, r, u, g) {
-  return e(), t(
+import { openBlock as e, createElementBlock as l, normalizeClass as t, Fragment as a, renderList as i, createBlock as c, mergeProps as m } from "vue";
+/* empty css                   */
+import s from "../../../_virtual/_plugin-vue_export-helper.js";
+function p(d, f, _, r, g, k) {
+  return e(), l(
     "div",
     {
-      class: l(r.modifiers)
+      class: t(r.modifiers)
     },
     [
-      (e(!0), t(
-        s,
+      (e(!0), l(
+        a,
         null,
-        a(r.resolvedTagList, (o) => (e(), m(
+        i(r.resolvedTagList, (o) => (e(), c(
           r.NmorphTagItem,
-          i({
+          m({
             key: o.value
-          }, { ref_for: !0 }, o, { onClose: r.closeTagHandler }),
+          }, { ref_for: !0 }, o, {
+            onClick: r.clickTagHandler,
+            onClose: r.closeTagHandler
+          }),
           null,
           16
           /* FULL_PROPS */
@@ -28,7 +33,7 @@ function p(f, d, _, r, u, g) {
     /* CLASS */
   );
 }
-const v = /* @__PURE__ */ c(n, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
+const L = /* @__PURE__ */ s(n, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
 export {
-  v as default
+  L as default
 };

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue2.js

@@ -1,36 +1,42 @@
-import { defineComponent as d, computed as a, ref as c } from "vue";
+import './NmorphTagList.css';
+import { defineComponent as p, computed as s, ref as m } from "vue";
 import { useModifiers as g } from "../../../utils/create-modifiers.js";
 import f from "./components/nmorph-tag-item/NmorphTagItem.vue.js";
-const L = /* @__PURE__ */ d({
+const L = /* @__PURE__ */ p({
   __name: "NmorphTagList",
   props: {
     modelValue: { type: Array, required: !0 },
-    design: { type: String, required: !1, default: "nmorph" }
+    selectedValue: { type: [String, null], required: !1 },
+    design: { type: String, required: !1, default: "nmorph" },
+    color: { type: String, required: !1 }
   },
-  emits: ["close", "update:model-value"],
-  setup(i, { expose: l, emit: m }) {
-    l();
-    const r = i, o = m, n = a(
+  emits: ["click", "close", "update:model-value", "update:selected-value", "update:selectedValue"],
+  setup(a, { expose: i, emit: d }) {
+    i();
+    const l = a, t = d, u = s(
       () => g({
-        "nmorph-list": []
+        "nmorph-list": [l.design]
       })
     );
-    let t = c(r.modelValue);
-    const u = a(
-      () => t.value.map((e) => ({
+    let r = m(l.modelValue);
+    const n = s(
+      () => r.value.map((e) => ({
         ...e,
-        design: e.design ?? r.design
+        design: e.design ?? l.design,
+        color: e.color ?? l.color
       }))
-    ), s = { props: r, emit: o, modifiers: n, get tagList() {
-      return t;
+    ), o = { props: l, emit: t, modifiers: u, get tagList() {
+      return r;
     }, set tagList(e) {
-      t = e;
-    }, resolvedTagList: u, closeTagHandler: (e) => {
-      t.value = t.value.filter((p) => p.value !== e), o("close", e), o("update:model-value", t.value);
+      r = e;
+    }, resolvedTagList: n, closeTagHandler: (e) => {
+      r.value = r.value.filter((c) => c.value !== e), t("close", e), t("update:model-value", r.value);
+    }, clickTagHandler: (e) => {
+      t("click", e), t("update:selected-value", e), t("update:selectedValue", e);
     }, get NmorphTagItem() {
       return f;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
   }
 });
 export {

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.css

@@ -1 +1 @@
-.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);color:var(--nmorph-tag-item-content-color, var(--nmorph-tag-item-color, var(--nmorph-text-color)));border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item span{color:inherit}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px;cursor:pointer;--color: var(--nmorph-tag-item-content-color, var(--nmorph-tag-item-color, var(--nmorph-text-color)))}.nmorph-tag-item.nmorph-tag-item--nmorph{background:var(--nmorph-main-color);border:none;box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--common{--nmorph-tag-item-content-color: var(--nmorph-tag-item-color, var(--nmorph-contrast-text-color));background:var(--nmorph-tag-item-background, var(--nmorph-gray-color));border:none;box-shadow:none}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}
+.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);color:var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item span{color:inherit}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px;cursor:pointer;--color: currentColor}.nmorph-tag-item.nmorph-tag-item--nmorph{background:var(--nmorph-main-color);border:none;box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--common{color:var(--tag-item-content-color);background:var(--tag-item-background-color);border:none;box-shadow:none}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js

@@ -1,42 +1,45 @@
 import './NmorphTagItem.css';
 import n from "./NmorphTagItem.vue2.js";
-import { openBlock as e, createElementBlock as m, normalizeClass as a, createElementVNode as t, toDisplayString as c, createBlock as i, withModifiers as s, withCtx as l, createVNode as p, createCommentVNode as _ } from "vue";
+import { openBlock as e, createElementBlock as a, normalizeStyle as c, normalizeClass as i, createElementVNode as t, toDisplayString as m, createBlock as l, withModifiers as s, withCtx as p, createVNode as d, createCommentVNode as _ } from "vue";
 /* empty css                   */
-import d from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const f = { class: "nmorph-tag-item__content" };
-function h(g, N, r, o, k, v) {
-  return e(), m(
+import f from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const h = { class: "nmorph-tag-item__content" };
+function g(k, N, r, o, y, v) {
+  return e(), a(
     "div",
     {
-      class: a(o.modifiers)
+      ref: "tagRef",
+      class: i(o.modifiers),
+      style: c(o.styles),
+      onClick: o.clickHandler
     },
     [
-      t("div", f, [
+      t("div", h, [
         t(
           "span",
           null,
-          c(r.text),
+          m(r.text),
           1
           /* TEXT */
         ),
-        o.props.removable ? (e(), i(o.NmorphIcon, {
+        o.props.removable ? (e(), l(o.NmorphIcon, {
           key: 0,
           class: "nmorph-tag-item__close-icon",
           onClick: s(o.closeHandler, ["stop"])
         }, {
-          default: l(() => [
-            p(o.NmorphIconError)
+          default: p(() => [
+            d(o.NmorphIconError)
           ]),
           _: 1
           /* STABLE */
         })) : _("v-if", !0)
       ])
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const b = /* @__PURE__ */ d(n, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue"]]);
+const B = /* @__PURE__ */ f(n, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue"]]);
 export {
-  b as default
+  B as default
 };

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue2.js

@@ -1,36 +1,99 @@
 import './NmorphTagItem.css';
-import { defineComponent as p, computed as s } from "vue";
-import { useModifiers as u } from "../../../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as a } from "../../../../../types/common.types.js";
-import l from "../../../../../assets/icons/error.svg.js";
-import c from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-const N = /* @__PURE__ */ p({
+import { defineComponent as x, ref as S, computed as h, onMounted as E, onBeforeUnmount as H, watch as B, nextTick as F } from "vue";
+import { useModifiers as P } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as U } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as $ } from "../../../../../types/common.types.js";
+import z from "../../../../../assets/icons/error.svg.js";
+import G from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+const w = "var(--nmorph-gray-color)", b = "var(--nmorph-black-color)", I = "var(--nmorph-white-color)", X = /* @__PURE__ */ x({
   __name: "NmorphTagItem",
   props: {
     value: { type: String, required: !0 },
     text: { type: String, required: !0 },
     removable: { type: Boolean, required: !1, default: !0 },
     height: { type: null, required: !1, default: "basic" },
-    design: { type: String, required: !1, default: "nmorph" }
+    design: { type: String, required: !1, default: "nmorph" },
+    color: { type: String, required: !1, default: w }
   },
-  emits: ["close"],
-  setup(o, { expose: n, emit: i }) {
-    n();
-    const e = o, m = s(
-      () => u({
-        nmorph: [a[e.height]],
-        "nmorph-tag-item": [e.design]
+  emits: ["click", "close"],
+  setup(L, { expose: T, emit: D }) {
+    T();
+    const C = { r: 201, g: 210, b: 222 }, s = L, i = S(null), p = S(b);
+    let u = null;
+    const V = h(
+      () => P({
+        nmorph: [$[s.height]],
+        "nmorph-tag-item": [s.design]
       })
-    ), r = i, t = { props: e, modifiers: m, emit: r, closeHandler: () => {
-      r("close", e.value);
-    }, get NmorphIcon() {
-      return c;
+    ), d = h(() => s.design === "common"), A = h(() => d.value ? U({
+      "--tag-item-background-color": s.color,
+      "--tag-item-content-color": p.value
+    }) : {}), g = D, M = () => {
+      g("close", s.value);
+    }, q = () => {
+      g("click", s.value);
+    }, v = (r) => {
+      const t = r.trim().replace("#", "");
+      if (![3, 4, 6, 8].includes(t.length)) return null;
+      const e = t.length <= 4 ? t.split("").map((o) => `${o}${o}`).join("") : t;
+      return {
+        r: parseInt(e.slice(0, 2), 16),
+        g: parseInt(e.slice(2, 4), 16),
+        b: parseInt(e.slice(4, 6), 16)
+      };
+    }, _ = (r) => {
+      const t = r.match(/^rgba?\((.+)\)$/);
+      if (!t) return null;
+      const e = t[1].split("/")[0], o = e.includes(",") ? e.split(",") : e.trim().split(/\s+/), [n, a, c] = o.map((l) => Number.parseFloat(l));
+      return [n, a, c].some((l) => Number.isNaN(l)) ? null : { r: n, g: a, b: c };
+    }, O = (r, t) => {
+      const e = r.trim().match(/^var\(\s*(--[A-Za-z0-9-_]+)(?:\s*,\s*(.+))?\)$/);
+      if (!e) return r;
+      const [, o, n] = e, a = t.ownerDocument, c = getComputedStyle(t).getPropertyValue(o).trim(), l = getComputedStyle(a.documentElement).getPropertyValue(o).trim();
+      return c || l || n || r;
+    }, y = (r, t) => {
+      let e = r;
+      for (let o = 0; o < 4; o += 1) {
+        const n = O(e, t);
+        if (n === e) break;
+        e = n;
+      }
+      return v(e) || _(e) || C;
+    }, N = ({ r, g: t, b: e }) => {
+      const [o, n, a] = [r, t, e].map((c) => {
+        const l = c / 255;
+        return l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4;
+      });
+      return 0.2126 * o + 0.7152 * n + 0.0722 * a;
+    }, f = (r, t) => {
+      const [e, o] = [r, t].sort((n, a) => a - n);
+      return (e + 0.05) / (o + 0.05);
+    }, R = (r) => {
+      const t = N(r), e = f(t, 1), o = f(t, 0);
+      return e > o ? I : b;
+    }, m = async () => {
+      await F(), !(!d.value || !i.value) && (p.value = R(y(s.color, i.value)));
+    };
+    E(() => {
+      m(), !(typeof MutationObserver > "u" || !i.value) && (u = new MutationObserver(() => m()), u.observe(i.value.ownerDocument.documentElement, {
+        attributes: !0,
+        attributeFilter: ["nmorph-data-theme", "class", "style"]
+      }));
+    }), H(() => {
+      u?.disconnect();
+    }), B(() => [s.color, s.design], m, { flush: "post" });
+    const k = { DEFAULT_COMMON_BACKGROUND_COLOR: w, DARK_CONTRAST_COLOR: b, LIGHT_CONTRAST_COLOR: I, DEFAULT_RGB_COLOR: C, props: s, tagRef: i, commonContentColor: p, get themeObserver() {
+      return u;
+    }, set themeObserver(r) {
+      u = r;
+    }, modifiers: V, isCommonDesign: d, styles: A, emit: g, closeHandler: M, clickHandler: q, parseHexColor: v, parseRgbColor: _, resolveCssVariable: O, resolveColor: y, getLuminance: N, getContrastRatio: f, getReadableContentColor: R, updateCommonContentColor: m, get NmorphIcon() {
+      return G;
     }, get NmorphIconError() {
-      return l;
+      return z;
     } };
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
   }
 });
 export {
-  N as default
+  X as default
 };

package/dist/components/form/nmorph-text-input/NmorphTextInput.css

@@ -1 +1 @@
-.nmorph-text-input{--prepend-icon-indent: 8px;--prepend-icon-size: 14px;display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}.nmorph-text-input__input-side{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%}.nmorph-text-input__prepend-icon{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--prepend-icon-size);min-width:var(--prepend-icon-size);height:var(--prepend-icon-size);min-height:var(--prepend-icon-size);margin-left:var(--prepend-icon-indent);pointer-events:none}.nmorph-text-input__prepend-icon svg,.nmorph-text-input__prepend-icon .nmorph-icon,.nmorph-text-input__prepend-icon .nmorph-icon__content{width:100%;min-width:100%;height:100%;min-height:100%}.nmorph-text-input__prepend-icon svg{fill:var(--nmorph-text-color);stroke-width:0}.nmorph-text-input__prepend-icon path{stroke:var(--nmorph-text-color)}.nmorph-text-input input{width:100%;height:var(--height);text-indent:var(--nmorph-text-input-indentation);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-text-input--with-action input{padding-right:calc(var(--height) + var(--indentation-03))}.nmorph-text-input input:focus{background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon svg{fill:var(--nmorph-focus-text-color)}.nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon path{stroke:var(--nmorph-focus-text-color)}.nmorph-text-input input:-webkit-autofill,.nmorph-text-input input:-webkit-autofill:hover,.nmorph-text-input input:-webkit-autofill:active{caret-color:var(--nmorph-text-color);box-shadow:var(--nmorph-shadow-inset),inset 0 0 0 1000px var(--nmorph-main-color);-webkit-text-fill-color:var(--nmorph-text-color)}.nmorph-text-input input:-webkit-autofill:focus{caret-color:var(--nmorph-focus-text-color);outline:none;box-shadow:var(--nmorph-shadow-outset),inset 0 0 0 1000px var(--nmorph-accent-color);-webkit-text-fill-color:var(--nmorph-focus-text-color)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input__password-btn{position:absolute;right:0;height:100%}.nmorph-text-input__password-btn .nmorph-button__content{padding:var(--indentation-03)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn{margin-top:var(--indentation-00)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button{--height: var(--thin-component)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}
+.nmorph-text-input{--prepend-icon-indent: 8px;--prepend-icon-size: 14px;--nmorph-text-input-prepend-icon-color: var(--nmorph-placeholder-text-color);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}.nmorph-text-input__input-side{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%}.nmorph-text-input__prepend-icon{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--prepend-icon-size);min-width:var(--prepend-icon-size);height:var(--prepend-icon-size);min-height:var(--prepend-icon-size);margin-left:var(--prepend-icon-indent);color:var(--nmorph-text-input-prepend-icon-color);pointer-events:none}.nmorph-text-input__prepend-icon .nmorph-icon{--color: var(--nmorph-text-input-prepend-icon-color)}.nmorph-text-input__prepend-icon svg,.nmorph-text-input__prepend-icon .nmorph-icon,.nmorph-text-input__prepend-icon .nmorph-icon__content{width:100%;min-width:100%;height:100%;min-height:100%}.nmorph-text-input__prepend-icon svg{fill:var(--nmorph-text-input-prepend-icon-color);stroke-width:0}.nmorph-text-input__prepend-icon path{stroke:var(--nmorph-text-input-prepend-icon-color)}.nmorph-text-input input{width:100%;height:var(--height);text-indent:var(--nmorph-text-input-indentation);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-text-input--with-action input{padding-right:calc(var(--height) + var(--indentation-03))}.nmorph-text-input input:focus{background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-text-input.nmorph--focused{--nmorph-text-input-prepend-icon-color: var(--nmorph-focus-text-color)}.nmorph-text-input input:-webkit-autofill,.nmorph-text-input input:-webkit-autofill:hover,.nmorph-text-input input:-webkit-autofill:active{caret-color:var(--nmorph-text-color);box-shadow:var(--nmorph-shadow-inset),inset 0 0 0 1000px var(--nmorph-main-color);-webkit-text-fill-color:var(--nmorph-text-color)}.nmorph-text-input input:-webkit-autofill:focus{caret-color:var(--nmorph-focus-text-color);outline:none;box-shadow:var(--nmorph-shadow-outset),inset 0 0 0 1000px var(--nmorph-accent-color);-webkit-text-fill-color:var(--nmorph-focus-text-color)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input__password-btn{position:absolute;right:0;height:100%}.nmorph-text-input__password-btn .nmorph-button__content{padding:var(--indentation-03)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn{margin-top:var(--indentation-00)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button{--height: var(--thin-component)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}

package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphContextMenu.css';
-import { defineComponent as j, ref as r, computed as m, markRaw as J, toRaw as U, watch as P, onBeforeUnmount as Q } from "vue";
-import Z from "../nmorph-dropdown/NmorphDropdown.vue.js";
-const H = 600, _ = 8, le = /* @__PURE__ */ j({
+import { defineComponent as J, ref as n, computed as m, markRaw as U, toRaw as Q, watch as H, onBeforeUnmount as Z } from "vue";
+import ee from "../nmorph-dropdown/NmorphDropdown.vue.js";
+const M = 600, _ = 8, re = /* @__PURE__ */ J({
   __name: "NmorphContextMenu",
   props: {
     modelValue: { type: [Boolean, null], required: !1, default: null },
@@ -24,8 +24,8 @@ const H = 600, _ = 8, le = /* @__PURE__ */ j({
     hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["update:model-value", "open", "close", "select", "on-outside-click", "on-escape-keydown"],
-  setup(M, { expose: D, emit: B }) {
-    const l = M, n = B, S = r(null), E = r(null), g = r("point"), y = r(!!l.modelValue), o = r(null), i = r(null), a = r(null), b = r(!1), c = r(null), v = m(() => typeof l.modelValue == "boolean" ? l.modelValue : y.value), I = m(() => l.options.length > 0), q = m(() => l.trigger === "longpress"), T = m(() => l.trigger === "contextmenu" || l.trigger === "both"), R = m(
+  setup(B, { expose: D, emit: R }) {
+    const l = B, o = R, g = n(null), S = n(null), y = n("point"), b = n(!!l.modelValue), a = n(null), c = n(null), u = n(null), v = n(!1), d = n(null), w = m(() => typeof l.modelValue == "boolean" ? l.modelValue : b.value), I = m(() => l.options.length > 0), q = m(() => l.trigger === "longpress"), T = m(() => l.trigger === "contextmenu" || l.trigger === "both"), X = m(
       () => l.options.map((e, t) => typeof e == "string" || typeof e == "number" ? {
         key: `${e}-${t}`,
         label: e,
@@ -37,7 +37,7 @@ const H = 600, _ = 8, le = /* @__PURE__ */ j({
         key: `${String(e.value ?? e.label ?? t)}-${t}`,
         label: e.label,
         value: e.value ?? e.label ?? t,
-        component: e.component ? J(U(e.component)) : void 0,
+        component: e.component ? U(Q(e.component)) : void 0,
         componentProps: e.componentProps,
         disabled: !!e.disabled,
         color: e.color,
@@ -45,10 +45,10 @@ const H = 600, _ = 8, le = /* @__PURE__ */ j({
         raw: e
       })
     );
-    P(
+    H(
       () => l.modelValue,
       (e) => {
-        typeof e == "boolean" && (y.value = e);
+        typeof e == "boolean" && (b.value = e);
       }
     );
     const x = (e, t) => ({
@@ -64,80 +64,86 @@ const H = 600, _ = 8, le = /* @__PURE__ */ j({
         bottom: t,
         toJSON: () => ({})
       })
-    }), w = (e) => {
-      const t = v.value;
-      y.value = e, n("update:model-value", e), t && !e && n("close");
-    }, u = () => {
-      w(!1);
-    }, d = (e, t, p) => {
-      l.disabled || (g.value = "point", E.value = x(e, t), w(!0), n("open", p));
-    }, h = (e, t) => {
-      l.disabled || (g.value = "element", E.value = e, w(!0), n("open", t));
-    }, V = (e) => {
+    }), h = (e) => {
+      const t = w.value;
+      b.value = e, o("update:model-value", e), t && !e && o("close");
+    }, i = () => {
+      h(!1);
+    }, f = (e, t, r) => {
+      l.disabled || (y.value = "point", S.value = x(e, t), h(!0), o("open", r));
+    }, k = (e, t) => {
+      l.disabled || (y.value = "element", S.value = e, h(!0), o("open", t));
+    }, Y = (e) => {
       if (!l.disabled) {
         if (l.trigger === "longpress") {
           e.preventDefault();
           return;
         }
-        T.value && (e.preventDefault(), d(e.clientX, e.clientY, e));
+        T.value && (e.preventDefault(), f(e.clientX, e.clientY, e));
       }
-    }, k = (e) => {
-      !v.value || l.disabled || !T.value || (e.preventDefault(), e.stopPropagation(), d(e.clientX, e.clientY, e));
-    }, X = (e) => {
-      if (b.value) {
-        f(), e.preventDefault();
+    }, C = (e) => {
+      const t = g.value;
+      if (!t) return !1;
+      if (e.target instanceof Node && t.contains(e.target)) return !0;
+      const r = t.getBoundingClientRect();
+      return e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+    }, E = (e) => {
+      !w.value || l.disabled || !T.value || C(e) && (e.preventDefault(), e.stopPropagation(), f(e.clientX, e.clientY, e));
+    }, V = (e) => {
+      if (v.value) {
+        p(), e.preventDefault();
         return;
       }
       if (l.disabled || l.trigger !== "click" && l.trigger !== "both" || e.button !== 0) return;
-      const t = e.currentTarget instanceof HTMLElement ? e.currentTarget : S.value;
-      t && h(t, e);
-    }, Y = (e) => {
+      const t = e.currentTarget instanceof HTMLElement ? e.currentTarget : g.value;
+      t && k(t, e);
+    }, A = (e) => {
       if (l.disabled || l.trigger === "manual" || e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10"))
         return;
-      const t = e.target instanceof HTMLElement ? e.target : S.value;
-      t && (e.preventDefault(), h(t, e));
-    }, A = () => {
-      n("on-outside-click"), u();
+      const t = e.target instanceof HTMLElement ? e.target : g.value;
+      t && (e.preventDefault(), k(t, e));
     }, W = () => {
-      n("on-escape-keydown"), u();
-    }, C = (e, t) => {
-      e.disabled || (n("select", e.raw, t), e.closeOnClick && u());
-    }, $ = (e, t, p) => {
-      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), C(t, p));
+      o("on-outside-click"), i();
+    }, $ = () => {
+      o("on-escape-keydown"), i();
+    }, N = (e, t) => {
+      e.disabled || (o("select", e.raw, t), e.closeOnClick && i());
+    }, z = (e, t, r) => {
+      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), N(t, r));
     }, s = () => {
-      o.value && clearTimeout(o.value), o.value = null, i.value = null, a.value = null;
-    }, f = () => {
-      c.value && clearTimeout(c.value), b.value = !1, c.value = null;
-    }, N = () => {
-      f(), b.value = !0, c.value = setTimeout(f, 700);
-    }, z = (e) => {
-      l.disabled || !q.value || e.pointerType !== "touch" && e.pointerType !== "pen" || (s(), i.value = e.pointerId, a.value = { x: e.clientX, y: e.clientY }, o.value = setTimeout(() => {
-        N(), s(), d(e.clientX, e.clientY, e);
-      }, H));
+      a.value && clearTimeout(a.value), a.value = null, c.value = null, u.value = null;
+    }, p = () => {
+      d.value && clearTimeout(d.value), v.value = !1, d.value = null;
+    }, L = () => {
+      p(), v.value = !0, d.value = setTimeout(p, 700);
     }, F = (e) => {
-      if (!o.value || i.value !== e.pointerId || !a.value) return;
-      const t = Math.abs(e.clientX - a.value.x), p = Math.abs(e.clientY - a.value.y);
-      (t > _ || p > _) && s();
+      l.disabled || !q.value || e.pointerType !== "touch" && e.pointerType !== "pen" || (s(), c.value = e.pointerId, u.value = { x: e.clientX, y: e.clientY }, a.value = setTimeout(() => {
+        L(), s(), f(e.clientX, e.clientY, e);
+      }, M));
     }, G = (e) => {
-      i.value === e.pointerId && s();
-    }, K = (e) => ({
+      if (!a.value || c.value !== e.pointerId || !u.value) return;
+      const t = Math.abs(e.clientX - u.value.x), r = Math.abs(e.clientY - u.value.y);
+      (t > _ || r > _) && s();
+    }, K = (e) => {
+      c.value === e.pointerId && s();
+    }, j = (e) => ({
       "--nmorph-context-menu-item-color": e.color
     }), O = () => {
-      l.closeOnScroll && g.value === "point" && u();
+      l.closeOnScroll && y.value === "point" && i();
     };
-    P(
-      v,
+    H(
+      w,
       (e) => {
-        typeof window > "u" || (e ? (window.addEventListener("scroll", O, { passive: !0, capture: !0 }), document.addEventListener("contextmenu", k, !0)) : (window.removeEventListener("scroll", O, !0), document.removeEventListener("contextmenu", k, !0)));
+        typeof window > "u" || (e ? (window.addEventListener("scroll", O, { passive: !0, capture: !0 }), document.addEventListener("contextmenu", E, !0)) : (window.removeEventListener("scroll", O, !0), document.removeEventListener("contextmenu", E, !0)));
       },
       { immediate: !0 }
-    ), Q(() => {
-      typeof window < "u" && window.removeEventListener("scroll", O, !0), typeof document < "u" && document.removeEventListener("contextmenu", k, !0), s(), f();
-    }), D({ close: u, openAt: d, openAtElement: h });
-    const L = { LONG_PRESS_DELAY_IN_MS: H, LONG_PRESS_MOVE_TOLERANCE_IN_PX: _, props: l, emit: n, triggerDOMRef: S, relativeElement: E, anchorType: g, openState: y, longPressTimer: o, longPressPointerId: i, longPressStartPoint: a, suppressNextClick: b, suppressNextClickTimer: c, isOpen: v, hasOptions: I, isLongPressTrigger: q, isContextMenuTrigger: T, normalizedOptions: R, createPointElement: x, setOpen: w, close: u, openAt: d, openAtElement: h, contextMenuHandler: V, documentContextMenuHandler: k, clickHandler: X, keydownHandler: Y, outsideClickHandler: A, escapeHandler: W, optionClickHandler: C, optionKeydownHandler: $, clearLongPressTimer: s, clearClickSuppression: f, suppressNextClickTemporarily: N, pointerDownHandler: z, pointerMoveHandler: F, pointerEndHandler: G, getOptionStyle: K, scrollHandler: O, NmorphDropdown: Z };
-    return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
+    ), Z(() => {
+      typeof window < "u" && window.removeEventListener("scroll", O, !0), typeof document < "u" && document.removeEventListener("contextmenu", E, !0), s(), p();
+    }), D({ close: i, openAt: f, openAtElement: k });
+    const P = { LONG_PRESS_DELAY_IN_MS: M, LONG_PRESS_MOVE_TOLERANCE_IN_PX: _, props: l, emit: o, triggerDOMRef: g, relativeElement: S, anchorType: y, openState: b, longPressTimer: a, longPressPointerId: c, longPressStartPoint: u, suppressNextClick: v, suppressNextClickTimer: d, isOpen: w, hasOptions: I, isLongPressTrigger: q, isContextMenuTrigger: T, normalizedOptions: X, createPointElement: x, setOpen: h, close: i, openAt: f, openAtElement: k, contextMenuHandler: Y, isEventInsideTrigger: C, documentContextMenuHandler: E, clickHandler: V, keydownHandler: A, outsideClickHandler: W, escapeHandler: $, optionClickHandler: N, optionKeydownHandler: z, clearLongPressTimer: s, clearClickSuppression: p, suppressNextClickTemporarily: L, pointerDownHandler: F, pointerMoveHandler: G, pointerEndHandler: K, getOptionStyle: j, scrollHandler: O, NmorphDropdown: ee };
+    return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
   }
 });
 export {
-  le as default
+  re as default
 };