@nmorph/nmorph-ui-kit 3.0.7 → 3.0.9

package/dist/components/basic/nmorph-button/NmorphButton.css

@@ -1 +1 @@
-.nmorph-button{display:inline-block;width:auto;height:auto;min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph--basic-component,.nmorph-button.nmorph--thin-component,.nmorph-button.nmorph--thick-component{height:auto}.nmorph-button.nmorph--fill{width:100%}.nmorph-button .nmorph-button__content{display:flex;gap:var(--indentation-02);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:auto;min-height:var(--nmorph-private-control-height);padding:var(--indentation-00) var(--indentation-04);color:var(--nmorph-private-button-color, var(--nmorph-text-color));line-height:var(--nmorph-private-control-line-height, var(--line-height-regular));background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);cursor:pointer}.nmorph-button .nmorph-button__content span{color:var(--nmorph-private-button-color, var(--nmorph-text-color));--nmorph-private-icon-color: var(--nmorph-private-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__label{display:inline-block;min-width:0;white-space:normal;text-align:center;overflow-wrap:anywhere;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-button .nmorph-button__content>.nmorph-icon{flex-shrink:0;--nmorph-private-icon-color: var(--nmorph-private-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content:disabled{pointer-events:none}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button.nmorph-button--ripple .nmorph-button__content:after{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,var(--nmorph-main-color) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s;content:""}.nmorph-button.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-white-color)}.nmorph-button.nmorph-button--active .nmorph-button__content{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-button.nmorph-button--active .nmorph-button__content span,.nmorph-button.nmorph-button--active .nmorph-button__content .nmorph-icon{color:var(--nmorph-focus-text-color);--nmorph-private-icon-color: var(--nmorph-focus-text-color)}.nmorph-button.nmorph-button--danger .nmorph-button__content{color:var(--nmorph-error-text-color);--nmorph-private-button-color: var(--nmorph-error-text-color)}.nmorph-button.nmorph-button--round .nmorph-button__content{border-radius:var(--border-radius-200)}.nmorph-button.nmorph-button--circle{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--circle .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height);border-radius:var(--border-radius-circular)}.nmorph-button.nmorph-button--plain{padding:var(--indentation-00)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-accent-color);background:transparent;border-color:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-private-button-hover-color);border-color:var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-accent-color)}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-private-button-hover-color);--nmorph-private-icon-color: var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-accent-color)}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content{color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));background:transparent;border:var(--nmorph-plain-border);border-color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));box-shadow:none}.nmorph-button.nmorph-button--plain .nmorph-button__content span{color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));--nmorph-private-icon-color: var( --nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)) )}.nmorph-button.nmorph-button--plain .nmorph-button__content .nmorph-icon{--nmorph-private-icon-color: var( --nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)) )}.nmorph-button.nmorph-button--plain.nmorph-button--borderless .nmorph-button__content,.nmorph-button.nmorph-button--plain.nmorph-button--borderless .nmorph-button__content:not(:disabled,[loading=true]):hover{border:none}.nmorph-button.nmorph-button--square{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--square .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--icon-only{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--icon-only .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height);padding:0;line-height:0}.nmorph-button.nmorph-button--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-button{--nmorph-private-button-padding-y: max(var(--indentation-01), calc(var(--nmorph-private-control-height) * .1));display:inline-block;width:auto;height:auto;min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph--basic-component,.nmorph-button.nmorph--thin-component,.nmorph-button.nmorph--extra-thin-component,.nmorph-button.nmorph--thick-component{height:auto}.nmorph-button.nmorph--fill{width:100%}.nmorph-button .nmorph-button__content{display:flex;gap:var(--indentation-02);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:auto;min-height:var(--nmorph-private-control-height);padding:var(--nmorph-private-button-padding-y) var(--indentation-04);color:var(--nmorph-private-button-color, var(--nmorph-text-color));line-height:var(--nmorph-private-control-line-height, var(--line-height-regular));background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);cursor:pointer}.nmorph-button .nmorph-button__content span{color:var(--nmorph-private-button-color, var(--nmorph-text-color));--nmorph-private-icon-color: var(--nmorph-private-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__label{display:inline-block;min-width:0;line-height:var(--line-height-regular);white-space:normal;text-align:center;overflow-wrap:anywhere;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-button .nmorph-button__content>.nmorph-icon{flex-shrink:0;--nmorph-private-icon-color: var(--nmorph-private-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content:disabled{pointer-events:none}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button.nmorph-button--ripple .nmorph-button__content:after{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,var(--nmorph-main-color) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s;content:""}.nmorph-button.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-white-color)}.nmorph-button.nmorph-button--active .nmorph-button__content{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-button.nmorph-button--active .nmorph-button__content span,.nmorph-button.nmorph-button--active .nmorph-button__content .nmorph-icon{color:var(--nmorph-focus-text-color);--nmorph-private-icon-color: var(--nmorph-focus-text-color)}.nmorph-button.nmorph-button--danger .nmorph-button__content{color:var(--nmorph-error-text-color);--nmorph-private-button-color: var(--nmorph-error-text-color)}.nmorph-button.nmorph-button--round .nmorph-button__content{border-radius:var(--border-radius-200)}.nmorph-button.nmorph-button--circle{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--circle .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height);border-radius:var(--border-radius-circular)}.nmorph-button.nmorph-button--plain{padding:var(--indentation-00)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-accent-color);background:transparent;border-color:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-private-button-hover-color);border-color:var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-accent-color)}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-private-button-hover-color);--nmorph-private-icon-color: var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-accent-color)}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content{color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));background:transparent;border:var(--nmorph-plain-border);border-color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));box-shadow:none}.nmorph-button.nmorph-button--plain .nmorph-button__content span{color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));--nmorph-private-icon-color: var( --nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)) )}.nmorph-button.nmorph-button--plain .nmorph-button__content .nmorph-icon{--nmorph-private-icon-color: var( --nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)) )}.nmorph-button.nmorph-button--plain.nmorph-button--borderless .nmorph-button__content,.nmorph-button.nmorph-button--plain.nmorph-button--borderless .nmorph-button__content:not(:disabled,[loading=true]):hover{border:none}.nmorph-button.nmorph-button--square{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--square .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--icon-only{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--icon-only .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height);padding:0;line-height:0}.nmorph-button.nmorph-button--disabled{cursor:not-allowed;opacity:.6}

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-empty/NmorphEmpty.css

