@nmorph/nmorph-ui-kit 2.2.58 → 3.0.0

package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.css

@@ -1 +1 @@
-.nmorph-collapse-item{--transition-speed: .2s;margin-bottom:var(--indentation-03)}.nmorph-collapse-item .nmorph-collapse-item__title{display:flex;align-items:center;padding:var(--indentation-02);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);cursor:pointer}.nmorph-collapse-item .nmorph-collapse-item__content{box-sizing:content-box;overflow:hidden;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);transition:height var(--transition-speed) ease-in-out}.nmorph-collapse-item .nmorph-collapse-item__inner-wrapper{padding:var(--indentation-03)}.nmorph-collapse-item.nmorph-collapse-item--disabled{cursor:not-allowed;opacity:.6}.nmorph-collapse-item.nmorph-collapse-item--disabled .nmorph-collapse-item__title{cursor:not-allowed}.nmorph-collapse-item.nmorph-collapse-item--block .nmorph-collapse-item__title{cursor:default}
+.nmorph-collapse-item{--nmorph-private-collapse-item-transition-speed: .2s;margin-bottom:var(--indentation-03)}.nmorph-collapse-item .nmorph-collapse-item__title{display:flex;gap:var(--indentation-02);align-items:center;padding:var(--indentation-01) 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);cursor:pointer}.nmorph-collapse-item .nmorph-collapse-item__title-content{flex:1 1 auto;min-width:0}.nmorph-collapse-item .nmorph-collapse-item__chevron{flex:0 0 auto;margin-left:auto;transition:transform var(--nmorph-private-collapse-item-transition-speed) ease-in-out}.nmorph-collapse-item .nmorph-collapse-item__content{box-sizing:content-box;overflow:hidden;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);transition:height var(--nmorph-private-collapse-item-transition-speed) ease-in-out}.nmorph-collapse-item .nmorph-collapse-item__inner-wrapper{padding:var(--indentation-03)}.nmorph-collapse-item.nmorph-collapse-item--disabled{cursor:not-allowed;opacity:.6}.nmorph-collapse-item.nmorph-collapse-item--disabled .nmorph-collapse-item__title{cursor:not-allowed}.nmorph-collapse-item.nmorph-collapse-item--block .nmorph-collapse-item__title{cursor:default}.nmorph-collapse-item.nmorph-collapse-item--is-open .nmorph-collapse-item__chevron{transform:rotate(180deg)}

package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue.js

@@ -1,14 +1,14 @@
 import './NmorphCollapseItem.css';
-import i from "./NmorphCollapseItem.vue2.js";
-import { openBlock as n, createElementBlock as a, normalizeStyle as l, normalizeClass as r, createElementVNode as o, withModifiers as c, renderSlot as s, createTextVNode as m, toDisplayString as p } from "vue";
+import n from "./NmorphCollapseItem.vue2.js";
+import { openBlock as c, createElementBlock as a, normalizeStyle as l, normalizeClass as r, createElementVNode as o, withModifiers as m, renderSlot as s, createTextVNode as p, toDisplayString as d, createVNode as i, withCtx as _ } from "vue";
 /* empty css                        */
