@nmorph/nmorph-ui-kit 3.0.16 → 3.0.18

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{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)}
+.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-white-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-white-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-white-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-white-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-text-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.vue.js

@@ -1,40 +1,37 @@
 import './NmorphVideoPreview.css';
 import s from "./NmorphVideoPreview.vue2.js";
-import { openBlock as r, createElementBlock as e, Fragment as t, createElementVNode as d, mergeProps as _, createCommentVNode as a, createVNode as n, withCtx as i, createBlock as l, toDisplayString as c, renderSlot as m, Teleport as v } from "vue";
+import { openBlock as e, createElementBlock as r, Fragment as t, createElementVNode as d, normalizeProps as _, guardReactiveProps as m, createCommentVNode as a, createVNode as n, withCtx as i, createBlock as l, toDisplayString as c, renderSlot as v, Teleport as h } from "vue";
 /* empty css                        */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["src", "poster", "controls", "muted", "playsinline", "preload"], w = ["aria-label"], f = {
+import w from "../../../_virtual/_plugin-vue_export-helper.js";
+const y = ["src", "poster", "controls", "muted", "playsinline", "preload"], f = ["aria-label"], k = {
   key: 2,
   class: "nmorph-video-preview__state"
-}, k = {
+}, N = {
   key: 2,
   class: "nmorph-video-preview__error"
-}, N = {
+}, b = {
   key: 3,
   class: "nmorph-video-preview__meta"
-}, b = {
+}, C = {
   key: 0,
   class: "nmorph-video-preview__name"
-}, C = {
+}, O = {
   key: 1,
   class: "nmorph-video-preview__duration"
-}, O = {
+}, I = {
   key: 4,
   class: "nmorph-video-preview__actions"
-}, I = ["aria-label"], P = ["aria-label"], g = ["href", "aria-label"], H = ["href", "download", "aria-label"], L = { class: "nmorph-video-preview__portal" }, V = { class: "nmorph-video-preview__portal-content" }, T = ["src", "poster", "muted", "playsinline", "preload"];
-function A(p, R, S, o, z, E) {
-  return r(), e(
+}, P = ["aria-label"], g = ["aria-label"], H = ["href", "aria-label"], L = ["href", "download", "aria-label"], V = { class: "nmorph-video-preview__portal" }, R = { class: "nmorph-video-preview__portal-content" }, T = ["src", "poster", "muted", "playsinline", "preload"];
+function z(p, A, E, o, S, x) {
+  return e(), r(
     t,
     null,
     [
       d(
         "div",
-        _(o.rootAttrs, {
-          class: o.rootClass,
-          style: o.rootStyle
-        }),
+        _(m(o.rootAttrs)),
         [
-          !o.props.loading && !o.props.error ? (r(), e("video", {
+          !o.props.loading && !o.props.error ? (e(), r("video", {
             key: 0,
             ref: "videoRef",
             class: "nmorph-video-preview__media",
@@ -54,7 +51,7 @@ function A(p, R, S, o, z, E) {
             onEnded: o.endedHandler,
             onError: o.errorHandler
           }, null, 40, y)) : a("v-if", !0),
-          o.showPlaybackControl ? (r(), e("button", {
+          o.showPlaybackControl ? (e(), r("button", {
             key: 1,
             class: "nmorph-video-preview__play",
             type: "button",
@@ -66,13 +63,13 @@ function A(p, R, S, o, z, E) {
               color: o.CONTRAST_ICON_COLOR
             }, {
               default: i(() => [
-                o.playing ? (r(), l(o.NmorphIconPause, { key: 0 })) : (r(), l(o.NmorphIconPlay, { key: 1 }))
+                o.playing ? (e(), l(o.NmorphIconPause, { key: 0 })) : (e(), l(o.NmorphIconPlay, { key: 1 }))
               ]),
               _: 1
               /* STABLE */
             })
-          ], 8, w)) : (r(), e("div", f, [
-            o.props.loading ? (r(), l(o.NmorphIcon, {
+          ], 8, f)) : (e(), r("div", k, [
+            o.props.loading ? (e(), l(o.NmorphIcon, {
               key: 0,
               size: "large"
             }, {
@@ -81,7 +78,7 @@ function A(p, R, S, o, z, E) {
               ]),
               _: 1
               /* STABLE */
-            })) : (r(), l(o.NmorphIcon, {
+            })) : (e(), l(o.NmorphIcon, {
               key: 1,
               size: "large"
             }, {
@@ -91,33 +88,33 @@ function A(p, R, S, o, z, E) {
               _: 1
               /* STABLE */
             })),
-            o.props.error && o.props.errorText ? (r(), e(
+            o.props.error && o.props.errorText ? (e(), r(
               "span",
-              k,
+              N,
               c(o.props.errorText),
               1
               /* TEXT */
             )) : a("v-if", !0)
           ])),
-          o.props.showMeta && (o.props.name || o.duration) ? (r(), e("div", N, [
-            o.props.name ? (r(), e(
+          o.props.showMeta && (o.props.name || o.duration) ? (e(), r("div", b, [
+            o.props.name ? (e(), r(
               "span",
-              b,
+              C,
               c(o.props.name),
               1
               /* TEXT */
             )) : a("v-if", !0),
-            o.duration ? (r(), e(
+            o.duration ? (e(), r(
               "span",
-              C,
+              O,
               c(o.duration),
               1
               /* TEXT */
             )) : a("v-if", !0)
           ])) : a("v-if", !0),
-          o.hasActions ? (r(), e("div", O, [
-            m(p.$slots, "actions", {}, () => [
-              o.props.showPreviewAction && o.mediaReady ? (r(), e("button", {
+          o.hasActions ? (e(), r("div", I, [
+            v(p.$slots, "actions", {}, () => [
+              o.props.showPreviewAction && o.mediaReady ? (e(), r("button", {
                 key: 0,
                 type: "button",
                 class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--preview",
@@ -134,8 +131,8 @@ function A(p, R, S, o, z, E) {
                   _: 1
                   /* STABLE */
                 })
-              ], 8, I)) : a("v-if", !0),
-              o.showFullscreenAction ? (r(), e("button", {
+              ], 8, P)) : a("v-if", !0),
+              o.showFullscreenAction ? (e(), r("button", {
                 key: 1,
                 type: "button",
                 class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--fullscreen",
@@ -152,8 +149,8 @@ function A(p, R, S, o, z, E) {
                   _: 1
                   /* STABLE */
                 })
-              ], 8, P)) : a("v-if", !0),
-              o.props.showDefaultActions && o.props.src ? (r(), e("a", {
+              ], 8, g)) : a("v-if", !0),
+              o.props.showDefaultActions && o.props.src ? (e(), r("a", {
                 key: 2,
                 href: o.props.src,
                 target: "_blank",
@@ -169,8 +166,8 @@ function A(p, R, S, o, z, E) {
                   _: 1
                   /* STABLE */
                 })
-              ], 8, g)) : a("v-if", !0),
-              o.props.downloadHref ? (r(), e("a", {
+              ], 8, H)) : a("v-if", !0),
+              o.props.downloadHref ? (e(), r("a", {
                 key: 3,
                 href: o.props.downloadHref,
                 download: o.props.name,
@@ -185,18 +182,18 @@ function A(p, R, S, o, z, E) {
                   _: 1
                   /* STABLE */
                 })
-              ], 8, H)) : a("v-if", !0)
+              ], 8, L)) : a("v-if", !0)
             ])
           ])) : a("v-if", !0)
         ],
         16
         /* FULL_PROPS */
       ),
-      o.previewOpen ? (r(), l(v, {
+      o.previewOpen ? (e(), l(h, {
         key: 0,
         to: "body"
       }, [
-        d("div", L, [
+        d("div", V, [
           n(o.NmorphOverlay, {
             show: o.previewOpen,
             "disabled-teleport": "",
@@ -204,7 +201,7 @@ function A(p, R, S, o, z, E) {
             onOnEscapeKeydown: o.closePreviewHandler
           }, {
             default: i(() => [
-              d("div", V, [
+              d("div", R, [
                 d("video", {
                   class: "nmorph-video-preview__portal-media",
                   src: o.props.src,
@@ -227,7 +224,7 @@ function A(p, R, S, o, z, E) {
     /* STABLE_FRAGMENT */
   );
 }
-const K = /* @__PURE__ */ h(s, [["render", A], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/data/nmorph-video-preview/NmorphVideoPreview.vue"]]);
+const M = /* @__PURE__ */ w(s, [["render", z], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/data/nmorph-video-preview/NmorphVideoPreview.vue"]]);
 export {
-  K as default
+  M as default
 };

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

@@ -1,18 +1,19 @@
 import './NmorphVideoPreview.css';
-import { defineComponent as U, useAttrs as G, useSlots as J, ref as f, 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";
-import ee from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import re from "../../../assets/icons/play.svg.js";
-import te from "../../../assets/icons/pause.svg.js";
-import oe from "../../../assets/icons/loading.svg.js";
-import ae from "../../../assets/icons/full-screen.svg.js";
-import ne from "../../../assets/icons/external-link.svg.js";
-import le from "../../../assets/icons/eye.svg.js";
-import se from "../../../assets/icons/download.svg.js";
-const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U({
+import { defineComponent as $, useSlots as j, ref as p, computed as t, watch as z } from "vue";
+import { useModifiers as U } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as G } from "../../../utils/common.js";
+import { useMergedAttrs as J } from "../../../utils/attrs.js";
+import K from "../../../assets/icons/video.svg.js";
+import Q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import X from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import Y from "../../../assets/icons/play.svg.js";
+import Z from "../../../assets/icons/pause.svg.js";
+import ee from "../../../assets/icons/loading.svg.js";
+import re from "../../../assets/icons/full-screen.svg.js";
+import te from "../../../assets/icons/external-link.svg.js";
+import oe from "../../../assets/icons/eye.svg.js";
+import ae from "../../../assets/icons/download.svg.js";
+const ne = "var(--nmorph-white-color)", m = 0.25, Ne = /* @__PURE__ */ $({
   inheritAttrs: !1,
   __name: "NmorphVideoPreview",
   props: {
@@ -44,15 +45,15 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
     previewMode: { type: String, required: !1, default: "internal" }
   },
   emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
-  setup(P, { expose: _, emit: A }) {
-    const e = P, n = A, u = G(), h = J(), l = f(null), p = f(!1), o = f(!1), s = f(!1), y = (r) => {
+  setup(B, { expose: P, emit: _ }) {
+    const e = B, n = _, v = j(), l = p(null), c = p(!1), o = p(!1), i = p(!1), h = (r) => {
       if (!r || r < 0) return "";
-      const a = Math.round(r / 1e3), i = Math.floor(a / 60), m = a % 60;
-      return `${i}:${m.toString().padStart(2, "0")}`;
-    }, H = t(() => y(e.durationMs)), d = t(() => !!e.src && !e.loading && !e.error), O = t(() => e.showPlaybackButton && d.value && s.value), E = t(
+      const a = Math.round(r / 1e3), s = Math.floor(a / 60), f = a % 60;
+      return `${s}:${f.toString().padStart(2, "0")}`;
+    }, A = t(() => h(e.durationMs)), u = t(() => !!e.src && !e.loading && !e.error), H = t(() => e.showPlaybackButton && u.value && i.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(() => !!h.actions || g.value || N.value), S = t(
-      () => Q({
+    ), y = t(() => e.showFullscreenAction && u.value && !e.controls), w = t(() => u.value && (e.showPreviewAction || y.value)), g = t(() => e.showDefaultActions && (e.src || e.downloadHref)), N = t(() => !!v.actions || w.value || g.value), q = t(
+      () => U({
         "nmorph-video-preview": [
           e.surface,
           e.embedded && "embedded",
@@ -62,28 +63,28 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
           e.loading && "loading",
           e.error && "error",
           o.value && "playing",
-          !q.value && "no-actions"
+          !N.value && "no-actions"
         ]
       })
-    ), b = t(
-      () => X({
+    ), S = t(
+      () => G({
         "--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
       })
-    ), F = t(() => Object.fromEntries(Object.entries(u).filter(([r]) => r !== "class" && r !== "style"))), k = t(() => [S.value, u.class]), x = t(() => [b.value, u.style]);
-    K(
+    ), E = J(q, S);
+    z(
       () => [e.src, e.loading, e.error],
       () => {
-        o.value = !1, s.value = !1;
+        o.value = !1, i.value = !1;
       }
     );
-    const C = () => n("open"), D = () => n("download"), L = () => {
-      e.previewMode === "internal" && (p.value = !0), n("preview");
-    }, M = () => {
-      p.value = !1;
-    }, V = async () => {
+    const O = () => n("open"), k = () => n("download"), M = () => {
+      e.previewMode === "internal" && (c.value = !0), n("preview");
+    }, D = () => {
+      c.value = !1;
+    }, L = async () => {
       const r = l.value;
       if (r) {
         n("fullscreen");
@@ -97,8 +98,8 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
         } catch {
         }
       }
-    }, R = async () => {
-      if (!(!l.value || e.loading || e.error || !s.value)) {
+    }, x = async () => {
+      if (!(!l.value || e.loading || e.error || !i.value)) {
         if (o.value) {
           l.value.pause();
           return;
@@ -109,53 +110,53 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
           o.value = !1;
         }
       }
-    }, I = (r) => {
+    }, b = (r) => {
       const a = r.duration;
       if (!Number.isFinite(a) || a <= 0) return !1;
-      const i = r.buffered, m = Math.max(0, a - v);
-      for (let c = 0; c < i.length; c += 1)
+      const s = r.buffered, f = Math.max(0, a - m);
+      for (let d = 0; d < s.length; d += 1)
         try {
-          if (i.start(c) <= v && i.end(c) >= m) return !0;
+          if (s.start(d) <= m && s.end(d) >= f) return !0;
         } catch {
           return !1;
         }
       return !1;
-    }, j = () => {
-      s.value = l.value ? I(l.value) : !1;
-    }, T = (r) => {
+    }, C = () => {
+      i.value = l.value ? b(l.value) : !1;
+    }, V = (r) => {
       o.value = !0, n("play", r);
-    }, W = (r) => {
+    }, R = (r) => {
       o.value = !1, n("pause", r);
-    }, $ = () => {
+    }, T = () => {
       o.value = !1;
-    }, z = (r) => {
-      o.value = !1, s.value = !1, n("error", r);
+    }, W = (r) => {
+      o.value = !1, i.value = !1, n("error", r);
     };
-    _({ videoRef: l });
-    const B = { CONTRAST_ICON_COLOR: ie, VIDEO_BUFFER_EPSILON_SECONDS: v, props: e, emit: n, attrs: u, slots: h, videoRef: l, previewOpen: p, playing: o, videoLoaded: s, formatDuration: y, duration: H, mediaReady: d, showPlaybackControl: O, resolvedPreload: E, showFullscreenAction: w, hasPreviewActions: g, hasDefaultActions: N, hasActions: q, modifiers: S, styles: b, rootAttrs: F, rootClass: k, rootStyle: x, openHandler: C, downloadHandler: D, previewHandler: L, closePreviewHandler: M, fullscreenHandler: V, togglePlayback: R, isVideoFullyBuffered: I, updateVideoLoaded: j, playHandler: T, pauseHandler: W, endedHandler: $, errorHandler: z, get NmorphIcon() {
-      return ee;
+    P({ videoRef: l });
+    const I = { CONTRAST_ICON_COLOR: ne, VIDEO_BUFFER_EPSILON_SECONDS: m, props: e, emit: n, slots: v, videoRef: l, previewOpen: c, playing: o, videoLoaded: i, formatDuration: h, duration: A, mediaReady: u, showPlaybackControl: H, resolvedPreload: F, showFullscreenAction: y, hasPreviewActions: w, hasDefaultActions: g, hasActions: N, modifiers: q, styles: S, rootAttrs: E, openHandler: O, downloadHandler: k, previewHandler: M, closePreviewHandler: D, fullscreenHandler: L, togglePlayback: x, isVideoFullyBuffered: b, updateVideoLoaded: C, playHandler: V, pauseHandler: R, endedHandler: T, errorHandler: W, get NmorphIcon() {
+      return X;
     }, get NmorphIconDownload() {
-      return se;
+      return ae;
     }, get NmorphIconEye() {
-      return le;
+      return oe;
     }, get NmorphIconExternalLink() {
-      return ne;
+      return te;
     }, get NmorphIconFullScreen() {
-      return ae;
+      return re;
     }, get NmorphIconLoader() {
-      return oe;
+      return ee;
     }, get NmorphOverlay() {
-      return Z;
+      return Q;
     }, get NmorphIconPause() {
-      return te;
+      return Z;
     }, get NmorphIconPlay() {
-      return re;
-    }, get NmorphIconVideo() {
       return Y;
+    }, get NmorphIconVideo() {
+      return K;
     } };
-    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
+    return Object.defineProperty(I, "__isScriptSetup", { enumerable: !1, value: !0 }), I;
   }
 });
 export {
-  Se as default
+  Ne as default
 };

package/dist/components/feedback/nmorph-alert/NmorphAlert.css

@@ -1 +1 @@
-.nmorph-alert{--nmorph-private-alert-background-color: var(--nmorph-overlay-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--nmorph-private-alert-background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-white-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{font-weight:var(--nmorph-typography-title-small-font-weight);font-size:var(--nmorph-typography-title-small-font-size);line-height:1;line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{align-self:var(--nmorph-private-alert-close-align);margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-alert .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}
+.nmorph-alert{--nmorph-private-alert-background-color: var(--nmorph-info-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--nmorph-private-alert-background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-contrast-text-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{font-weight:var(--nmorph-typography-title-small-font-weight);font-size:var(--nmorph-typography-title-small-font-size);line-height:1;line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;align-self:var(--nmorph-private-alert-close-align);width:28px;height:28px;margin-right:-7px;margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-alert.nmorph-alert--success{--nmorph-private-alert-background-color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-success-text-color)}.nmorph-alert.nmorph-alert--error{--nmorph-private-alert-background-color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-error-text-color)}.nmorph-alert.nmorph-alert--warning{--nmorph-private-alert-background-color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-warn-text-color)}.nmorph-alert.nmorph-alert--info{--nmorph-private-alert-background-color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-info-text-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}

package/dist/components/feedback/nmorph-callout/NmorphCallout.css

@@ -1 +1 @@
-.nmorph-callout{--nmorph-private-callout-color: var(--nmorph-accent-color);--nmorph-private-callout-padding: var(--indentation-03) var(--indentation-04);--nmorph-private-callout-border-radius: var(--default-border-radius);--nmorph-private-callout-accent-width: var(--indentation-02);--nmorph-private-callout-title-gap: var(--indentation-03);--nmorph-private-callout-title-font-size: var(--nmorph-typography-title-small-font-size);--nmorph-private-callout-content-font-size: var(--nmorph-typography-body-small-font-size);position:relative;display:block;padding:var(--nmorph-private-callout-padding);overflow:hidden;color:inherit;text-decoration:none;border-radius:var(--nmorph-private-callout-border-radius)}.nmorph-callout:before{position:absolute;top:0;left:0;width:var(--nmorph-private-callout-accent-width);height:100%;background:var(--nmorph-private-callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-private-callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--nmorph-private-callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--nmorph-private-callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--nmorph-private-callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:var(--nmorph-private-callout-title-gap);font-weight:var(--nmorph-typography-title-small-font-weight);font-size:var(--nmorph-private-callout-title-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-private-callout-content-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:pre-wrap}
+.nmorph-callout{--nmorph-private-callout-accent-color: var(--nmorph-info-text-color);--nmorph-private-callout-background-color: var(--nmorph-info-color);--nmorph-private-callout-padding: var(--indentation-03) var(--indentation-04);--nmorph-private-callout-border-radius: var(--default-border-radius);--nmorph-private-callout-accent-width: var(--indentation-02);--nmorph-private-callout-title-gap: var(--indentation-03);--nmorph-private-callout-title-font-size: var(--nmorph-typography-title-small-font-size);--nmorph-private-callout-content-font-size: var(--nmorph-typography-body-small-font-size);position:relative;display:block;padding:var(--nmorph-private-callout-padding);overflow:hidden;color:var(--nmorph-contrast-text-color);text-decoration:none;background:var(--nmorph-private-callout-background-color);border-radius:var(--nmorph-private-callout-border-radius)}.nmorph-callout:before{position:absolute;top:0;left:0;width:var(--nmorph-private-callout-accent-width);height:100%;background:var(--nmorph-private-callout-accent-color);content:""}.nmorph-callout.nmorph-callout--warning{--nmorph-private-callout-accent-color: var(--nmorph-warn-text-color);--nmorph-private-callout-background-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--nmorph-private-callout-accent-color: var(--nmorph-success-text-color);--nmorph-private-callout-background-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--nmorph-private-callout-accent-color: var(--nmorph-error-text-color);--nmorph-private-callout-background-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:var(--nmorph-private-callout-title-gap);font-weight:var(--nmorph-typography-title-small-font-weight);font-size:var(--nmorph-private-callout-title-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-private-callout-content-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:pre-wrap}

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue.js

@@ -1,45 +1,48 @@
 import './NmorphCallout.css';
-import n from "./NmorphCallout.vue2.js";
-import { openBlock as t, createBlock as s, resolveDynamicComponent as a, mergeProps as c, withCtx as m, createElementBlock as r, renderSlot as l, createTextVNode as p, toDisplayString as i, createCommentVNode as _ } from "vue";
+import l from "./NmorphCallout.vue2.js";
+import { openBlock as e, createBlock as a, resolveDynamicComponent as s, normalizeProps as c, guardReactiveProps as i, withCtx as m, createElementBlock as r, renderSlot as n, createTextVNode as p, toDisplayString as _, createCommentVNode as d } from "vue";
 /* empty css                   */
 import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const d = {
+const f = {
   key: 0,
   class: "nmorph-callout__title"
-}, f = {
+}, u = {
   key: 1,
   class: "nmorph-callout__content"
-}, u = ["innerHTML"];
-function y(e, k, v, o, C, N) {
-  return t(), s(a(o.props.as), c({
-    class: ["nmorph-callout", `nmorph-callout--${o.props.type}`],
-    style: o.styles
-  }, o.rootAttrs), {
-    default: m(() => [
-      o.hasHeader ? (t(), r("div", d, [
-        l(e.$slots, "header", {}, () => [
-          l(e.$slots, "title", {}, () => [
-            p(
-              i(o.props.title),
-              1
-              /* TEXT */
-            )
+}, k = ["innerHTML"];
+function v(t, y, C, o, N, B) {
+  return e(), a(
+    s(o.props.as),
+    c(i(o.rootAttrs)),
+    {
+      default: m(() => [
+        o.hasHeader ? (e(), r("div", f, [
+          n(t.$slots, "header", {}, () => [
+            n(t.$slots, "title", {}, () => [
+              p(
+                _(o.props.title),
+                1
+                /* TEXT */
+              )
+            ])
           ])
-        ])
-      ])) : _("v-if", !0),
-      o.hasDefaultContent ? (t(), r("div", f, [
-        l(e.$slots, "default")
-      ])) : (t(), r("div", {
-        key: 2,
-        class: "nmorph-callout__content",
-        innerHTML: o.props.content
-      }, null, 8, u))
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 16, ["class", "style"]);
+        ])) : d("v-if", !0),
+        o.hasDefaultContent ? (e(), r("div", u, [
+          n(t.$slots, "default")
+        ])) : (e(), r("div", {
+          key: 2,
+          class: "nmorph-callout__content",
+          innerHTML: o.props.content
+        }, null, 8, k))
+      ]),
+      _: 3
+      /* FORWARDED */
+    },
+    16
+    /* FULL_PROPS */
+  );
 }
-const b = /* @__PURE__ */ h(n, [["render", y], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
+const g = /* @__PURE__ */ h(l, [["render", v], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
 export {
-  b as default
+  g as default
 };

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js

@@ -1,7 +1,9 @@
 import './NmorphCallout.css';
-import { defineComponent as f, useSlots as c, computed as t } from "vue";
-import { createCssVariables as g, createCssSizeVariables as y } from "../../../utils/common.js";
-const S = /* @__PURE__ */ f({
+import { defineComponent as g, useSlots as m, computed as t } from "vue";
+import { createCssVariables as y, createCssSizeVariables as v } from "../../../utils/common.js";
+import { useMergedAttrs as h } from "../../../utils/attrs.js";
+const _ = /* @__PURE__ */ g({
+  inheritAttrs: !1,
   __name: "NmorphCallout",
   props: {
     type: { type: String, required: !1, default: "info" },
@@ -15,7 +17,7 @@ const S = /* @__PURE__ */ f({
     referrerPolicy: { type: String, required: !1, default: void 0 },
     download: { type: [String, Boolean], required: !1, default: void 0 },
     ariaLabel: { type: String, required: !1, default: void 0 },
-    color: { type: String, required: !1, default: void 0 },
+    color: { type: String, required: !1 },
     padding: { type: [Number, String], required: !1, default: "var(--indentation-03) var(--indentation-04)" },
     borderRadius: { type: [Number, String], required: !1, default: "var(--default-border-radius)" },
     accentWidth: { type: [Number, String], required: !1, default: "var(--indentation-02)" },
@@ -23,15 +25,15 @@ const S = /* @__PURE__ */ f({
     titleFontSize: { type: [Number, String], required: !1, default: "var(--nmorph-typography-title-small-font-size)" },
     contentFontSize: { type: [Number, String], required: !1, default: "var(--nmorph-typography-body-small-font-size)" }
   },
-  setup(o, { expose: n }) {
-    n();
+  setup(u, { expose: s }) {
+    s();
     const a = {
       self: "_self",
       blank: "_blank",
       parent: "_parent",
       top: "_top"
-    }, e = o, r = c(), d = t(() => ({
-      ...y({
+    }, e = u, r = m(), o = t(() => ({
+      ...v({
         "--nmorph-private-callout-padding": e.padding,
         "--nmorph-private-callout-border-radius": e.borderRadius,
         "--nmorph-private-callout-accent-width": e.accentWidth,
@@ -39,23 +41,30 @@ const S = /* @__PURE__ */ f({
         "--nmorph-private-callout-title-font-size": e.titleFontSize,
         "--nmorph-private-callout-content-font-size": e.contentFontSize
       }),
-      ...g({
-        "--nmorph-private-callout-color": e.color
+      ...y({
+        "--nmorph-private-callout-accent-color": e.color,
+        "--nmorph-private-callout-background-color": e.color
       })
-    })), i = t(() => {
+    })), l = t(() => {
       if (e.target)
         return e.target in a ? a[e.target] : e.target;
-    }), u = t(() => e.as !== "a" ? {} : {
+    }), i = t(() => e.as !== "a" ? {} : {
       href: e.href,
-      target: i.value,
+      target: l.value,
       rel: e.rel,
       referrerpolicy: e.referrerpolicy ?? e.referrerPolicy,
       download: e.download === !0 ? "" : e.download === !1 ? void 0 : e.download,
       "aria-label": e.ariaLabel
-    }), p = t(() => !!(r.header || r.title || e.title)), s = t(() => !!r.default), l = { targetMap: a, props: e, slots: r, styles: d, resolvedTarget: i, rootAttrs: u, hasHeader: p, hasDefaultContent: s };
-    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+    }), n = h(
+      t(() => ["nmorph-callout", `nmorph-callout--${e.type}`]),
+      o
+    ), p = t(() => ({
+      ...n.value,
+      ...i.value
+    })), f = t(() => !!(r.header || r.title || e.title)), c = t(() => !!r.default), d = { targetMap: a, props: e, slots: r, styles: o, resolvedTarget: l, linkAttrs: i, mergedAttrs: n, rootAttrs: p, hasHeader: f, hasDefaultContent: c };
+    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {
-  S as default
+  _ as default
 };