@nmorph/nmorph-ui-kit 3.0.4 → 3.0.6

package/dist/components/data/nmorph-file-card/NmorphFileCard.css

@@ -1 +1 @@
-.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:var(--nmorph-private-file-card-height, auto);min-height:var(--nmorph-private-file-card-height, 64px);padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-file-card .nmorph-file-card__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border-radius:var(--default-border-radius);--nmorph-private-icon-color: currentColor}.nmorph-file-card .nmorph-file-card__icon-action{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__audio-preview,.nmorph-file-card .nmorph-file-card__video-preview,.nmorph-file-card .nmorph-file-card__image-preview{width:100%;min-width:0}.nmorph-file-card .nmorph-file-card__image-preview{display:block;height:var(--nmorph-private-file-card-media-height, 120px);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-file-card .nmorph-file-card__image-preview .nmorph-file-card__image{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}.nmorph-file-card .nmorph-file-card__badge{flex:0 0 auto;max-width:72px;padding:2px 6px;overflow:hidden;color:var(--nmorph-accent-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);white-space:nowrap;text-transform:uppercase;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__visual-size{position:absolute;right:var(--indentation-02);bottom:var(--indentation-02);z-index:2;display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - var(--indentation-04));min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-file-card .nmorph-file-card__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-file-card .nmorph-file-card__action-link,.nmorph-file-card .nmorph-file-card__action-loader{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:inherit;line-height:1;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-file-card .nmorph-file-card__action-link .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-file-card .nmorph-file-card__action-loader{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__action-loader .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-file-card.nmorph-file-card--custom-actions,.nmorph-file-card.nmorph-file-card--compact{position:relative;padding-inline-end:calc(var(--indentation-03) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--custom-actions .nmorph-file-card__actions,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{position:absolute;top:var(--indentation-03);right:var(--indentation-03);z-index:3}.nmorph-file-card.nmorph-file-card--compact{min-height:var(--nmorph-private-file-card-height, 52px);padding:var(--indentation-02);padding-inline-end:calc(var(--indentation-02) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__audio-preview,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__image-preview{height:var(--nmorph-private-file-card-media-height, 96px);margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{top:var(--indentation-02);right:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-visual{position:relative;display:block;gap:0;min-height:0;padding:0;padding-inline-end:0;overflow:hidden}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__body{position:relative;display:block;width:100%;min-width:0;height:100%}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__info{position:absolute;top:var(--indentation-02);left:var(--indentation-02);z-index:2;max-width:calc(100% - 48px);pointer-events:none}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__name{display:block;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:var(--nmorph-private-file-card-media-height, 100%);border-radius:inherit;object-fit:cover}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}
+.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:var(--nmorph-private-file-card-height, auto);min-height:var(--nmorph-private-file-card-height, 64px);padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-file-card .nmorph-file-card__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border-radius:var(--default-border-radius);--nmorph-private-icon-color: currentColor}.nmorph-file-card .nmorph-file-card__icon-action{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__audio-preview,.nmorph-file-card .nmorph-file-card__video-preview,.nmorph-file-card .nmorph-file-card__image-preview{width:100%;min-width:0}.nmorph-file-card .nmorph-file-card__image-preview{display:block;height:var(--nmorph-private-file-card-media-height, 120px);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-file-card .nmorph-file-card__image-preview .nmorph-file-card__image{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}.nmorph-file-card .nmorph-file-card__badge{flex:0 0 auto;max-width:72px;padding:2px 6px;overflow:hidden;color:var(--nmorph-accent-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);white-space:nowrap;text-transform:uppercase;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__visual-size{position:absolute;right:var(--indentation-02);bottom:var(--indentation-02);z-index:2;display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - var(--indentation-04));min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-file-card .nmorph-file-card__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-file-card .nmorph-file-card__action-link,.nmorph-file-card .nmorph-file-card__action-loader{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:inherit;line-height:1;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-file-card .nmorph-file-card__action-link .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-file-card .nmorph-file-card__action-loader{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__action-loader .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-file-card.nmorph-file-card--custom-actions,.nmorph-file-card.nmorph-file-card--compact{position:relative;padding-inline-end:calc(var(--indentation-03) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--custom-actions .nmorph-file-card__actions,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{position:absolute;top:var(--indentation-03);right:var(--indentation-03);z-index:3}.nmorph-file-card.nmorph-file-card--compact{min-height:var(--nmorph-private-file-card-height, 52px);padding:var(--indentation-02);padding-inline-end:calc(var(--indentation-02) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__audio-preview,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__image-preview{height:var(--nmorph-private-file-card-media-height, 96px);margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{top:var(--indentation-02);right:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--loading.nmorph-file-card--compact{padding:var(--indentation-03);padding-inline-end:calc(var(--indentation-03) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--loading.nmorph-file-card--compact .nmorph-file-card__actions{top:var(--indentation-03);right:var(--indentation-03)}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-visual{position:relative;display:block;gap:0;min-height:0;padding:0;padding-inline-end:0;overflow:hidden}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__body{position:relative;display:block;width:100%;min-width:0;height:100%}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__info{position:absolute;top:var(--indentation-02);left:var(--indentation-02);z-index:2;max-width:calc(100% - 48px);pointer-events:none}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__name{display:block;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:var(--nmorph-private-file-card-media-height, 100%);border-radius:inherit;object-fit:cover}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}

package/dist/components/data/nmorph-file-card/NmorphFileCard.vue2.js

@@ -10,10 +10,10 @@ import ee from "../nmorph-video-preview/NmorphVideoPreview.vue.js";
 import re from "../../../assets/icons/image.svg.js";
 import oe from "../../../assets/icons/archive.svg.js";
 import x from "../../../assets/icons/doc.svg.js";
-import te from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ae from "../../../assets/icons/audio.svg.js";
-import ie from "../../../assets/icons/video.svg.js";
-import ne from "../../../assets/icons/open.svg.js";
+import te from "../../../assets/icons/open.svg.js";
+import ae from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ie from "../../../assets/icons/audio.svg.js";
+import ne from "../../../assets/icons/video.svg.js";
 import le from "../../../assets/icons/loading.svg.js";
 import ue from "../../../assets/icons/eye.svg.js";
 import se from "../../../assets/icons/download.svg.js";
@@ -45,7 +45,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
   emits: ["open", "download", "error"],
   setup(C, { expose: M, emit: _ }) {
     M();
-    const e = C, l = _, h = E(), w = V(!1), s = r(() => (e.extension || Q(e.name) || U(e.mimeType)).toLowerCase()), t = r(() => X(e.mimeType, e.name)), O = r(() => e.mimeType.toLowerCase().startsWith("image/") || t.value.some((o) => n(o, k)) ? re : e.mimeType.toLowerCase().startsWith("audio/") || t.value.some((o) => n(o, G)) ? ae : e.mimeType.toLowerCase().startsWith("video/") || t.value.some((o) => n(o, W)) ? ie : t.value.some((o) => n(o, j)) ? oe : t.value.some((o) => n(o, K)) ? x : x), g = (o) => {
+    const e = C, l = _, h = E(), w = V(!1), s = r(() => (e.extension || Q(e.name) || U(e.mimeType)).toLowerCase()), t = r(() => X(e.mimeType, e.name)), O = r(() => e.mimeType.toLowerCase().startsWith("image/") || t.value.some((o) => n(o, k)) ? re : e.mimeType.toLowerCase().startsWith("audio/") || t.value.some((o) => n(o, G)) ? ie : e.mimeType.toLowerCase().startsWith("video/") || t.value.some((o) => n(o, W)) ? ne : t.value.some((o) => n(o, j)) ? oe : t.value.some((o) => n(o, K)) ? x : x), g = (o) => {
       if (o === void 0 || Number.isNaN(o) || o < 0) return "";
       if (o === 0) return "0 B";
       const b = ["B", "KB", "MB", "GB", "TB"], c = Math.min(Math.floor(Math.log(o) / Math.log(1024)), b.length - 1), v = o / 1024 ** c, z = v >= 10 || c === 0 || Number.isInteger(v) ? 0 : 1;
@@ -103,7 +103,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
     ), H = { CONTRAST_ICON_COLOR: de, props: e, emit: l, slots: h, previewOpen: w, extension: s, candidates: t, icon: O, formatSize: g, fileSize: y, typeLabel: N, meta: S, audioPreviewAvailable: d, videoPreviewAvailable: a, imagePreviewAvailable: i, mediaPreviewAvailable: u, visualMediaPreviewAvailable: m, mediaPreviewHeight: B, styles: L, showInfo: D, mediaGalleryItems: I, shouldOpenInternalPreview: q, isPdf: p, pdfPreviewHref: P, previewOnIcon: A, hasCustomActions: f, hasActions: T, modifiers: R, openHandler: () => {
       q.value && (w.value = !0), e.previewMode !== "none" && l("open");
     }, downloadHandler: () => l("download"), errorHandler: () => l("error"), get NmorphIcon() {
-      return te;
+      return ae;
     }, get NmorphIconDownload() {
       return se;
     }, get NmorphIconEye() {
@@ -111,7 +111,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
     }, get NmorphIconLoader() {
       return le;
     }, get NmorphIconOpen() {
-      return ne;
+      return te;
     }, NmorphAudioPreview: Y, NmorphMediaGallery: Z, NmorphVideoPreview: ee };
     return Object.defineProperty(H, "__isScriptSetup", { enumerable: !1, value: !0 }), H;
   }

package/dist/components/data/nmorph-image/NmorphImage.vue2.js

@@ -11,7 +11,7 @@ const C = /* @__PURE__ */ S({
     design: { type: null, required: !1, default: "nmorph" },
     loadingText: { type: String, required: !1, default: "" },
     loadFailedText: { type: String, required: !1, default: "" },
-    frameBorder: { type: Number, required: !1, default: 4 },
+    frameBorder: { type: Number, required: !1, default: 2.67 },
     src: { type: String, required: !1 },
     srcSet: { type: String, required: !1, default: "" },
     width: { type: [Number, String], required: !1, default: void 0 },

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.css

@@ -1 +1 @@
-.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-large-font-size);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);--nmorph-private-icon-color: currentColor}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-color)}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-color)}
+.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-large-font-size);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{color:var(--nmorph-text-color)}.nmorph-media-tile .nmorph-media-tile__status-item .nmorph-button__content{width:28px;min-width:28px;height:24px;min-height:24px;padding:0;color:currentColor;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-color:color-mix(in srgb,currentColor 35%,transparent);border-radius:var(--default-border-radius)}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-color)}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-color)}

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

@@ -1,141 +1,136 @@
 import './NmorphMediaTile.css';
-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";
+import s from "./NmorphMediaTile.vue2.js";
+import { openBlock as e, createElementBlock as i, normalizeClass as m, withDirectives as p, createElementVNode as c, vShow as _, createCommentVNode as a, createBlock as r, withCtx as l, createVNode as n, toDisplayString as t, renderSlot as h } from "vue";
 /* empty css                     */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["src", "muted", "autoplay", "playsinline"], y = {
-  key: 0,
+const v = ["src", "muted", "autoplay", "playsinline"], y = ["muted", "autoplay"], k = {
+  key: 1,
   class: "nmorph-media-tile__fallback"
-}, k = {
+}, b = {
   key: 2,
   class: "nmorph-media-tile__initials"
 }, N = {
   key: 3,
   class: "nmorph-media-tile__name"
-}, b = {
+}, u = {
   key: 4,
   class: "nmorph-media-tile__error-text"
-}, I = {
-  key: 1,
-  class: "nmorph-media-tile__status"
-}, S = {
-  key: 0,
-  class: "nmorph-media-tile__status-item",
-  "aria-label": "Microphone muted"
 }, g = {
-  key: 1,
-  class: "nmorph-media-tile__status-item",
-  "aria-label": "Video off"
-}, z = {
   key: 2,
-  class: "nmorph-media-tile__status-item",
-  "aria-label": "Screen sharing"
-}, V = {
-  key: 3,
-  class: "nmorph-media-tile__status-item",
-  "aria-label": "Pinned"
+  class: "nmorph-media-tile__status"
 };
-function x(t, w, M, o, T, B) {
-  return e(), r(
+function S(d, x, V, o, B, M) {
+  return e(), i(
     "div",
     {
-      class: d(o.modifiers)
+      class: m(o.modifiers)
     },
     [
-      c(p("video", {
+      p(c("video", {
         ref: "videoRef",
         class: "nmorph-media-tile__video",
-        src: o.props.src || void 0,
-        muted: o.props.muted,
+        src: o.videoSrc,
+        muted: o.videoMuted,
         autoplay: o.props.autoplay,
         playsinline: o.props.playsinline
       }, null, 8, v), [
-        [_, o.hasVideo && !o.props.loading]
+        [_, o.videoVisible && !o.props.loading]
       ]),
-      o.props.showFallback && (!o.hasVideo || o.props.loading) ? (e(), r("div", y, [
-        o.props.loading ? (e(), n(o.NmorphIcon, {
+      o.needsSeparateAudioOutput ? (e(), i("audio", {
+        key: 0,
+        ref: "audioRef",
+        class: "nmorph-media-tile__audio",
+        muted: o.props.muted,
+        autoplay: o.props.autoplay,
+        preload: "auto"
+      }, null, 8, y)) : a("v-if", !0),
+      o.props.showFallback && (!o.videoVisible || o.props.loading) ? (e(), i("div", k, [
+        o.props.loading ? (e(), r(o.NmorphIcon, {
           key: 0,
           class: "nmorph-media-tile__loader",
           size: "large"
         }, {
-          default: s(() => [
-            a(o.NmorphIconLoaderDots)
+          default: l(() => [
+            n(o.NmorphIconLoaderDots)
           ]),
           _: 1
           /* STABLE */
-        })) : o.props.avatarSrc ? (e(), n(o.NmorphAvatar, {
+        })) : o.props.avatarSrc ? (e(), r(o.NmorphAvatar, {
           key: 1,
           src: o.props.avatarSrc,
           name: o.props.name,
           size: 72,
           design: "plain"
-        }, null, 8, ["src", "name"])) : (e(), r(
+        }, null, 8, ["src", "name"])) : (e(), i(
           "div",
-          k,
-          l(o.fallbackLabel),
+          b,
+          t(o.fallbackLabel),
           1
           /* TEXT */
         )),
-        o.props.name ? (e(), r(
+        o.props.name ? (e(), i(
           "span",
           N,
-          l(o.props.name),
+          t(o.props.name),
           1
           /* TEXT */
-        )) : i("v-if", !0),
-        o.props.error && o.props.errorText ? (e(), r(
+        )) : a("v-if", !0),
+        o.props.error && o.props.errorText ? (e(), i(
           "span",
-          b,
-          l(o.props.errorText),
+          u,
+          t(o.props.errorText),
           1
           /* TEXT */
-        )) : i("v-if", !0)
-      ])) : i("v-if", !0),
-      o.props.showStatus ? (e(), r("div", I, [
-        o.props.micMuted ? (e(), r("span", S, [
-          a(o.NmorphIcon, { size: "small" }, {
-            default: s(() => [
-              a(o.NmorphIconMic)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ])) : i("v-if", !0),
-        o.props.videoOff ? (e(), r("span", g, [
-          a(o.NmorphIcon, { size: "small" }, {
-            default: s(() => [
-              a(o.NmorphIconVideo)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ])) : i("v-if", !0),
-        o.props.screenSharing ? (e(), r("span", z, [
-          a(o.NmorphIcon, { size: "small" }, {
-            default: s(() => [
-              a(o.NmorphIconShare)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ])) : i("v-if", !0),
-        o.props.pinned ? (e(), r("span", V, [
-          a(o.NmorphIcon, { size: "small" }, {
-            default: s(() => [
-              a(o.NmorphIconPin)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ])) : i("v-if", !0)
-      ])) : i("v-if", !0),
-      h(t.$slots, "overlay")
+        )) : a("v-if", !0)
+      ])) : a("v-if", !0),
+      o.props.showStatus ? (e(), i("div", g, [
+        o.props.micMuted ? (e(), r(o.NmorphButton, {
+          key: 0,
+          class: "nmorph-media-tile__status-item",
+          design: "plain",
+          tabindex: -1,
+          "aria-label": "Microphone muted"
+        }, {
+          "icon-only": l(() => [
+            n(o.NmorphIconMute)
+          ]),
+          _: 1
+          /* STABLE */
+        })) : a("v-if", !0),
+        o.props.videoOff ? (e(), r(o.NmorphButton, {
+          key: 1,
+          class: "nmorph-media-tile__status-item",
+          design: "plain",
+          tabindex: -1,
+          "aria-label": "Video off"
+        }, {
+          "icon-only": l(() => [
+            n(o.NmorphIconVideoCameraOff)
+          ]),
+          _: 1
+          /* STABLE */
+        })) : a("v-if", !0),
+        o.props.screenSharing ? (e(), r(o.NmorphButton, {
+          key: 2,
+          class: "nmorph-media-tile__status-item",
+          design: "plain",
+          tabindex: -1,
+          "aria-label": "Screen sharing"
+        }, {
+          "icon-only": l(() => [
+            n(o.NmorphIconShare)
+          ]),
+          _: 1
+          /* STABLE */
+        })) : a("v-if", !0)
+      ])) : a("v-if", !0),
+      h(d.$slots, "overlay")
     ],
     2
     /* CLASS */
   );
 }
-const P = /* @__PURE__ */ f(m, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
+const z = /* @__PURE__ */ f(s, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
 export {
-  P as default
+  z as default
 };

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

@@ -1,18 +1,19 @@
 import './NmorphMediaTile.css';
-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 B from "../nmorph-avatar/NmorphAvatar.vue.js";
-import v from "../../../assets/icons/video.svg.js";
-import N from "../../../assets/icons/loader.svg.js";
-const x = /* @__PURE__ */ d({
+import { defineComponent as E, ref as p, computed as t, watch as q } from "vue";
+import { useModifiers as L } from "../../../utils/create-modifiers.js";
+import M from "../../../assets/icons/video-camera-off.svg.js";
+import A from "../../../assets/icons/share.svg.js";
+import C from "../../../assets/icons/mute.svg.js";
+import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import w from "../../basic/nmorph-button/NmorphButton.vue.js";
+import D from "../nmorph-avatar/NmorphAvatar.vue.js";
+import R from "../../../assets/icons/loader.svg.js";
+const W = /* @__PURE__ */ E({
   __name: "NmorphMediaTile",
   props: {
     src: { type: String, required: !1, default: "" },
     srcObject: { type: null, required: !1, default: null },
+    sinkId: { type: String, required: !1, default: void 0 },
     fit: { type: String, required: !1, default: "cover" },
     mirrored: { type: Boolean, required: !1, default: !1 },
     muted: { type: Boolean, required: !1, default: !0 },
@@ -28,20 +29,30 @@ const x = /* @__PURE__ */ d({
     screenSharing: { type: Boolean, required: !1, default: !1 },
     speaking: { type: Boolean, required: !1, default: !1 },
     selected: { type: Boolean, required: !1, default: !1 },
-    pinned: { type: Boolean, required: !1, default: !1 },
     error: { type: Boolean, required: !1, default: !1 },
     errorText: { type: String, required: !1, default: "" }
   },
-  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((u) => u[0]?.toUpperCase()).join("")
-    ), f = o(() => t.value || e.name || "?"), s = o(
-      () => m({
+  setup(B, { expose: I }) {
+    const e = B, o = p(null), a = p(null), u = p({
+      audio: 0,
+      video: 0
+    }), v = t(() => !!(e.src || e.srcObject)), m = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), y = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
+      u.value = {
+        audio: m(r).length,
+        video: y(r).length
+      };
+    }, h = t(() => typeof e.srcObject?.getVideoTracks == "function"), g = t(() => u.value.audio > 0), k = t(() => u.value.video > 0), S = t(
+      () => !!(e.src || e.srcObject && (!h.value || k.value))
+    ), n = t(() => v.value && S.value && !e.videoOff && !e.error), i = t(
+      () => !!(e.srcObject && !e.muted && !e.error && g.value)
+    ), j = t(() => e.muted || i.value), N = t(() => n.value && e.src ? e.src : void 0), O = t(
+      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((r) => r[0]?.toUpperCase()).join("")
+    ), T = t(() => O.value || e.name || "?"), V = t(
+      () => L({
         "nmorph-media-tile": [
           e.fit,
           e.mirrored && "mirrored",
           e.selected && "selected",
-          e.pinned && "pinned",
           e.speaking && "speaking",
           e.error && "error",
           e.videoOff && "video-off",
@@ -49,32 +60,66 @@ const x = /* @__PURE__ */ d({
           e.loading && "loading"
         ]
       })
-    );
-    c(
-      () => [e.srcObject, r.value],
+    ), s = (r) => {
+      if (!r || e.sinkId === void 0) return;
+      const f = r;
+      typeof f.setSinkId == "function" && f.setSinkId(e.sinkId).catch(() => {
+      });
+    }, c = (r) => {
+      !r || !e.autoplay || r.play().catch(() => {
+      });
+    };
+    q(
+      () => e.srcObject,
+      (r, f, _) => {
+        if (d(r), !r || typeof r.addEventListener != "function" || typeof r.removeEventListener != "function")
+          return;
+        const l = () => d(r);
+        r.addEventListener("addtrack", l), r.addEventListener("removetrack", l), _(() => {
+          r.removeEventListener("addtrack", l), r.removeEventListener("removetrack", l);
+        });
+      },
+      { immediate: !0 }
+    ), q(
+      () => [
+        e.srcObject,
+        e.sinkId,
+        e.autoplay,
+        n.value,
+        i.value,
+        o.value,
+        a.value
+      ],
       () => {
-        r.value && r.value.srcObject !== e.srcObject && (r.value.srcObject = e.srcObject);
+        if (o.value) {
+          const r = n.value ? e.srcObject : null;
+          o.value.srcObject !== r && (o.value.srcObject = r), s(o.value), e.autoplay && n.value && r && c(o.value);
+        }
+        if (a.value) {
+          const r = i.value ? e.srcObject : null;
+          a.value.srcObject !== r && (a.value.srcObject = r), s(a.value), e.autoplay && i.value && c(a.value);
+        }
       },
       { immediate: !0, flush: "post" }
-    ), i({ videoRef: r });
-    const a = { props: e, videoRef: r, hasVideo: n, initials: t, fallbackLabel: f, modifiers: s, get NmorphAvatar() {
-      return B;
+    ), I({ videoRef: o });
+    const b = { props: e, videoRef: o, audioRef: a, srcObjectTrackCount: u, hasMediaSource: v, getAudioTracks: m, getVideoTracks: y, updateSrcObjectTrackCount: d, canInspectVideoTracks: h, hasAudioTracks: g, hasVideoTracks: k, hasVideoSource: S, videoVisible: n, needsSeparateAudioOutput: i, videoMuted: j, videoSrc: N, initials: O, fallbackLabel: T, modifiers: V, setMediaElementSinkId: s, playMediaElement: c, get NmorphAvatar() {
+      return D;
+    }, get NmorphButton() {
+      return w;
     }, get NmorphIcon() {
-      return q;
+      return x;
     }, get NmorphIconLoaderDots() {
-      return N;
-    }, get NmorphIconMic() {
-      return g;
-    }, get NmorphIconPin() {
-      return y;
+      return R;
+    }, get NmorphIconMute() {
+      return C;
     }, get NmorphIconShare() {
-      return h;
-    }, get NmorphIconVideo() {
-      return v;
+      return A;
+    }, get NmorphIconVideoCameraOff() {
+      return M;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(b, "__isScriptSetup", { enumerable: !1, value: !0 }), b;
   }
 });
 export {
-  x as default
+  W as default
 };