@@ -1 +1 @@
-.nmorph-empty{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-height:var(--nmorph-private-empty-min-height);padding:var(--nmorph-private-empty-padding);color:var(--nmorph-text-color);text-align:center;border-radius:var(--default-border-radius)}.nmorph-empty .nmorph-empty__icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-empty-icon-size);height:var(--nmorph-private-empty-icon-size);color:var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__title{max-width:100%;font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__description{max-width:min(420px,100%);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--nmorph-typography-body-font-weight);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__action{display:flex;justify-content:center;max-width:100%;margin-top:4px}.nmorph-empty.nmorph-empty--nmorph{background:var(--nmorph-main-color)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-inset{box-shadow:var(--nmorph-shadow-inset)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-outset{box-shadow:var(--nmorph-shadow-outset)}.nmorph-empty.nmorph-empty--plain{border:var(--nmorph-plain-border)}
+.nmorph-empty{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-height:var(--nmorph-private-empty-min-height);padding:var(--nmorph-private-empty-padding);color:var(--nmorph-text-color);text-align:center;border-radius:var(--default-border-radius)}.nmorph-empty .nmorph-empty__icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-empty-icon-size);height:var(--nmorph-private-empty-icon-size);color:var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__title{max-width:100%;font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__description{max-width:min(420px,100%);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--nmorph-typography-body-font-weight);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__action{display:flex;justify-content:center;max-width:100%;margin-top:4px}.nmorph-empty.nmorph-empty--nmorph{background:var(--nmorph-main-color)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-inset{box-shadow:var(--nmorph-shadow-inset)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-outset{box-shadow:var(--nmorph-shadow-outset)}.nmorph-empty.nmorph-empty--plain{background:color-mix(in srgb,var(--nmorph-overlay-color) 42%,transparent)}

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

@@ -1,15 +1,14 @@
 import './NmorphImage.css';
 import { defineComponent as S, computed as t, ref as s } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as _ } from "../../../utils/common.js";
-import { useI18n as x } from "vue-i18n";
-import b from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as q } from "../../../utils/common.js";
+import { useI18n as b } from "vue-i18n";
+import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import I from "../../../assets/icons/loading.svg.js";
 const C = /* @__PURE__ */ S({
   __name: "NmorphImage",
   props: {
     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: 2.67 },
     src: { type: String, required: !1 },
@@ -22,32 +21,32 @@ const C = /* @__PURE__ */ S({
   emits: ["error", "load"],
   setup(u, { expose: p, emit: f }) {
     p();
-    const { t: l } = x(), e = u, c = t(() => e.loadFailedText ? e.loadFailedText : l("loadFailedText")), r = s(!1), o = s(!1), a = f, g = (d) => {
+    const { t: l } = b(), e = u, c = t(() => e.loadFailedText ? e.loadFailedText : l("loadFailedText")), r = s(!1), o = s(!1), a = f, h = (d) => {
       r.value = !0, o.value = !1, a("load", d);
-    }, h = (d) => {
+    }, g = (d) => {
       r.value = !0, o.value = !0, a("error", d);
-    }, n = t(() => r.value && o.value), i = t(() => e.design || "nmorph"), v = t(
-      () => q({
+    }, m = t(() => r.value && o.value), i = t(() => e.design || "nmorph"), v = t(
+      () => _({
         nmorph: [i.value === "nmorph" ? "shadow-combined" : ""],
         "nmorph-image": [
           i.value,
           e.frameBorder > 0 && "framed",
-          (n.value || !r.value) && "hide"
+          (m.value || !r.value) && "hide"
         ]
       })
     ), y = t(() => ({
-      ..._({
+      ...q({
         "--nmorph-private-image-width": e.width,
         "--nmorph-private-image-height": e.height
       }),
       "--nmorph-private-image-fit": e.fit || "cover",
       "--nmorph-private-image-frame-border": `${e.frameBorder}px`
-    })), m = { t: l, props: e, computedLoadFailedText: c, imageLoadFinished: r, imageLoadError: o, emit: a, onImageLoad: g, onImageError: h, loadingFailed: n, resolvedDesign: i, modifiers: v, styles: y, get NmorphIcon() {
-      return b;
+    })), n = { t: l, props: e, computedLoadFailedText: c, imageLoadFinished: r, imageLoadError: o, emit: a, onImageLoad: h, onImageError: g, loadingFailed: m, resolvedDesign: i, modifiers: v, styles: y, get NmorphIcon() {
+      return x;
     }, get NmorphIconLoader() {
       return I;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {

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.vue.js

@@ -1,6 +1,6 @@
 import './NmorphMediaTile.css';
-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";
+import d from "./NmorphMediaTile.vue2.js";
+import { openBlock as e, createElementBlock as a, normalizeClass as m, withDirectives as p, createElementVNode as c, vShow as _, createCommentVNode as r, createBlock as i, 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 = ["muted", "autoplay"], k = {
@@ -19,8 +19,8 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = ["muted", "autoplay"]
   key: 2,
   class: "nmorph-media-tile__status"
 };
-function S(d, x, V, o, B, M) {
-  return e(), i(
+function S(s, x, V, o, B, M) {
+  return e(), a(
     "div",
     {
       class: m(o.modifiers)
@@ -36,16 +36,16 @@ function S(d, x, V, o, B, M) {
       }, null, 8, v), [
         [_, o.videoVisible && !o.props.loading]
       ]),
-      o.needsSeparateAudioOutput ? (e(), i("audio", {
+      o.needsSeparateAudioOutput ? (e(), a("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, {
+      }, null, 8, y)) : r("v-if", !0),
+      o.props.showFallback && (!o.videoVisible || o.props.loading) ? (e(), a("div", k, [
+        o.props.loading ? (e(), i(o.NmorphIcon, {
           key: 0,
           class: "nmorph-media-tile__loader",
           size: "large"
@@ -55,39 +55,40 @@ function S(d, x, V, o, B, M) {
           ]),
           _: 1
           /* STABLE */
-        })) : o.props.avatarSrc ? (e(), r(o.NmorphAvatar, {
+        })) : o.props.avatarSrc ? (e(), i(o.NmorphAvatar, {
           key: 1,
           src: o.props.avatarSrc,
           name: o.props.name,
           size: 72,
           design: "plain"
-        }, null, 8, ["src", "name"])) : (e(), i(
+        }, null, 8, ["src", "name"])) : (e(), a(
           "div",
           b,
           t(o.fallbackLabel),
           1
           /* TEXT */
         )),
-        o.props.name ? (e(), i(
+        o.props.name ? (e(), a(
           "span",
           N,
           t(o.props.name),
           1
           /* TEXT */
-        )) : a("v-if", !0),
-        o.props.error && o.props.errorText ? (e(), i(
+        )) : r("v-if", !0),
+        o.props.error && o.props.errorText ? (e(), a(
           "span",
           u,
           t(o.props.errorText),
           1
           /* TEXT */
-        )) : a("v-if", !0)
-      ])) : a("v-if", !0),
-      o.props.showStatus ? (e(), i("div", g, [
-        o.props.micMuted ? (e(), r(o.NmorphButton, {
+        )) : r("v-if", !0)
+      ])) : r("v-if", !0),
+      o.props.showStatus ? (e(), a("div", g, [
+        o.props.micMuted ? (e(), i(o.NmorphButton, {
           key: 0,
           class: "nmorph-media-tile__status-item",
           design: "plain",
+          borderless: "",
           tabindex: -1,
           "aria-label": "Microphone muted"
         }, {
@@ -96,11 +97,12 @@ function S(d, x, V, o, B, M) {
           ]),
           _: 1
           /* STABLE */
-        })) : a("v-if", !0),
-        o.props.videoOff ? (e(), r(o.NmorphButton, {
+        })) : r("v-if", !0),
+        o.props.videoOff ? (e(), i(o.NmorphButton, {
           key: 1,
           class: "nmorph-media-tile__status-item",
           design: "plain",
+          borderless: "",
           tabindex: -1,
           "aria-label": "Video off"
         }, {
@@ -109,11 +111,12 @@ function S(d, x, V, o, B, M) {
           ]),
           _: 1
           /* STABLE */
-        })) : a("v-if", !0),
-        o.props.screenSharing ? (e(), r(o.NmorphButton, {
+        })) : r("v-if", !0),
+        o.props.screenSharing ? (e(), i(o.NmorphButton, {
           key: 2,
           class: "nmorph-media-tile__status-item",
           design: "plain",
+          borderless: "",
           tabindex: -1,
           "aria-label": "Screen sharing"
         }, {
@@ -122,15 +125,15 @@ function S(d, x, V, o, B, M) {
           ]),
           _: 1
           /* STABLE */
-        })) : a("v-if", !0)
-      ])) : a("v-if", !0),
-      h(d.$slots, "overlay")
+        })) : r("v-if", !0)
+      ])) : r("v-if", !0),
+      h(s.$slots, "overlay")
     ],
     2
     /* CLASS */
   );
 }
-const z = /* @__PURE__ */ f(s, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
+const z = /* @__PURE__ */ f(d, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
 export {
   z as default
 };