-import d from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const _ = {
+import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const f = { class: "nmorph-collapse-item__title-content" }, v = {
   ref: "collapseItemDOMElContent",
   class: "nmorph-collapse-item__inner-wrapper"
 };
-function f(t, h, y, e, k, v) {
-  return n(), a(
+function C(t, N, y, e, k, I) {
+  return c(), a(
     "div",
     {
       class: r(e.modifiers),
@@ -19,16 +19,28 @@ function f(t, h, y, e, k, v) {
         "div",
         {
           class: r(["nmorph-collapse-item__title", e.titleModifiers]),
-          onClick: c(e.clickHandler, ["stop"])
+          onClick: m(e.clickHandler, ["stop"])
         },
         [
-          s(t.$slots, "title", {}, () => [
-            m(
-              p(e.props.title),
-              1
-              /* TEXT */
-            )
-          ])
+          o("div", f, [
+            s(t.$slots, "title", {}, () => [
+              p(
+                d(e.props.title),
+                1
+                /* TEXT */
+              )
+            ])
+          ]),
+          i(e.NmorphIcon, {
+            class: "nmorph-collapse-item__chevron",
+            size: "small"
+          }, {
+            default: _(() => [
+              i(e.NmorphIconChevronDown)
+            ]),
+            _: 1
+            /* STABLE */
+          })
         ],
         2
         /* CLASS */
@@ -42,7 +54,7 @@ function f(t, h, y, e, k, v) {
         [
           o(
             "div",
-            _,
+            v,
             [
               s(t.$slots, "default")
             ],
@@ -58,7 +70,7 @@ function f(t, h, y, e, k, v) {
     /* CLASS, STYLE */
   );
 }
-const E = /* @__PURE__ */ d(i, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue"]]);
+const D = /* @__PURE__ */ h(n, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue"]]);
 export {
-  E as default
+  D as default
 };

package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue2.js

@@ -1,12 +1,14 @@
 import './NmorphCollapseItem.css';
-import { defineComponent as H, ref as u, computed as d, inject as v, onMounted as z, onBeforeUnmount as M, watch as h, nextTick as w } from "vue";
+import { defineComponent as q, ref as p, computed as u, inject as b, onMounted as w, onBeforeUnmount as I, watch as h, nextTick as z } from "vue";
 import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
-import { createCssVariables as x } from "../../../../../utils/common.js";
-import { NmorphComponentHeight as A } from "../../../../../types/common.types.js";
-const j = /* @__PURE__ */ H({
+import { createCssVariables as D } from "../../../../../utils/common.js";
+import { NmorphComponentThickness as H } from "../../../../../types/common.types.js";
+import M from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import x from "../../../../../assets/icons/chevron-down.svg.js";
+const E = /* @__PURE__ */ q({
   __name: "NmorphCollapseItem",
   props: {
-    height: { type: null, required: !1, default: "basic" },
+    thickness: { type: null, required: !1, default: "basic" },
     block: { type: Boolean, required: !1, default: !1 },
     transitionSpeed: { type: [Number, String], required: !1, default: void 0 },
     name: { type: String, required: !0 },
@@ -14,46 +16,50 @@ const j = /* @__PURE__ */ H({
     disabled: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["click-item"],
-  setup(y, { expose: O, emit: _ }) {
-    O();
-    const e = y, c = _, r = u(!1), k = d(
+  setup(k, { expose: y, emit: C }) {
+    y();
+    const e = k, c = C, r = p(!1), O = u(
       () => g({
         "nmorph-collapse-item": [e.disabled && "disabled", e.block && "block", r.value && "is-open"]
       })
-    ), C = d(
+    ), _ = u(
       () => g({
-        nmorph: [A[e.height]]
+        nmorph: [H[e.thickness]]
       })
-    ), p = (t) => typeof t == "number" ? `${t}ms` : t, S = d(
-      () => x({
-        "--transition-speed": p(e.transitionSpeed)
+    ), m = (t) => typeof t == "number" ? `${t}ms` : t, N = u(
+      () => D({
+        "--nmorph-private-collapse-item-transition-speed": m(e.transitionSpeed)
       })
-    ), i = v("collapse-data"), m = v("update-model"), n = u(null), f = u(0);
-    let s = null;
+    ), i = b("collapse-data"), d = b("update-model"), n = p(null), f = p(0);
+    let o = null;
     const l = (t) => Array.isArray(t) ? t.includes(e.name) : t === e.name, a = () => {
       f.value = r.value && n.value ? n.value.scrollHeight : 0;
-    }, o = () => w(a), q = () => {
-      e.disabled || e.block || (r.value = !r.value, m?.(e.name, r.value), c("click-item", { id: e.name, isOpen: r.value }));
+    }, s = () => z(a), S = () => {
+      e.disabled || e.block || (r.value = !r.value, d?.(e.name, r.value), c("click-item", { id: e.name, isOpen: r.value }));
     };
-    z(() => {
-      r.value = l(i?.value), o(), "ResizeObserver" in window && n.value && (s = new ResizeObserver(a), s.observe(n.value));
-    }), M(() => {
-      s?.disconnect();
+    w(() => {
+      r.value = l(i?.value), s(), "ResizeObserver" in window && n.value && (o = new ResizeObserver(a), o.observe(n.value));
+    }), I(() => {
+      o?.disconnect();
     }), h(
       () => i?.value,
       (t) => {
-        r.value = l(t), o();
+        r.value = l(t), s();
       },
       { deep: !0 }
-    ), h(r, o);
-    const b = { props: e, emit: c, isOpen: r, modifiers: k, titleModifiers: C, getCssDuration: p, styles: S, collapseData: i, updateModel: m, collapseItemDOMElContent: n, contentHeight: f, get resizeObserver() {
-      return s;
+    ), h(r, s);
+    const v = { props: e, emit: c, isOpen: r, modifiers: O, titleModifiers: _, getCssDuration: m, styles: N, collapseData: i, updateModel: d, collapseItemDOMElContent: n, contentHeight: f, get resizeObserver() {
+      return o;
     }, set resizeObserver(t) {
-      s = t;
-    }, isValueOpen: l, updateContentHeight: a, updateContentHeightAfterRender: o, clickHandler: q };
-    return Object.defineProperty(b, "__isScriptSetup", { enumerable: !1, value: !0 }), b;
+      o = t;
+    }, isValueOpen: l, updateContentHeight: a, updateContentHeightAfterRender: s, clickHandler: S, get NmorphIcon() {
+      return M;
+    }, get NmorphIconChevronDown() {
+      return x;
+    } };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  j as default
+  E as default
 };

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.css

@@ -1 +1 @@
-.nmorph-emoji-picker{--nmorph-emoji-picker-width: 300px;--nmorph-emoji-picker-height: 260px;--nmorph-emoji-picker-columns: 8;--nmorph-emoji-picker-cell-size: 32px;--nmorph-emoji-picker-toggle-size: 28px;--nmorph-emoji-picker-scrollbar-size: 6px;--nmorph-emoji-picker-hover-background: color-mix(in srgb, var(--nmorph-text-color) 8%, transparent);--nmorph-emoji-picker-active-background: color-mix(in srgb, var(--nmorph-text-color) 12%, var(--nmorph-main-color));--nmorph-emoji-picker-focus-ring: color-mix(in srgb, var(--nmorph-text-color) 24%, transparent);--nmorph-emoji-picker-toggle-inset: calc(var(--indentation-02) + 2px);--nmorph-emoji-picker-toggle-reserve: calc( var(--nmorph-emoji-picker-toggle-size) + var(--nmorph-emoji-picker-toggle-inset) + var(--indentation-02) );position:relative;box-sizing:border-box;width:min(100%,var(--nmorph-emoji-picker-width));min-width:0;color:var(--nmorph-text-color);font:inherit}.nmorph-emoji-picker .nmorph-emoji-picker__compact,.nmorph-emoji-picker .nmorph-emoji-picker__panel{box-sizing:border-box;width:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-emoji-picker .nmorph-emoji-picker__compact{display:flex;gap:var(--indentation-02);align-items:center;min-height:48px;padding:var(--indentation-02)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-list{display:flex;flex:1 1 auto;gap:4px;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__category,.nmorph-emoji-picker .nmorph-emoji-picker__emoji{margin:0;color:inherit;font:inherit;background:transparent;border:0;box-shadow:none;cursor:pointer;appearance:none}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:disabled,.nmorph-emoji-picker .nmorph-emoji-picker__category:disabled,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:disabled{cursor:not-allowed;opacity:.5}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:focus,.nmorph-emoji-picker .nmorph-emoji-picker__category:focus,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:focus{outline:none}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:focus-visible,.nmorph-emoji-picker .nmorph-emoji-picker__category:focus-visible,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:focus-visible{box-shadow:var(--nmorph-shadow-inset),0 0 0 1px var(--nmorph-emoji-picker-focus-ring)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__emoji{display:inline-flex;flex:0 0 var(--nmorph-emoji-picker-cell-size);justify-content:center;align-items:center;width:var(--nmorph-emoji-picker-cell-size);height:var(--nmorph-emoji-picker-cell-size);padding:0;font-size:20px;line-height:1;border-radius:var(--default-border-radius)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:hover:not(:disabled),.nmorph-emoji-picker .nmorph-emoji-picker__emoji:hover:not(:disabled){background:var(--nmorph-emoji-picker-hover-background)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button{position:absolute;top:var(--nmorph-emoji-picker-toggle-inset);right:var(--nmorph-emoji-picker-toggle-inset);z-index:2;width:var(--nmorph-emoji-picker-toggle-size);min-width:var(--nmorph-emoji-picker-toggle-size);height:var(--nmorph-emoji-picker-toggle-size);min-height:var(--nmorph-emoji-picker-toggle-size);color:var(--nmorph-semi-contrast-text-color);--height: var(--nmorph-emoji-picker-toggle-size);--size: var(--nmorph-emoji-picker-toggle-size);--nmorph-selection-control-inline-padding: 0;--color: currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__content,.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__fake{width:var(--nmorph-emoji-picker-toggle-size);min-width:var(--nmorph-emoji-picker-toggle-size);height:var(--nmorph-emoji-picker-toggle-size);min-height:var(--nmorph-emoji-picker-toggle-size)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__fake{padding:0;color:currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-icon{--color: currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button input:focus-visible{outline:none;opacity:0;scale:1}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button input:focus-visible+.nmorph-checkbox__fake{outline:1px solid var(--nmorph-emoji-picker-focus-ring);outline-offset:1px}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button:hover:not(.nmorph-checkbox--disabled){color:var(--nmorph-text-color);--color: var(--nmorph-text-color)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button:hover:not(.nmorph-checkbox--disabled) .nmorph-icon{--color: var(--nmorph-text-color)}.nmorph-emoji-picker .nmorph-emoji-picker__button-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.nmorph-emoji-picker .nmorph-emoji-picker__panel{display:flex;flex-direction:column;height:var(--nmorph-emoji-picker-height);min-height:180px;max-height:min(60vh,var(--nmorph-emoji-picker-height));padding:var(--indentation-02);overflow:hidden}.nmorph-emoji-picker.nmorph-emoji-picker--hide-shadow .nmorph-emoji-picker__panel{box-shadow:none}.nmorph-emoji-picker .nmorph-emoji-picker__toolbar{display:flex;flex:0 0 auto;gap:var(--indentation-02);align-items:center;min-width:0;padding:2px}.nmorph-emoji-picker.nmorph-emoji-picker--collapsible .nmorph-emoji-picker__compact,.nmorph-emoji-picker.nmorph-emoji-picker--collapsible .nmorph-emoji-picker__toolbar{padding-right:var(--nmorph-emoji-picker-toggle-reserve)}.nmorph-emoji-picker .nmorph-emoji-picker__search{flex:1 1 auto;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__categories{display:flex;flex:0 0 auto;gap:4px;align-items:flex-start;min-width:0;margin:var(--indentation-02) 0;padding:0 2px}.nmorph-emoji-picker .nmorph-emoji-picker__categories .nmorph-scroll__bar--horizontal{right:2px;left:2px}.nmorph-emoji-picker .nmorph-emoji-picker__category{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;max-width:120px;min-height:32px;padding:0 10px;overflow:hidden;color:var(--nmorph-semi-contrast-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis;border-radius:var(--default-border-radius)}.nmorph-emoji-picker .nmorph-emoji-picker__category:hover:not(:disabled){color:var(--nmorph-text-color);background:var(--nmorph-emoji-picker-hover-background)}.nmorph-emoji-picker .nmorph-emoji-picker__category.nmorph-emoji-picker__category--active{color:var(--nmorph-text-color);background:var(--nmorph-emoji-picker-active-background);box-shadow:var(--nmorph-shadow-inset)}.nmorph-emoji-picker .nmorph-emoji-picker__body{flex:1 1 auto;min-height:0}.nmorph-emoji-picker .nmorph-emoji-picker__body-content{box-sizing:border-box;min-height:100%;padding:2px}.nmorph-emoji-picker .nmorph-emoji-picker__section{display:grid;gap:4px}.nmorph-emoji-picker .nmorph-emoji-picker__section+.nmorph-emoji-picker__section{margin-top:var(--indentation-02)}.nmorph-emoji-picker .nmorph-emoji-picker__section-title{padding:0 4px;color:var(--nmorph-semi-contrast-text-color);font-weight:600;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-emoji-picker .nmorph-emoji-picker__grid{display:grid;grid-template-columns:repeat(var(--nmorph-emoji-picker-columns),minmax(0,1fr));gap:2px}.nmorph-emoji-picker .nmorph-emoji-picker__emoji{width:100%;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__emoji-symbol{display:block;line-height:1}.nmorph-emoji-picker .nmorph-emoji-picker__empty{display:grid;gap:var(--indentation-02);place-items:center;min-height:100%;padding:var(--indentation-04);color:var(--nmorph-semi-contrast-text-color);text-align:center;--color: currentColor}.nmorph-emoji-picker.nmorph-emoji-picker--disabled{opacity:.65}
+.nmorph-emoji-picker{--nmorph-private-emoji-picker-width: 300px;--nmorph-private-emoji-picker-height: 260px;--nmorph-private-emoji-picker-columns: 8;--nmorph-private-emoji-picker-cell-size: 32px;--nmorph-private-emoji-picker-toggle-size: 28px;--nmorph-private-emoji-picker-scrollbar-size: 6px;--nmorph-private-emoji-picker-hover-background: color-mix(in srgb, var(--nmorph-text-color) 8%, transparent);--nmorph-private-emoji-picker-active-background: color-mix( in srgb, var(--nmorph-text-color) 12%, var(--nmorph-main-color) );--nmorph-private-emoji-picker-focus-ring: color-mix(in srgb, var(--nmorph-text-color) 24%, transparent);--nmorph-private-emoji-picker-toggle-inset: calc(var(--indentation-02) + 2px);--nmorph-private-ep-toggle-size: var(--nmorph-private-emoji-picker-toggle-size);--nmorph-private-ep-toggle-inset: var(--nmorph-private-emoji-picker-toggle-inset);--nmorph-private-ep-toggle-edge: calc(var(--nmorph-private-ep-toggle-size) + var(--nmorph-private-ep-toggle-inset));--nmorph-private-emoji-picker-toggle-reserve: calc(var(--nmorph-private-ep-toggle-edge) + var(--indentation-02));position:relative;box-sizing:border-box;width:min(100%,var(--nmorph-private-emoji-picker-width));min-width:0;color:var(--nmorph-text-color);font:inherit}.nmorph-emoji-picker .nmorph-emoji-picker__compact,.nmorph-emoji-picker .nmorph-emoji-picker__panel{box-sizing:border-box;width:100%;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-emoji-picker .nmorph-emoji-picker__compact{display:flex;gap:var(--indentation-02);align-items:center;min-height:48px;padding:var(--indentation-02)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-list{display:flex;flex:1 1 auto;gap:4px;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__category,.nmorph-emoji-picker .nmorph-emoji-picker__emoji{margin:0;color:inherit;font:inherit;background:transparent;border:0;box-shadow:none;cursor:pointer;appearance:none}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:disabled,.nmorph-emoji-picker .nmorph-emoji-picker__category:disabled,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:disabled{cursor:not-allowed;opacity:.5}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:focus,.nmorph-emoji-picker .nmorph-emoji-picker__category:focus,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:focus{outline:none}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:focus-visible,.nmorph-emoji-picker .nmorph-emoji-picker__category:focus-visible,.nmorph-emoji-picker .nmorph-emoji-picker__emoji:focus-visible{box-shadow:var(--nmorph-shadow-inset),0 0 0 1px var(--nmorph-private-emoji-picker-focus-ring)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__emoji{display:inline-flex;flex:0 0 var(--nmorph-private-emoji-picker-cell-size);justify-content:center;align-items:center;width:var(--nmorph-private-emoji-picker-cell-size);height:var(--nmorph-private-emoji-picker-cell-size);padding:0;font-size:20px;line-height:1;border-radius:var(--default-border-radius)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:hover:not(:disabled),.nmorph-emoji-picker .nmorph-emoji-picker__emoji:hover:not(:disabled){background:var(--nmorph-private-emoji-picker-hover-background)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button{position:absolute;top:var(--nmorph-private-emoji-picker-toggle-inset);right:var(--nmorph-private-emoji-picker-toggle-inset);z-index:2;width:var(--nmorph-private-emoji-picker-toggle-size);min-width:var(--nmorph-private-emoji-picker-toggle-size);height:var(--nmorph-private-emoji-picker-toggle-size);min-height:var(--nmorph-private-emoji-picker-toggle-size);color:var(--nmorph-semi-contrast-text-color);--nmorph-private-control-height: var(--nmorph-private-emoji-picker-toggle-size);--nmorph-private-selection-control-size: var(--nmorph-private-emoji-picker-toggle-size);--nmorph-private-selection-control-inline-padding: 0;--nmorph-private-icon-color: currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__content,.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__fake{width:var(--nmorph-private-emoji-picker-toggle-size);min-width:var(--nmorph-private-emoji-picker-toggle-size);height:var(--nmorph-private-emoji-picker-toggle-size);min-height:var(--nmorph-private-emoji-picker-toggle-size)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-checkbox__fake{padding:0;color:currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button input:focus-visible{outline:none;opacity:0;scale:1}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button input:focus-visible+.nmorph-checkbox__fake{outline:1px solid var(--nmorph-private-emoji-picker-focus-ring);outline-offset:1px}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button:hover:not(.nmorph-checkbox--disabled){color:var(--nmorph-text-color);--nmorph-private-icon-color: var(--nmorph-text-color)}.nmorph-emoji-picker .nmorph-emoji-picker__toggle-button:hover:not(.nmorph-checkbox--disabled) .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color)}.nmorph-emoji-picker .nmorph-emoji-picker__button-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.nmorph-emoji-picker .nmorph-emoji-picker__panel{display:flex;flex-direction:column;height:var(--nmorph-private-emoji-picker-height);min-height:180px;max-height:min(60vh,var(--nmorph-private-emoji-picker-height));padding:var(--indentation-02);overflow:hidden}.nmorph-emoji-picker.nmorph-emoji-picker--hide-shadow .nmorph-emoji-picker__panel{box-shadow:none}.nmorph-emoji-picker .nmorph-emoji-picker__toolbar{display:flex;flex:0 0 auto;gap:var(--indentation-02);align-items:center;min-width:0;padding:2px}.nmorph-emoji-picker.nmorph-emoji-picker--collapsible .nmorph-emoji-picker__compact,.nmorph-emoji-picker.nmorph-emoji-picker--collapsible .nmorph-emoji-picker__toolbar{padding-right:var(--nmorph-private-emoji-picker-toggle-reserve)}.nmorph-emoji-picker .nmorph-emoji-picker__search{flex:1 1 auto;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__categories{display:flex;flex:0 0 auto;gap:4px;align-items:flex-start;min-width:0;margin:var(--indentation-02) 0;padding:0 2px}.nmorph-emoji-picker .nmorph-emoji-picker__categories .nmorph-scroll__bar--horizontal{right:2px;left:2px}.nmorph-emoji-picker .nmorph-emoji-picker__category{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;max-width:120px;min-height:32px;padding:0 10px;overflow:hidden;color:var(--nmorph-semi-contrast-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis;border-radius:var(--default-border-radius)}.nmorph-emoji-picker .nmorph-emoji-picker__category:hover:not(:disabled){color:var(--nmorph-text-color);background:var(--nmorph-private-emoji-picker-hover-background)}.nmorph-emoji-picker .nmorph-emoji-picker__category.nmorph-emoji-picker__category--active{color:var(--nmorph-text-color);background:var(--nmorph-private-emoji-picker-active-background);box-shadow:var(--nmorph-shadow-inset)}.nmorph-emoji-picker .nmorph-emoji-picker__body{flex:1 1 auto;min-height:0}.nmorph-emoji-picker .nmorph-emoji-picker__body-content{box-sizing:border-box;min-height:100%;padding:2px}.nmorph-emoji-picker .nmorph-emoji-picker__section{display:grid;gap:4px}.nmorph-emoji-picker .nmorph-emoji-picker__section+.nmorph-emoji-picker__section{margin-top:var(--indentation-02)}.nmorph-emoji-picker .nmorph-emoji-picker__section-title{padding:0 4px;color:var(--nmorph-semi-contrast-text-color);font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-emoji-picker .nmorph-emoji-picker__grid{display:grid;grid-template-columns:repeat(var(--nmorph-private-emoji-picker-columns),minmax(0,1fr));gap:2px}.nmorph-emoji-picker .nmorph-emoji-picker__emoji{width:100%;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__emoji-symbol{display:block;line-height:1}.nmorph-emoji-picker .nmorph-emoji-picker__empty{display:grid;gap:var(--indentation-02);place-items:center;min-height:100%;padding:var(--indentation-04);color:var(--nmorph-semi-contrast-text-color);text-align:center;--nmorph-private-icon-color: currentColor}.nmorph-emoji-picker.nmorph-emoji-picker--disabled{opacity:.65}

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue.js

@@ -1,12 +1,12 @@
 import './NmorphEmojiPicker.css';
 import x from "./NmorphEmojiPicker.vue2.js";
-import { openBlock as l, createElementBlock as r, normalizeStyle as y, normalizeClass as p, createBlock as _, withModifiers as j, withCtx as n, createVNode as i, createElementVNode as c, toDisplayString as t, createCommentVNode as h, Fragment as d, renderList as m } from "vue";
+import { openBlock as l, createElementBlock as r, normalizeStyle as y, normalizeClass as p, createBlock as _, withModifiers as v, withCtx as n, createVNode as i, createElementVNode as c, toDisplayString as t, createCommentVNode as h, Fragment as d, renderList as m } from "vue";
 /* empty css                       */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const g = ["lang"], f = { class: "nmorph-emoji-picker__button-label" }, N = ["aria-label"], u = ["aria-label", "title", "disabled", "onClick"], C = {
+import j from "../../../_virtual/_plugin-vue_export-helper.js";
+const g = ["lang"], f = { class: "nmorph-emoji-picker__button-label" }, N = ["aria-label"], C = ["aria-label", "title", "disabled", "onClick"], L = {
   key: 2,
   class: "nmorph-emoji-picker__panel"
-}, L = { class: "nmorph-emoji-picker__toolbar" }, I = ["aria-selected", "disabled", "onClick"], E = ["aria-label"], S = {
+}, u = { class: "nmorph-emoji-picker__toolbar" }, I = ["aria-selected", "disabled", "onClick"], E = ["aria-label"], S = {
   key: 0,
   class: "nmorph-emoji-picker__section-title"
 }, w = { class: "nmorph-emoji-picker__grid" }, z = ["aria-label", "title", "disabled", "onFocus", "onClick"], q = { class: "nmorph-emoji-picker__emoji-symbol" }, V = {
@@ -22,12 +22,12 @@ function B(F, s, G, e, P, H) {
     e.canCollapse ? (l(), _(e.NmorphCheckbox, {
       key: 0,
       class: p(["nmorph-emoji-picker__toggle-button nmorph-emoji-picker__expand-button", { "nmorph-emoji-picker__collapse-button": e.expanded }]),
-      design: "button",
+      design: "nmorph",
       "model-value": e.expanded,
       "aria-label": e.expanded ? e.texts.collapseLabel : e.texts.expandLabel,
       title: e.expanded ? e.texts.collapseLabel : e.texts.expandLabel,
       disabled: e.props.disabled,
-      onClick: s[0] || (s[0] = j((o) => e.toggleExpandedHandler(!e.expanded), ["prevent"]))
+      onClick: s[0] || (s[0] = v((o) => e.toggleExpandedHandler(!e.expanded), ["prevent"]))
     }, {
       label: n(() => [
         i(e.NmorphIcon, { size: "small" }, {
@@ -56,8 +56,8 @@ function B(F, s, G, e, P, H) {
     }, [
       i(e.NmorphScroll, {
         class: "nmorph-emoji-picker__quick-list",
-        height: "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
-        "max-height": "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
+        height: "calc(var(--nmorph-private-emoji-picker-cell-size) + var(--nmorph-private-emoji-picker-scrollbar-size))",
+        "max-height": "calc(var(--nmorph-private-emoji-picker-cell-size) + var(--nmorph-private-emoji-picker-scrollbar-size))",
         "scroll-y-prop": "hidden",
         "scroll-x-prop": "auto",
         "css-scroll-behavior": "auto",
@@ -75,7 +75,7 @@ function B(F, s, G, e, P, H) {
               title: e.getEmojiLabel(o),
               disabled: e.props.disabled,
               onClick: (a) => e.selectEmoji(o)
-            }, t(o), 9, u))),
+            }, t(o), 9, C))),
             128
             /* KEYED_FRAGMENT */
           ))
@@ -83,8 +83,8 @@ function B(F, s, G, e, P, H) {
         _: 1
         /* STABLE */
       })
-    ], 8, N)) : (l(), r("div", C, [
-      c("div", L, [
+    ], 8, N)) : (l(), r("div", L, [
+      c("div", u, [
         i(e.NmorphTextInput, {
           modelValue: e.searchQuery,
           "onUpdate:modelValue": s[1] || (s[1] = (o) => e.searchQuery = o),
@@ -226,7 +226,7 @@ function B(F, s, G, e, P, H) {
     ]))
   ], 14, g);
 }
-const D = /* @__PURE__ */ v(x, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue"]]);
+const D = /* @__PURE__ */ j(x, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue"]]);
 export {
   D as default
 };