@nmorph/nmorph-ui-kit 3.0.5 → 3.0.7

package/dist/components/data/nmorph-table/NmorphTable.vue.js

@@ -1,31 +1,37 @@
 import './NmorphTable.css';
-import p from "./NmorphTable.vue2.js";
-import { openBlock as r, createElementBlock as t, normalizeStyle as a, normalizeClass as _, createElementVNode as o, Fragment as d, renderList as i, toDisplayString as s, createBlock as m, createCommentVNode as y, renderSlot as h } from "vue";
+import h from "./NmorphTable.vue2.js";
+import { openBlock as r, createElementBlock as t, normalizeStyle as n, normalizeClass as _, createElementVNode as o, renderSlot as m, Fragment as d, renderList as i, toDisplayString as s, createBlock as p, createCommentVNode as y } from "vue";
 /* empty css                 */
 import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = { class: "nmorph-table__wrapper" }, w = { class: "nmorph-table__header" }, f = ["data-src"], g = { class: "nmorph-table__table-row" }, k = { class: "nmorph-table__cell" }, x = ["tabindex"], S = ["id"], R = { class: "nmorph-table__slot-columns" }, W = ["id"], B = { class: "nmorph-table__slot-columns" };
-function E(c, H, N, l, C, I) {
+const w = { class: "nmorph-table__wrapper" }, f = {
+  class: "nmorph-table__slot-columns",
+  hidden: ""
+}, k = { class: "nmorph-table__header" }, u = ["data-src"], g = { class: "nmorph-table__table-row" }, x = { class: "nmorph-table__cell" }, S = ["tabindex"], R = ["id"], B = { key: 1 }, E = ["id"];
+function H(c, N, W, e, C, I) {
   return r(), t("div", null, [
     (r(), t(
       "div",
       {
         ref: "nmorphDOMTable",
-        key: l.key,
-        class: _(l.modifiers),
-        style: a(l.tableStyle)
+        key: e.key,
+        class: _(e.modifiers),
+        style: n(e.tableStyle)
       },
       [
-        o("div", u, [
-          o("table", w, [
+        o("div", w, [
+          o("div", f, [
+            m(c.$slots, "default")
+          ]),
+          o("table", k, [
             o("colgroup", null, [
               (r(!0), t(
                 d,
                 null,
-                i(l.columns, (e) => (r(), t("col", {
-                  key: e.prop,
-                  style: a({ width: `${l.getWidth(e.width)}px` }),
-                  "data-src": `${l.getWidth(e.width)}px`
-                }, null, 12, f))),
+                i(e.columns, (l) => (r(), t("col", {
+                  key: l.prop,
+                  style: n({ width: `${e.getWidth(l.width)}px` }),
+                  "data-src": `${e.getWidth(l.width)}px`
+                }, null, 12, u))),
                 128
                 /* KEYED_FRAGMENT */
               ))
@@ -35,33 +41,33 @@ function E(c, H, N, l, C, I) {
                 (r(!0), t(
                   d,
                   null,
-                  i(l.columns, (e, b) => (r(), t(
+                  i(e.columns, (l, b) => (r(), t(
                     "th",
                     {
                       key: b,
-                      class: _(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": l.props.bordered }])
+                      class: _(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": e.bordered }])
                     },
                     [
-                      o("div", k, [
+                      o("div", x, [
                         o(
                           "div",
                           {
-                            style: a({ "justify-content": e.alignment }),
+                            style: n({ "justify-content": l.alignment }),
                             class: "nmorph-table__cell-content"
                           },
                           [
                             o(
                               "span",
                               null,
-                              s(e.label),
+                              s(l.label),
                               1
                               /* TEXT */
                             ),
-                            l.sortData && l.sortData[e.prop] ? (r(), m(l.NmorphSortButton, {
+                            e.sortData && e.sortData[l.prop] ? (r(), p(e.NmorphSortButton, {
                               key: 0,
                               class: "nmorph-table__button-wrapper",
-                              value: l.sortData[e.prop],
-                              onSort: (n) => l.onSort(n, e.prop)
+                              value: e.sortData[l.prop],
+                              onSort: (a) => e.onSort(a, l.prop)
                             }, null, 8, ["value", "onSort"])) : y("v-if", !0)
                           ],
                           4
@@ -79,30 +85,30 @@ function E(c, H, N, l, C, I) {
             ])
           ]),
           o("div", {
-            ref: l.virtualList.containerRef,
+            ref: e.virtualList.containerRef,
             class: _(["nmorph-table__body", {
-              "nmorph-table__body--virtual": l.virtualEnabled,
-              "nmorph-table__body--dynamic": l.props.virtualDynamicHeight
+              "nmorph-table__body--virtual": e.virtualEnabled,
+              "nmorph-table__body--dynamic": e.props.virtualDynamicHeight
             }]),
-            style: a(l.tableBodyStyle),
-            tabindex: l.virtualEnabled ? 0 : void 0,
+            style: n(e.tableBodyStyle),
+            tabindex: e.virtualEnabled ? 0 : void 0,
             role: "grid",
-            onKeydown: l.tableKeydownHandler,
-            onScroll: l.scrollHandler
+            onKeydown: e.tableKeydownHandler,
+            onScroll: e.scrollHandler
           }, [
-            l.virtualEnabled ? (r(), t(
+            e.virtualEnabled ? (r(), t(
               "div",
               {
                 key: 0,
                 class: "nmorph-table__virtual-spacer",
-                style: a(l.virtualSpacerStyle)
+                style: n(e.virtualSpacerStyle)
               },
               [
                 o(
                   "div",
                   {
                     class: "nmorph-table__virtual-content",
-                    style: a(l.virtualContentStyle)
+                    style: n(e.virtualContentStyle)
                   },
                   [
                     o("table", null, [
@@ -110,11 +116,11 @@ function E(c, H, N, l, C, I) {
                         (r(!0), t(
                           d,
                           null,
-                          i(l.columns, (e) => (r(), t(
+                          i(e.columns, (l) => (r(), t(
                             "col",
                             {
-                              key: e.prop,
-                              style: a({ width: `${l.getWidth(e.width)}px` })
+                              key: l.prop,
+                              style: n({ width: `${e.getWidth(l.width)}px` })
                             },
                             null,
                             4
@@ -128,15 +134,15 @@ function E(c, H, N, l, C, I) {
                         (r(!0), t(
                           d,
                           null,
-                          i(l.renderedRows, (e, b) => (r(), t(
+                          i(e.renderedRows, (l, b) => (r(), t(
                             "tr",
                             {
-                              key: e.index,
+                              key: l.index,
                               ref_for: !0,
-                              ref: (n) => l.setVirtualRowRef(n, e.index),
+                              ref: (a) => e.setVirtualRowRef(a, l.index),
                               class: _(["nmorph-table__table-data-row", {
-                                "nmorph-table__table-data-row--row-hover": l.props.rowHover,
-                                "nmorph-table__table-data-row--active": l.activeRowIndex === e.index
+                                "nmorph-table__table-data-row--row-hover": e.props.rowHover,
+                                "nmorph-table__table-data-row--active": e.activeRowIndex === l.index
                               }]),
                               role: "row"
                             },
@@ -144,18 +150,18 @@ function E(c, H, N, l, C, I) {
                               (r(!0), t(
                                 d,
                                 null,
-                                i(l.columns, (n) => (r(), t(
+                                i(e.columns, (a) => (r(), t(
                                   "td",
                                   {
-                                    key: n.prop,
-                                    class: _([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
+                                    key: a.prop,
+                                    class: _([{ "nmorph-table__table-data--bordered": e.bordered }, "nmorph-table__table-data"])
                                   },
                                   [
                                     o("div", {
-                                      id: `table-cell-${l.tableIdentifier}-${b}-${n.prop}`,
-                                      style: a({ "text-align": n.alignment }),
+                                      id: `table-cell-${e.tableIdentifier}-${b}-${a.prop}`,
+                                      style: n({ "text-align": a.alignment }),
                                       class: "nmorph-table__cell nmorph-table__cell--data"
-                                    }, s(l.tableData(e.item[n.prop])), 13, S)
+                                    }, s(e.tableData(l.item[a.prop])), 13, R)
                                   ],
                                   2
                                   /* CLASS */
@@ -171,29 +177,6 @@ function E(c, H, N, l, C, I) {
                           /* KEYED_FRAGMENT */
                         ))
                       ])
-                    ]),
-                    o("table", null, [
-                      o("colgroup", null, [
-                        (r(!0), t(
-                          d,
-                          null,
-                          i(l.columns, (e) => (r(), t(
-                            "col",
-                            {
-                              key: e.prop,
-                              style: a({ width: `${l.getWidth(e.width)}px` })
-                            },
-                            null,
-                            4
-                            /* STYLE */
-                          ))),
-                          128
-                          /* KEYED_FRAGMENT */
-                        ))
-                      ]),
-                      o("tbody", R, [
-                        h(c.$slots, "default")
-                      ])
                     ])
                   ],
                   4
@@ -202,99 +185,68 @@ function E(c, H, N, l, C, I) {
               ],
               4
               /* STYLE */
-            )) : (r(), t(
-              d,
-              { key: 1 },
-              [
-                o("table", null, [
-                  o("colgroup", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.columns, (e) => (r(), t(
-                        "col",
-                        {
-                          key: e.prop,
-                          style: a({ width: `${l.getWidth(e.width)}px` })
-                        },
-                        null,
-                        4
-                        /* STYLE */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ]),
-                  o("tbody", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.renderedRows, (e, b) => (r(), t(
-                        "tr",
-                        {
-                          key: b,
-                          class: _(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": l.props.rowHover }])
-                        },
-                        [
-                          (r(!0), t(
-                            d,
-                            null,
-                            i(l.columns, (n) => (r(), t(
-                              "td",
-                              {
-                                key: n.prop,
-                                class: _([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
-                              },
-                              [
-                                o("div", {
-                                  id: `table-cell-${l.tableIdentifier}-${b}-${n.prop}`,
-                                  style: a({ "text-align": n.alignment }),
-                                  class: "nmorph-table__cell nmorph-table__cell--data"
-                                }, s(l.tableData(e.item[n.prop])), 13, W)
-                              ],
-                              2
-                              /* CLASS */
-                            ))),
-                            128
-                            /* KEYED_FRAGMENT */
-                          ))
-                        ],
-                        2
-                        /* CLASS */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ])
-                ]),
-                o("table", null, [
-                  o("colgroup", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.columns, (e) => (r(), t(
-                        "col",
-                        {
-                          key: e.prop,
-                          style: a({ width: `${l.getWidth(e.width)}px` })
-                        },
+            )) : (r(), t("table", B, [
+              o("colgroup", null, [
+                (r(!0), t(
+                  d,
+                  null,
+                  i(e.columns, (l) => (r(), t(
+                    "col",
+                    {
+                      key: l.prop,
+                      style: n({ width: `${e.getWidth(l.width)}px` })
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  ))),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              o("tbody", null, [
+                (r(!0), t(
+                  d,
+                  null,
+                  i(e.renderedRows, (l, b) => (r(), t(
+                    "tr",
+                    {
+                      key: b,
+                      class: _(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": e.props.rowHover }])
+                    },
+                    [
+                      (r(!0), t(
+                        d,
                         null,
-                        4
-                        /* STYLE */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ]),
-                  o("tbody", B, [
-                    h(c.$slots, "default")
-                  ])
-                ])
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            ))
-          ], 46, x)
+                        i(e.columns, (a) => (r(), t(
+                          "td",
+                          {
+                            key: a.prop,
+                            class: _([{ "nmorph-table__table-data--bordered": e.bordered }, "nmorph-table__table-data"])
+                          },
+                          [
+                            o("div", {
+                              id: `table-cell-${e.tableIdentifier}-${b}-${a.prop}`,
+                              style: n({ "text-align": a.alignment }),
+                              class: "nmorph-table__cell nmorph-table__cell--data"
+                            }, s(e.tableData(l.item[a.prop])), 13, E)
+                          ],
+                          2
+                          /* CLASS */
+                        ))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    2
+                    /* CLASS */
+                  ))),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ]))
+          ], 46, S)
         ])
       ],
       6
@@ -302,7 +254,7 @@ function E(c, H, N, l, C, I) {
     ))
   ]);
 }
-const K = /* @__PURE__ */ v(p, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
+const K = /* @__PURE__ */ v(h, [["render", H], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
 export {
   K as default
 };

package/dist/components/data/nmorph-table/NmorphTable.vue2.js

@@ -1,17 +1,15 @@
 import './NmorphTable.css';
-import { defineComponent as j, computed as l, ref as n, provide as M, watch as P, nextTick as z } from "vue";
-import { useModifiers as K } from "../../../utils/create-modifiers.js";
-import { generateUUID as Q, toCssSize as Y, createCssSizeVariables as $, createCssVariables as F, resolveDomElement as G } from "../../../utils/common.js";
-import { useVirtualList as J } from "../../../hooks/use-virtual-list.js";
-import X from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
-const oe = /* @__PURE__ */ j({
+import { defineComponent as P, computed as l, ref as n, provide as _, watch as z, nextTick as K } from "vue";
+import { useModifiers as Q } from "../../../utils/create-modifiers.js";
+import { generateUUID as Y, toCssSize as $, createCssSizeVariables as F, createCssVariables as G, resolveDomElement as J } from "../../../utils/common.js";
+import { useVirtualList as X } from "../../../hooks/use-virtual-list.js";
+import Z from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
+const ie = /* @__PURE__ */ P({
   __name: "NmorphTable",
   props: {
     data: { type: Array, required: !1, default: () => [] },
     rowHover: { type: Boolean, required: !1, default: !0 },
-    bordered: { type: Boolean, required: !1, default: !1 },
     sort: { type: Object, required: !1, default: void 0 },
-    design: { type: null, required: !1, default: "nmorph" },
     virtual: { type: Boolean, required: !1, default: !1 },
     virtualHeight: { type: [Number, String], required: !1, default: "320px" },
     virtualOverscan: { type: Number, required: !1, default: 5 },
@@ -19,22 +17,27 @@ const oe = /* @__PURE__ */ j({
     virtualDynamicHeight: { type: Boolean, required: !1, default: !1 },
     borderColor: { type: String, required: !1, default: void 0 },
     cellHeight: { type: [Number, String], required: !1, default: void 0 },
-    rowHoverBackground: { type: String, required: !1, default: void 0 }
+    rowHoverBackground: { type: String, required: !1, default: void 0 },
+    design: { type: null, required: !1, default: "nmorph" },
+    bordered: { type: Boolean, required: !1, skipCheck: !0 }
   },
-  setup(_, { expose: B }) {
-    B();
-    const t = _, T = l(
-      () => K({
-        "nmorph-table": [t.design]
+  setup(B, { expose: T }) {
+    T();
+    const t = B, w = l(() => t.design === "plain" && t.bordered === !0), I = l(
+      () => Q({
+        "nmorph-table": {
+          [t.design]: !0,
+          bordered: w.value
+        }
       })
-    ), o = n([...t.data]), u = l(() => t.virtual), w = l(() => t.virtualRowHeight), H = l(() => t.virtualOverscan), S = l(() => t.virtualDynamicHeight), r = J(o, {
+    ), o = n([...t.data]), u = l(() => t.virtual), H = l(() => t.virtualRowHeight), S = l(() => t.virtualOverscan), C = l(() => t.virtualDynamicHeight), r = X(o, {
       enabled: u,
-      itemHeight: w,
-      overscan: H,
-      dynamic: S
-    }), C = l(
+      itemHeight: H,
+      overscan: S,
+      dynamic: C
+    }), x = l(
       () => u.value ? r.virtualItems.value : o.value.map((e, a) => ({ item: e, index: a }))
-    ), x = l(() => C.value.map((e) => e.item)), s = n(-1), p = n(0), d = n(t.sort), I = (e, a) => {
+    ), D = l(() => x.value.map((e) => e.item)), s = n(-1), p = n(0), d = n(t.sort), W = (e, a) => {
       d.value && (d.value[a] = e, o.value.sort((g, y) => {
         const b = String(g[a]).toLowerCase(), i = String(y[a]).toLowerCase();
         if (!d.value)
@@ -43,15 +46,15 @@ const oe = /* @__PURE__ */ j({
         return f === "ascending" ? b.localeCompare(i) : f === "descending" ? i.localeCompare(b) : 0;
       }));
     }, h = n(null), c = n([]);
-    M("table-data", { rows: x, columns: c });
-    const D = l(() => {
+    _("table-data", { rows: D, columns: c });
+    const R = l(() => {
       const e = c.value.map((i) => i.width).filter((i) => !!i), a = e.length, g = e.reduce((i, f) => (i += Number(f), i), 0), y = c.value.length - a;
       return h.value?.clientWidth ? (h.value?.clientWidth - g) / y : 0;
-    }), W = (e) => e !== "" ? e : D.value, m = n(0);
-    P(
+    }), N = (e) => e || R.value, m = n(0);
+    z(
       () => t.data,
       async () => {
-        m.value = m.value + 1, o.value = [...t.data], c.value = [], await z();
+        m.value = m.value + 1, o.value = [...t.data], c.value = [], await K();
         const e = r.containerRef.value;
         e && (e.scrollTop = Math.min(
           p.value,
@@ -62,38 +65,38 @@ const oe = /* @__PURE__ */ j({
         immediate: !0
       }
     );
-    const N = (e) => typeof e == "object" ? "" : e, R = Q();
-    M("table-identifier", R);
-    const q = l(() => Y(t.virtualHeight)), O = l(() => ({
-      ...F({
+    const O = (e) => typeof e == "object" ? "" : e, k = Y();
+    _("table-identifier", k);
+    const q = l(() => $(t.virtualHeight)), A = l(() => ({
+      ...G({
         "--nmorph-private-table-border-color": t.borderColor,
         "--nmorph-private-table-row-hover-background": t.rowHoverBackground
       }),
-      ...$({
+      ...F({
         "--nmorph-private-table-cell-height": t.cellHeight
       })
-    })), A = l(() => ({
+    })), E = l(() => ({
       "--nmorph-private-table-virtual-row-height": `${t.virtualRowHeight}px`,
       height: u.value ? q.value : void 0,
       overflowY: u.value ? "auto" : void 0
-    })), E = r.spacerStyle, L = r.contentStyle, U = (e, a) => {
-      r.measureElement(a, G(e));
-    }, V = () => {
+    })), L = r.spacerStyle, U = r.contentStyle, V = (e, a) => {
+      r.measureElement(a, J(e));
+    }, j = () => {
       r.scrollHandler(), p.value = r.containerRef.value?.scrollTop || 0;
     }, v = (e) => {
       if (!o.value.length) return;
       const a = s.value < 0 ? 0 : Math.min(Math.max(s.value + e, 0), o.value.length - 1);
       s.value = a, r.scrollToIndex(a);
-    }, k = { props: t, modifiers: T, rows: o, virtualEnabled: u, virtualRowHeight: w, virtualOverscan: H, virtualDynamicHeight: S, virtualList: r, renderedRows: C, tableRows: x, activeRowIndex: s, lastScrollTop: p, sortData: d, onSort: I, nmorphDOMTable: h, columns: c, defaultColWidth: D, getWidth: W, key: m, tableData: N, tableIdentifier: R, virtualHeight: q, tableStyle: O, tableBodyStyle: A, virtualSpacerStyle: E, virtualContentStyle: L, setVirtualRowRef: U, scrollHandler: V, moveActiveRow: v, tableKeydownHandler: (e) => {
+    }, M = { props: t, bordered: w, modifiers: I, rows: o, virtualEnabled: u, virtualRowHeight: H, virtualOverscan: S, virtualDynamicHeight: C, virtualList: r, renderedRows: x, tableRows: D, activeRowIndex: s, lastScrollTop: p, sortData: d, onSort: W, nmorphDOMTable: h, columns: c, defaultColWidth: R, getWidth: N, key: m, tableData: O, tableIdentifier: k, virtualHeight: q, tableStyle: A, tableBodyStyle: E, virtualSpacerStyle: L, virtualContentStyle: U, setVirtualRowRef: V, scrollHandler: j, moveActiveRow: v, tableKeydownHandler: (e) => {
       u.value && (e.key === "ArrowDown" ? (e.preventDefault(), v(1)) : e.key === "ArrowUp" ? (e.preventDefault(), v(-1)) : e.key === "Home" ? (e.preventDefault(), s.value = 0, r.scrollToIndex(0)) : e.key === "End" ? (e.preventDefault(), s.value = o.value.length - 1, r.scrollToIndex(o.value.length - 1)) : e.key === "PageDown" ? (e.preventDefault(), v(
         Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )) : e.key === "PageUp" && (e.preventDefault(), v(
         -Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )));
-    }, NmorphSortButton: X };
-    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+    }, NmorphSortButton: Z };
+    return Object.defineProperty(M, "__isScriptSetup", { enumerable: !1, value: !0 }), M;
   }
 });
 export {
-  oe as default
+  ie as default
 };

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

@@ -1 +1 @@
-.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)}
+.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{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center;pointer-events:none}.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);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__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/feedback/nmorph-drawer/NmorphDrawer.vue.js

@@ -1,6 +1,6 @@
 import './NmorphDrawer.css';
 import c from "./NmorphDrawer.vue2.js";
-import { openBlock as e, createBlock as p, withCtx as n, createElementVNode as l, normalizeStyle as m, normalizeClass as d, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as i, createCommentVNode as s } from "vue";
+import { openBlock as e, createBlock as p, withCtx as i, createElementVNode as l, normalizeStyle as m, normalizeClass as n, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as d, createCommentVNode as s } from "vue";
 /* empty css                  */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
 const f = ["aria-label"], w = {
@@ -12,7 +12,7 @@ const f = ["aria-label"], w = {
 };
 function v(r, C, N, o, z, O) {
   return e(), p(o.NmorphOverlay, {
-    show: o.props.modelValue,
+    show: o.isVisible,
     "z-index": o.props.zIndex,
     "teleport-to": o.props.teleportTo,
     "disabled-teleport": o.props.disabledTeleport,
@@ -21,9 +21,9 @@ function v(r, C, N, o, z, O) {
     onOnOutsideClick: o.overlayClickHandler,
     onOnEscapeKeydown: o.closeHandler
   }, {
-    default: n(() => [
+    default: i(() => [
       l("aside", {
-        class: d(o.modifiers),
+        class: n(o.modifiers),
         style: m(o.drawerStyle),
         role: "dialog",
         "aria-modal": "true",
@@ -45,9 +45,9 @@ function v(r, C, N, o, z, O) {
               "aria-label": o.props.title ? `Close ${o.props.title}` : "Close drawer",
               onClick: o.closeHandler
             }, [
-              i(o.NmorphIcon, null, {
-                default: n(() => [
-                  i(o.NmorphIconCross)
+              d(o.NmorphIcon, null, {
+                default: i(() => [
+                  d(o.NmorphIconCross)
                 ]),
                 _: 1
                 /* STABLE */
@@ -58,7 +58,7 @@ function v(r, C, N, o, z, O) {
         l(
           "div",
           {
-            class: d(["nmorph-drawer__content", o.props.contentClass])
+            class: n(["nmorph-drawer__content", o.props.contentClass])
           },
           [
             t(r.$slots, "default")