@nmorph/nmorph-ui-kit 2.2.12 → 2.2.15

package/dist/components/data/nmorph-table/NmorphTable.vue2.js

@@ -1,52 +1,71 @@
 import './NmorphTable.css';
-import { defineComponent as w, computed as b, ref as l, provide as g, watch as B } from "vue";
-import { useModifiers as D } from "../../../utils/create-modifiers.js";
-import { generateUUID as j } from "../../../utils/common.js";
-import x from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
-const M = /* @__PURE__ */ w({
+import { defineComponent as j, computed as r, ref as s, provide as q, watch as I } from "vue";
+import { useModifiers as T } from "../../../utils/create-modifiers.js";
+import { generateUUID as M } from "../../../utils/common.js";
+import Q from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
+import { useVirtualList as U } from "../../../hooks/use-virtual-list.js";
+const P = /* @__PURE__ */ j({
   __name: "NmorphTable",
   props: {
     data: { type: Array, required: !1, default: () => [] },
     rowHover: { type: Boolean, required: !1, default: !0 },
     bordered: { type: Boolean, required: !1, default: !1 },
     sort: { type: Object, required: !1, default: void 0 },
-    design: { type: String, required: !1, default: "nmorph" }
+    design: { type: String, required: !1, default: "nmorph" },
+    virtual: { type: Boolean, required: !1, default: !1 },
+    virtualHeight: { type: [Number, String], required: !1, default: "320px" },
+    virtualOverscan: { type: Number, required: !1, default: 5 },
+    virtualRowHeight: { type: Number, required: !1, default: 42 }
   },
-  setup(y, { expose: C }) {
-    C();
-    const r = y, _ = b(
-      () => D({
-        "nmorph-table": [`${r.design}`]
+  setup(x, { expose: W }) {
+    W();
+    const t = x, B = r(
+      () => T({
+        "nmorph-table": [`${t.design}`]
       })
-    ), u = l(r.data), n = l(r.sort), W = (e, o) => {
-      n.value && (n.value[o] = e, u.value.sort((c, f) => {
-        const m = String(c[o]).toLowerCase(), t = String(f[o]).toLowerCase();
+    ), l = s([...t.data]), i = r(() => t.virtual), g = r(() => t.virtualRowHeight), b = r(() => t.virtualOverscan), d = U(l, {
+      enabled: i,
+      itemHeight: g,
+      overscan: b
+    }), y = r(
+      () => i.value ? d.virtualItems.value.map((e) => e.item) : l.value
+    ), n = s(t.sort), N = (e, o) => {
+      n.value && (n.value[o] = e, l.value.sort((m, p) => {
+        const h = String(m[o]).toLowerCase(), a = String(p[o]).toLowerCase();
         if (!n.value)
           return 0;
-        const i = n.value[o];
-        return i === "ascending" ? m.localeCompare(t) : i === "descending" ? t.localeCompare(m) : 0;
+        const c = n.value[o];
+        return c === "ascending" ? h.localeCompare(a) : c === "descending" ? a.localeCompare(h) : 0;
       }));
-    }, s = l(null), a = l([]);
-    g("table-data", { rows: u, columns: a });
-    const p = b(() => {
-      const e = a.value.map((t) => t.width).filter((t) => !!t), o = e.length, c = e.reduce((t, i) => (t += Number(i), t), 0), f = a.value.length - o;
-      return s.value?.clientWidth ? (s.value?.clientWidth - c) / f : 0;
-    }), S = (e) => e !== "" ? e : p.value, d = l(0);
-    B(
-      () => r.data,
+    }, f = s(null), u = s([]);
+    q("table-data", { rows: y, columns: u });
+    const w = r(() => {
+      const e = u.value.map((a) => a.width).filter((a) => !!a), o = e.length, m = e.reduce((a, c) => (a += Number(c), a), 0), p = u.value.length - o;
+      return f.value?.clientWidth ? (f.value?.clientWidth - m) / p : 0;
+    }), O = (e) => e !== "" ? e : w.value, v = s(0);
+    I(
+      () => t.data,
       () => {
-        d.value = d.value + 1, u.value = r.data, a.value = [];
+        v.value = v.value + 1, l.value = [...t.data], u.value = [];
       },
       {
         immediate: !0
       }
     );
-    const q = (e) => typeof e == "object" ? "" : e, v = j();
-    g("table-identifier", v);
-    const h = { props: r, modifiers: _, rows: u, sortData: n, onSort: W, nmorphDOMTable: s, columns: a, defaultColWidth: p, getWidth: S, key: d, tableData: q, tableIdentifier: v, NmorphSortButton: x };
-    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
+    const R = (e) => typeof e == "object" ? "" : e, C = M();
+    q("table-identifier", C);
+    const S = (e) => typeof e == "number" ? `${e}px` : e, H = r(() => S(t.virtualHeight)), $ = r(() => ({
+      "--table-virtual-row-height": `${t.virtualRowHeight}px`,
+      height: i.value ? H.value : void 0,
+      overflowY: i.value ? "auto" : void 0
+    })), D = r(() => ({
+      height: `${d.totalHeight.value}px`
+    })), L = r(() => ({
+      transform: `translateY(${d.offsetTop.value}px)`
+    })), _ = { props: t, modifiers: B, rows: l, virtualEnabled: i, virtualRowHeight: g, virtualOverscan: b, virtualList: d, tableRows: y, sortData: n, onSort: N, nmorphDOMTable: f, columns: u, defaultColWidth: w, getWidth: O, key: v, tableData: R, tableIdentifier: C, getCssSize: S, virtualHeight: H, tableBodyStyle: $, virtualSpacerStyle: D, virtualContentStyle: L, NmorphSortButton: Q };
+    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
   }
 });
 export {
-  M as default
+  P as default
 };

package/dist/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.css

@@ -1 +1 @@
-.nmorph-sort-button{display:flex;align-items:center}.nmorph-sort-button .nmorph-button__content{display:flex;align-items:center;justify-content:center;flex-direction:column}.nmorph-sort-button .nmorph-sort-button__icon-up{margin-bottom:-1px;transform:rotate(180deg)}.nmorph-sort-button .nmorph-sort-button__icon-down{margin-top:-1px}.nmorph-sort-button.nmorph-sort-button--ascending .nmorph-sort-button__icon-up,.nmorph-sort-button.nmorph-sort-button--descending .nmorph-sort-button__icon-down{--color: var(--nmorph-accent-color)}
+.nmorph-sort-button{display:flex;align-items:center}.nmorph-sort-button .nmorph-button__content{display:flex;flex-direction:column;justify-content:center;align-items:center}.nmorph-sort-button .nmorph-sort-button__icon-up{margin-bottom:-1px;transform:rotate(180deg)}.nmorph-sort-button .nmorph-sort-button__icon-down{margin-top:-1px}.nmorph-sort-button.nmorph-sort-button--ascending .nmorph-sort-button__icon-up,.nmorph-sort-button.nmorph-sort-button--descending .nmorph-sort-button__icon-down{--color: var(--nmorph-accent-color)}

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue.js

@@ -14,9 +14,8 @@ function p(f, _, d, r, u, g) {
         s(r.tagList, (o) => (e(), m(
           r.NmorphTagItem,
           i({
-            key: o.value,
-            ref_for: !0
-          }, o, { onClose: r.closeTagHandler }),
+            key: o.value
+          }, { ref_for: !0 }, o, { onClose: r.closeTagHandler }),
           null,
           16
           /* FULL_PROPS */

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.css

@@ -1 +1 @@
-.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);border:solid 2px var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px}.nmorph-tag-item.nmorph-tag-item--nmorph-design{border:none;background:var(--nmorph-main-color);box-shadow: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(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}
+.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);border:solid 2px var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px}.nmorph-tag-item.nmorph-tag-item--nmorph-design{background:var(--nmorph-main-color);border:none;box-shadow: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(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}

package/dist/components/feedback/nmorph-alert/NmorphAlert.css

@@ -1 +1 @@
-.nmorph-alert{--background-color: var(--nmorph-overlay-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-white-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{line-height:1;font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-alert .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}.nmorph-alert .nmorph-alert__close{align-self:var(--nmorph-alert-close-align)}
+.nmorph-alert{--background-color: var(--nmorph-overlay-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-white-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{font-weight:600;font-size:var(--font-size-medium);line-height:1;line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{align-self:var(--nmorph-alert-close-align);margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-alert .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}

package/dist/components/feedback/nmorph-callout/NmorphCallout.css

@@ -1 +1 @@
-.nmorph-callout{--callout-color: var(--nmorph-accent-color);position:relative;padding:8px 12px;overflow:hidden;border-radius:4px}.nmorph-callout:before{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose);margin-bottom:8px}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:pre-wrap}
+.nmorph-callout{--callout-color: var(--nmorph-accent-color);position:relative;margin-bottom:12px;padding:8px 12px;overflow:hidden;border-radius:4px}.nmorph-callout:before{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:8px;font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:pre-wrap}

package/dist/components/feedback/nmorph-dialog/NmorphDialog.css

@@ -1 +1 @@
-.nmorph-dialog{width:var(--width);padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);--width: var(--nmorph-dialog-width)}.nmorph-dialog .nmorph-dialog__header{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{cursor:pointer}
+.nmorph-dialog{position:absolute;top:50%;left:50%;width:var(--width);padding:var(--indentation-04);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%)}.nmorph-dialog .nmorph-dialog__header{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{cursor:pointer}.nmorph-dialog{--width: var(--nmorph-dialog-width)}

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphDialog.css';
-import { defineComponent as f, computed as c, ref as d, watch as y } from "vue";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
-import T from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import h from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import v from "../../../assets/icons/cross.svg.js";
-const C = /* @__PURE__ */ f({
+import { defineComponent as d, computed as f, ref as c, watch as y } from "vue";
+import { useModifiers as v } from "../../../utils/create-modifiers.js";
+import O from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import T from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import h from "../../../assets/icons/cross.svg.js";
+const C = /* @__PURE__ */ d({
   __name: "NmorphDialog",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -14,17 +14,17 @@ const C = /* @__PURE__ */ f({
     closeDelay: { type: Number, required: !1, default: 0 },
     closeOnClickModal: { type: Boolean, required: !1, default: !0 },
     showClose: { type: Boolean, required: !1, default: !0 },
-    zIndex: { type: Number, required: !1 },
+    zIndex: { type: Number, required: !1, default: void 0 },
     closeOnOverlay: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-close", "update:model-value"],
-  setup(i, { expose: n, emit: m }) {
+  setup(s, { expose: n, emit: m }) {
     n();
-    const e = i, l = m, p = c(
-      () => O({
+    const e = s, l = m, p = f(
+      () => v({
         "nmorph-dialog": []
       })
-    ), u = d(e.modelValue);
+    ), u = c(e.modelValue);
     let o = null, t = null;
     y(
       () => e.modelValue,
@@ -41,7 +41,7 @@ const C = /* @__PURE__ */ f({
       l("on-close"), o && clearTimeout(o), t = setTimeout(() => {
         l("update:model-value", !1);
       }, e.closeDelay);
-    }, s = { props: e, emit: l, modifiers: p, isVisible: u, get openTimeout() {
+    }, i = { props: e, emit: l, modifiers: p, isVisible: u, get openTimeout() {
       return o;
     }, set openTimeout(r) {
       o = r;
@@ -52,13 +52,13 @@ const C = /* @__PURE__ */ f({
     }, closeHandler: a, clickOnOverlay: () => {
       e.closeOnOverlay && a();
     }, get NmorphOverlay() {
-      return h;
-    }, get NmorphIcon() {
       return T;
+    }, get NmorphIcon() {
+      return O;
     }, get NmorphIconCross() {
-      return v;
+      return h;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.css

@@ -1 +1 @@
-.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block;width:var(--nmorph-tooltip-width)}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;max-width:var(--max-width);padding:var(--indentation-03);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color);width:var(--width);height:var(--height);background:var(--nmorph-main-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-color:var(--nmorph-main-color) transparent transparent transparent;border-width:8px 8px 0;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-color:transparent var(--nmorph-main-color) transparent transparent;border-width:8px 8px 8px 0;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-color:transparent transparent var(--nmorph-main-color) transparent;border-width:0 8px 8px;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-color:transparent transparent transparent var(--nmorph-main-color);border-width:8px 0 8px 8px;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}
+.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;width:var(--width);max-width:var(--max-width);height:var(--height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-tooltip-width)}

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue.js

@@ -46,9 +46,9 @@ function M(l, s, i, o, g, T) {
                 "div",
                 {
                   key: 0,
+                  ref: "tooltipBody",
                   class: "nmorph-tooltip__info-content",
-                  style: a({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y }),
-                  ref: "tooltipBody"
+                  style: a({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y })
                 },
                 [
                   e("div", k, [
@@ -81,7 +81,7 @@ function M(l, s, i, o, g, T) {
                     { class: "nmorph-tooltip__triangle" },
                     null,
                     -1
-                    /* HOISTED */
+                    /* CACHED */
                   )),
                   o.props.text ? (t(), n(
                     "span",

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css

@@ -1 +1 @@
-.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-left-radius:var(--indentation-02);border-bottom-right-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;align-items:center;justify-content:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}
+.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-right-radius:var(--indentation-02);border-bottom-left-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete .nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete .nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete .nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete .nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js

@@ -1,31 +1,31 @@
 import './NmorphAutocomplete.css';
-import m from "./NmorphAutocomplete.vue2.js";
-import { openBlock as o, createElementBlock as l, normalizeClass as p, createElementVNode as n, createVNode as t, createBlock as s, withCtx as c, renderSlot as d, Fragment as h, renderList as _, createTextVNode as f, toDisplayString as u, createCommentVNode as v } from "vue";
+import v from "./NmorphAutocomplete.vue2.js";
+import { openBlock as l, createElementBlock as t, normalizeClass as f, createElementVNode as r, createVNode as i, createBlock as k, withCtx as d, renderSlot as n, normalizeStyle as c, Fragment as p, renderList as s, createTextVNode as h, toDisplayString as _, createCommentVNode as y } from "vue";
 /* empty css                        */
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-autocomplete__input-content" }, b = {
+import g from "../../../_virtual/_plugin-vue_export-helper.js";
+const x = { class: "nmorph-autocomplete__input-content" }, H = {
   ref: "nmorphAutocompleteDOMRef",
   class: "nmorph-autocomplete__input"
-}, g = {
+}, N = {
   key: 0,
   class: "nmorph-autocomplete__loading"
-}, x = {
-  key: 1,
+}, b = ["onClick"], C = {
+  key: 2,
   class: "nmorph-autocomplete__list"
-}, y = ["onClick"];
-function V(a, C, z, e, A, D) {
-  return o(), l(
+}, S = ["onClick"];
+function V(a, m, z, e, L, A) {
+  return l(), t(
     "div",
     {
-      class: p(e.modifiers)
+      class: f(e.modifiers)
     },
     [
-      n("div", N, [
-        n(
+      r("div", x, [
+        r(
           "div",
-          b,
+          H,
           [
-            t(e.NmorphTextInput, {
+            i(e.NmorphTextInput, {
               id: e.props.id,
               name: e.props.name,
               autocomplete: e.props.autocomplete,
@@ -42,7 +42,7 @@ function V(a, C, z, e, A, D) {
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphAutocompleteDOMRef ? (o(), s(e.NmorphDropdown, {
+      e.nmorphAutocompleteDOMRef ? (l(), k(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.nmorphAutocompleteDOMRef,
@@ -50,34 +50,90 @@ function V(a, C, z, e, A, D) {
         "z-index": e.props.zIndex,
         onOnOutsideClick: e.closeHandler
       }, {
-        default: c(() => [
-          e.loader ? (o(), l("div", g, [
-            d(a.$slots, "loader", {}, () => [
-              t(e.NmorphIcon, { size: "large" }, {
-                default: c(() => [
-                  t(e.NmorphIconLoader)
+        default: d(() => [
+          e.loader ? (l(), t("div", N, [
+            n(a.$slots, "loader", {}, () => [
+              i(e.NmorphIcon, { size: "large" }, {
+                default: d(() => [
+                  i(e.NmorphIconLoader)
                 ]),
                 _: 1
                 /* STABLE */
               })
             ])
-          ])) : (o(), l("div", x, [
-            (o(!0), l(
-              h,
+          ])) : e.virtualEnabled ? (l(), t(
+            "div",
+            {
+              key: 1,
+              ref: e.virtualList.containerRef,
+              class: "nmorph-autocomplete__list nmorph-autocomplete__list--virtual",
+              style: c({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
+              onScroll: m[0] || (m[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
+            },
+            [
+              r(
+                "div",
+                {
+                  class: "nmorph-autocomplete__virtual-spacer",
+                  style: c(e.virtualSpacerStyle)
+                },
+                [
+                  r(
+                    "div",
+                    {
+                      class: "nmorph-autocomplete__virtual-content",
+                      style: c(e.virtualContentStyle)
+                    },
+                    [
+                      (l(!0), t(
+                        p,
+                        null,
+                        s(e.virtualItems, (o) => (l(), t("div", {
+                          key: o.index,
+                          class: "nmorph-autocomplete__list-item",
+                          onClick: () => e.clickHandler(o.item)
+                        }, [
+                          n(a.$slots, "default", {
+                            scope: o.item
+                          }, () => [
+                            h(
+                              _(o.item.value),
+                              1
+                              /* TEXT */
+                            )
+                          ])
+                        ], 8, b))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ],
+                4
+                /* STYLE */
+              )
+            ],
+            36
+            /* STYLE, NEED_HYDRATION */
+          )) : (l(), t("div", C, [
+            (l(!0), t(
+              p,
               null,
-              _(e.filteredList, (r, i) => (o(), l("div", {
-                key: i,
+              s(e.filteredList, (o, u) => (l(), t("div", {
+                key: u,
                 class: "nmorph-autocomplete__list-item",
-                onClick: () => e.clickHandler(r)
+                onClick: () => e.clickHandler(o)
               }, [
-                d(a.$slots, "default", { scope: r }, () => [
-                  f(
-                    u(r.value),
+                n(a.$slots, "default", { scope: o }, () => [
+                  h(
+                    _(o.value),
                     1
                     /* TEXT */
                   )
                 ])
-              ], 8, y))),
+              ], 8, S))),
               128
               /* KEYED_FRAGMENT */
             ))
@@ -85,13 +141,13 @@ function V(a, C, z, e, A, D) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "z-index"])) : v("v-if", !0)
+      }, 8, ["open", "relative-element", "z-index"])) : y("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const L = /* @__PURE__ */ k(m, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
+const B = /* @__PURE__ */ g(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
 export {
-  L as default
+  B as default
 };

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js

@@ -1,11 +1,12 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as N, ref as a, computed as p, watch as i } from "vue";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-import S from "../nmorph-text-input/NmorphTextInput.vue.js";
-import I from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import x from "../../../assets/icons/loader.svg.js";
-const D = /* @__PURE__ */ N({
+import { defineComponent as k, ref as n, computed as r, watch as p, nextTick as O } from "vue";
+import { useModifiers as T } from "../../../utils/create-modifiers.js";
+import { useVirtualList as M } from "../../../hooks/use-virtual-list.js";
+import V from "../nmorph-text-input/NmorphTextInput.vue.js";
+import A from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import D from "../../../assets/icons/loader.svg.js";
+const E = /* @__PURE__ */ k({
   __name: "NmorphAutocomplete",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -13,7 +14,11 @@ const D = /* @__PURE__ */ N({
     clearable: { type: Boolean, required: !1, default: !0 },
     list: { type: Array, required: !0, default: () => [] },
     actionCallback: { type: Function, required: !1, default: void 0 },
-    zIndex: { type: Number, required: !1 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    virtual: { type: Boolean, required: !1, default: !1 },
+    virtualItemHeight: { type: Number, required: !1, default: 34 },
+    virtualMaxHeight: { type: [Number, String], required: !1, default: 240 },
+    virtualOverscan: { type: Number, required: !1, default: 5 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -22,44 +27,52 @@ const D = /* @__PURE__ */ N({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "select"],
-  setup(d, { expose: c, emit: m }) {
-    c();
-    const o = d, t = a(o.modelValue), u = m, f = p(
-      () => _({
+  setup(h, { expose: g, emit: y }) {
+    g();
+    const t = h, a = n(t.modelValue), s = y, b = r(
+      () => T({
         "nmorph-autocomplete": []
       })
-    ), h = (e) => {
-      t.value = e, u("update:model-value", t.value);
-    }, r = a(!1), v = a(null), y = () => {
-      r.value = !1;
-    }, n = p(() => o.list.filter((e) => Object.keys(e).some((q) => String(e[q]).toLowerCase().includes(t.value.toLowerCase()))));
-    i(n, (e) => {
-      r.value = e.length > 0;
+    ), q = (e) => {
+      a.value = e, s("update:model-value", a.value);
+    }, l = n(!1), x = n(null), N = () => {
+      l.value = !1;
+    }, u = r(() => t.list.filter((e) => Object.keys(e).some((L) => String(e[L]).toLowerCase().includes(a.value.toLowerCase())))), d = r(() => t.virtual && u.value.length > 0), c = r(() => t.virtualItemHeight), f = r(() => t.virtualOverscan), o = M(u, {
+      enabled: d,
+      itemHeight: c,
+      overscan: f
+    }), I = r(() => o.virtualItems.value), S = r(() => ({
+      height: `${o.totalHeight.value}px`
+    })), H = r(() => ({
+      transform: `translateY(${o.offsetTop.value}px)`
+    })), m = (e) => typeof e == "number" ? `${e}px` : e, _ = r(() => m(t.virtualMaxHeight));
+    p(u, async (e) => {
+      l.value = e.length > 0, await O(), o.scrollToIndex(0), o.refresh();
     });
-    const g = (e) => {
-      u("select", e), t.value = e.value, setTimeout(() => {
-        r.value = !1;
+    const C = (e) => {
+      s("select", e), a.value = e.value, setTimeout(() => {
+        l.value = !1;
       });
-    }, b = () => {
-      r.value = n.value.length > 0;
-    }, l = a(!1);
-    i(t, async (e) => {
-      e !== "" && o.actionCallback && (l.value = !0, await o.actionCallback(), l.value = !1);
-    }), i(l, (e) => {
-      e && (r.value = !0);
+    }, w = () => {
+      l.value = u.value.length > 0;
+    }, i = n(!1);
+    p(a, async (e) => {
+      e !== "" && t.actionCallback && (i.value = !0, await t.actionCallback(), i.value = !1);
+    }), p(i, (e) => {
+      e && (l.value = !0);
     });
-    const s = { props: o, initialValue: t, emit: u, modifiers: f, updateValueHandler: h, open: r, nmorphAutocompleteDOMRef: v, closeHandler: y, filteredList: n, clickHandler: g, focusHandler: b, loader: l, get NmorphIcon() {
-      return w;
+    const v = { props: t, initialValue: a, emit: s, modifiers: b, updateValueHandler: q, open: l, nmorphAutocompleteDOMRef: x, closeHandler: N, filteredList: u, virtualEnabled: d, virtualItemHeight: c, virtualOverscan: f, virtualList: o, virtualItems: I, virtualSpacerStyle: S, virtualContentStyle: H, getCssSize: m, virtualMaxHeight: _, clickHandler: C, focusHandler: w, loader: i, get NmorphIcon() {
+      return B;
     }, get NmorphDropdown() {
-      return I;
+      return A;
     }, get NmorphTextInput() {
-      return S;
+      return V;
     }, get NmorphIconLoader() {
-      return x;
+      return D;
     } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  D as default
+  E as default
 };

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.css

@@ -1 +1 @@
-.nmorph-checkbox{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;align-items:center;justify-content:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-checkbox input:focus-visible{opacity:1;scale:.95;outline:2px solid var(--nmorph-accent-color)}.nmorph-checkbox .nmorph-checkbox__fake{border-radius:var(--default-border-radius);width:100%;height:100%;position:absolute;top:0;left:0;background:var(--nmorph-main-color);box-shadow: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(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-checkbox .nmorph-checkbox__label,.nmorph-checkbox .nmorph-checkbox__fake span{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-checkbox .nmorph-checkbox__fake-checked{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{line-height:.8}.nmorph-checkbox.nmorph-checkbox--button .nmorph-checkbox__fake{position:relative;display:flex;align-items:center;height:var(--size);padding:var(--indentation-03);border-radius:var(--default-border-radius);background: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)}.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__label,.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__fake span{font-size:var(--font-size-extra-small);line-height:var(--line-height-line)}.nmorph-checkbox.nmorph--extra-thin-component.nmorph-checkbox--button .nmorph-checkbox__fake{padding:var(--indentation-02)}.nmorph-checkbox.nmorph-checkbox--checked .nmorph-checkbox__fake{background:var(--nmorph-main-color);box-shadow: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(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-checkbox{--size: var(--height);display:inline-flex;align-items:center;vertical-align:middle;cursor:pointer}.nmorph-checkbox .nmorph-checkbox__content{position:relative;display:flex;justify-content:center;align-items:center}.nmorph-checkbox .nmorph-checkbox__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-checkbox input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.nmorph-checkbox input:focus-visible{outline:2px solid var(--nmorph-accent-color);opacity:1;scale:.95}.nmorph-checkbox .nmorph-checkbox__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow: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(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-checkbox .nmorph-checkbox__label,.nmorph-checkbox .nmorph-checkbox__fake span{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-checkbox .nmorph-checkbox__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-20);transform:translate(-50%,-50%)}.nmorph-checkbox .nmorph-checkbox__label{margin-left:var(--indentation-02);line-height:1}.nmorph-checkbox .nmorph-checkbox__fake span{line-height:.8}.nmorph-checkbox.nmorph-checkbox--button .nmorph-checkbox__fake{position:relative;display:flex;justify-content:center;align-items:center;width:auto;min-width:var(--size);height:var(--size);padding:var(--indentation-03);background:var(--nmorph-main-color);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)}.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__label,.nmorph-checkbox.nmorph--extra-thin-component .nmorph-checkbox__fake span{font-size:var(--font-size-tiny);line-height:var(--line-height-line)}.nmorph-checkbox.nmorph--extra-thin-component.nmorph-checkbox--button .nmorph-checkbox__fake{padding:var(--indentation-02)}.nmorph-checkbox.nmorph-checkbox--checked .nmorph-checkbox__fake{background:var(--nmorph-main-color);box-shadow: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(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-checkbox.nmorph-checkbox--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue.js

@@ -47,7 +47,7 @@ function C(s, d, g, e, N, D) {
             { class: "nmorph-checkbox__fake" },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           )),
           e.checked ? (o(), c("div", b)) : l("v-if", !0)
         ]),

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.css

@@ -1 +1 @@
-.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;align-items:center;gap:var(--indentation-03);width:fit-content;max-width:100%;height:var(--height);padding:0 var(--default-indentation-input);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow: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(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-color-picker .nmorph-color-picker__native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.nmorph-color-picker .nmorph-color-picker__swatch{width:calc(var(--height) - var(--indentation-03));height:calc(var(--height) - var(--indentation-03));border-radius:var(--default-border-radius);flex:0 0 auto;box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f}.nmorph-color-picker .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:0 0 7ch;width:7ch;min-width:7ch;font-family:monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";user-select:none}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--thin-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--thick-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-base);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{background: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);background:var(--nmorph-accent-color)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}
+.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;gap:var(--indentation-03);align-items:center;width:fit-content;max-width:100%;height:var(--height);padding:0 var(--default-indentation-input);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow: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(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-color-picker .nmorph-color-picker__native{position:absolute;width:100%;height:100%;cursor:pointer;opacity:0;inset:0}.nmorph-color-picker .nmorph-color-picker__swatch{flex:0 0 auto;width:calc(var(--height) - var(--indentation-03));height:calc(var(--height) - var(--indentation-03));border-radius:var(--default-border-radius);box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f}.nmorph-color-picker .nmorph-color-picker__value{flex:0 0 7ch;width:7ch;min-width:7ch;overflow:hidden;font-weight:400;font-size:var(--font-size-small);font-family:monospace;line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis;user-select:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--thin-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--thick-component .nmorph-color-picker__value{font-weight:400;font-size:var(--font-size-base);line-height:var(--line-height-regular)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{background:var(--nmorph-accent-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)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}