@nmorph/nmorph-ui-kit 3.0.7 → 3.0.8

package/dist/components/basic/nmorph-icon/NmorphIcon.css

@@ -1 +1 @@
-.nmorph-icon,.nmorph-icon .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--nmorph-private-icon-color)}.nmorph-icon path[stroke],.nmorph-icon path[stroke-width],.nmorph-icon path[fill=none],.nmorph-icon rect[stroke],.nmorph-icon rect[stroke-width],.nmorph-icon rect[fill=none],.nmorph-icon line[stroke],.nmorph-icon line[stroke-width],.nmorph-icon polyline[stroke],.nmorph-icon polyline[stroke-width],.nmorph-icon polygon[stroke],.nmorph-icon polygon[stroke-width]{stroke:var(--nmorph-private-icon-color)}.nmorph-icon.nmorph-icon--small{--nmorph-private-icon-width: 14px;--nmorph-private-icon-height: 14px}.nmorph-icon.nmorph-icon--medium{--nmorph-private-icon-width: 20px;--nmorph-private-icon-height: 20px}.nmorph-icon.nmorph-icon--large{--nmorph-private-icon-width: 32px;--nmorph-private-icon-height: 32px}.nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color)}
+.nmorph-icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height);color:var(--nmorph-private-icon-color)}.nmorph-icon .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--nmorph-private-icon-color)}.nmorph-icon svg,.nmorph-icon svg *{color:var(--nmorph-private-icon-color)}.nmorph-icon path[stroke],.nmorph-icon path[stroke-width],.nmorph-icon path[fill=none],.nmorph-icon rect[stroke],.nmorph-icon rect[stroke-width],.nmorph-icon rect[fill=none],.nmorph-icon line[stroke],.nmorph-icon line[stroke-width],.nmorph-icon polyline[stroke],.nmorph-icon polyline[stroke-width],.nmorph-icon polygon[stroke],.nmorph-icon polygon[stroke-width]{stroke:var(--nmorph-private-icon-color)}.nmorph-icon.nmorph-icon--small{--nmorph-private-icon-width: 14px;--nmorph-private-icon-height: 14px}.nmorph-icon.nmorph-icon--medium{--nmorph-private-icon-width: 20px;--nmorph-private-icon-height: 20px}.nmorph-icon.nmorph-icon--large{--nmorph-private-icon-width: 32px;--nmorph-private-icon-height: 32px}.nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color)}

package/dist/components/data/nmorph-carousel/NmorphCarousel.css

@@ -1 +1 @@
-.nmorph-carousel{--nmorph-private-carousel-height: 500px;--nmorph-private-carousel-frame-border: 10px;--nmorph-private-carousel-action-size: 36px;--nmorph-private-carousel-action-offset: var(--indentation-02);position:relative;box-sizing:border-box;height:var(--nmorph-private-carousel-height);overflow:hidden;border-radius:var(--default-border-radius)}.nmorph-carousel .nmorph-carousel__wrapper{display:flex;height:100%}.nmorph-carousel .transition-enabled{transition:transform .4s ease}.nmorph-carousel .nmorph-carousel__element-indicator-wrapper{padding:4px;cursor:pointer}.nmorph-carousel .nmorph-carousel__elements-indicator{position:absolute;bottom:16px;display:flex;justify-content:center;width:100%}.nmorph-carousel .nmorph-carousel__element-indicator{width:30px;height:2px;margin-right:var(--indentation-02);background:var(--nmorph-gray-color)}.nmorph-carousel .nmorph-carousel__element-indicator--active{background:var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__action-btn{position:absolute;top:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--nmorph-private-carousel-action-size);height:var(--nmorph-private-carousel-action-size);padding:0;background:var(--nmorph-info-color);border-radius:var(--default-border-radius);transform:translateY(-50%);cursor:pointer}.nmorph-carousel .nmorph-carousel__action-btn:hover{background:var(--nmorph-info-color)}.nmorph-carousel .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__prev{right:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__next{left:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__item{flex-shrink:0;width:100%;height:100%}.nmorph-carousel--nmorph{background:var(--nmorph-main-color);border:var(--nmorph-private-carousel-frame-border) solid var(--nmorph-main-color)}.nmorph-carousel--plain{background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn{color:var(--nmorph-text-color);background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-carousel--plain .nmorph-carousel__action-btn:hover{color:var(--nmorph-accent-color);background:var(--nmorph-main-color);border-color:var(--nmorph-accent-color)}
+.nmorph-carousel{--nmorph-private-carousel-height: 500px;--nmorph-private-carousel-frame-border: 10px;--nmorph-private-carousel-action-size: 36px;--nmorph-private-carousel-action-offset: var(--indentation-02);position:relative;box-sizing:border-box;height:var(--nmorph-private-carousel-height);overflow:hidden;border-radius:var(--default-border-radius)}.nmorph-carousel .nmorph-carousel__wrapper{display:flex;height:100%}.nmorph-carousel .transition-enabled{transition:transform .4s ease}.nmorph-carousel .nmorph-carousel__element-indicator-wrapper{padding:4px;cursor:pointer}.nmorph-carousel .nmorph-carousel__elements-indicator{position:absolute;bottom:16px;display:flex;justify-content:center;width:100%}.nmorph-carousel .nmorph-carousel__element-indicator{width:30px;height:2px;margin-right:var(--indentation-02);background:var(--nmorph-gray-color)}.nmorph-carousel .nmorph-carousel__element-indicator--active{background:var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__action-btn{position:absolute;top:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--nmorph-private-carousel-action-size);height:var(--nmorph-private-carousel-action-size);padding:0;background:var(--nmorph-info-color);border-radius:var(--default-border-radius);transform:translateY(-50%);cursor:pointer}.nmorph-carousel .nmorph-carousel__action-btn:hover{background:var(--nmorph-info-color)}.nmorph-carousel .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__prev{left:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__next{right:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__item{flex-shrink:0;width:100%;height:100%}.nmorph-carousel--nmorph{background:var(--nmorph-main-color);border:var(--nmorph-private-carousel-frame-border) solid var(--nmorph-main-color)}.nmorph-carousel--plain{background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn{color:var(--nmorph-text-color);background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-carousel--plain .nmorph-carousel__action-btn:hover{color:var(--nmorph-accent-color);background:var(--nmorph-main-color);border-color:var(--nmorph-accent-color)}

package/dist/components/data/nmorph-carousel/NmorphCarousel.vue.js

@@ -1,51 +1,53 @@
 import './NmorphCarousel.css';
-import d from "./NmorphCarousel.vue2.js";
-import { openBlock as e, createElementBlock as o, normalizeClass as c, createElementVNode as n, normalizeStyle as h, Fragment as i, renderList as s, createVNode as l, withCtx as m, renderSlot as p } from "vue";
+import _ from "./NmorphCarousel.vue2.js";
+import { openBlock as e, createElementBlock as o, normalizeClass as i, createElementVNode as n, normalizeStyle as h, Fragment as c, renderList as s, createVNode as l, withCtx as m, renderSlot as p } from "vue";
 /* empty css                    */
 import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["id"], f = { class: "nmorph-carousel__elements-indicator" }, C = ["onClick"];
-function k(_, N, I, r, b, y) {
+const f = ["id"], v = { class: "nmorph-carousel__elements-indicator" }, C = ["onClick"];
+function k(d, N, b, r, y, I) {
   return e(), o(
     "div",
     {
-      class: c(r.modifiers)
+      class: i(r.modifiers)
     },
     [
       n(
         "div",
         {
-          class: "nmorph-carousel__wrapper transition-enabled",
-          style: h({ transform: r.translateX })
+          ref: "wrapperRef",
+          class: i(["nmorph-carousel__wrapper", { "transition-enabled": r.transitionEnabled }]),
+          style: h({ transform: r.translateX }),
+          onTransitionend: r.wrapperTransitionEndHandler
         },
         [
           (e(!0), o(
-            i,
+            c,
             null,
-            s(r.carouselData, (a) => (e(), o("div", {
-              id: `nmorph-carousel-item-${r.carouselId}-${a}`,
-              key: a,
+            s(r.renderedCarouselItems, (a) => (e(), o("div", {
+              id: a.id,
+              key: a.key,
               class: "nmorph-carousel__item"
-            }, null, 8, v))),
+            }, null, 8, f))),
             128
             /* KEYED_FRAGMENT */
           ))
         ],
-        4
-        /* STYLE */
+        38
+        /* CLASS, STYLE, NEED_HYDRATION */
       ),
-      n("div", f, [
+      n("div", v, [
         (e(!0), o(
-          i,
+          c,
           null,
           s(r.carouselData, (a, t) => (e(), o("div", {
             key: t,
             class: "nmorph-carousel__element-indicator-wrapper",
-            onClick: (S) => r.elementIndicator(t)
+            onClick: (w) => r.elementIndicator(t)
           }, [
             n(
               "div",
               {
-                class: c(["nmorph-carousel__element-indicator", { "nmorph-carousel__element-indicator--active": r.isCurrentElementActive(t) }])
+                class: i(["nmorph-carousel__element-indicator", { "nmorph-carousel__element-indicator--active": r.isCurrentElementActive(t) }])
               },
               null,
               2
@@ -58,11 +60,11 @@ function k(_, N, I, r, b, y) {
       ]),
       n("div", {
         class: "nmorph-carousel__action-btn nmorph-carousel__prev",
-        onClick: r.nextSlide
+        onClick: r.prevSlide
       }, [
         l(r.NmorphIcon, null, {
           default: m(() => [
-            l(r.NmorphIconChevronRight)
+            l(r.NmorphIconChevronLeft)
           ]),
           _: 1
           /* STABLE */
@@ -70,23 +72,23 @@ function k(_, N, I, r, b, y) {
       ]),
       n("div", {
         class: "nmorph-carousel__action-btn nmorph-carousel__next",
-        onClick: r.prevSlide
+        onClick: r.nextSlide
       }, [
         l(r.NmorphIcon, null, {
           default: m(() => [
-            l(r.NmorphIconChevronLeft)
+            l(r.NmorphIconChevronRight)
           ]),
           _: 1
           /* STABLE */
         })
       ]),
-      p(_.$slots, "default")
+      p(d.$slots, "default")
     ],
     2
     /* CLASS */
   );
 }
-const z = /* @__PURE__ */ u(d, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-carousel/NmorphCarousel.vue"]]);
+const z = /* @__PURE__ */ u(_, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-carousel/NmorphCarousel.vue"]]);
 export {
   z as default
 };

package/dist/components/data/nmorph-carousel/NmorphCarousel.vue2.js

@@ -1,47 +1,97 @@
 import './NmorphCarousel.css';
-import { defineComponent as x, ref as p, computed as u, provide as M, watch as d } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { generateUUID as b } from "../../../utils/common.js";
-import q from "../../../assets/icons/chevron-right.svg.js";
-import w from "../../../assets/icons/chevron-left.svg.js";
-import D from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const A = /* @__PURE__ */ x({
+import { defineComponent as j, ref as i, computed as m, provide as F, watch as y, nextTick as U } from "vue";
+import { useModifiers as X } from "../../../utils/create-modifiers.js";
+import { generateUUID as z } from "../../../utils/common.js";
+import B from "../../../assets/icons/chevron-right.svg.js";
+import H from "../../../assets/icons/chevron-left.svg.js";
+import J from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const V = /* @__PURE__ */ j({
   __name: "NmorphCarousel",
   props: {
     design: { type: null, required: !1, default: "nmorph" },
     loop: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["change"],
-  setup(h, { expose: f, emit: v }) {
-    f();
-    const e = p(0), o = h, l = v, g = u(
-      () => y({
-        nmorph: [o.design === "nmorph" ? "shadow-outset" : ""],
-        "nmorph-carousel": [o.design]
+  setup(N, { expose: $, emit: b }) {
+    $();
+    const r = i(0), a = i(0), c = i(!0), o = i(null), C = i(null), l = N, S = b, w = m(
+      () => X({
+        nmorph: [l.design === "nmorph" ? "shadow-outset" : ""],
+        "nmorph-carousel": [l.design]
       })
-    ), a = p([]), s = b();
-    M("carousel-data", { data: a, carouselId: s });
-    const r = u(() => a.value.length), i = (t) => r.value ? o.loop ? (t + r.value) % r.value : Math.min(Math.max(t, 0), r.value - 1) : 0, n = (t) => {
-      const c = i(t);
-      c !== e.value && (e.value = c);
-    }, I = () => n(e.value - 1), _ = () => n(e.value + 1), C = u(() => `translateX(-${e.value * 100}%)`), S = (t) => t === e.value, N = (t) => {
-      n(t);
+    ), u = i([]), f = z(), n = m(() => u.value.length), v = m(() => l.loop && n.value > 1);
+    F("carousel-data", { data: u, carouselId: f, hasLoopClones: v });
+    const p = (e, t) => `nmorph-carousel-item-${f}-${e}${t ? `-${t}` : ""}`, h = (e) => n.value ? l.loop ? (e + n.value) % n.value : Math.min(Math.max(e, 0), n.value - 1) : 0, d = (e) => v.value ? e + 1 : e, T = async () => {
+      await U(), C.value?.offsetWidth;
+      const e = typeof requestAnimationFrame == "function" ? requestAnimationFrame : (t) => setTimeout(() => t(Date.now()), 0);
+      e(() => {
+        e(() => {
+          c.value = !0;
+        });
+      });
+    }, I = (e) => {
+      c.value = !1, a.value = e, T();
+    }, g = (e) => {
+      const t = h(e);
+      t !== r.value && (r.value = t, o.value = null, c.value = !0, a.value = d(t));
+    }, x = (e) => {
+      if (!n.value) return;
+      if (!l.loop || !v.value) {
+        g(r.value + e);
+        return;
+      }
+      const t = r.value, s = h(t + e);
+      if (s !== t) {
+        if (r.value = s, c.value = !0, e > 0 && t === n.value - 1) {
+          a.value = n.value + 1, o.value = 1;
+          return;
+        }
+        if (e < 0 && t === 0) {
+          a.value = 0, o.value = n.value;
+          return;
+        }
+        o.value = null, a.value = d(s);
+      }
+    }, R = () => x(-1), q = () => x(1), A = m(() => `translateX(-${a.value * 100}%)`), M = m(() => {
+      const e = u.value.map((k) => ({
+        id: p(k),
+        key: k
+      }));
+      if (!v.value || !e.length) return e;
+      const t = u.value[0], s = u.value[u.value.length - 1];
+      return [
+        {
+          id: p(s, "before"),
+          key: `${s}-loop-before`
+        },
+        ...e,
+        {
+          id: p(t, "after"),
+          key: `${t}-loop-after`
+        }
+      ];
+    }), D = (e) => e === r.value, E = (e) => {
+      g(e);
+    }, L = (e) => {
+      if (e.target !== e.currentTarget || o.value === null) return;
+      const t = o.value;
+      o.value = null, I(t);
     };
-    d(r, (t) => {
-      e.value > t - 1 && (e.value = Math.max(t - 1, 0));
-    }), d(e, () => {
-      l("change", e.value);
+    y([n, () => l.loop], ([e]) => {
+      r.value > e - 1 && (r.value = Math.max(e - 1, 0)), o.value = null, I(d(r.value));
+    }), y(r, () => {
+      S("change", r.value);
     });
-    const m = { currentSlide: e, props: o, emit: l, modifiers: g, carouselData: a, carouselId: s, slideCount: r, normalizeSlideIndex: i, goToSlide: n, prevSlide: I, nextSlide: _, translateX: C, isCurrentElementActive: S, elementIndicator: N, get NmorphIcon() {
-      return D;
+    const _ = { currentSlide: r, trackIndex: a, transitionEnabled: c, loopResetTrackIndex: o, wrapperRef: C, props: l, emit: S, modifiers: w, carouselData: u, carouselId: f, slideCount: n, hasLoopClones: v, getCarouselItemId: p, normalizeSlideIndex: h, getRealTrackIndex: d, enableTransitionAfterJump: T, jumpToTrackIndex: I, goToSlide: g, moveSlide: x, prevSlide: R, nextSlide: q, translateX: A, renderedCarouselItems: M, isCurrentElementActive: D, elementIndicator: E, wrapperTransitionEndHandler: L, get NmorphIcon() {
+      return J;
     }, get NmorphIconChevronLeft() {
-      return w;
+      return H;
     }, get NmorphIconChevronRight() {
-      return q;
+      return B;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
   }
 });
 export {
-  A as default
+  V as default
 };

package/dist/components/data/nmorph-carousel/components/nmorph-carousel-item/NmorphCarouselItem.vue.js

@@ -1,25 +1,32 @@
-import t from "./NmorphCarouselItem.vue2.js";
-import { openBlock as e, createElementBlock as a, normalizeClass as m, createBlock as s, Teleport as n, renderSlot as c, createCommentVNode as l } from "vue";
-import i from "../../../../../_virtual/_plugin-vue_export-helper.js";
-function p(r, d, f, o, u, _) {
-  return o.isMounted ? (e(), a(
+import m from "./NmorphCarouselItem.vue2.js";
+import { openBlock as r, createElementBlock as t, normalizeClass as s, Fragment as l, renderList as a, createBlock as c, Teleport as i, renderSlot as p, createCommentVNode as d } from "vue";
+import u from "../../../../../_virtual/_plugin-vue_export-helper.js";
+function f(n, _, h, e, k, C) {
+  return e.isMounted ? (r(), t(
     "div",
     {
       key: 0,
-      class: m(o.modifiers)
+      class: s(e.modifiers)
     },
     [
-      (e(), s(n, {
-        to: `#nmorph-carousel-item-${o.carouselData?.carouselId}-${o.props.name}`
-      }, [
-        c(r.$slots, "default")
-      ], 8, ["to"]))
+      (r(!0), t(
+        l,
+        null,
+        a(e.teleportTargets, (o) => (r(), c(i, {
+          key: o,
+          to: o
+        }, [
+          p(n.$slots, "default")
+        ], 8, ["to"]))),
+        128
+        /* KEYED_FRAGMENT */
+      ))
     ],
     2
     /* CLASS */
-  )) : l("v-if", !0);
+  )) : d("v-if", !0);
 }
-const v = /* @__PURE__ */ i(t, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-carousel/components/nmorph-carousel-item/NmorphCarouselItem.vue"]]);
+const N = /* @__PURE__ */ u(m, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-carousel/components/nmorph-carousel-item/NmorphCarouselItem.vue"]]);
 export {
-  v as default
+  N as default
 };

package/dist/components/data/nmorph-carousel/components/nmorph-carousel-item/NmorphCarouselItem.vue2.js

@@ -1,28 +1,32 @@
-import { defineComponent as i, computed as p, inject as m, ref as c, onMounted as d, onBeforeUnmount as f } from "vue";
-import { useModifiers as l } from "../../../../../utils/create-modifiers.js";
-const x = /* @__PURE__ */ i({
+import { defineComponent as l, computed as u, inject as c, ref as d, onMounted as _, onBeforeUnmount as h } from "vue";
+import { useModifiers as v } from "../../../../../utils/create-modifiers.js";
+const C = /* @__PURE__ */ l({
   __name: "NmorphCarouselItem",
   props: {
     name: { type: String, required: !0 }
   },
-  setup(a, { expose: u }) {
-    u();
-    const t = a, s = p(
-      () => l({
+  setup(i, { expose: m }) {
+    m();
+    const r = i, p = u(
+      () => v({
         "nmorph-carousel-item": []
       })
-    ), e = m("carousel-data"), r = c(!1);
-    d(() => {
-      r.value = !0, e && e.data.value.push(t.name);
-    }), f(() => {
+    ), e = c("carousel-data"), o = d(!1), n = (t, a) => `#nmorph-carousel-item-${e?.carouselId}-${t}${a ? `-${a}` : ""}`, f = u(() => {
+      if (!e) return [];
+      const t = [n(r.name)], a = e.data.value;
+      return !e.hasLoopClones.value || !a.length || (r.name === a[0] && t.push(n(r.name, "after")), r.name === a[a.length - 1] && t.push(n(r.name, "before"))), t;
+    });
+    _(() => {
+      o.value = !0, e && e.data.value.push(r.name);
+    }), h(() => {
       if (!e) return;
-      const n = e.data.value.indexOf(t.name);
-      n !== -1 && e.data.value.splice(n, 1);
+      const t = e.data.value.indexOf(r.name);
+      t !== -1 && e.data.value.splice(t, 1);
     });
-    const o = { props: t, modifiers: s, carouselData: e, isMounted: r };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    const s = { props: r, modifiers: p, carouselData: e, isMounted: o, getCarouselItemId: n, teleportTargets: f };
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {
-  x as default
+  C as default
 };

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{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)}
+.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile.nmorph-media-tile--video{aspect-ratio:16/9}.nmorph-media-tile.nmorph-media-tile--fill{width:100%;height:100%;aspect-ratio:auto}.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--plain{border:var(--nmorph-plain-border);box-shadow:none}.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.vue2.js

@@ -11,6 +11,8 @@ import D from "../../../assets/icons/loader.svg.js";
 const W = /* @__PURE__ */ _({
   __name: "NmorphMediaTile",
   props: {
+    design: { type: null, required: !1, default: "nmorph" },
+    aspect: { type: String, required: !1, default: "video" },
     src: { type: String, required: !1, default: "" },
     srcObject: { type: null, required: !1, default: null },
     sinkId: { type: String, required: !1, default: void 0 },
@@ -33,7 +35,7 @@ const W = /* @__PURE__ */ _({
     errorText: { type: String, required: !1, default: "" }
   },
   setup(j, { expose: N }) {
-    const e = j, o = m(null), n = m(null), u = m({
+    const e = j, o = m(null), i = m(null), u = m({
       audio: 0,
       video: 0
     }), y = t(() => !!(e.src || e.srcObject)), h = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), g = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
@@ -41,13 +43,15 @@ const W = /* @__PURE__ */ _({
         audio: h(r).length,
         video: g(r).length
       };
-    }, k = t(() => typeof e.srcObject?.getVideoTracks == "function"), O = t(() => u.value.video > 0), S = t(
-      () => !!(e.src || e.srcObject && (!k.value || O.value))
-    ), c = t(() => y.value && S.value && !e.videoOff && !e.error), i = t(() => !!(e.srcObject && !e.muted && !e.error)), b = t(() => e.muted || i.value), T = t(() => c.value && e.src ? e.src : void 0), q = t(
+    }, k = t(() => typeof e.srcObject?.getVideoTracks == "function"), S = t(() => u.value.video > 0), O = t(
+      () => !!(e.src || e.srcObject && (!k.value || S.value))
+    ), s = t(() => y.value && O.value && !e.videoOff && !e.error), n = t(() => !!(e.srcObject && !e.muted && !e.error)), b = t(() => e.muted || n.value), T = t(() => s.value && e.src ? e.src : void 0), q = t(
       () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((r) => r[0]?.toUpperCase()).join("")
     ), M = t(() => q.value || e.name || "?"), V = t(
       () => E({
         "nmorph-media-tile": [
+          e.design,
+          e.aspect,
           e.fit,
           e.mirrored && "mirrored",
           e.selected && "selected",
@@ -58,7 +62,7 @@ const W = /* @__PURE__ */ _({
           e.loading && "loading"
         ]
       })
-    ), s = (r) => {
+    ), c = (r) => {
       if (!r || e.sinkId === void 0) return;
       const a = r;
       typeof a.setSinkId == "function" && a.setSinkId(e.sinkId).catch(() => {
@@ -94,25 +98,25 @@ const W = /* @__PURE__ */ _({
         e.autoplay,
         e.videoOff,
         e.error,
-        c.value,
-        i.value,
+        s.value,
+        n.value,
         b.value,
         o.value,
-        n.value
+        i.value
       ],
       () => {
         if (o.value) {
           const r = e.srcObject;
-          o.value.srcObject !== r && (o.value.srcObject = r), s(o.value), e.autoplay && r && !e.videoOff && !e.error && p(o.value);
+          o.value.srcObject !== r && (o.value.srcObject = r), c(o.value), e.autoplay && r && !e.videoOff && !e.error && p(o.value);
         }
-        if (n.value) {
-          const r = i.value ? e.srcObject : null;
-          n.value.srcObject !== r && (n.value.srcObject = r), s(n.value), e.autoplay && i.value && p(n.value);
+        if (i.value) {
+          const r = n.value ? e.srcObject : null;
+          i.value.srcObject !== r && (i.value.srcObject = r), c(i.value), e.autoplay && n.value && p(i.value);
         }
       },
       { immediate: !0, flush: "post" }
     ), N({ videoRef: o });
-    const B = { props: e, videoRef: o, audioRef: n, srcObjectTrackCount: u, hasMediaSource: y, getAudioTracks: h, getVideoTracks: g, updateSrcObjectTrackCount: d, canInspectVideoTracks: k, hasVideoTracks: O, hasVideoSource: S, videoVisible: c, needsSeparateAudioOutput: i, videoMuted: b, videoSrc: T, initials: q, fallbackLabel: M, modifiers: V, setMediaElementSinkId: s, logMediaPlaybackError: f, playMediaElement: p, get NmorphAvatar() {
+    const B = { props: e, videoRef: o, audioRef: i, srcObjectTrackCount: u, hasMediaSource: y, getAudioTracks: h, getVideoTracks: g, updateSrcObjectTrackCount: d, canInspectVideoTracks: k, hasVideoTracks: S, hasVideoSource: O, videoVisible: s, needsSeparateAudioOutput: n, videoMuted: b, videoSrc: T, initials: q, fallbackLabel: M, modifiers: V, setMediaElementSinkId: c, logMediaPlaybackError: f, playMediaElement: p, get NmorphAvatar() {
       return R;
     }, get NmorphButton() {
       return w;

package/dist/components/navigation/nmorph-stepper/NmorphStepper.css

@@ -1 +1 @@
-.nmorph-stepper{width:100%;border-radius:var(--default-border-radius)}.nmorph-stepper.nmorph-stepper--interactive{cursor:grab}.nmorph-stepper.nmorph-stepper--disabled{cursor:not-allowed;opacity:.6}.nmorph-stepper:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-stepper__viewport{width:100%;overflow:hidden;border-radius:inherit;touch-action:pan-y}.nmorph-stepper__track{display:flex;width:100%;min-width:0;transition:transform .24s ease;will-change:transform}.nmorph-stepper__track>*{flex:0 0 100%;width:100%;min-width:100%;max-width:100%}.nmorph-stepper__indicator{width:100%}
+.nmorph-stepper{width:100%;border-radius:var(--default-border-radius)}.nmorph-stepper.nmorph-stepper--interactive{cursor:grab}.nmorph-stepper.nmorph-stepper--disabled{cursor:not-allowed;opacity:.6}.nmorph-stepper:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-stepper__viewport{width:100%;overflow:hidden;border-radius:inherit;touch-action:pan-y}.nmorph-stepper__track{display:flex;width:100%;min-width:0;transition:transform .24s ease;will-change:transform}.nmorph-stepper__track>*{flex:0 0 100%;width:100%;min-width:100%;max-width:100%}.nmorph-stepper__indicator{width:100%}.nmorph-stepper__indicator .nmorph-button.nmorph-button--plain.nmorph-button--icon-only .nmorph-button__content,.nmorph-stepper__indicator .nmorph-button.nmorph-button--plain.nmorph-button--icon-only .nmorph-button__content:not(:disabled,[loading=true]):hover{border:none}