@nmorph/nmorph-ui-kit 2.2.59 → 3.0.1

package/dist/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.vue.js

@@ -1,53 +1,49 @@
 import './NmorphSortButton.css';
-import t from "./NmorphSortButton.vue2.js";
-import { openBlock as i, createElementBlock as e, normalizeClass as c, createVNode as n, withCtx as r } from "vue";
+import n from "./NmorphSortButton.vue2.js";
+import { openBlock as e, createElementBlock as s, normalizeClass as a, createElementVNode as o } from "vue";
 /* empty css                      */
-import m from "../../../../../_virtual/_plugin-vue_export-helper.js";
-function a(h, l, p, o, _, d) {
-  return i(), e(
+import i from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const l = ["aria-label"];
+function m(p, r, c, t, _, d) {
+  return e(), s(
     "div",
     {
-      class: c(o.modifiers)
+      class: a(t.modifiers)
     },
     [
-      n(o.NmorphButton, {
-        height: "thin",
-        "style-type": "transparent",
-        onClick: o.toggleSort
-      }, {
-        default: r(() => [
-          n(o.NmorphIcon, {
-            class: "nmorph-sort-button__icon-up",
-            width: o.iconSize,
-            height: o.iconSize
-          }, {
-            default: r(() => [
-              n(o.NmorphIconTriangleDown)
-            ]),
-            _: 1
-            /* STABLE */
-          }),
-          n(o.NmorphIcon, {
-            class: "nmorph-sort-button__icon-down",
-            width: o.iconSize,
-            height: o.iconSize
-          }, {
-            default: r(() => [
-              n(o.NmorphIconTriangleDown)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ]),
-        _: 1
-        /* STABLE */
-      })
+      o("button", {
+        class: "nmorph-sort-button__control",
+        type: "button",
+        "aria-label": t.nextSortLabel,
+        onClick: t.toggleSort
+      }, [...r[0] || (r[0] = [
+        o(
+          "svg",
+          {
+            class: "nmorph-sort-button__icon",
+            viewBox: "0 0 16 16",
+            "aria-hidden": "true"
+          },
+          [
+            o("path", {
+              class: "nmorph-sort-button__icon-up",
+              d: "M8 3 3.75 7.25h8.5L8 3Z"
+            }),
+            o("path", {
+              class: "nmorph-sort-button__icon-down",
+              d: "M8 13 12.25 8.75h-8.5L8 13Z"
+            })
+          ],
+          -1
+          /* CACHED */
+        )
+      ])], 8, l)
     ],
     2
     /* CLASS */
   );
 }
-const S = /* @__PURE__ */ m(t, [["render", a], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.vue"]]);
+const x = /* @__PURE__ */ i(n, [["render", m], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.vue"]]);
 export {
-  S as default
+  x as default
 };

package/dist/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.vue2.js

@@ -1,34 +1,25 @@
 import './NmorphSortButton.css';
-import { defineComponent as i, computed as u } from "vue";
-import { useModifiers as c } from "../../../../../utils/create-modifiers.js";
-import a from "../../../../../assets/icons/triangle-down.svg.js";
-import l from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import d from "../../../../basic/nmorph-button/NmorphButton.vue.js";
-const f = "10px", I = /* @__PURE__ */ i({
+import { defineComponent as d, computed as n } from "vue";
+import { useModifiers as m } from "../../../../../utils/create-modifiers.js";
+const f = /* @__PURE__ */ d({
   __name: "NmorphSortButton",
   props: {
     value: { type: null, required: !0 }
   },
   emits: ["sort"],
-  setup(r, { expose: n, emit: m }) {
-    n();
-    const o = r, e = m, p = u(
-      () => c({
-        "nmorph-sort-button": [`${o.value}`]
+  setup(r, { expose: s, emit: i }) {
+    s();
+    const e = r, t = i, u = n(
+      () => m({
+        "nmorph-sort-button": [`${e.value}`]
       })
-    ), t = { props: o, emit: e, modifiers: p, toggleSort: () => {
-      const s = o.value === "ascending" ? "descending" : "ascending";
-      e("sort", s);
-    }, iconSize: f, get NmorphButton() {
-      return d;
-    }, get NmorphIcon() {
-      return l;
-    }, get NmorphIconTriangleDown() {
-      return a;
-    } };
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+    ), c = () => {
+      const p = e.value === "ascending" ? "descending" : "ascending";
+      t("sort", p);
+    }, a = n(() => e.value === "ascending" ? "Sort descending" : "Sort ascending"), o = { props: e, emit: t, modifiers: u, toggleSort: c, nextSortLabel: a };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
   }
 });
 export {
-  I as default
+  f as default
 };

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

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

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

@@ -1,57 +1,51 @@
 import './NmorphTagList.css';
-import s from "./NmorphTagList.vue2.js";
-import { openBlock as r, createElementBlock as l, normalizeClass as a, Fragment as i, renderList as c, createBlock as m, mergeProps as n, withCtx as d, renderSlot as f } from "vue";
+import c from "./NmorphTagList.vue2.js";
+import { openBlock as r, createElementBlock as l, normalizeClass as m, Fragment as s, renderList as d, createBlock as i, withCtx as t, renderSlot as k } from "vue";
 /* empty css                   */
-import p from "../../../_virtual/_plugin-vue_export-helper.js";
-function g(t, k, _, e, T, h) {
+import v from "../../../_virtual/_plugin-vue_export-helper.js";
+function h(n, f, p, o, u, T) {
   return r(), l(
     "div",
     {
-      class: a(e.modifiers)
+      class: m(o.modifiers)
     },
     [
       (r(!0), l(
-        i,
+        s,
         null,
-        c(e.resolvedTagList, (o) => (r(), l(
-          i,
+        d(o.resolvedTagList, (e) => (r(), l(
+          s,
           {
-            key: o.item.value
+            key: e.value
           },
           [
-            t.$slots.item ? (r(), m(
-              e.NmorphTagItem,
-              n({
-                key: 0,
-                ref_for: !0
-              }, o.tagItemProps, {
-                onClick: e.clickTagHandler,
-                onClose: e.closeTagHandler
-              }),
-              {
-                default: d(() => [
-                  f(t.$slots, "item", {
-                    item: o.item
-                  })
-                ]),
-                _: 2
-                /* DYNAMIC */
-              },
-              1040
-              /* FULL_PROPS, DYNAMIC_SLOTS */
-            )) : (r(), m(
-              e.NmorphTagItem,
-              n({
-                key: 1,
-                ref_for: !0
-              }, o.tagItemProps, {
-                onClick: e.clickTagHandler,
-                onClose: e.closeTagHandler
-              }),
-              null,
-              16
-              /* FULL_PROPS */
-            ))
+            n.$slots.item ? (r(), i(o.NmorphTagItem, {
+              key: 0,
+              value: e.value,
+              text: e.text,
+              removable: e.removable,
+              thickness: e.thickness,
+              design: e.design,
+              color: e.color,
+              onClick: o.clickTagHandler,
+              onClose: o.closeTagHandler
+            }, {
+              default: t(() => [
+                k(n.$slots, "item", { item: e })
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["value", "text", "removable", "thickness", "design", "color"])) : (r(), i(o.NmorphTagItem, {
+              key: 1,
+              value: e.value,
+              text: e.text,
+              removable: e.removable,
+              thickness: e.thickness,
+              design: e.design,
+              color: e.color,
+              onClick: o.clickTagHandler,
+              onClose: o.closeTagHandler
+            }, null, 8, ["value", "text", "removable", "thickness", "design", "color"]))
           ],
           64
           /* STABLE_FRAGMENT */
@@ -64,7 +58,7 @@ function g(t, k, _, e, T, h) {
     /* CLASS */
   );
 }
-const H = /* @__PURE__ */ p(s, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
+const a = /* @__PURE__ */ v(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
 export {
-  H as default
+  a as default
 };

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

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

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-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;gap:4px;align-items:center;height:100%;color:inherit}.nmorph-tag-item span{color:inherit}.nmorph-tag-item .nmorph-tag-item__close-icon{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)}
+.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;gap:4px;align-items:center;height:100%;color:inherit}.nmorph-tag-item span{display:inline-block;color:inherit;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-tag-item .nmorph-tag-item__close-icon{cursor:pointer;--nmorph-private-icon-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--plain{color:var(--nmorph-private-tag-item-content-color);background:var(--nmorph-private-tag-item-background-color);border:none;box-shadow:none}

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

@@ -1,40 +1,40 @@
 import './NmorphTagItem.css';
-import { defineComponent as E, ref as I, computed as f, onMounted as H, onBeforeUnmount as B, watch as F, nextTick as P } from "vue";
+import { defineComponent as E, ref as I, computed as f, onMounted as M, onBeforeUnmount as B, watch as F, nextTick as H } from "vue";
 import { useModifiers as U } from "../../../../../utils/create-modifiers.js";
 import { createCssVariables as $ } from "../../../../../utils/common.js";
-import { NmorphComponentHeight as z } from "../../../../../types/common.types.js";
+import { NmorphComponentThickness as z } from "../../../../../types/common.types.js";
 import G from "../../../../../assets/icons/error.svg.js";
 import j from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-const S = "var(--nmorph-gray-color)", b = "var(--nmorph-black-color)", w = "var(--nmorph-white-color)", Y = /* @__PURE__ */ E({
+const L = "var(--nmorph-gray-color)", b = "var(--nmorph-black-color)", T = "var(--nmorph-white-color)", Y = /* @__PURE__ */ E({
   __name: "NmorphTagItem",
   props: {
     value: { type: String, required: !0 },
     text: { type: String, required: !1, default: "" },
     removable: { type: Boolean, required: !1, default: !0 },
-    height: { type: null, required: !1, default: "basic" },
-    design: { type: String, required: !1, default: "nmorph" },
-    color: { type: String, required: !1, default: S }
+    thickness: { type: null, required: !1, default: "basic" },
+    design: { type: null, required: !1, default: "nmorph" },
+    color: { type: String, required: !1, default: L }
   },
   emits: ["click", "close"],
-  setup(L, { expose: T, emit: D }) {
-    T();
-    const C = { r: 201, g: 210, b: 222 }, s = L, u = I(null), m = I(b);
-    let i = null;
-    const V = f(
+  setup(w, { expose: S, emit: A }) {
+    S();
+    const v = { r: 201, g: 210, b: 222 }, s = w, i = I(null), m = I(b);
+    let u = null;
+    const D = f(
       () => U({
-        nmorph: [z[s.height]],
+        nmorph: [z[s.thickness]],
         "nmorph-tag-item": [s.design]
       })
-    ), p = f(() => s.design === "common"), x = f(
+    ), p = f(() => s.design === "plain"), V = f(
       () => p.value ? m.value : "var(--nmorph-contrast-text-color)"
-    ), A = f(() => p.value ? $({
-      "--tag-item-background-color": s.color,
-      "--tag-item-content-color": m.value
-    }) : {}), g = D, M = () => {
-      g("close", s.value);
+    ), x = f(() => p.value ? $({
+      "--nmorph-private-tag-item-background-color": s.color,
+      "--nmorph-private-tag-item-content-color": m.value
+    }) : {}), h = A, P = () => {
+      h("close", s.value);
     }, q = () => {
-      g("click", s.value);
-    }, v = (r) => {
+      h("click", s.value);
+    }, C = (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;
@@ -60,40 +60,40 @@ const S = "var(--nmorph-gray-color)", b = "var(--nmorph-black-color)", w = "var(
         if (n === e) break;
         e = n;
       }
-      return v(e) || _(e) || C;
+      return C(e) || _(e) || v;
     }, 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;
-    }, h = (r, t) => {
+    }, g = (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 = h(t, 1), o = h(t, 0);
-      return e > o ? w : b;
+    }, k = (r) => {
+      const t = N(r), e = g(t, 1), o = g(t, 0);
+      return e > o ? T : b;
     }, d = async () => {
-      await P(), !(!p.value || !u.value) && (m.value = R(y(s.color, u.value)));
+      await H(), !(!p.value || !i.value) && (m.value = k(y(s.color, i.value)));
     };
-    H(() => {
-      d(), !(typeof MutationObserver > "u" || !u.value) && (i = new MutationObserver(() => d()), i.observe(u.value.ownerDocument.documentElement, {
+    M(() => {
+      d(), !(typeof MutationObserver > "u" || !i.value) && (u = new MutationObserver(() => d()), u.observe(i.value.ownerDocument.documentElement, {
         attributes: !0,
         attributeFilter: ["nmorph-data-theme", "class", "style"]
       }));
     }), B(() => {
-      i?.disconnect();
+      u?.disconnect();
     }), F(() => [s.color, s.design], d, { flush: "post" });
-    const k = { DEFAULT_COMMON_BACKGROUND_COLOR: S, DARK_CONTRAST_COLOR: b, LIGHT_CONTRAST_COLOR: w, DEFAULT_RGB_COLOR: C, props: s, tagRef: u, commonContentColor: m, get themeObserver() {
-      return i;
+    const R = { DEFAULT_PLAIN_BACKGROUND_COLOR: L, DARK_CONTRAST_COLOR: b, LIGHT_CONTRAST_COLOR: T, DEFAULT_RGB_COLOR: v, props: s, tagRef: i, plainContentColor: m, get themeObserver() {
+      return u;
     }, set themeObserver(r) {
-      i = r;
-    }, modifiers: V, isCommonDesign: p, closeIconColor: x, styles: A, emit: g, closeHandler: M, clickHandler: q, parseHexColor: v, parseRgbColor: _, resolveCssVariable: O, resolveColor: y, getLuminance: N, getContrastRatio: h, getReadableContentColor: R, updateCommonContentColor: d, get NmorphIcon() {
+      u = r;
+    }, modifiers: D, isPlainDesign: p, closeIconColor: V, styles: x, emit: h, closeHandler: P, clickHandler: q, parseHexColor: C, parseRgbColor: _, resolveCssVariable: O, resolveColor: y, getLuminance: N, getContrastRatio: g, getReadableContentColor: k, updatePlainContentColor: d, get NmorphIcon() {
       return j;
     }, get NmorphIconError() {
       return G;
     } };
-    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+    return Object.defineProperty(R, "__isScriptSetup", { enumerable: !1, value: !0 }), R;
   }
 });
 export {

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css

@@ -1 +1 @@
-.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-video-preview .nmorph-video-preview__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-video-preview-width, 100%);height:var(--nmorph-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--embedded .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__play{box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:0;background:transparent}.nmorph-video-preview .nmorph-video-preview__action-button,.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__action-button:hover,.nmorph-video-preview .nmorph-video-preview__action-link:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-button .nmorph-icon,.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-video-preview-width, 180px);height:var(--nmorph-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}.nmorph-video-preview__portal{display:contents}.nmorph-video-preview__portal .nmorph-video-preview__portal-content{--nmorph-video-preview-portal-width: min( calc(100vw - 96px) , 1080px);--nmorph-video-preview-portal-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-video-preview-portal-width);height:var(--nmorph-video-preview-portal-height);transform:translate(-50%,-50%)}.nmorph-video-preview__portal .nmorph-video-preview__portal-media{display:block;width:100%;max-width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--nmorph-black-color);border-radius:var(--default-border-radius)}
+.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-private-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-private-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-video-preview .nmorph-video-preview__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-private-video-preview-width, 100%);height:var(--nmorph-private-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--embedded .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__play{box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:0;background:transparent}.nmorph-video-preview .nmorph-video-preview__action-button,.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__action-button:hover,.nmorph-video-preview .nmorph-video-preview__action-link:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-button .nmorph-icon,.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-private-video-preview-width, 180px);height:var(--nmorph-private-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}.nmorph-video-preview__portal{display:contents}.nmorph-video-preview__portal .nmorph-video-preview__portal-content{--nmorph-private-video-preview-portal-width: min( calc(100vw - 96px) , 1080px);--nmorph-private-video-preview-portal-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-video-preview-portal-width);height:var(--nmorph-private-video-preview-portal-height);transform:translate(-50%,-50%)}.nmorph-video-preview__portal .nmorph-video-preview__portal-media{display:block;width:100%;max-width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--nmorph-black-color);border-radius:var(--default-border-radius)}

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue2.js

@@ -1,6 +1,6 @@
 import './NmorphVideoPreview.css';
-import { defineComponent as G, useAttrs as J, useSlots as K, ref as f, computed as t, watch as Q } from "vue";
-import { useModifiers as W } from "../../../utils/create-modifiers.js";
+import { defineComponent as U, useAttrs as G, useSlots as J, ref as p, computed as t, watch as K } from "vue";
+import { useModifiers as Q } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as X } from "../../../utils/common.js";
 import Y from "../../../assets/icons/video.svg.js";
 import Z from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
@@ -12,7 +12,7 @@ import ae from "../../../assets/icons/loading.svg.js";
 import ne from "../../../assets/icons/full-screen.svg.js";
 import le from "../../../assets/icons/eye.svg.js";
 import se from "../../../assets/icons/download.svg.js";
-const ue = "var(--nmorph-contrast-text-color)", h = 0.25, Se = /* @__PURE__ */ G({
+const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U({
   inheritAttrs: !1,
   __name: "NmorphVideoPreview",
   props: {
@@ -21,6 +21,8 @@ const ue = "var(--nmorph-contrast-text-color)", h = 0.25, Se = /* @__PURE__ */ G
     name: { type: String, required: !1, default: "" },
     width: { type: [Number, String], required: !1, default: void 0 },
     height: { type: [Number, String], required: !1, default: void 0 },
+    previewWidth: { type: [Number, String], required: !1, default: void 0 },
+    previewHeight: { type: [Number, String], required: !1, default: void 0 },
     durationMs: { type: Number, required: !1, default: void 0 },
     surface: { type: String, required: !1, default: "card" },
     embedded: { type: Boolean, required: !1, default: !1 },
@@ -43,14 +45,14 @@ const ue = "var(--nmorph-contrast-text-color)", h = 0.25, Se = /* @__PURE__ */ G
   },
   emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
   setup(P, { expose: O, emit: _ }) {
-    const e = P, n = _, i = J(), v = K(), l = f(null), p = f(!1), o = f(!1), s = f(!1), y = (r) => {
+    const e = P, n = _, u = G(), h = J(), l = p(null), f = p(!1), o = p(!1), s = p(!1), y = (r) => {
       if (!r || r < 0) return "";
-      const a = Math.round(r / 1e3), u = Math.floor(a / 60), m = a % 60;
-      return `${u}:${m.toString().padStart(2, "0")}`;
-    }, A = t(() => y(e.durationMs)), d = t(() => !!e.src && !e.loading && !e.error), F = t(() => e.showPlaybackButton && d.value && s.value), H = t(
+      const a = Math.round(r / 1e3), i = Math.floor(a / 60), m = a % 60;
+      return `${i}:${m.toString().padStart(2, "0")}`;
+    }, A = t(() => y(e.durationMs)), d = t(() => !!e.src && !e.loading && !e.error), H = t(() => e.showPlaybackButton && d.value && s.value), F = t(
       () => e.showPlaybackButton && e.preload === "metadata" ? "auto" : e.preload
-    ), w = t(() => e.showFullscreenAction && d.value && !e.controls), g = t(() => d.value && (e.showPreviewAction || w.value)), N = t(() => e.showDefaultActions && (e.src || e.downloadHref)), q = t(() => !!v.actions || g.value || N.value), S = t(
-      () => W({
+    ), w = t(() => e.showFullscreenAction && d.value && !e.controls), g = t(() => d.value && (e.showPreviewAction || w.value)), N = t(() => e.showDefaultActions && (e.src || e.downloadHref)), q = t(() => !!h.actions || g.value || N.value), S = t(
+      () => Q({
         "nmorph-video-preview": [
           e.surface,
           e.embedded && "embedded",
@@ -65,20 +67,22 @@ const ue = "var(--nmorph-contrast-text-color)", h = 0.25, Se = /* @__PURE__ */ G
       })
     ), b = t(
       () => X({
-        "--nmorph-video-preview-width": e.width,
-        "--nmorph-video-preview-height": e.height
+        "--nmorph-private-video-preview-width": e.width,
+        "--nmorph-private-video-preview-height": e.height,
+        "--nmorph-private-video-preview-portal-width": e.previewWidth,
+        "--nmorph-private-video-preview-portal-height": e.previewHeight
       })
-    ), E = t(() => Object.fromEntries(Object.entries(i).filter(([r]) => r !== "class" && r !== "style"))), C = t(() => [S.value, i.class]), D = t(() => [b.value, i.style]);
-    Q(
+    ), E = t(() => Object.fromEntries(Object.entries(u).filter(([r]) => r !== "class" && r !== "style"))), C = t(() => [S.value, u.class]), D = t(() => [b.value, u.style]);
+    K(
       () => [e.src, e.loading, e.error],
       () => {
         o.value = !1, s.value = !1;
       }
     );
     const M = () => n("open"), V = () => n("download"), k = () => {
-      e.previewMode === "internal" && (p.value = !0), n("preview");
+      e.previewMode === "internal" && (f.value = !0), n("preview");
     }, x = () => {
-      p.value = !1;
+      f.value = !1;
     }, L = async () => {
       const r = l.value;
       if (r) {
@@ -108,10 +112,10 @@ const ue = "var(--nmorph-contrast-text-color)", h = 0.25, Se = /* @__PURE__ */ G
     }, I = (r) => {
       const a = r.duration;
       if (!Number.isFinite(a) || a <= 0) return !1;
-      const u = r.buffered, m = Math.max(0, a - h);
-      for (let c = 0; c < u.length; c += 1)
+      const i = r.buffered, m = Math.max(0, a - v);
+      for (let c = 0; c < i.length; c += 1)
         try {
-          if (u.start(c) <= h && u.end(c) >= m) return !0;
+          if (i.start(c) <= v && i.end(c) >= m) return !0;
         } catch {
           return !1;
         }
@@ -120,15 +124,15 @@ const ue = "var(--nmorph-contrast-text-color)", h = 0.25, Se = /* @__PURE__ */ G
       s.value = l.value ? I(l.value) : !1;
     }, T = (r) => {
       o.value = !0, n("play", r);
-    }, $ = (r) => {
+    }, W = (r) => {
       o.value = !1, n("pause", r);
-    }, z = () => {
+    }, $ = () => {
       o.value = !1;
-    }, U = (r) => {
+    }, z = (r) => {
       o.value = !1, s.value = !1, n("error", r);
     };
     O({ videoRef: l });
-    const B = { CONTRAST_ICON_COLOR: ue, VIDEO_BUFFER_EPSILON_SECONDS: h, props: e, emit: n, attrs: i, slots: v, videoRef: l, previewOpen: p, playing: o, videoLoaded: s, formatDuration: y, duration: A, mediaReady: d, showPlaybackControl: F, resolvedPreload: H, showFullscreenAction: w, hasPreviewActions: g, hasDefaultActions: N, hasActions: q, modifiers: S, styles: b, rootAttrs: E, rootClass: C, rootStyle: D, openHandler: M, downloadHandler: V, previewHandler: k, closePreviewHandler: x, fullscreenHandler: L, togglePlayback: R, isVideoFullyBuffered: I, updateVideoLoaded: j, playHandler: T, pauseHandler: $, endedHandler: z, errorHandler: U, get NmorphIcon() {
+    const B = { CONTRAST_ICON_COLOR: ie, VIDEO_BUFFER_EPSILON_SECONDS: v, props: e, emit: n, attrs: u, slots: h, videoRef: l, previewOpen: f, playing: o, videoLoaded: s, formatDuration: y, duration: A, mediaReady: d, showPlaybackControl: H, resolvedPreload: F, showFullscreenAction: w, hasPreviewActions: g, hasDefaultActions: N, hasActions: q, modifiers: S, styles: b, rootAttrs: E, rootClass: C, rootStyle: D, openHandler: M, downloadHandler: V, previewHandler: k, closePreviewHandler: x, fullscreenHandler: L, togglePlayback: R, isVideoFullyBuffered: I, updateVideoLoaded: j, playHandler: T, pauseHandler: W, endedHandler: $, errorHandler: z, get NmorphIcon() {
       return ee;
     }, get NmorphIconDownload() {
       return se;

package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.css

@@ -1 +1 @@
-.nmorph-virtual-list{position:relative;box-sizing:border-box;min-width:0;height:var(--nmorph-virtual-list-height);max-height:var(--nmorph-virtual-list-max-height);overflow:auto;color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-virtual-list--disabled{height:auto;overflow:visible}.nmorph-virtual-list .nmorph-virtual-list__spacer{position:relative;min-height:100%}.nmorph-virtual-list .nmorph-virtual-list__content{position:absolute;top:0;right:0;left:0}.nmorph-virtual-list--disabled .nmorph-virtual-list__content{position:static;transform:none}.nmorph-virtual-list .nmorph-virtual-list__item{box-sizing:border-box;min-height:var(--nmorph-virtual-list-item-height)}.nmorph-virtual-list .nmorph-virtual-list__empty{display:flex;justify-content:center;align-items:center;min-height:100%;padding:var(--indentation-04);color:var(--nmorph-semi-contrast-text-color)}
+.nmorph-virtual-list{position:relative;box-sizing:border-box;min-width:0;height:var(--nmorph-private-virtual-list-height);max-height:var(--nmorph-private-virtual-list-max-height);overflow:auto;color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-virtual-list--disabled{height:auto;overflow:visible}.nmorph-virtual-list .nmorph-virtual-list__spacer{position:relative;min-height:100%}.nmorph-virtual-list .nmorph-virtual-list__content{position:absolute;top:0;right:0;left:0}.nmorph-virtual-list--disabled .nmorph-virtual-list__content{position:static;transform:none}.nmorph-virtual-list .nmorph-virtual-list__item{box-sizing:border-box;min-height:var(--nmorph-private-virtual-list-item-height)}.nmorph-virtual-list .nmorph-virtual-list__empty{display:flex;justify-content:center;align-items:center;min-height:100%;padding:var(--indentation-04);color:var(--nmorph-semi-contrast-text-color)}

package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue2.js

@@ -23,16 +23,16 @@ const j = /* @__PURE__ */ I({
       itemHeight: l,
       overscan: u,
       dynamic: m
-    }), d = r.containerRef, g = t(
+    }), d = r.containerRef, v = t(
       () => N({
         "nmorph-virtual-list": [e.disabled && "disabled", e.dynamic && "dynamic"]
       })
-    ), v = t(() => ({
+    ), g = t(() => ({
       ...T({
-        "--nmorph-virtual-list-height": e.height,
-        "--nmorph-virtual-list-max-height": e.maxHeight
+        "--nmorph-private-virtual-list-height": e.height,
+        "--nmorph-private-virtual-list-max-height": e.maxHeight
       }),
-      "--nmorph-virtual-list-item-height": `${e.itemHeight}px`
+      "--nmorph-private-virtual-list-item-height": `${e.itemHeight}px`
     })), b = t(() => ({
       transform: o.value ? `translateY(${r.offsetTop.value}px)` : void 0
     })), S = t(() => ({
@@ -54,7 +54,7 @@ const j = /* @__PURE__ */ I({
       refresh: r.refresh,
       scrollToIndex: r.scrollToIndex
     });
-    const c = { props: e, emit: a, items: n, enabled: o, itemHeight: l, overscan: u, dynamic: m, virtualList: r, containerRef: d, modifiers: g, styles: v, contentStyle: b, spacerStyle: S, renderedItems: _, getItemKey: q, scrollHandler: x, setItemRef: H };
+    const c = { props: e, emit: a, items: n, enabled: o, itemHeight: l, overscan: u, dynamic: m, virtualList: r, containerRef: d, modifiers: v, styles: g, contentStyle: b, spacerStyle: S, renderedItems: _, getItemKey: q, scrollHandler: x, setItemRef: H };
     return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });