@nmorph/nmorph-ui-kit 2.2.59 → 3.0.1

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue.js

@@ -1,81 +1,83 @@
 import './NmorphCalendar.css';
 import f from "./NmorphCalendar.vue2.js";
-import { openBlock as o, createElementBlock as r, normalizeStyle as k, normalizeClass as i, renderSlot as n, createVNode as s, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as C, createTextVNode as _, toDisplayString as m } from "vue";
+import { openBlock as o, createElementBlock as n, normalizeStyle as k, normalizeClass as h, renderSlot as r, createVNode as s, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as C, createTextVNode as _, toDisplayString as m } from "vue";
 /* empty css                    */
 import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const T = ["data-date", "onClick"];
-function B(d, M, p, a, w, x) {
-  return o(), r(
+const g = ["data-date", "onClick"];
+function T(d, p, B, a, M, w) {
+  return o(), n(
     "div",
     {
-      class: i(a.modifiers),
+      class: h(a.modifiers),
       style: k(a.styles)
     },
     [
-      n(d.$slots, "header", {}, () => [
+      r(d.$slots, "header", {}, () => [
         s(a.NmorphCalendarHeader, {
           year: a.initialDate.getFullYear(),
           month: a.initialDate.getMonth(),
+          design: a.props.design,
           "show-previous-month-button": a.showHeaderButtons.showPreviousMonthButton,
           "show-today-button": a.showHeaderButtons.showTodayButton,
           "show-next-month-button": a.showHeaderButtons.showNextMonthButton,
           onClickNextMonth: a.setNextMonth,
           onClickPreviousMonth: a.setPreviousMonth,
           onClickToday: a.setTodayMonth
-        }, null, 8, ["year", "month", "show-previous-month-button", "show-today-button", "show-next-month-button"])
+        }, null, 8, ["year", "month", "design", "show-previous-month-button", "show-today-button", "show-next-month-button"])
       ]),
-      n(d.$slots, "content", {}, () => [
+      r(d.$slots, "content", {}, () => [
         s(a.NmorphTable, {
           data: a.calendar,
           bordered: "",
-          "row-hover": !1
+          "row-hover": !1,
+          design: a.props.design
         }, {
           default: l(() => [
-            (o(!0), r(
+            (o(!0), n(
               c,
               null,
-              y(a.days, (t) => (o(), D(a.NmorphTableColumn, {
-                key: `${t}`,
-                prop: t,
-                label: t.toUpperCase()
+              y(a.days, (e) => (o(), D(a.NmorphTableColumn, {
+                key: `${e}`,
+                prop: e,
+                label: e.toUpperCase()
               }, {
                 default: l(({ scope: b }) => [
-                  (o(!0), r(
+                  (o(!0), n(
                     c,
                     null,
-                    y(b.rows, (e, h) => (o(), D(a.NmorphTableCell, {
-                      key: h,
-                      row: h
+                    y(b.rows, (t, i) => (o(), D(a.NmorphTableCell, {
+                      key: i,
+                      row: i
                     }, {
                       default: l(() => [
                         C("div", {
-                          "data-date": `${a.dateData(e[t]).date}`,
-                          class: i([
+                          "data-date": `${a.dateData(t[e]).date}`,
+                          class: h([
                             "nmorph-calendar-date",
-                            `nmorph-calendar-date--${a.dateData(e[t]).monthType}`,
+                            `nmorph-calendar-date--${a.dateData(t[e]).monthType}`,
                             {
-                              "nmorph-calendar-date--today": a.dateData(e[t]).isToday && !a.dateData(e[t]).hidden && a.props.markToday
+                              "nmorph-calendar-date--today": a.dateData(t[e]).isToday && !a.dateData(t[e]).hidden && a.props.markToday
                             },
-                            { "nmorph-calendar-date--hidden": a.dateData(e[t]).hidden },
+                            { "nmorph-calendar-date--hidden": a.dateData(t[e]).hidden },
                             {
-                              "nmorph-calendar-date--selected": a.isValueSelected(a.dateData(e[t]).date)
+                              "nmorph-calendar-date--selected": a.isValueSelected(a.dateData(t[e]).date)
                             }
                           ]),
-                          onClick: (S) => a.clickDate(a.dateData(e[t]))
+                          onClick: (x) => a.clickDate(a.dateData(t[e]))
                         }, [
-                          n(d.$slots, "date-cell", {
+                          r(d.$slots, "date-cell", {
                             scope: {
-                              ...a.dateData(e[t]),
-                              selected: a.isValueSelected(a.dateData(e[t]).date)
+                              ...a.dateData(t[e]),
+                              selected: a.isValueSelected(a.dateData(t[e]).date)
                             }
                           }, () => [
                             _(
-                              m(a.dateData(e[t]).hidden ? "-" : a.dateData(e[t]).value),
+                              m(a.dateData(t[e]).hidden ? "-" : a.dateData(t[e]).value),
                               1
                               /* TEXT */
                             )
                           ])
-                        ], 10, T)
+                        ], 10, g)
                       ]),
                       _: 2
                       /* DYNAMIC */
@@ -93,14 +95,14 @@ function B(d, M, p, a, w, x) {
           ]),
           _: 3
           /* FORWARDED */
-        }, 8, ["data"])
+        }, 8, ["data", "design"])
       ])
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const z = /* @__PURE__ */ v(f, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
+const z = /* @__PURE__ */ v(f, [["render", T], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
 export {
   z as default
 };

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue2.js

@@ -1,5 +1,5 @@
 import './NmorphCalendar.css';
-import { defineComponent as R, ref as x, onMounted as O, reactive as k, watch as v, computed as i } from "vue";
+import { defineComponent as R, ref as x, onMounted as O, reactive as k, watch as v, computed as s } from "vue";
 import { useModifiers as j } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as z } from "../../../utils/common.js";
 import W from "./inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue.js";
@@ -16,17 +16,18 @@ const ue = /* @__PURE__ */ R({
     range: { type: null, required: !1, default: void 0 },
     type: { type: null, required: !1, default: "date" },
     modelValue: { type: [Date, Array, null], required: !1, default: () => /* @__PURE__ */ new Date() },
-    cellHeight: { type: [Number, String], required: !1, default: void 0 }
+    cellHeight: { type: [Number, String], required: !1, default: void 0 },
+    design: { type: null, required: !1, default: "nmorph" }
   },
   emits: ["update:model-value", "update-initial-date"],
   setup(N, { expose: b, emit: _ }) {
     b();
-    const r = N, s = _, { days: h } = Z(), y = () => {
-      o.value = M.value;
+    const r = N, i = _, { days: h } = Z(), y = () => {
+      l.value = M.value;
     }, C = () => {
-      o.value = /* @__PURE__ */ new Date();
+      l.value = /* @__PURE__ */ new Date();
     }, g = () => {
-      o.value = A.value;
+      l.value = A.value;
     }, u = () => {
       throw new Error("model value and type prop not matched");
     }, c = (e) => {
@@ -36,36 +37,36 @@ const ue = /* @__PURE__ */ R({
           return d(e);
         u();
       }
-      const l = Array.isArray(e) && e.every((a) => a instanceof Date);
+      const o = Array.isArray(e) && e.every((a) => a instanceof Date);
       if (r.type === "dates") {
-        if (l)
+        if (o)
           return e.map((a) => d(a));
         u();
       }
       if (r.type === "daterange") {
-        if (l)
+        if (o)
           return e.map((a) => d(a)).slice(0, 2);
         u();
       }
-    }, B = (e) => {
+    }, q = (e) => {
       if (t.value === null) return;
-      const { monthType: l, hidden: a } = e;
+      const { monthType: o, hidden: a } = e;
       if (a) return;
-      l === "next" && g(), l === "previous" && y();
+      o === "next" && g(), o === "previous" && y();
       const { date: n } = e;
-      if (r.type === "date" && (t.value = n, s("update:model-value", t.value)), r.type === "dates") {
+      if (r.type === "date" && (t.value = n, i("update:model-value", t.value)), r.type === "dates") {
         if (!Array.isArray(t.value)) return u();
         const m = n.toDateString(), w = t.value.map((P) => P.toDateString()).indexOf(m);
-        w !== -1 ? t.value.splice(w, 1) : t.value.push(n), s("update:model-value", t.value);
+        w !== -1 ? t.value.splice(w, 1) : t.value.push(n), i("update:model-value", t.value);
       }
       if (r.type === "daterange") {
         if (!Array.isArray(t.value)) return u();
-        t.value.length === 0 ? t.value.push(n) : t.value.length === 1 ? n < t.value[0] ? t.value = [n, t.value[0]] : t.value.push(n) : t.value = [n], s("update:model-value", t.value.slice(0, 2));
+        t.value.length === 0 ? t.value.push(n) : t.value.length === 1 ? n < t.value[0] ? t.value = [n, t.value[0]] : t.value.push(n) : t.value = [n], i("update:model-value", t.value.slice(0, 2));
       }
-    }, D = (e, l) => {
-      const [a, n] = l;
-      return l.length === 1 ? e.toDateString() === a.toDateString() : a && n ? e >= d(a) && e <= d(n) : !1;
-    }, V = (e) => {
+    }, D = (e, o) => {
+      const [a, n] = o;
+      return o.length === 1 ? e.toDateString() === a.toDateString() : a && n ? e >= d(a) && e <= d(n) : !1;
+    }, B = (e) => {
       if (t.value === null) return !1;
       if (r.type === "date")
         return Array.isArray(t.value) ? u() : t.value.toDateString() === e.toDateString();
@@ -73,15 +74,15 @@ const ue = /* @__PURE__ */ R({
         return Array.isArray(t.value) ? !!t.value.find((a) => a.toDateString() === e.toDateString()) : u();
       if (r.type === "daterange")
         return Array.isArray(t.value) ? D(e, t.value) : u();
-    }, o = x(r.initialDate), t = x(c(r.modelValue));
+    }, l = x(r.initialDate), t = x(c(r.modelValue));
     O(() => {
-      s("update:model-value", t.value);
+      i("update:model-value", t.value);
     });
     let p = k([]);
     const f = () => {
-      p = [], K(o, r.range).forEach((l) => {
+      p = [], K(l, r.range).forEach((o) => {
         const a = {};
-        l.forEach((n, m) => {
+        o.forEach((n, m) => {
           const T = h[m];
           a[T] = n;
         }), p.push(a);
@@ -90,41 +91,41 @@ const ue = /* @__PURE__ */ R({
     v(
       () => r.initialDate,
       (e) => {
-        o.value = e;
+        l.value = e;
       },
       {
         deep: !0
       }
-    ), v(o, () => {
-      f(), s("update-initial-date", o.value);
+    ), v(l, () => {
+      f(), i("update-initial-date", l.value);
     }), v(
       () => r.modelValue,
       (e) => {
         t.value = c(e);
       }
     );
-    const M = i(() => new Date(o.value.setMonth(o.value.getMonth() - 1))), A = i(() => new Date(o.value.setMonth(o.value.getMonth() + 1))), q = i(() => {
-      const { range: e } = r, l = e ? F(o.value, e[0]) : !0, a = e ? G(o.value, e[1]) : !0, n = J(e);
+    const M = s(() => new Date(l.value.setMonth(l.value.getMonth() - 1))), A = s(() => new Date(l.value.setMonth(l.value.getMonth() + 1))), V = s(() => {
+      const { range: e } = r, o = e ? F(l.value, e[0]) : !0, a = e ? G(l.value, e[1]) : !0, n = J(e);
       return {
-        showPreviousMonthButton: l,
+        showPreviousMonthButton: o,
         showNextMonthButton: a,
         showTodayButton: n
       };
-    }), E = i(
+    }), E = s(
       () => j({
         "nmorph-calendar": []
       })
-    ), H = i(
+    ), H = s(
       () => z({
-        "--table-data-cell-height": r.cellHeight
+        "--nmorph-private-calendar-cell-height": r.cellHeight
       })
     ), I = (e) => e;
     f();
-    const S = { props: r, emit: s, days: h, setPreviousMonth: y, setTodayMonth: C, setNextMonth: g, wrongType: u, convertValue: c, clickDate: B, isDateInRange: D, isValueSelected: V, initialDate: o, selectedValue: t, get calendar() {
+    const S = { props: r, emit: i, days: h, setPreviousMonth: y, setTodayMonth: C, setNextMonth: g, wrongType: u, convertValue: c, clickDate: q, isDateInRange: D, isValueSelected: B, initialDate: l, selectedValue: t, get calendar() {
       return p;
     }, set calendar(e) {
       p = e;
-    }, updateCalendar: f, prevMonth: M, nextMonth: A, showHeaderButtons: q, modifiers: E, styles: H, dateData: I, get NmorphTable() {
+    }, updateCalendar: f, prevMonth: M, nextMonth: A, showHeaderButtons: V, modifiers: E, styles: H, dateData: I, get NmorphTable() {
       return U;
     }, get NmorphTableColumn() {
       return Q;

package/dist/components/data/nmorph-calendar/inner-components/nmorph-calendar-header/NmorphCalendarHeader.css

@@ -1 +1 @@
-.nmorph-calendar-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:8px}.nmorph-calendar-header .nmorph-calendar-header__actions{display:flex}.nmorph-calendar-header .nmorph-calendar-header__action:nth-child(2){margin:0 var(--indentation-03)}.nmorph-calendar-header .nmorph-calendar-header__text{width:160px;margin-right:8px;font-weight:800;font-size:var(--font-size-extra-large);line-height:var(--line-height-loose)}
+.nmorph-calendar-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:8px}.nmorph-calendar-header .nmorph-calendar-header__actions{display:flex}.nmorph-calendar-header .nmorph-calendar-header__action:nth-child(2){margin:0 var(--indentation-03)}.nmorph-calendar-header .nmorph-calendar-header__text{width:160px;margin-right:8px;font-weight:var(--font-weight-extrabold);font-size:var(--nmorph-typography-title-large-font-size);line-height:var(--nmorph-typography-title-large-line-height)}

package/dist/components/data/nmorph-calendar/inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue.js

@@ -1,17 +1,17 @@
 import './NmorphCalendarHeader.css';
-import s from "./NmorphCalendarHeader.vue2.js";
-import { openBlock as r, createElementBlock as _, normalizeClass as f, renderSlot as p, createElementVNode as m, toDisplayString as c, createBlock as l, withCtx as n, createVNode as t, createCommentVNode as d } from "vue";
+import h from "./NmorphCalendarHeader.vue2.js";
+import { openBlock as n, createElementBlock as _, normalizeClass as f, renderSlot as p, createElementVNode as m, toDisplayString as c, createBlock as d, withCtx as r, createVNode as t, createCommentVNode as i } from "vue";
 /* empty css                          */
 import N from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const k = { class: "nmorph-calendar-header__text" }, v = { class: "nmorph-calendar-header__actions" };
-function u(h, e, a, o, y, B) {
-  return r(), _(
+const k = { class: "nmorph-calendar-header__text" }, g = { class: "nmorph-calendar-header__actions" };
+function v(s, e, a, o, y, B) {
+  return n(), _(
     "div",
     {
       class: f(o.modifiers)
     },
     [
-      p(h.$slots, "default", {}, () => [
+      p(s.$slots, "default", {}, () => [
         m(
           "div",
           k,
@@ -19,15 +19,16 @@ function u(h, e, a, o, y, B) {
           1
           /* TEXT */
         ),
-        m("div", v, [
-          a.showPreviousMonthButton ? (r(), l(o.NmorphButton, {
+        m("div", g, [
+          a.showPreviousMonthButton ? (n(), d(o.NmorphButton, {
             key: 0,
             class: "nmorph-calendar-header__action",
-            onClick: e[0] || (e[0] = (i) => o.emit("click-previous-month"))
+            design: o.props.design,
+            onClick: e[0] || (e[0] = (l) => o.emit("click-previous-month"))
           }, {
-            default: n(() => [
+            default: r(() => [
               t(o.NmorphIcon, null, {
-                default: n(() => [
+                default: r(() => [
                   t(o.NmorphIconArrowLeft)
                 ]),
                 _: 1
@@ -36,21 +37,23 @@ function u(h, e, a, o, y, B) {
             ]),
             _: 1
             /* STABLE */
-          })) : d("v-if", !0),
-          a.showTodayButton ? (r(), l(o.NmorphButton, {
+          }, 8, ["design"])) : i("v-if", !0),
+          a.showTodayButton ? (n(), d(o.NmorphButton, {
             key: 1,
             class: "nmorph-calendar-header__action",
             text: "Today",
-            onClick: e[1] || (e[1] = (i) => o.emit("click-today"))
-          })) : d("v-if", !0),
-          a.showNextMonthButton ? (r(), l(o.NmorphButton, {
+            design: o.props.design,
+            onClick: e[1] || (e[1] = (l) => o.emit("click-today"))
+          }, null, 8, ["design"])) : i("v-if", !0),
+          a.showNextMonthButton ? (n(), d(o.NmorphButton, {
             key: 2,
             class: "nmorph-calendar-header__action",
-            onClick: e[2] || (e[2] = (i) => o.emit("click-next-month"))
+            design: o.props.design,
+            onClick: e[2] || (e[2] = (l) => o.emit("click-next-month"))
           }, {
-            default: n(() => [
+            default: r(() => [
               t(o.NmorphIcon, null, {
-                default: n(() => [
+                default: r(() => [
                   t(o.NmorphIconArrowRight)
                 ]),
                 _: 1
@@ -59,7 +62,7 @@ function u(h, e, a, o, y, B) {
             ]),
             _: 1
             /* STABLE */
-          })) : d("v-if", !0)
+          }, 8, ["design"])) : i("v-if", !0)
         ])
       ])
     ],
@@ -67,7 +70,7 @@ function u(h, e, a, o, y, B) {
     /* CLASS */
   );
 }
-const g = /* @__PURE__ */ N(s, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue"]]);
+const I = /* @__PURE__ */ N(h, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue"]]);
 export {
-  g as default
+  I as default
 };

package/dist/components/data/nmorph-calendar/inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue2.js

@@ -1,19 +1,20 @@
 import './NmorphCalendarHeader.css';
 import { defineComponent as u, computed as i } from "vue";
 import { useModifiers as h } from "../../../../../utils/create-modifiers.js";
-import c from "../../../../../assets/icons/arrow-right.svg.js";
-import s from "../../../../../assets/icons/arrow-left.svg.js";
-import a from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import s from "../../../../../assets/icons/arrow-right.svg.js";
+import a from "../../../../../assets/icons/arrow-left.svg.js";
+import c from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
 import { getMonthName as d } from "../../utils.js";
 import f from "../../../../basic/nmorph-button/NmorphButton.vue.js";
-const I = /* @__PURE__ */ u({
+const q = /* @__PURE__ */ u({
   __name: "NmorphCalendarHeader",
   props: {
     year: { type: Number, required: !0 },
     month: { type: Number, required: !0 },
     showPreviousMonthButton: { type: Boolean, required: !0 },
     showNextMonthButton: { type: Boolean, required: !0 },
-    showTodayButton: { type: Boolean, required: !0 }
+    showTodayButton: { type: Boolean, required: !0 },
+    design: { type: null, required: !1, default: "nmorph" }
   },
   emits: ["click-previous-month", "click-today", "click-next-month"],
   setup(r, { expose: o, emit: t }) {
@@ -27,15 +28,15 @@ const I = /* @__PURE__ */ u({
     }, get getMonthName() {
       return d;
     }, get NmorphIcon() {
-      return a;
+      return c;
     }, get NmorphIconArrowLeft() {
-      return s;
+      return a;
     }, get NmorphIconArrowRight() {
-      return c;
+      return s;
     } };
     return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
   }
 });
 export {
-  I as default
+  q as default
 };

package/dist/components/data/nmorph-card/NmorphCard.css

@@ -1 +1 @@
-.nmorph-card{--card-padding: var(--indentation-04);display:flex;flex-direction:column;width:fit-content;max-width:100%;padding:var(--card-padding);border-radius:var(--nmorph-card-radius, var(--default-border-radius))}.nmorph-card.nmorph-card--fill{width:100%}.nmorph-card .nmorph-card__content{height:100%;padding:var(--nmorph-card-content-padding, 0)}.nmorph-card .nmorph-card__header{font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-card .nmorph-card__footer{height:fit-content;margin-top:4px;font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-card.nmorph--shadow-combined{background:var(--nmorph-main-color);border:var(--nmorph-card-combined-border-width) solid var(--nmorph-main-color);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),inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-.5 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}
+.nmorph-card{--nmorph-private-card-padding: var(--indentation-04);--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: none;--nmorph-private-card-shadow: none;position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--nmorph-private-card-padding);background:var(--nmorph-private-card-background);border:var(--nmorph-private-card-border);border-radius:var(--nmorph-private-card-radius, var(--default-border-radius));box-shadow:var(--nmorph-private-card-shadow)}.nmorph-card.nmorph-card--fill{width:100%}.nmorph-card .nmorph-card__content{height:100%;padding:var(--nmorph-private-card-content-padding, 0)}.nmorph-card .nmorph-card__header{font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height)}.nmorph-card .nmorph-card__footer{height:fit-content;margin-top:4px;font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-card.nmorph-card--nmorph{--nmorph-private-card-background: var(--nmorph-main-color)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--outset{--nmorph-private-card-shadow: var(--nmorph-shadow-outset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--inset{--nmorph-private-card-shadow: var(--nmorph-shadow-inset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--combined{--nmorph-private-card-border: var(--nmorph-private-card-combined-border-width) solid var(--nmorph-main-color);--nmorph-private-card-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), inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color), inset calc(-1 * var(--base-shadow-width)) calc(-.5 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-card.nmorph-card--plain{--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: var(--nmorph-plain-border);--nmorph-private-card-shadow: none}

package/dist/components/data/nmorph-card/NmorphCard.vue2.js

@@ -1,11 +1,12 @@
 import './NmorphCard.css';
-import { defineComponent as f, useSlots as c, computed as a } from "vue";
-import { useModifiers as m } from "../../../utils/create-modifiers.js";
+import { defineComponent as m, useSlots as c, computed as o } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
 import { toCssSize as d } from "../../../utils/common.js";
-import { NmorphShadowType as g } from "../../../types/common.types.js";
-const v = /* @__PURE__ */ f({
+import { NmorphShadowType as h } from "../../../types/common.types.js";
+const q = /* @__PURE__ */ m({
   __name: "NmorphCard",
   props: {
+    design: { type: null, required: !1, default: "nmorph" },
     shadowType: { type: null, required: !1, default: "outset" },
     combinedShadowBorderWidth: { type: Number, required: !1, default: 0 },
     cardPadding: { type: [Number, String], required: !1, default: void 0 },
@@ -16,27 +17,27 @@ const v = /* @__PURE__ */ f({
     fill: { type: Boolean, required: !1, default: !0 },
     tag: { type: String, required: !1, default: "div" }
   },
-  setup(n, { expose: s }) {
-    s();
-    const e = n, p = c(), u = a(
-      () => m({
-        nmorph: [g[e.shadowType]],
-        "nmorph-card": [e.shadowType, e.fill ? "fill" : "fit-content"]
+  setup(s, { expose: p }) {
+    p();
+    const e = s, u = c(), r = o(() => e.design || "nmorph"), l = o(
+      () => g({
+        nmorph: [r.value === "nmorph" ? h[e.shadowType] : ""],
+        "nmorph-card": [r.value, e.shadowType, e.fill ? "fill" : "fit-content"]
       })
-    ), l = a(() => {
-      const r = e.padding !== void 0 ? d(e.padding) : d(e.cardPadding), o = d(e.radius), i = d(e.contentPadding);
+    ), f = o(() => {
+      const t = e.padding !== void 0 ? d(e.padding) : d(e.cardPadding), a = d(e.radius), n = d(e.contentPadding);
       return {
         ...e.shadowType === "combined" && {
-          "--nmorph-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
+          "--nmorph-private-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
         },
-        ...r !== void 0 && { "--card-padding": r, padding: r },
-        ...o !== void 0 && { "--nmorph-card-radius": o },
-        ...i !== void 0 && { "--nmorph-card-content-padding": i }
+        ...t !== void 0 && { "--nmorph-private-card-padding": t, padding: t },
+        ...a !== void 0 && { "--nmorph-private-card-radius": a },
+        ...n !== void 0 && { "--nmorph-private-card-content-padding": n }
       };
-    }), t = { props: e, slots: p, modifiers: u, styles: l };
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+    }), i = { props: e, slots: u, resolvedDesign: r, modifiers: l, styles: f };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  v as default
+  q as default
 };

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

@@ -0,0 +1 @@
+.nmorph-carousel{--nmorph-private-carousel-height: 500px;--nmorph-private-carousel-frame-border: 10px;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%;padding:var(--indentation-03);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(--indentation-02);rotate:-90deg}.nmorph-carousel .nmorph-carousel__next{left:var(--indentation-02);rotate:90deg}.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,12 +1,14 @@
+import './NmorphCarousel.css';
 import d from "./NmorphCarousel.vue2.js";
-import { openBlock as o, createElementBlock as e, normalizeClass as t, createElementVNode as n, normalizeStyle as h, Fragment as i, renderList as s, createVNode as l, withCtx as m, renderSlot as u } from "vue";
-import p from "../../../_virtual/_plugin-vue_export-helper.js";
+import { openBlock as o, createElementBlock as e, 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";
+/* 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, w) {
   return o(), e(
     "div",
     {
-      class: t(r.modifiers)
+      class: c(r.modifiers)
     },
     [
       n(
@@ -35,15 +37,15 @@ function k(_, N, I, r, b, w) {
         (o(!0), e(
           i,
           null,
-          s(r.carouselData, (a, c) => (o(), e("div", {
-            key: c,
+          s(r.carouselData, (a, t) => (o(), e("div", {
+            key: t,
             class: "nmorph-carousel__element-indicator-wrapper",
-            onClick: (y) => r.elementIndicator(c)
+            onClick: (y) => r.elementIndicator(t)
           }, [
             n(
               "div",
               {
-                class: t(["nmorph-carousel__element-indicator", { "nmorph-carousel__element-indicator--active": r.isCurrentElementActive(c) }])
+                class: c(["nmorph-carousel__element-indicator", { "nmorph-carousel__element-indicator--active": r.isCurrentElementActive(t) }])
               },
               null,
               2
@@ -78,13 +80,13 @@ function k(_, N, I, r, b, w) {
           /* STABLE */
         })
       ]),
-      u(_.$slots, "default")
+      p(_.$slots, "default")
     ],
     2
     /* CLASS */
   );
 }
-const E = /* @__PURE__ */ p(d, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-carousel/NmorphCarousel.vue"]]);
+const z = /* @__PURE__ */ u(d, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-carousel/NmorphCarousel.vue"]]);
 export {
-  E as default
+  z as default
 };

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

@@ -1,39 +1,42 @@
-import { defineComponent as N, ref as p, computed as a, provide as D, watch as d } from "vue";
-import { useModifiers as M } from "../../../utils/create-modifiers.js";
-import { generateUUID as w } from "../../../utils/common.js";
-import b from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import y from "../../../assets/icons/chevron-down.svg.js";
+import './NmorphCarousel.css';
+import { defineComponent as N, ref as p, computed as u, provide as w, watch as d } from "vue";
+import { useModifiers as D } from "../../../utils/create-modifiers.js";
+import { generateUUID as M } from "../../../utils/common.js";
+import y from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import b from "../../../assets/icons/chevron-down.svg.js";
 const A = /* @__PURE__ */ N({
   __name: "NmorphCarousel",
   props: {
+    design: { type: null, required: !1, default: "nmorph" },
     loop: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["change"],
-  setup(v, { expose: f, emit: h }) {
-    f();
-    const e = p(0), u = v, l = h, _ = a(
-      () => M({
-        "nmorph-carousel": []
+  setup(f, { expose: v, emit: h }) {
+    v();
+    const e = p(0), o = f, l = h, g = u(
+      () => D({
+        nmorph: [o.design === "nmorph" ? "shadow-outset" : ""],
+        "nmorph-carousel": [o.design]
       })
-    ), n = p([]), s = w();
-    D("carousel-data", { data: n, carouselId: s });
-    const r = a(() => n.value.length), c = (t) => r.value ? u.loop ? (t + r.value) % r.value : Math.min(Math.max(t, 0), r.value - 1) : 0, o = (t) => {
-      const m = c(t);
+    ), a = p([]), s = M();
+    w("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 m = i(t);
       m !== e.value && (e.value = m);
-    }, I = () => o(e.value - 1), S = () => o(e.value + 1), g = a(() => `translateX(-${e.value * 100}%)`), x = (t) => t === e.value, C = (t) => {
-      o(t);
+    }, _ = () => n(e.value - 1), I = () => n(e.value + 1), S = u(() => `translateX(-${e.value * 100}%)`), x = (t) => t === e.value, C = (t) => {
+      n(t);
     };
     d(r, (t) => {
       e.value > t - 1 && (e.value = Math.max(t - 1, 0));
     }), d(e, () => {
       l("change", e.value);
     });
-    const i = { currentSlide: e, props: u, emit: l, modifiers: _, carouselData: n, carouselId: s, slideCount: r, normalizeSlideIndex: c, goToSlide: o, prevSlide: I, nextSlide: S, translateX: g, isCurrentElementActive: x, elementIndicator: C, get NmorphIcon() {
-      return b;
-    }, get NmorphIconChevronDown() {
+    const c = { currentSlide: e, props: o, emit: l, modifiers: g, carouselData: a, carouselId: s, slideCount: r, normalizeSlideIndex: i, goToSlide: n, prevSlide: _, nextSlide: I, translateX: S, isCurrentElementActive: x, elementIndicator: C, get NmorphIcon() {
       return y;
+    }, get NmorphIconChevronDown() {
+      return b;
     } };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {