@nmorph/nmorph-ui-kit 3.0.0 → 3.0.2

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js

@@ -1,15 +1,15 @@
 import './NmorphMediaGallery.css';
-import y from "./NmorphMediaGallery.vue2.js";
-import { openBlock as l, createElementBlock as a, Fragment as s, normalizeStyle as g, normalizeClass as f, renderList as v, createElementVNode as c, createBlock as m, createVNode as e, withCtx as n, createCommentVNode as i, toDisplayString as _, withModifiers as h } from "vue";
+import v from "./NmorphMediaGallery.vue2.js";
+import { openBlock as l, createElementBlock as n, Fragment as h, normalizeStyle as g, normalizeClass as f, renderList as y, createElementVNode as c, createBlock as m, createVNode as e, withCtx as a, createCommentVNode as i, toDisplayString as _, withModifiers as s } from "vue";
 /* empty css                        */
 import I from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
+const w = ["aria-label", "onClick"], p = ["src", "poster", "title"], N = {
   key: 2,
   class: "nmorph-media-gallery__trigger-play"
-}, b = {
+}, k = {
   key: 3,
   class: "nmorph-media-gallery__trigger-name"
-}, p = {
+}, b = {
   key: 4,
   class: "nmorph-media-gallery__trigger-size"
 }, z = {
@@ -26,11 +26,11 @@ const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
   class: "nmorph-media-gallery__file-size"
 }, E = { class: "nmorph-media-gallery__action-element" }, V = { class: "nmorph-media-gallery__action-element" }, R = { class: "nmorph-media-gallery__action-element" }, x = { class: "nmorph-media-gallery__action-element" }, M = { class: "nmorph-media-gallery__action-element" };
 function O(G, U, Z, o, j, W) {
-  return l(), a(
-    s,
+  return l(), n(
+    h,
     null,
     [
-      o.props.showTrigger ? (l(), a(
+      o.props.showTrigger ? (l(), n(
         "div",
         {
           key: 0,
@@ -38,10 +38,10 @@ function O(G, U, Z, o, j, W) {
           style: g(o.triggerStyle)
         },
         [
-          (l(!0), a(
-            s,
+          (l(!0), n(
+            h,
             null,
-            v(o.sourceList, (r, t) => (l(), a(
+            y(o.sourceList, (r, t) => (l(), n(
               "div",
               {
                 key: `${r.kind}-${r.src}-${t}`,
@@ -60,8 +60,9 @@ function O(G, U, Z, o, j, W) {
                     alt: r.alt || o.getItemLabel(r, t),
                     title: o.getItemName(r),
                     fit: "cover",
+                    design: "plain",
                     "frame-border": 0
-                  }, null, 8, ["src", "alt", "title"])) : (l(), a("video", {
+                  }, null, 8, ["src", "alt", "title"])) : (l(), n("video", {
                     key: 1,
                     ref_for: !0,
                     ref: (d) => o.setTriggerVideoRef(t, d),
@@ -72,84 +73,84 @@ function O(G, U, Z, o, j, W) {
                     playsinline: "",
                     preload: "metadata",
                     title: o.getItemName(r)
-                  }, null, 8, k)),
-                  o.props.showTriggerPlayButton && r.kind === "video" ? (l(), a("span", w, [
+                  }, null, 8, p)),
+                  o.props.showTriggerPlayButton && r.kind === "video" ? (l(), n("span", N, [
                     e(o.NmorphIcon, {
                       size: "medium",
                       color: "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: n(() => [
+                      default: a(() => [
                         e(o.NmorphIconPlay)
                       ]),
                       _: 1
                       /* STABLE */
                     })
                   ])) : i("v-if", !0),
-                  o.props.showTriggerName && o.getItemName(r) ? (l(), a(
+                  o.props.showTriggerName && o.getItemName(r) ? (l(), n(
                     "span",
-                    b,
+                    k,
                     _(o.getItemName(r)),
                     1
                     /* TEXT */
                   )) : i("v-if", !0),
-                  o.props.showTriggerSize && o.getItemSize(r) ? (l(), a(
+                  o.props.showTriggerSize && o.getItemSize(r) ? (l(), n(
                     "span",
-                    p,
+                    b,
                     _(o.getItemSize(r)),
                     1
                     /* TEXT */
                   )) : i("v-if", !0)
-                ], 8, N),
-                o.showTriggerActionsForItem(r) ? (l(), a("div", z, [
-                  o.showTriggerPreviewActionForItem(r) ? (l(), a("button", {
+                ], 8, w),
+                o.showTriggerActionsForItem(r) ? (l(), n("div", z, [
+                  o.showTriggerPreviewActionForItem(r) ? (l(), n("button", {
                     key: 0,
                     type: "button",
                     class: "nmorph-media-gallery__trigger-action",
                     "aria-label": `Preview ${o.getItemLabel(r, t)}`,
-                    onClick: h((d) => o.openPreviewAt(t), ["stop"])
+                    onClick: s((d) => o.openPreviewAt(t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
                       color: "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: n(() => [
+                      default: a(() => [
                         e(o.NmorphIconEye)
                       ]),
                       _: 1
                       /* STABLE */
                     })
                   ], 8, C)) : i("v-if", !0),
-                  o.showTriggerFullscreenActionForItem(r) ? (l(), a("button", {
+                  o.showTriggerFullscreenActionForItem(r) ? (l(), n("button", {
                     key: 1,
                     type: "button",
                     class: "nmorph-media-gallery__trigger-action",
                     "aria-label": `Fullscreen ${o.getItemLabel(r, t)}`,
-                    onClick: h((d) => o.triggerFullscreenHandler(r, t), ["stop"])
+                    onClick: s((d) => o.triggerFullscreenHandler(r, t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
                       color: "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: n(() => [
+                      default: a(() => [
                         e(o.NmorphIconFullScreen)
                       ]),
                       _: 1
                       /* STABLE */
                     })
                   ], 8, H)) : i("v-if", !0),
-                  o.showTriggerDownloadActionForItem(r) ? (l(), a("a", {
+                  o.showTriggerDownloadActionForItem(r) ? (l(), n("a", {
                     key: 2,
                     href: o.getItemDownloadHref(r),
                     download: o.getItemName(r) || void 0,
                     class: "nmorph-media-gallery__trigger-action",
                     "aria-label": `Download ${o.getItemLabel(r, t)}`,
-                    onClick: h((d) => o.downloadItemHandler(r, t), ["stop"])
+                    onClick: s((d) => o.downloadItemHandler(r, t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
                       color: "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: n(() => [
+                      default: a(() => [
                         e(o.NmorphIconDownload)
                       ]),
                       _: 1
@@ -185,12 +186,17 @@ function O(G, U, Z, o, j, W) {
         onPrevious: o.previousHandler,
         onNext: o.nextHandler
       }, {
-        actions: n(() => [
+        actions: a(() => [
           c("div", E, [
-            e(o.NmorphButton, { onClick: o.rotateRight }, {
-              default: n(() => [
+            e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
+              onClick: o.rotateRight
+            }, {
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconRotateRight)
                   ]),
                   _: 1
@@ -202,10 +208,15 @@ function O(G, U, Z, o, j, W) {
             })
           ]),
           c("div", V, [
-            e(o.NmorphButton, { onClick: o.rotateLeft }, {
-              default: n(() => [
+            e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
+              onClick: o.rotateLeft
+            }, {
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconRotateLeft)
                   ]),
                   _: 1
@@ -217,10 +228,15 @@ function O(G, U, Z, o, j, W) {
             })
           ]),
           c("div", R, [
-            e(o.NmorphButton, { onClick: o.zoomIn }, {
-              default: n(() => [
+            e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
+              onClick: o.zoomIn
+            }, {
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconZoomIn)
                   ]),
                   _: 1
@@ -232,10 +248,15 @@ function O(G, U, Z, o, j, W) {
             })
           ]),
           c("div", x, [
-            e(o.NmorphButton, { onClick: o.zoomOut }, {
-              default: n(() => [
+            e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
+              onClick: o.zoomOut
+            }, {
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconZoomOut)
                   ]),
                   _: 1
@@ -248,12 +269,15 @@ function O(G, U, Z, o, j, W) {
           ]),
           c("div", M, [
             e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
               disabled: o.scaleLevel === 1,
               onClick: o.toggleNormalSize
             }, {
-              default: n(() => [
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     o.scaleLevel < 1 ? (l(), m(o.NmorphIconEnlarge, { key: 0 })) : (l(), m(o.NmorphIconShrink, { key: 1 }))
                   ]),
                   _: 1
@@ -265,7 +289,7 @@ function O(G, U, Z, o, j, W) {
             }, 8, ["disabled"])
           ])
         ]),
-        default: n(() => [
+        default: a(() => [
           c("div", F, [
             o.currentItem?.kind === "image" ? (l(), m(o.NmorphImage, {
               key: 0,
@@ -273,11 +297,12 @@ function O(G, U, Z, o, j, W) {
               alt: o.currentItem.alt || o.currentItem.name || "",
               title: o.currentItem.name,
               fit: o.props.imageFit,
+              design: "plain",
               "frame-border": 0,
               style: g({ transform: o.imageTransform }),
               onPointerdown: o.pointerDownHandler,
               onPointerup: o.pointerUpHandler
-            }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (l(), a("video", {
+            }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (l(), n("video", {
               key: 1,
               ref: "currentVideoRef",
               class: "nmorph-media-gallery__video",
@@ -295,45 +320,45 @@ function O(G, U, Z, o, j, W) {
               onEnded: o.videoEndedHandler,
               onError: o.videoErrorHandler
             }, null, 40, S)) : i("v-if", !0),
-            o.currentName ? (l(), a(
+            o.currentName ? (l(), n(
               "span",
               D,
               _(o.currentName),
               1
               /* TEXT */
             )) : i("v-if", !0),
-            o.showFileActions ? (l(), a("div", L, [
-              o.showVideoFullscreenAction ? (l(), a("button", {
+            o.showFileActions ? (l(), n("div", L, [
+              o.showVideoFullscreenAction ? (l(), n("button", {
                 key: 0,
                 type: "button",
                 class: "nmorph-media-gallery__file-action",
                 "aria-label": `Fullscreen ${o.currentVideoName}`,
-                onClick: h(o.fullscreenHandler, ["stop"])
+                onClick: s(o.fullscreenHandler, ["stop"])
               }, [
                 e(o.NmorphIcon, {
                   size: "small",
                   color: "var(--nmorph-contrast-text-color)"
                 }, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconFullScreen)
                   ]),
                   _: 1
                   /* STABLE */
                 })
               ], 8, B)) : i("v-if", !0),
-              o.currentDownloadHref ? (l(), a("a", {
+              o.currentDownloadHref ? (l(), n("a", {
                 key: 1,
                 href: o.currentDownloadHref,
                 download: o.currentItemName || void 0,
                 class: "nmorph-media-gallery__file-action",
                 "aria-label": `Download ${o.currentItemName || "media"}`,
-                onClick: h(o.downloadHandler, ["stop"])
+                onClick: s(o.downloadHandler, ["stop"])
               }, [
                 e(o.NmorphIcon, {
                   size: "small",
                   color: "var(--nmorph-contrast-text-color)"
                 }, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconDownload)
                   ]),
                   _: 1
@@ -341,7 +366,7 @@ function O(G, U, Z, o, j, W) {
                 })
               ], 8, T)) : i("v-if", !0)
             ])) : i("v-if", !0),
-            o.currentSize ? (l(), a(
+            o.currentSize ? (l(), n(
               "span",
               A,
               _(o.currentSize),
@@ -358,7 +383,7 @@ function O(G, U, Z, o, j, W) {
     /* STABLE_FRAGMENT */
   );
 }
-const X = /* @__PURE__ */ I(y, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue"]]);
+const X = /* @__PURE__ */ I(v, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue"]]);
 export {
   X as default
 };

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js

@@ -1,6 +1,6 @@
 import './NmorphMediaTile.css';
-import c from "./NmorphMediaTile.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeClass as d, withDirectives as p, createElementVNode as n, vShow as _, createBlock as m, withCtx as l, createVNode as a, toDisplayString as s, createCommentVNode as i, renderSlot as h } from "vue";
+import m from "./NmorphMediaTile.vue2.js";
+import { openBlock as e, createElementBlock as r, normalizeClass as d, withDirectives as c, createElementVNode as p, vShow as _, createBlock as n, withCtx as s, createVNode as a, toDisplayString as l, createCommentVNode as i, renderSlot as h } from "vue";
 /* empty css                     */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
 const v = ["src", "muted", "autoplay", "playsinline"], y = {
@@ -15,7 +15,10 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = {
 }, b = {
   key: 4,
   class: "nmorph-media-tile__error-text"
-}, I = { class: "nmorph-media-tile__status" }, S = {
+}, I = {
+  key: 1,
+  class: "nmorph-media-tile__status"
+}, S = {
   key: 0,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Microphone muted"
@@ -32,14 +35,14 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = {
   class: "nmorph-media-tile__status-item",
   "aria-label": "Pinned"
 };
-function x(t, M, w, o, T, B) {
+function x(t, w, M, o, T, B) {
   return e(), r(
     "div",
     {
       class: d(o.modifiers)
     },
     [
-      p(n("video", {
+      c(p("video", {
         ref: "videoRef",
         class: "nmorph-media-tile__video",
         src: o.props.src || void 0,
@@ -50,47 +53,48 @@ function x(t, M, w, o, T, B) {
         [_, o.hasVideo && !o.props.loading]
       ]),
       o.props.showFallback && (!o.hasVideo || o.props.loading) ? (e(), r("div", y, [
-        o.props.loading ? (e(), m(o.NmorphIcon, {
+        o.props.loading ? (e(), n(o.NmorphIcon, {
           key: 0,
           class: "nmorph-media-tile__loader",
           size: "large"
         }, {
-          default: l(() => [
+          default: s(() => [
             a(o.NmorphIconLoaderDots)
           ]),
           _: 1
           /* STABLE */
-        })) : o.props.avatarSrc ? (e(), m(o.NmorphAvatar, {
+        })) : o.props.avatarSrc ? (e(), n(o.NmorphAvatar, {
           key: 1,
           src: o.props.avatarSrc,
           name: o.props.name,
-          size: 72
+          size: 72,
+          design: "plain"
         }, null, 8, ["src", "name"])) : (e(), r(
           "div",
           k,
-          s(o.fallbackLabel),
+          l(o.fallbackLabel),
           1
           /* TEXT */
         )),
         o.props.name ? (e(), r(
           "span",
           N,
-          s(o.props.name),
+          l(o.props.name),
           1
           /* TEXT */
         )) : i("v-if", !0),
         o.props.error && o.props.errorText ? (e(), r(
           "span",
           b,
-          s(o.props.errorText),
+          l(o.props.errorText),
           1
           /* TEXT */
         )) : i("v-if", !0)
       ])) : i("v-if", !0),
-      n("div", I, [
+      o.props.showStatus ? (e(), r("div", I, [
         o.props.micMuted ? (e(), r("span", S, [
           a(o.NmorphIcon, { size: "small" }, {
-            default: l(() => [
+            default: s(() => [
               a(o.NmorphIconMic)
             ]),
             _: 1
@@ -99,7 +103,7 @@ function x(t, M, w, o, T, B) {
         ])) : i("v-if", !0),
         o.props.videoOff ? (e(), r("span", g, [
           a(o.NmorphIcon, { size: "small" }, {
-            default: l(() => [
+            default: s(() => [
               a(o.NmorphIconVideo)
             ]),
             _: 1
@@ -108,7 +112,7 @@ function x(t, M, w, o, T, B) {
         ])) : i("v-if", !0),
         o.props.screenSharing ? (e(), r("span", z, [
           a(o.NmorphIcon, { size: "small" }, {
-            default: l(() => [
+            default: s(() => [
               a(o.NmorphIconShare)
             ]),
             _: 1
@@ -117,21 +121,21 @@ function x(t, M, w, o, T, B) {
         ])) : i("v-if", !0),
         o.props.pinned ? (e(), r("span", V, [
           a(o.NmorphIcon, { size: "small" }, {
-            default: l(() => [
+            default: s(() => [
               a(o.NmorphIconPin)
             ]),
             _: 1
             /* STABLE */
           })
         ])) : i("v-if", !0)
-      ]),
+      ])) : i("v-if", !0),
       h(t.$slots, "overlay")
     ],
     2
     /* CLASS */
   );
 }
-const P = /* @__PURE__ */ f(c, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
+const P = /* @__PURE__ */ f(m, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
 export {
   P as default
 };

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue2.js

@@ -1,14 +1,14 @@
 import './NmorphMediaTile.css';
-import { defineComponent as u, ref as p, computed as o, watch as c } from "vue";
+import { defineComponent as d, ref as p, computed as o, watch as c } from "vue";
 import { useModifiers as m } from "../../../utils/create-modifiers.js";
 import h from "../../../assets/icons/share.svg.js";
 import y from "../../../assets/icons/pin.svg.js";
 import g from "../../../assets/icons/mic.svg.js";
 import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import v from "../nmorph-avatar/NmorphAvatar.vue.js";
-import B from "../../../assets/icons/video.svg.js";
+import B from "../nmorph-avatar/NmorphAvatar.vue.js";
+import v from "../../../assets/icons/video.svg.js";
 import N from "../../../assets/icons/loader.svg.js";
-const L = /* @__PURE__ */ u({
+const x = /* @__PURE__ */ d({
   __name: "NmorphMediaTile",
   props: {
     src: { type: String, required: !1, default: "" },
@@ -22,6 +22,7 @@ const L = /* @__PURE__ */ u({
     avatarSrc: { type: String, required: !1, default: "" },
     loading: { type: Boolean, required: !1, default: !1 },
     showFallback: { type: Boolean, required: !1, default: !0 },
+    showStatus: { type: Boolean, required: !1, default: !0 },
     micMuted: { type: Boolean, required: !1, default: !1 },
     videoOff: { type: Boolean, required: !1, default: !1 },
     screenSharing: { type: Boolean, required: !1, default: !1 },
@@ -33,7 +34,7 @@ const L = /* @__PURE__ */ u({
   },
   setup(l, { expose: i }) {
     const e = l, r = p(null), n = o(() => !!((e.src || e.srcObject) && !e.videoOff && !e.error)), t = o(
-      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((d) => d[0]?.toUpperCase()).join("")
+      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((u) => u[0]?.toUpperCase()).join("")
     ), f = o(() => t.value || e.name || "?"), s = o(
       () => m({
         "nmorph-media-tile": [
@@ -57,7 +58,7 @@ const L = /* @__PURE__ */ u({
       { immediate: !0, flush: "post" }
     ), i({ videoRef: r });
     const a = { props: e, videoRef: r, hasVideo: n, initials: t, fallbackLabel: f, modifiers: s, get NmorphAvatar() {
-      return v;
+      return B;
     }, get NmorphIcon() {
       return q;
     }, get NmorphIconLoaderDots() {
@@ -69,11 +70,11 @@ const L = /* @__PURE__ */ u({
     }, get NmorphIconShare() {
       return h;
     }, get NmorphIconVideo() {
-      return B;
+      return v;
     } };
     return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  L as default
+  x as default
 };

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.css

@@ -1 +1 @@
-.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-preview-portal-content-width);height:var(--nmorph-private-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__left,.nmorph-preview-portal .nmorph-preview-portal__right{z-index:2}.nmorph-preview-portal .nmorph-preview-portal__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-preview-portal .nmorph-preview-portal__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__actions{bottom:50px}.nmorph-preview-portal.nmorph-preview-portal--opened{--nmorph-private-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-private-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-private-preview-portal-btn-margin)}
+.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-preview-portal-content-width);height:var(--nmorph-private-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__control-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-contrast-text-color);background:transparent;border:0;box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content .nmorph-icon,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-preview-portal .nmorph-preview-portal__left,.nmorph-preview-portal .nmorph-preview-portal__right{z-index:2}.nmorph-preview-portal .nmorph-preview-portal__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-preview-portal .nmorph-preview-portal__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__actions{bottom:50px}.nmorph-preview-portal.nmorph-preview-portal--opened{--nmorph-private-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-private-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-private-preview-portal-btn-margin)}

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue.js

@@ -1,10 +1,10 @@
 import './NmorphPreviewPortal.css';
 import v from "./NmorphPreviewPortal.vue2.js";
-import { openBlock as t, createBlock as c, Teleport as f, createElementVNode as m, normalizeStyle as h, normalizeClass as n, createVNode as e, withCtx as l, renderSlot as d, createElementBlock as s, createCommentVNode as i } from "vue";
+import { openBlock as t, createBlock as c, Teleport as h, createElementVNode as m, normalizeStyle as f, normalizeClass as n, createVNode as e, withCtx as l, renderSlot as d, createElementBlock as a, createCommentVNode as i } from "vue";
 /* empty css                         */
 import w from "../../../_virtual/_plugin-vue_export-helper.js";
-function N(p, r, C, o, _, k) {
-  return o.props.show ? (t(), c(f, {
+function _(p, r, N, o, C, k) {
+  return o.props.show ? (t(), c(h, {
     key: 0,
     to: "body"
   }, [
@@ -12,15 +12,15 @@ function N(p, r, C, o, _, k) {
       "div",
       {
         class: n(o.rootClasses),
-        style: h(o.portalStyle)
+        style: f(o.portalStyle)
       },
       [
         e(o.NmorphOverlay, {
           show: o.props.show,
           "z-index": o.props.zIndex,
           "disabled-teleport": "",
-          onOnOutsideClick: r[2] || (r[2] = (a) => o.emit("close")),
-          onOnEscapeKeydown: r[3] || (r[3] = (a) => o.emit("close"))
+          onOnOutsideClick: r[2] || (r[2] = (s) => o.emit("close")),
+          onOnEscapeKeydown: r[3] || (r[3] = (s) => o.emit("close"))
         }, {
           default: l(() => [
             m(
@@ -34,7 +34,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             ),
-            o.props.showNavigation ? (t(), s(
+            o.props.showNavigation ? (t(), a(
               "div",
               {
                 key: 0,
@@ -42,8 +42,10 @@ function N(p, r, C, o, _, k) {
               },
               [
                 e(o.NmorphButton, {
+                  class: "nmorph-preview-portal__control-button",
                   design: "plain",
-                  onClick: r[0] || (r[0] = (a) => o.emit("previous"))
+                  borderless: "",
+                  onClick: r[0] || (r[0] = (s) => o.emit("previous"))
                 }, {
                   default: l(() => [
                     e(o.NmorphIcon, null, {
@@ -61,7 +63,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             )) : i("v-if", !0),
-            o.props.showNavigation ? (t(), s(
+            o.props.showNavigation ? (t(), a(
               "div",
               {
                 key: 1,
@@ -69,8 +71,10 @@ function N(p, r, C, o, _, k) {
               },
               [
                 e(o.NmorphButton, {
+                  class: "nmorph-preview-portal__control-button",
                   design: "plain",
-                  onClick: r[1] || (r[1] = (a) => o.emit("next"))
+                  borderless: "",
+                  onClick: r[1] || (r[1] = (s) => o.emit("next"))
                 }, {
                   default: l(() => [
                     e(o.NmorphIcon, null, {
@@ -88,7 +92,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             )) : i("v-if", !0),
-            o.props.showActionBar ? (t(), s(
+            o.props.showActionBar ? (t(), a(
               "div",
               {
                 key: 2,
@@ -110,7 +114,7 @@ function N(p, r, C, o, _, k) {
     )
   ])) : i("v-if", !0);
 }
-const z = /* @__PURE__ */ w(v, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue"]]);
+const B = /* @__PURE__ */ w(v, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue"]]);
 export {
-  z as default
+  B as default
 };

package/dist/components/form/nmorph-select-button/NmorphSelectButton.css

@@ -1 +1 @@
-.nmorph-select-button{--nmorph-private-select-button-track-padding: 4px;--nmorph-private-select-button-item-size: calc( var(--nmorph-private-control-height) - var(--nmorph-private-select-button-track-padding) * 2 );--nmorph-private-select-button-item-font-size: var(--nmorph-private-control-font-size);--nmorph-private-select-button-item-line-height: var(--nmorph-private-control-line-height);display:inline-flex;align-items:center;width:fit-content;padding:var(--nmorph-private-select-button-track-padding);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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);transition:background-color ease-in-out var(--transition-02),border-color ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}
+.nmorph-select-button{--nmorph-private-select-button-padding: max(3px, calc(var(--nmorph-private-control-height) * .1333));--nmorph-private-select-button-item-height: calc( var(--nmorph-private-control-height) - var(--nmorph-private-select-button-padding) * 2 );display:inline-flex;align-items:center;width:fit-content;padding:var(--nmorph-private-select-button-padding);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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);transition:background-color ease-in-out var(--transition-02),border-color ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}