mediacube-ui-v2 0.0.327 → 0.0.329

package/dist/ai-catalog/index.json

@@ -1,6 +1,6 @@
 {
   "catalogSchemaVersion": 2,
-  "libraryVersion": "0.0.327",
+  "libraryVersion": "0.0.329",
   "packageName": "mediacube-ui-v2",
   "pathHash": "9b6f3b8016b22ac7",
   "componentCount": 76,

package/dist/assets/components/templates/McModal/index.css

@@ -1 +1 @@
-@charset "UTF-8";.mc-modal{position:relative;--mc-modal-padding: 2rem;--mc-modal-padding-small: .75rem;--mc-modal-header-line-height: 1.5rem;--mc-modal-header-line-height-small: 1.25rem;--mc-modal-button-height: 3rem;--mc-modal-button-height-small: 2.5rem;--mc-modal-max-width: 510px;--mc-modal-min-width: 768px;--mc-modal-state-number: 0;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;opacity:var(--mc-modal-state-number)}@media (min-width: 480px){.mc-modal{--modal-scale: calc(var(--mc-modal-state-number) * .1 + .9);padding:12px 0;height:auto;max-height:80%;max-width:var(--mc-modal-max-width);min-width:var(--mc-modal-min-width)}}.mc-modal__overlay{position:absolute;inset:0;background-color:#20242780;display:flex;justify-content:flex-start}.mc-modal__overlay--hidden{background:transparent}.mc-modal__wrapper{position:absolute;inset:0;z-index:1;overflow:hidden;display:flex;justify-content:center;align-items:center}.mc-modal__btn-close,.mc-modal__btn-back{transition:.15s all;box-sizing:border-box;display:block;margin:0;padding:0;white-space:nowrap;vertical-align:middle;user-select:none;text-align:center;text-decoration:none;text-transform:none;border-radius:0;border:none;background-color:transparent;background-image:none;cursor:pointer;outline:0;font-size:0;line-height:0;font-family:inherit;-webkit-appearance:none;-webkit-text-fill-color:currentColor}.mc-modal__btn-close:focus,.mc-modal__btn-back:focus{outline:0}.mc-modal__btn-close,.mc-modal__btn-back{color:#8f99a3}.mc-modal__btn-close:hover,.mc-modal__btn-close:focus,.mc-modal__btn-back:hover,.mc-modal__btn-back:focus{color:#202427}.mc-modal__btn-close:active,.mc-modal__btn-back:active{color:#202427!important}.mc-modal__btn-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem;padding:0!important}@media (min-width: 480px){.mc-modal__btn-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem}}.mc-modal__btn-back{position:absolute;top:1.5rem;inset-inline-start:1.5rem}@media (min-width: 480px){.mc-modal__btn-back{position:absolute;top:1.5rem;inset-inline-start:1.5rem}}.mc-modal__icon-close{height:1.5rem;width:1.5rem;transition:color .15s}.mc-modal.overlay-fade-enter-active .mc-modal__inner,.mc-modal.overlay-fade-leave-active .mc-modal__inner{transition:all .15s;transform:translateZ(0)}.mc-modal.overlay-fade-enter .mc-modal__inner,.mc-modal.overlay-fade-leave-active .mc-modal__inner{transform:translate3d(0,-20px,0)}.mc-modal.mc-modal--secondary .mc-modal__inner{border-radius:2rem;box-shadow:0 15px 30px #20008c28;padding:2rem}.mc-modal.mc-modal--secondary .mc-modal__btn-close,.mc-modal.mc-modal--secondary .mc-modal__btn-back{top:27px}.mc-modal.mc-modal--secondary .mc-modal__btn-close{inset-inline-end:2rem}.mc-modal.mc-modal--secondary .mc-modal__btn-back{inset-inline-start:2rem}.mc-modal.mc-modal--secondary .mc-modal__header{padding-bottom:9px;border-bottom:2px solid #EDF0F3;margin-bottom:var(--mc-modal-padding)}.mc-modal.mc-modal--secondary .mc-modal__control{display:flex;justify-content:space-between;align-items:center}.mc-modal.mc-modal--secondary .mc-modal__control .mc-button{border-radius:.75rem}.mc-modal__header{flex-shrink:0;transition:.15s all;padding:var(--mc-modal-padding) 1rem 1.75rem;border-color:#edf0f3}@media (min-width: 480px){.mc-modal__header{padding:1.75rem}.mc-modal__header .mc-title{transition:.15s all;line-height:var(--mc-modal-header-line-height)}}.mc-modal__header:has(.mc-modal__title:empty){display:none}.mc-modal__header:has(.mc-modal__title:empty)+.mc-modal__body{padding-top:2rem}.mc-modal__title{margin-top:0;margin-bottom:0;color:#212121;font-family:Inter,sans-serif;overflow-x:hidden;text-overflow:ellipsis}.mc-modal__body{padding:.25rem 1rem 1rem;flex-grow:1;min-height:0;overflow-x:hidden}.mc-modal__body>*:only-child{min-height:100%}@media (min-width: 480px){.mc-modal__body{padding:.25rem 2rem 1rem;overflow:visible}}.mc-modal__inner{position:relative;box-shadow:0 4px 12px #00000029;background-color:#fff;display:flex;flex-direction:column;overflow:hidden;height:100%!important}.mc-modal__inner>*:first-child{padding-top:var(--mc-modal-padding)}.mc-modal__inner>*:last-child{padding-bottom:var(--mc-modal-padding)}@media (min-width: 480px){.mc-modal__inner--with-title .mc-modal__btn-close{position:absolute;top:var(--mc-modal-padding);inset-inline-end:2rem}}@media (min-width: 480px){.mc-modal__inner--with-title .mc-modal__btn-back{position:absolute;top:var(--mc-modal-padding);inset-inline-start:2rem}}@media (min-width: 480px){.mc-modal__inner{overflow:visible;-ms-overflow-style:none;scrollbar-width:none;border-radius:.5rem;margin:0 .75rem}.mc-modal__inner::-webkit-scrollbar{display:none}}.mc-modal--scrollable{overflow:hidden!important}.mc-modal--scrollable .mc-modal__body{overflow-y:auto;overflow-x:hidden}.mc-modal--scrollable .mc-modal__inner{overflow-x:hidden}@media (min-width: 480px){.mc-modal--scrollable .mc-modal__inner{max-height:80vh}}.mc-modal--header-align-center .mc-modal__header{padding-inline:2.5rem;text-align:center}@media (min-width: 480px){.mc-modal--header-align-center .mc-modal__header{padding-inline:3.5rem}}.mc-modal--header-align-left .mc-modal__header{padding-bottom:.75rem}@media (min-width: 480px){.mc-modal--small-indents .mc-modal__control{padding-block:var(--mc-modal-padding-small)!important}.mc-modal--small-indents .mc-modal__control .mc-button{height:var(--mc-modal-button-height-small)}.mc-modal--small-indents .mc-modal__header{padding-block:var(--mc-modal-padding-small)!important}.mc-modal--small-indents .mc-modal__header .mc-title{font-weight:600;font-size:1rem;line-height:var(--mc-modal-header-line-height-small);align-items:center}.mc-modal--small-indents .mc-modal__body{padding-bottom:.25rem}}.mc-modal--small-indents .mc-modal__inner--with-title .mc-modal__btn-back,.mc-modal--small-indents .mc-modal__inner--with-title .mc-modal__btn-close{top:var(--mc-modal-padding-small)!important}.mc-modal--scrolled-top .mc-modal__header{border-bottom:1px solid #EDF0F3}.mc-modal--scrolled-bottom .mc-modal__control:not(:empty){border-top:1px solid #EDF0F3}.mc-modal--top-padding .mc-modal__inner:before{content:"";height:2rem;min-height:2rem}.mc-modal__control{flex-shrink:0;display:flex;justify-content:center;padding:1rem 1rem 2rem;transition:.15s all}@media (min-width: 480px){.mc-modal__control{padding:1rem 1.5rem 2rem}}.mc-modal__control .mc-button{width:100%}@media (min-width: 480px){.mc-modal__control .mc-button{min-width:100px;height:var(--mc-modal-button-height);transition:.15s all;width:unset}}.mc-modal__control:empty{position:relative;padding:1.75rem 0 0}.mc-modal__control:not(:empty){border-color:#edf0f3}.mc-modal:has(.mc-modal__control:empty) .mc-modal__body{padding-bottom:.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__header{padding:1.5rem 1.5rem .75rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__btn-close{top:1.5rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__inner>*:first-child{padding-top:1.5rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__inner>*:last-child{padding-bottom:1.5rem}}.mc-modal--variation-info .mc-modal__body{padding-bottom:.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__body{padding-inline:1.5rem}}.mc-modal--variation-info .mc-modal__control{padding-top:1.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__control{padding-top:.75rem}}html[dir=rtl] .mc-modal__btn-back{transform:rotate(180deg)}
+@charset "UTF-8";.mc-modal{position:relative;--mc-modal-padding: 2rem;--mc-modal-padding-small: .75rem;--mc-modal-header-line-height: 1.5rem;--mc-modal-header-line-height-small: 1.25rem;--mc-modal-button-height: 3rem;--mc-modal-button-height-small: 2.5rem;--mc-modal-max-width: 510px;--mc-modal-min-width: 768px;--mc-modal-state-number: 0;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;opacity:var(--mc-modal-state-number)}@media (min-width: 480px){.mc-modal{--modal-scale: calc(var(--mc-modal-state-number) * .1 + .9);padding:12px 0;height:auto;max-height:80%;max-width:var(--mc-modal-max-width);min-width:var(--mc-modal-min-width)}}.mc-modal__overlay{position:absolute;inset:0;background-color:#20242780;display:flex;justify-content:flex-start}.mc-modal__overlay--hidden{background:transparent}.mc-modal__wrapper{position:absolute;inset:0;z-index:1;overflow:hidden;display:flex;justify-content:center;align-items:center}.mc-modal__btn-close,.mc-modal__btn-back{transition:.15s all;box-sizing:border-box;display:block;margin:0;padding:0;white-space:nowrap;vertical-align:middle;user-select:none;text-align:center;text-decoration:none;text-transform:none;border-radius:0;border:none;background-color:transparent;background-image:none;cursor:pointer;outline:0;font-size:0;line-height:0;font-family:inherit;-webkit-appearance:none;-webkit-text-fill-color:currentColor}.mc-modal__btn-close:focus,.mc-modal__btn-back:focus{outline:0}.mc-modal__btn-close,.mc-modal__btn-back{color:#8f99a3}.mc-modal__btn-close:hover,.mc-modal__btn-close:focus,.mc-modal__btn-back:hover,.mc-modal__btn-back:focus{color:#202427}.mc-modal__btn-close:active,.mc-modal__btn-back:active{color:#202427!important}.mc-modal__btn-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem;padding:0!important}@media (min-width: 480px){.mc-modal__btn-close{position:absolute;top:1.5rem;inset-inline-end:1.5rem}}.mc-modal__btn-back{position:absolute;top:1.5rem;inset-inline-start:1.5rem}@media (min-width: 480px){.mc-modal__btn-back{position:absolute;top:1.5rem;inset-inline-start:1.5rem}}.mc-modal__icon-close{height:1.5rem;width:1.5rem;transition:color .15s}.mc-modal.overlay-fade-enter-active .mc-modal__inner,.mc-modal.overlay-fade-leave-active .mc-modal__inner{transition:all .15s;transform:translateZ(0)}.mc-modal.overlay-fade-enter .mc-modal__inner,.mc-modal.overlay-fade-leave-active .mc-modal__inner{transform:translate3d(0,-20px,0)}.mc-modal.mc-modal--secondary .mc-modal__inner{border-radius:2rem;box-shadow:0 15px 30px #20008c28;padding:2rem}.mc-modal.mc-modal--secondary .mc-modal__btn-close,.mc-modal.mc-modal--secondary .mc-modal__btn-back{top:27px}.mc-modal.mc-modal--secondary .mc-modal__btn-close{inset-inline-end:2rem}.mc-modal.mc-modal--secondary .mc-modal__btn-back{inset-inline-start:2rem}.mc-modal.mc-modal--secondary .mc-modal__header{padding-bottom:9px;border-bottom:2px solid #EDF0F3;margin-bottom:var(--mc-modal-padding)}.mc-modal.mc-modal--secondary .mc-modal__control{display:flex;justify-content:space-between;align-items:center}.mc-modal.mc-modal--secondary .mc-modal__control .mc-button{border-radius:.75rem}.mc-modal__header{flex-shrink:0;transition:.15s all;padding:var(--mc-modal-padding) 1rem 1.75rem;border-color:#edf0f3}@media (min-width: 480px){.mc-modal__header{padding:1.75rem}.mc-modal__header .mc-title{transition:.15s all;line-height:var(--mc-modal-header-line-height)}}.mc-modal__header:has(.mc-modal__title:empty){display:none}.mc-modal__header:has(.mc-modal__title:empty)+.mc-modal__body{padding-top:2rem}.mc-modal__title{margin-top:0;margin-bottom:0;color:#212121;font-family:Inter,sans-serif;overflow-x:hidden;text-overflow:ellipsis}.mc-modal__body{padding:.25rem 1rem 1rem;flex-grow:1;min-height:0;overflow-x:hidden}.mc-modal__body>*:only-child{min-height:100%}@media (min-width: 480px){.mc-modal__body{padding:.25rem 2rem 1rem;overflow:visible}}.mc-modal__inner{position:relative;box-shadow:0 4px 12px #00000029;background-color:#fff;display:flex;flex-direction:column;overflow:hidden;height:100%!important}.mc-modal__inner>*:first-child{padding-top:var(--mc-modal-padding)}.mc-modal__inner>*:last-child{padding-bottom:var(--mc-modal-padding)}@media (min-width: 480px){.mc-modal__inner--with-title .mc-modal__btn-close{position:absolute;top:var(--mc-modal-padding);inset-inline-end:2rem}}@media (min-width: 480px){.mc-modal__inner--with-title .mc-modal__btn-back{position:absolute;top:var(--mc-modal-padding);inset-inline-start:2rem}}@media (min-width: 480px){.mc-modal__inner{overflow:visible;-ms-overflow-style:none;scrollbar-width:none;border-radius:.5rem;margin:0 .75rem}.mc-modal__inner::-webkit-scrollbar{display:none}}.mc-modal--scrollable{overflow:hidden!important}.mc-modal--scrollable .mc-modal__body{overflow-y:auto;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none}.mc-modal--scrollable .mc-modal__body::-webkit-scrollbar{display:none}.mc-modal--scrollable .mc-modal__inner{overflow-x:hidden}@media (min-width: 480px){.mc-modal--scrollable .mc-modal__inner{max-height:80vh}}.mc-modal--header-align-center .mc-modal__header{padding-inline:2.5rem;text-align:center}@media (min-width: 480px){.mc-modal--header-align-center .mc-modal__header{padding-inline:3.5rem}}.mc-modal--header-align-left .mc-modal__header{padding-bottom:.75rem}@media (min-width: 480px){.mc-modal--small-indents .mc-modal__control{padding-block:var(--mc-modal-padding-small)!important}.mc-modal--small-indents .mc-modal__control .mc-button{height:var(--mc-modal-button-height-small)}.mc-modal--small-indents .mc-modal__header{padding-block:var(--mc-modal-padding-small)!important}.mc-modal--small-indents .mc-modal__header .mc-title{font-weight:600;font-size:1rem;line-height:var(--mc-modal-header-line-height-small);align-items:center}.mc-modal--small-indents .mc-modal__body{padding-bottom:.25rem}}.mc-modal--small-indents .mc-modal__inner--with-title .mc-modal__btn-back,.mc-modal--small-indents .mc-modal__inner--with-title .mc-modal__btn-close{top:var(--mc-modal-padding-small)!important}.mc-modal--scrolled-top .mc-modal__header{border-bottom:1px solid #EDF0F3}.mc-modal--scrolled-bottom .mc-modal__control:not(:empty){border-top:1px solid #EDF0F3}.mc-modal--top-padding .mc-modal__inner:before{content:"";height:2rem;min-height:2rem}.mc-modal__control{flex-shrink:0;display:flex;justify-content:center;padding:1rem 1rem 2rem;transition:.15s all}@media (min-width: 480px){.mc-modal__control{padding:1rem 1.5rem 2rem}}.mc-modal__control .mc-button{width:100%}@media (min-width: 480px){.mc-modal__control .mc-button{min-width:100px;height:var(--mc-modal-button-height);transition:.15s all;width:unset}}.mc-modal__control:empty{position:relative;padding:1.75rem 0 0}.mc-modal__control:not(:empty){border-color:#edf0f3}.mc-modal:has(.mc-modal__control:empty) .mc-modal__body{padding-bottom:.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__header{padding:1.5rem 1.5rem .75rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__btn-close{top:1.5rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__inner>*:first-child{padding-top:1.5rem}}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__inner>*:last-child{padding-bottom:1.5rem}}.mc-modal--variation-info .mc-modal__body{padding-bottom:.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__body{padding-inline:1.5rem}}.mc-modal--variation-info .mc-modal__control{padding-top:1.25rem}@media (min-width: 480px){.mc-modal--variation-info .mc-modal__control{padding-top:.75rem}}html[dir=rtl] .mc-modal__btn-back{transform:rotate(180deg)}

package/dist/components/patterns/McTab/McTab.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent as y, inject as S, useAttrs as g, ref as u, computed as t, onMounted as A, withDirectives as x, openBlock as T, createElementBlock as P, renderSlot as k, createCommentVNode as B, vShow as D } from "vue";
-import { useTheme as w } from "../../../composables/useTheme2.js";
-const M = ["id", "aria-hidden", "href", "to"], j = /* @__PURE__ */ y({
+import { defineComponent as S, inject as u, useAttrs as A, ref as d, computed as t, onMounted as T, onBeforeUnmount as x, withDirectives as B, openBlock as M, createElementBlock as P, renderSlot as k, createCommentVNode as D, vShow as w } from "vue";
+import { useTheme as N } from "../../../composables/useTheme2.js";
+const U = ["id", "aria-hidden", "href", "to"], I = /* @__PURE__ */ S({
   __name: "McTab",
   props: {
     /**
@@ -101,18 +101,19 @@ const M = ["id", "aria-hidden", "href", "to"], j = /* @__PURE__ */ y({
     }
   },
   setup(n) {
-    const i = S("selfRegisterTabMethod", () => {
-    }), r = g(), e = n, l = w("tab"), o = u(!1), s = u(!0), p = t(() => e.appendCountColor || l.component.count), d = t(() => e.id ? e.id : e.name.toLowerCase().replace(/ /g, "-")), c = t(() => e.isDisabled ? "#" : `#${d.value}`), f = t(() => !!e.appendCount || e.appendCount === 0), C = t(() => `--mc-tab-append-count-color: ${l.colors[p.value]}`), m = t(() => [e.prefix, e.name, e.suffix].filter(Boolean).join("")), h = t(() => e.visible ? m.value : "");
-    A(() => {
-      if (i) {
-        const a = {
+    const r = u("selfRegisterTabMethod", () => {
+    }), c = u("selfUnregisterTabMethod", () => {
+    }), l = A(), e = n, p = N("tab"), o = d(!1), f = d(!0), s = t(() => e.appendCountColor || p.component.count), a = t(() => e.id ? e.id : e.name.toLowerCase().replace(/ /g, "-")), m = t(() => e.isDisabled ? "#" : `#${a.value}`), C = t(() => !!e.appendCount || e.appendCount === 0), b = t(() => `--mc-tab-append-count-color: ${p.colors[s.value]}`), h = t(() => [e.prefix, e.name, e.suffix].filter(Boolean).join("")), v = t(() => e.visible ? h.value : "");
+    T(() => {
+      if (r) {
+        const i = {
           isActive: o.value,
-          isVisible: s.value,
-          computedId: d.value,
-          hash: c.value,
-          hasAppendCount: f.value,
-          appendCountStyles: C.value,
-          header: h.value,
+          isVisible: f.value,
+          computedId: a.value,
+          hash: m.value,
+          hasAppendCount: C.value,
+          appendCountStyles: b.value,
+          header: v.value,
           id: e.id,
           name: e.name,
           to: e.to,
@@ -123,24 +124,26 @@ const M = ["id", "aria-hidden", "href", "to"], j = /* @__PURE__ */ y({
           iconPrepend: e.iconPrepend,
           visible: e.visible,
           isDisabled: e.isDisabled,
-          appendCountColor: p.value,
+          appendCountColor: s.value,
           appendCount: e.appendCount,
           suffix: e.suffix,
           prefix: e.prefix,
-          showTab: v,
-          hideTab: b,
-          onClick: r.onClick,
-          ...r
+          showTab: y,
+          hideTab: g,
+          onClick: l.onClick,
+          ...l
         };
-        i(a);
+        r(i);
       }
+    }), x(() => {
+      c(a.value);
     });
-    const v = () => {
+    const y = () => {
       o.value = !0;
-    }, b = () => {
+    }, g = () => {
       o.value = !1;
     };
-    return (a, N) => x((T(), P("section", {
+    return (i, V) => B((M(), P("section", {
       id: n.id,
       "aria-hidden": !o.value,
       class: "tabs-component-panel",
@@ -148,12 +151,12 @@ const M = ["id", "aria-hidden", "href", "to"], j = /* @__PURE__ */ y({
       href: n.href,
       to: n.to
     }, [
-      n.visible ? k(a.$slots, "default", { key: 0 }) : B("", !0)
-    ], 8, M)), [
-      [D, o.value]
+      n.visible ? k(i.$slots, "default", { key: 0 }) : D("", !0)
+    ], 8, U)), [
+      [w, o.value]
     ]);
   }
 });
 export {
-  j as default
+  I as default
 };

package/dist/components/patterns/McTabs/McTabs.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as P, defineAsyncComponent as d, inject as j, ref as F, computed as c, onMounted as K, onUpdated as O, watch as R, nextTick as $, provide as L, openBlock as a, createElementBlock as u, normalizeStyle as U, normalizeClass as _, createElementVNode as i, createVNode as W, unref as l, withCtx as q, Fragment as G, renderList as H, withDirectives as J, createBlock as m, createCommentVNode as f, toDisplayString as Q, vShow as X, renderSlot as Y } from "vue";
+import { defineComponent as U, defineAsyncComponent as u, inject as j, ref as F, computed as c, onMounted as K, onUpdated as O, watch as R, nextTick as $, provide as y, openBlock as a, createElementBlock as p, normalizeStyle as L, normalizeClass as g, createElementVNode as i, createVNode as W, unref as l, withCtx as q, Fragment as G, renderList as H, withDirectives as J, createBlock as m, createCommentVNode as f, toDisplayString as Q, vShow as X, renderSlot as Y } from "vue";
 import { TabVariations as Z } from "../../../enums/Tab2.js";
 import { useTheme as ee } from "../../../composables/useTheme2.js";
-import { ChipSize as oe } from "../../../enums/Chip2.js";
-import { useDebounceFn as te } from "@vueuse/core";
-const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected", "href", "onClick"], ce = { class: "tabs-component-tab__tab-name" }, ae = { class: "tabs-component-panels" }, ue = /* @__PURE__ */ P({
+import { ChipSize as te } from "../../../enums/Chip2.js";
+import { useDebounceFn as oe } from "@vueuse/core";
+const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected", "href", "onClick"], ce = { class: "tabs-component-tab__tab-name" }, ae = { class: "tabs-component-panels" }, pe = /* @__PURE__ */ U({
   __name: "McTabs",
   props: {
     modelValue: {
@@ -61,16 +61,16 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
     }
   },
   emits: ["update:modelValue", "tab-changed", "clicked"],
-  setup(k, { emit: g }) {
-    const T = d(() => import("../../elements/McChip/McChip.vue.js")), h = d(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), V = d(() => import("../McWrapScroll/McWrapScroll.vue.js")), v = g, C = j("dsOptions", {}), n = k, r = ee("tabs"), s = F([]), S = c(() => n.color || r.component.color), A = c(() => n.accentColor || r.component.accentColor), D = c(() => ({
+  setup(k, { emit: T }) {
+    const V = u(() => import("../../elements/McChip/McChip.vue.js")), h = u(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), S = u(() => import("../McWrapScroll/McWrapScroll.vue.js")), v = T, C = j("dsOptions", {}), n = k, r = ee("tabs"), s = F([]), A = c(() => n.color || r.component.color), D = c(() => n.accentColor || r.component.accentColor), I = c(() => ({
       "mc-tabs": !0,
       [`mc-tabs--tab-variation-${n.tabVariation}`]: !!n.tabVariation,
       "mc-tabs--uppercase": !!n.uppercase,
       "mc-tabs--sticky": !!n.sticky
-    })), w = c(() => ({
-      "--mc-tabs-color": r.colors[S.value],
-      "--mc-tabs-accent-color": r.colors[A.value]
-    })), z = c({
+    })), M = c(() => ({
+      "--mc-tabs-color": r.colors[A.value],
+      "--mc-tabs-accent-color": r.colors[D.value]
+    })), w = c({
       // @ts-ignore
       get() {
         return n.modelValue;
@@ -78,23 +78,25 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
       set(e) {
         v("update:modelValue", e);
       }
-    }), b = c(() => s.value.filter((e) => e.visible && !e.isDisabled)), M = (e) => {
+    }), b = c(() => s.value.filter((e) => e.visible && !e.isDisabled)), z = (e) => {
       s.value.forEach((t) => {
         t.isActive = t.computedId === e, t.isActive ? t.showTab() : t.hideTab();
       });
     }, B = (e) => {
-      s.value.push(e);
-    }, y = () => {
+      s.value.some((t) => t.computedId === e.computedId) || s.value.push(e);
+    }, x = (e) => {
+      s.value = s.value.filter((t) => t.computedId !== e);
+    }, _ = () => {
       let [e] = b.value;
       const t = s.value.find((o) => o.computedId === n.modelValue);
-      t && !t.isDisabled && (e = t), e && p(e);
-    }, I = (e, t) => {
+      t && !t.isDisabled && (e = t), e && d(e);
+    }, E = (e, t) => {
       v("tab-changed", { tab: e, event: t });
-    }, x = te(() => {
+    }, N = oe(() => {
       if (n.loading || !s.value?.find((o) => o.isActive)?.isDisabled) return;
       const [t] = b.value;
-      p(t);
-    }, 100), p = (e, t) => {
+      d(t);
+    }, 100), d = (e, t) => {
       if (!((e.to || e.href) && (t?.metaKey || t?.ctrlKey)) && (t?.preventDefault(), !e.isDisabled)) {
         if (e.onClick && typeof e.onClick == "function") return e.onClick(e, t);
         if (e.href) {
@@ -105,31 +107,31 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
           C.meta.router_push(e.to);
           return;
         }
-        I(e, t), M(e.computedId), z.value = e.computedId;
+        E(e, t), z(e.computedId), w.value = e.computedId;
       }
     };
-    return K(y), O(x), R(
+    return K(_), O(N), R(
       () => n.loading,
       (e, t) => {
         !e && t && $(() => {
-          y();
+          _();
         });
       }
-    ), L("selfRegisterTabMethod", B), (e, t) => (a(), u("div", {
-      class: _(D.value),
-      style: U(w.value)
+    ), y("selfRegisterTabMethod", B), y("selfUnregisterTabMethod", x), (e, t) => (a(), p("div", {
+      class: g(I.value),
+      style: L(M.value)
     }, [
       i("div", ne, [
-        W(l(V), {
+        W(l(S), {
           "tag-name": "ul",
           role: "tablist",
           scrollable: "",
           class: "tabs-component-tabs"
         }, {
           default: q(() => [
-            (a(!0), u(G, null, H(s.value, (o, E) => J((a(), u("li", {
-              key: E,
-              class: _([{ "is-active": o.isActive, "is-disabled": o.isDisabled, "is-hidden": !o.visible }, "tabs-component-tab"]),
+            (a(!0), p(G, null, H(s.value, (o) => J((a(), p("li", {
+              key: o.computedId,
+              class: g([{ "is-active": o.isActive, "is-disabled": o.isDisabled, "is-hidden": !o.visible }, "tabs-component-tab"]),
               role: "presentation"
             }, [
               i("a", {
@@ -138,7 +140,7 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
                 href: o.href || o.to || o.hash || "javascript:void(0)",
                 class: "tabs-component-tab-a",
                 role: "tab",
-                onClick: (N) => p(o, N)
+                onClick: (P) => d(o, P)
               }, [
                 i("span", ce, [
                   o.iconPrepend ? (a(), m(l(h), {
@@ -154,11 +156,11 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
                     color: o.iconAppendColor,
                     size: "200"
                   }, null, 8, ["name", "color"])) : f("", !0),
-                  o.hasAppendCount ? (a(), m(l(T), {
+                  o.hasAppendCount ? (a(), m(l(V), {
                     key: 2,
                     title: o.appendCount,
                     "text-color": o.appendCountColor,
-                    size: l(oe).S,
+                    size: l(te).S,
                     class: "tabs-component-tab__tab-name_append-count"
                   }, null, 8, ["title", "text-color", "size"])) : f("", !0)
                 ])
@@ -177,5 +179,5 @@ const ne = { class: "tabs-component" }, se = ["aria-controls", "aria-selected",
   }
 });
 export {
-  ue as default
+  pe as default
 };

package/dist/components/templates/McModal/McModal.vue2.js

@@ -1,19 +1,19 @@
-import { defineComponent as Q, defineAsyncComponent as R, useSlots as q, ref as i, reactive as G, computed as g, watch as J, openBlock as n, createElementBlock as r, withModifiers as y, createCommentVNode as d, createElementVNode as c, normalizeStyle as K, normalizeClass as S, renderSlot as k, createVNode as M, unref as $, nextTick as U } from "vue";
-import { LineHeights as T } from "../../../types/styles/LineHeights.js";
-import { Sizes as z } from "../../../types/styles/Sizes.js";
-import { Spaces as H } from "../../../types/styles/Spaces.js";
-import { useTransition as X, TransitionPresets as Y } from "@vueuse/core";
-const Z = {
+import { defineComponent as oe, defineAsyncComponent as ae, useSlots as ne, ref as u, reactive as se, computed as S, watch as H, openBlock as i, createElementBlock as d, withModifiers as k, createCommentVNode as m, createElementVNode as h, normalizeStyle as re, normalizeClass as M, renderSlot as w, createVNode as T, unref as $ } from "vue";
+import { LineHeights as p } from "../../../types/styles/LineHeights.js";
+import { Sizes as f } from "../../../types/styles/Sizes.js";
+import { Spaces as _ } from "../../../types/styles/Spaces.js";
+import { useTransition as ie, TransitionPresets as de, useEventListener as me } from "@vueuse/core";
+const ce = {
   key: 0,
   class: "mc-modal__wrapper"
-}, ee = {
+}, ue = {
   key: 0,
   class: "mc-modal__header"
-}, le = { class: "mc-modal__title" }, oe = {
+}, he = { class: "mc-modal__title" }, pe = {
   key: 1,
   class: "mc-modal__control",
   id: "mcModalFooter"
-}, de = /* @__PURE__ */ Q({
+}, Se = /* @__PURE__ */ oe({
   __name: "McModal",
   props: {
     modelValue: {
@@ -119,11 +119,11 @@ const Z = {
     }
   },
   emits: ["before-open", "before-close", "opened", "closed", "back", "update:modelValue"],
-  setup(u, { emit: O }) {
-    const w = R(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), E = q(), s = O, o = u, p = i(0), N = X(p, {
-      duration: o.duration || 300,
-      transition: Y.easeOutQuart
-    }), t = i(null), f = i(null), m = i(null), e = G({
+  setup(g, { emit: E }) {
+    const B = ae(() => import("../../elements/McSvgIcon/McSvgIcon.vue.js")), F = ne(), r = E, l = g, b = u(0), O = ie(b, {
+      duration: l.duration || 300,
+      transition: de.easeOutQuart
+    }), s = u(null), V = u(null), c = u(null), e = se({
       scrolled_top: !1,
       scrolled_bottom: !1,
       small_indents: !1,
@@ -148,130 +148,166 @@ const Z = {
         }
       }
     });
-    g(() => !!E.title);
-    const P = g(() => ({
-      "mc-modal--arrow-visible": o.arrowVisible,
+    S(() => !!F.title);
+    const P = S(() => ({
+      "mc-modal--arrow-visible": l.arrowVisible,
       "mc-modal--scrolled-top": e.scrolled_top,
       "mc-modal--scrolled-bottom": e.scrolled_bottom,
-      "mc-modal--scrollable": o.scrollableContent,
-      "mc-modal--top-padding": o.topPadding,
+      "mc-modal--scrollable": l.scrollableContent,
+      "mc-modal--top-padding": l.topPadding,
       "mc-modal--small-indents": e.small_indents,
-      [`mc-modal--variation-${o.variation}`]: !!o.variation,
-      [`mc-modal--header-align-${o.headerAlign}`]: (o.closeVisible || o.arrowVisible) && !!o.headerAlign
-    })), B = g(() => ({
-      "--mc-modal-padding": H[e.indent.regular],
-      "--mc-modal-padding-small": H[e.indent.small],
-      "--mc-modal-header-line-height": T[e.header.title.line_height.regular],
-      "--mc-modal-header-line-height-small": T[e.header.title.line_height.small],
-      "--mc-modal-button-height": z[e.footer.button.regular],
-      "--mc-modal-button-height-small": z[e.footer.button.small],
-      "--mc-modal-max-width": `${o.maxWidth + 24}px`,
-      "--mc-modal-min-width": `${o.minWidth - 24}px`,
-      "--mc-modal-state-number": N.value
-    })), h = (l = !0) => {
-      l || (e.scrolled_top = !1, e.scrolled_bottom = !1, e.small_indents = !1), setTimeout(
-        () => {
-          if (t.value) {
-            const { scrollTop: a, scrollHeight: v, clientHeight: b } = t.value, C = 2;
-            e.scrolled_top = a > C, e.small_indents = e.scrolled_top && e.can_shorten_modal, e.scrolled_bottom = a + b < v - C;
-          }
-        },
-        l ? 0 : 300
-      );
-    }, V = () => h(), A = () => {
-      s("before-close"), t.value && (m.value && m.value.disconnect(), t.value.removeEventListener("scroll", V));
-    }, D = () => {
-      o.separators && (W(), t.value && (t.value.addEventListener("scroll", V, {
-        passive: !0
-      }), m.value = new ResizeObserver(L), m.value.observe(t.value)), h()), s("opened");
-    }, I = (l) => {
-      s("back", l);
+      [`mc-modal--variation-${l.variation}`]: !!l.variation,
+      [`mc-modal--header-align-${l.headerAlign}`]: (l.closeVisible || l.arrowVisible) && !!l.headerAlign
+    })), A = S(() => ({
+      "--mc-modal-padding": _[e.indent.regular],
+      "--mc-modal-padding-small": _[e.indent.small],
+      "--mc-modal-header-line-height": p[e.header.title.line_height.regular],
+      "--mc-modal-header-line-height-small": p[e.header.title.line_height.small],
+      "--mc-modal-button-height": f[e.footer.button.regular],
+      "--mc-modal-button-height-small": f[e.footer.button.small],
+      "--mc-modal-max-width": `${l.maxWidth + 24}px`,
+      "--mc-modal-min-width": `${l.minWidth - 24}px`,
+      "--mc-modal-state-number": O.value
+    })), N = () => {
+      e.scrolled_top = !1, e.scrolled_bottom = !1, e.small_indents = !1, e.can_shorten_modal = !1;
+    }, D = () => V.value?.parentElement ?? null, I = (t, o) => {
+      const n = getComputedStyle(t).getPropertyValue(o).trim();
+      if (!n) return 0;
+      const a = parseFloat(n);
+      return n.endsWith("rem") ? a * parseFloat(getComputedStyle(document.documentElement).fontSize) : a;
+    }, L = () => {
+      const t = parseFloat(getComputedStyle(document.documentElement).fontSize), o = (le) => parseFloat(le) * t, n = +e.modal_params["--mc-modal-padding"] || o(_[e.indent.regular]), a = +e.modal_params["--mc-modal-padding-small"] || o(_[e.indent.small]), K = +e.modal_params["--mc-modal-header-line-height"] || o(p[e.header.title.line_height.regular]), U = +e.modal_params["--mc-modal-header-line-height-small"] || o(p[e.header.title.line_height.small]), X = +e.modal_params["--mc-modal-button-height"] || o(f[e.footer.button.regular]), Y = +e.modal_params["--mc-modal-button-height-small"] || o(f[e.footer.button.small]), Z = (n - a) * 3 + a, ee = K - U, te = X - Y;
+      return Z + ee + te;
+    }, v = () => {
+      if (!s.value) return;
+      const { scrollTop: t, scrollHeight: o, clientHeight: n } = s.value, a = 2;
+      e.scrolled_top = t > a, e.small_indents ? e.small_indents = t > 0 : e.small_indents = t > a && e.can_shorten_modal, e.scrolled_bottom = t + n < o - a;
     }, W = () => {
+      y(), v();
+    };
+    me(s, "scroll", () => {
+      l.separators && W();
+    }, { passive: !0 });
+    const C = () => {
+      c.value?.disconnect(), c.value = null;
+    }, x = () => {
+      !s.value || !l.separators || (C(), c.value = new ResizeObserver(G), c.value.observe(s.value));
+    }, R = () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          q();
+        });
+      });
+    }, q = () => {
+      s.value && (j(), s.value.scrollTop = 0, y(), v());
+    }, Q = (t) => {
+      r("back", t);
+    }, j = () => {
       try {
-        f.value && Object.keys(B.value).forEach((l) => {
-          const a = parseFloat(getComputedStyle(f.value)?.getPropertyValue(l)) * parseFloat(getComputedStyle(document.documentElement).fontSize);
-          a && (e.modal_params[l] = a);
+        const t = D();
+        if (!t) return;
+        [
+          "--mc-modal-padding",
+          "--mc-modal-padding-small",
+          "--mc-modal-header-line-height",
+          "--mc-modal-header-line-height-small",
+          "--mc-modal-button-height",
+          "--mc-modal-button-height-small"
+        ].forEach((n) => {
+          const a = I(t, n);
+          a && (e.modal_params[n] = a);
         });
-      } catch (l) {
-        console.error(l);
+      } catch (t) {
+        console.error(t);
       }
-    }, F = () => {
-      const l = (+e.modal_params?.["--mc-modal-padding"] - +e.modal_params?.["--mc-modal-padding-small"]) * 3 + +e.modal_params?.["--mc-modal-padding-small"], a = +e.modal_params?.["--mc-modal-header-line-height"] - +e.modal_params?.["--mc-modal-header-line-height-small"], v = +e.modal_params?.["--mc-modal-button-height"] - +e.modal_params?.["--mc-modal-button-height-small"], b = l + a + v;
-      !e.small_indents && t.value && (e.can_shorten_modal = t.value?.scrollHeight - t.value?.clientHeight > b);
-    }, L = () => {
-      F(), h();
-    }, x = () => {
-      p.value = 1, s("before-open"), s("update:modelValue", !0), U(D);
-    }, _ = () => {
-      p.value = 0, A(), s("closed"), s("update:modelValue", !1);
-    }, j = () => {
-      o.clickBackdropToClose && _();
+    }, y = () => {
+      if (!s.value) return;
+      const { scrollTop: t, scrollHeight: o, clientHeight: n } = s.value, a = L();
+      (!e.small_indents || t === 0) && (e.can_shorten_modal = o - n > a);
+    }, G = () => {
+      y(), v();
+    }, z = () => {
+      r("before-close"), r("closed"), r("update:modelValue", !1);
+    }, J = () => {
+      l.clickBackdropToClose && z();
     };
-    return J(
-      () => o.modelValue,
-      (l, a) => {
-        l !== a && (l ? x() : _());
+    return H(
+      () => l.modelValue,
+      (t, o) => {
+        if (t !== o) {
+          if (t) {
+            b.value = 1, r("before-open");
+            return;
+          }
+          C(), N(), b.value = 0;
+        }
       },
       { immediate: !0 }
-    ), (l, a) => o.modelValue ? (n(), r("div", Z, [
-      o.showOverlay ? (n(), r("div", {
+    ), H(
+      s,
+      (t, o) => {
+        !l.modelValue || !t || !l.separators || (x(), o || (R(), r("opened")));
+      },
+      { flush: "post" }
+    ), (t, o) => l.modelValue ? (i(), d("div", ce, [
+      l.showOverlay ? (i(), d("div", {
         key: 0,
         class: "mc-modal__overlay",
-        onClick: y(j, ["stop"])
-      })) : d("", !0),
-      c("div", {
-        class: S(["mc-modal", P.value]),
-        style: K(B.value)
+        onClick: k(J, ["stop"])
+      })) : m("", !0),
+      h("div", {
+        class: M(["mc-modal", P.value]),
+        style: re(A.value)
       }, [
-        c("div", {
+        h("div", {
           ref_key: "modalInner",
-          ref: f,
-          class: S(["mc-modal__inner", { "mc-modal__inner--with-title": l.$slots.title }])
+          ref: V,
+          class: M(["mc-modal__inner", { "mc-modal__inner--with-title": t.$slots.title }])
         }, [
-          l.$slots.title ? (n(), r("div", ee, [
-            c("div", le, [
-              k(l.$slots, "title")
+          t.$slots.title ? (i(), d("div", ue, [
+            h("div", he, [
+              w(t.$slots, "title")
             ])
-          ])) : d("", !0),
-          c("div", {
+          ])) : m("", !0),
+          h("div", {
             ref_key: "mcModalBody",
-            ref: t,
+            ref: s,
             class: "mc-modal__body"
           }, [
-            k(l.$slots, "default")
+            w(t.$slots, "default")
           ], 512),
-          l.$slots.footer ? (n(), r("div", oe, [
-            k(l.$slots, "footer")
-          ])) : d("", !0),
-          u.arrowVisible ? (n(), r("button", {
+          t.$slots.footer ? (i(), d("div", pe, [
+            w(t.$slots, "footer")
+          ])) : m("", !0),
+          g.arrowVisible ? (i(), d("button", {
             key: 2,
             type: "button",
             class: "mc-modal__btn-back",
-            onClick: y(I, ["prevent"])
+            onClick: k(Q, ["prevent"])
           }, [
-            M($(w), {
+            T($(B), {
               name: "arrow_leftward",
               class: "mc-modal__icon-back"
             })
-          ])) : d("", !0),
-          u.closeVisible ? (n(), r("button", {
+          ])) : m("", !0),
+          g.closeVisible ? (i(), d("button", {
             key: 3,
             type: "button",
             class: "mc-modal__btn-close",
-            onClick: y(_, ["prevent"])
+            onClick: k(z, ["prevent"])
           }, [
-            M($(w), {
+            T($(B), {
               class: "mc-modal__icon-close",
               width: "24",
               height: "24",
               name: "close"
             })
-          ])) : d("", !0)
+          ])) : m("", !0)
         ], 2)
       ], 6)
-    ])) : d("", !0);
+    ])) : m("", !0);
   }
 });
 export {
-  de as default
+  Se as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui-v2",
-  "version": "0.0.327",
+  "version": "0.0.329",
   "license": "MIT",
   "description": "Design system for Mediacube services",
   "sideEffects": [