@nmorph/nmorph-ui-kit 2.2.44 → 2.2.46

package/dist/assets/icons/burger.svg.js

@@ -1,15 +1,15 @@
-import { openBlock as t, createElementBlock as r, createElementVNode as o } from "vue";
+import { openBlock as t, createElementBlock as o, createElementVNode as r } from "vue";
 const n = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
 function l(m, e) {
-  return t(), r("svg", n, [...e[0] || (e[0] = [
-    o("path", { d: "M2 6h28v6H2zm0 8h28v6H2zm0 8h28v6H2z" }, null, -1)
+  return t(), o("svg", n, [...e[0] || (e[0] = [
+    r("path", { d: "M2 6h28v6H2zm0 8h28v6H2zm0 8h28v6H2z" }, null, -1)
   ])]);
 }
-const c = { render: l };
+const s = { render: l };
 export {
-  c as default,
+  s as default,
   l as render
 };

package/dist/assets/icons/chevron-up.svg.js

@@ -1,15 +1,15 @@
-import { openBlock as o, createElementBlock as t, createElementVNode as n } from "vue";
+import { openBlock as t, createElementBlock as o, createElementVNode as n } from "vue";
 const r = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
 function l(c, e) {
-  return o(), t("svg", r, [...e[0] || (e[0] = [
+  return t(), o("svg", r, [...e[0] || (e[0] = [
     n("path", { d: "M2 20 16 8l14 12-2 2-12-10L4 22Z" }, null, -1)
   ])]);
 }
-const s = { render: l };
+const d = { render: l };
 export {
-  s as default,
+  d as default,
   l as render
 };

package/dist/components/basic/nmorph-scroll/NmorphScroll.css

@@ -1 +1 @@
-.nmorph-scroll{--thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));color-scheme:var(--nmorph-scroll-color-scheme, light);scrollbar-color:var(--thumb-color) transparent;scrollbar-width:thin}.nmorph-scroll::-webkit-scrollbar{width:var(--bar-width);height:var(--bar-height);background-color:transparent;cursor:pointer;transition:width ease-in-out .2s}.nmorph-scroll::-webkit-scrollbar-button,.nmorph-scroll::-webkit-scrollbar-button:single-button,.nmorph-scroll::-webkit-scrollbar-button:double-button,.nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,.nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;min-width:0!important;max-width:0!important;height:0!important;min-height:0!important;max-height:0!important;background:transparent!important;background-image:none!important;border:0!important;appearance:none}.nmorph-scroll::-webkit-scrollbar-track{background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset)}.nmorph-scroll::-webkit-scrollbar-thumb{background-color:var(--thumb-color);border-radius:var(--border-radius-40)}.nmorph-scroll::-webkit-scrollbar-corner{background-color:transparent}
+.nmorph-scroll{--thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));position:relative;overflow:hidden;color-scheme:var(--nmorph-scroll-color-scheme, light)}.nmorph-scroll__viewport{display:inherit;flex-direction:inherit;flex-wrap:inherit;grid-auto-flow:inherit;grid-template-columns:inherit;grid-template-rows:inherit;gap:inherit;justify-content:inherit;align-content:inherit;align-items:inherit;box-sizing:border-box;width:100%;height:100%;color-scheme:inherit;scrollbar-width:none;-ms-overflow-style:none}.nmorph-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.nmorph-scroll__bar{position:absolute;z-index:1;background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset);opacity:.78;transition:opacity ease-in-out .16s,background-color ease-in-out .16s;touch-action:none}.nmorph-scroll__bar--vertical{top:0;right:0;width:var(--bar-width)}.nmorph-scroll__bar--horizontal{right:0;bottom:0;left:0;height:var(--bar-height)}.nmorph-scroll__thumb{position:absolute;top:0;left:0;background-color:var(--thumb-color);border-radius:var(--border-radius-40);cursor:pointer;transition:background-color ease-in-out .16s;touch-action:none}.nmorph-scroll__thumb--vertical{width:100%}.nmorph-scroll__thumb--horizontal{height:100%}.nmorph-scroll--show-bars .nmorph-scroll__bar,.nmorph-scroll__bar:hover{opacity:1}.nmorph-scroll--dragging .nmorph-scroll__thumb{cursor:grabbing}.nmorph-scroll::-webkit-scrollbar{width:var(--bar-width);height:var(--bar-height);background-color:transparent;cursor:pointer;transition:width ease-in-out .2s}.nmorph-scroll::-webkit-scrollbar-button,.nmorph-scroll::-webkit-scrollbar-button:single-button,.nmorph-scroll::-webkit-scrollbar-button:double-button,.nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,.nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;min-width:0!important;max-width:0!important;height:0!important;min-height:0!important;max-height:0!important;background:transparent!important;background-image:none!important;border:0!important;appearance:none}.nmorph-scroll::-webkit-scrollbar-track{background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset)}.nmorph-scroll::-webkit-scrollbar-thumb{background-color:var(--thumb-color);border-radius:var(--border-radius-40)}.nmorph-scroll::-webkit-scrollbar-corner{background-color:transparent}

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js

@@ -1,7 +1,7 @@
 import './NmorphScroll.css';
-import { defineComponent as $, ref as r, computed as o, inject as k, onUnmounted as z, onMounted as D, nextTick as f, watch as v, openBlock as G, createElementBlock as R, normalizeStyle as L, normalizeClass as j, renderSlot as N } from "vue";
-import { useModifiers as U } from "../../../utils/create-modifiers.js";
-const F = /* @__PURE__ */ $({
+import { defineComponent as Pe, ref as c, computed as n, inject as we, onUnmounted as He, onMounted as ze, nextTick as G, watch as N, openBlock as T, createElementBlock as W, normalizeStyle as h, normalizeClass as Be, createElementVNode as M, renderSlot as Te, createCommentVNode as U } from "vue";
+import { useModifiers as We } from "../../../utils/create-modifiers.js";
+const ke = /* @__PURE__ */ Pe({
   __name: "NmorphScroll",
   props: {
     height: { default: "100%" },
@@ -21,95 +21,200 @@ const F = /* @__PURE__ */ $({
     yGapInPx: { default: 0 }
   },
   emits: ["on-scroll", "update:model-value", "on-scroll-end"],
-  setup(x, { expose: g, emit: y }) {
-    const e = x, t = r(null), B = o(() => e.scrollYProp), P = o(() => e.scrollXProp), s = r(!1), c = r(!1), h = () => {
-      const l = t.value;
-      if (!l) {
-        s.value = !1, c.value = !1;
+  setup(j, { expose: q, emit: A }) {
+    const l = j, F = c(null), s = c(null), J = n(() => l.scrollYProp), K = n(() => l.scrollXProp), f = c(!1), g = c(!1), i = c({
+      clientWidth: 0,
+      clientHeight: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
+      scrollLeft: 0,
+      scrollTop: 0
+    }), y = c(!1);
+    let b, a, _ = "";
+    const m = () => {
+      const e = s.value;
+      if (!e) {
+        f.value = !1, g.value = !1, i.value = {
+          clientWidth: 0,
+          clientHeight: 0,
+          scrollWidth: 0,
+          scrollHeight: 0,
+          scrollLeft: 0,
+          scrollTop: 0
+        };
         return;
       }
-      s.value = l.scrollHeight > l.clientHeight, c.value = l.scrollWidth > l.clientWidth;
-    }, S = o(() => e.yBarWidthInPx + e.yGapInPx), H = o(() => e.xBarWidthInPx + e.xGapInPx), b = o(
-      () => e.scrollYProp === "hidden" || !s.value ? "0" : `${S.value}px`
-    ), I = o(
-      () => e.scrollXProp === "hidden" || !c.value ? "0" : `${H.value}px`
-    ), W = o(() => `${e.yBarWidthInPx}px`), E = o(() => `${e.xBarWidthInPx}px`), w = k("nmorph");
-    let a;
-    const i = y, m = () => {
-      const l = t.value;
-      if (!l) return;
-      const n = Math.trunc(l.scrollLeft), u = Math.trunc(l.scrollTop);
-      i("update:model-value", { x: n, y: u });
-    }, M = () => {
-      i("on-scroll-end");
-    }, O = (l) => {
-      i("on-scroll", l), t.value && (e.updateOnlyOnScrollEnd || m(), a !== void 0 && clearTimeout(a), a = setTimeout(() => {
-        e.updateOnlyOnScrollEnd && m(), M();
-      }, e.scrollEndDelay));
+      const t = {
+        clientWidth: e.clientWidth,
+        clientHeight: e.clientHeight,
+        scrollWidth: e.scrollWidth,
+        scrollHeight: e.scrollHeight,
+        scrollLeft: e.scrollLeft,
+        scrollTop: e.scrollTop
+      };
+      i.value = t, f.value = t.scrollHeight > t.clientHeight, g.value = t.scrollWidth > t.clientWidth;
+    }, Q = n(() => l.yBarWidthInPx + l.yGapInPx), Z = n(() => l.xBarWidthInPx + l.xGapInPx), ee = n(
+      () => l.scrollYProp === "hidden" || !f.value ? "0" : `${Q.value}px`
+    ), te = n(
+      () => l.scrollXProp === "hidden" || !g.value ? "0" : `${Z.value}px`
+    ), k = n(() => `${l.yBarWidthInPx}px`), E = n(() => `${l.xBarWidthInPx}px`), oe = n(() => B.value ? E.value : "0px"), le = n(() => z.value ? k.value : "0px"), ne = we("nmorph");
+    let v;
+    const P = A, I = () => {
+      const e = s.value;
+      if (!e) return;
+      const t = Math.trunc(e.scrollLeft), o = Math.trunc(e.scrollTop);
+      P("update:model-value", { x: t, y: o });
+    }, re = () => {
+      P("on-scroll-end");
+    }, ae = (e) => {
+      m(), P("on-scroll", e), s.value && (l.updateOnlyOnScrollEnd || I(), v !== void 0 && clearTimeout(v), v = setTimeout(() => {
+        l.updateOnlyOnScrollEnd && I(), re();
+      }, l.scrollEndDelay));
     };
-    z(() => {
-      a !== void 0 && clearTimeout(a);
+    He(() => {
+      v !== void 0 && clearTimeout(v), b?.disconnect(), V();
     });
-    const p = r(!1), T = o(
-      () => U({
-        "nmorph-scroll": []
+    const w = c(!1), ie = n(
+      () => We({
+        "nmorph-scroll": {
+          "show-bars": w.value || y.value,
+          dragging: y.value
+        }
       })
-    ), d = (l) => {
-      const { x: n, y: u } = l;
-      t.value?.scrollTo({
-        left: n,
-        top: u,
+    ), H = (e) => {
+      const { x: t, y: o } = e;
+      s.value?.scrollTo({
+        left: t,
+        top: o,
         behavior: "smooth"
       });
     };
-    D(() => {
-      d(e.modelValue), f(h);
-    }), v(
-      () => e.modelValue,
-      (l) => {
-        d(l);
+    ze(() => {
+      H(l.modelValue), G(m), typeof ResizeObserver < "u" && s.value && (b = new ResizeObserver(() => {
+        m();
+      }), b.observe(s.value));
+    }), N(
+      () => l.modelValue,
+      (e) => {
+        H(e);
       },
       { deep: !0, immediate: !0 }
-    ), v(
-      () => w?.browser.dimensions,
+    ), N(
+      () => ne?.browser.dimensions,
       () => {
-        f(h);
+        G(m);
       },
       { deep: !0, immediate: !0 }
     );
-    const C = o(() => e.cssScrollBehavior), _ = o(() => e.height), V = o(() => e.maxHeight);
-    g({ scrollDOMContainer: t, moveTo: d });
-    const X = () => {
-      p.value = !0;
-    }, Y = () => {
-      p.value = !1;
+    const se = n(() => l.cssScrollBehavior), ce = n(() => l.height), ue = n(() => l.maxHeight), de = n(() => ({
+      "--bar-width": k.value,
+      "--bar-height": E.value,
+      boxSizing: "border-box",
+      minWidth: "0",
+      minHeight: "0",
+      height: ce.value,
+      maxHeight: ue.value
+    })), he = n(() => ({
+      paddingRight: ee.value,
+      paddingBottom: te.value,
+      overflowX: K.value,
+      overflowY: J.value,
+      scrollBehavior: se.value
+    })), z = n(() => l.scrollYProp !== "hidden" && f.value), B = n(() => l.scrollXProp !== "hidden" && g.value), me = n(
+      () => Math.max(0, i.value.clientHeight - (B.value ? l.xBarWidthInPx : 0))
+    ), ve = n(
+      () => Math.max(0, i.value.clientWidth - (z.value ? l.yBarWidthInPx : 0))
+    ), p = (e) => e === "y" ? me.value : ve.value, L = (e) => e === "y" ? i.value.clientHeight : i.value.clientWidth, O = (e) => e === "y" ? i.value.scrollHeight : i.value.scrollWidth, D = (e) => e === "y" ? i.value.scrollTop : i.value.scrollLeft, pe = (e) => Math.min(p(e), Math.max(18, e === "y" ? l.yBarWidthInPx * 3 : l.xBarWidthInPx * 3)), S = (e) => Math.max(0, O(e) - L(e)), u = (e) => {
+      const t = p(e), o = O(e), r = L(e);
+      return t <= 0 || o <= r ? 0 : Math.min(t, Math.max(pe(e), r / o * t));
+    }, C = (e) => {
+      const t = S(e), o = Math.max(0, p(e) - u(e));
+      return !t || !o ? 0 : D(e) / t * o;
+    }, fe = n(() => ({
+      height: `${u("y")}px`,
+      transform: `translate3d(0, ${C("y")}px, 0)`
+    })), ge = n(() => ({
+      width: `${u("x")}px`,
+      transform: `translate3d(${C("x")}px, 0, 0)`
+    })), R = (e, t) => {
+      const o = s.value;
+      if (!o) return;
+      const r = Math.max(0, Math.min(S(e), t));
+      e === "y" ? o.scrollTop = r : o.scrollLeft = r, m();
+    }, V = () => {
+      a && (window.removeEventListener("pointermove", X), window.removeEventListener("pointerup", x), window.removeEventListener("pointercancel", x), a = void 0, y.value = !1, document.body && (document.body.style.userSelect = _));
+    }, X = (e) => {
+      if (!a) return;
+      const o = (a.axis === "y" ? e.clientY : e.clientX) - a.pointerStart, r = Math.max(1, a.trackSize - a.thumbSize), d = o / r * a.maxScroll;
+      R(a.axis, a.scrollStart + d);
+    }, x = () => {
+      V();
+    }, Y = (e, t) => {
+      t.preventDefault(), t.stopPropagation();
+      const o = p(e), r = u(e), d = S(e);
+      !o || !r || !d || (a = {
+        axis: e,
+        pointerStart: e === "y" ? t.clientY : t.clientX,
+        scrollStart: D(e),
+        trackSize: o,
+        thumbSize: r,
+        maxScroll: d
+      }, y.value = !0, _ = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", X), window.addEventListener("pointerup", x), window.addEventListener("pointercancel", x));
+    }, $ = (e, t) => {
+      if (t.target.closest(".nmorph-scroll__thumb")) return;
+      const r = t.currentTarget.getBoundingClientRect(), d = e === "y" ? t.clientY - r.top : t.clientX - r.left, xe = Math.max(1, p(e) - u(e)), be = (d - u(e) / 2) / xe * S(e);
+      R(e, be);
     };
-    return (l, n) => (G(), R("div", {
-      ref_key: "scrollDOMContainer",
-      ref: t,
-      class: j(T.value),
-      style: L({
-        "--bar-width": W.value,
-        "--bar-height": E.value,
-        boxSizing: "border-box",
-        minWidth: "0",
-        minHeight: "0",
-        height: _.value,
-        maxHeight: V.value,
-        paddingRight: b.value,
-        paddingBottom: I.value,
-        overflowX: P.value,
-        overflowY: B.value,
-        scrollBehavior: C.value
-      }),
-      onScroll: O,
-      onMouseenter: X,
-      onMouseleave: Y
+    q({ scrollDOMContainer: s, moveTo: H });
+    const ye = () => {
+      w.value = !0;
+    }, Se = () => {
+      w.value = !1;
+    };
+    return (e, t) => (T(), W("div", {
+      ref_key: "scrollRoot",
+      ref: F,
+      class: Be(ie.value),
+      style: h(de.value),
+      onMouseenter: ye,
+      onMouseleave: Se
     }, [
-      N(l.$slots, "default")
+      M("div", {
+        ref_key: "scrollDOMContainer",
+        ref: s,
+        class: "nmorph-scroll__viewport",
+        style: h(he.value),
+        onScroll: ae
+      }, [
+        Te(e.$slots, "default")
+      ], 36),
+      z.value ? (T(), W("div", {
+        key: 0,
+        class: "nmorph-scroll__bar nmorph-scroll__bar--vertical",
+        style: h({ bottom: oe.value }),
+        onPointerdown: t[1] || (t[1] = (o) => $("y", o))
+      }, [
+        M("div", {
+          class: "nmorph-scroll__thumb nmorph-scroll__thumb--vertical",
+          style: h(fe.value),
+          onPointerdown: t[0] || (t[0] = (o) => Y("y", o))
+        }, null, 36)
+      ], 36)) : U("", !0),
+      B.value ? (T(), W("div", {
+        key: 1,
+        class: "nmorph-scroll__bar nmorph-scroll__bar--horizontal",
+        style: h({ right: le.value }),
+        onPointerdown: t[3] || (t[3] = (o) => $("x", o))
+      }, [
+        M("div", {
+          class: "nmorph-scroll__thumb nmorph-scroll__thumb--horizontal",
+          style: h(ge.value),
+          onPointerdown: t[2] || (t[2] = (o) => Y("x", o))
+        }, null, 36)
+      ], 36)) : U("", !0)
     ], 38));
   }
 });
 export {
-  F as default
+  ke 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;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;overflow:auto hidden;scrollbar-width:thin}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__expand-button,.nmorph-emoji-picker .nmorph-emoji-picker__collapse-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__expand-button:disabled,.nmorph-emoji-picker .nmorph-emoji-picker__collapse-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__expand-button:focus,.nmorph-emoji-picker .nmorph-emoji-picker__collapse-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__expand-button:focus-visible,.nmorph-emoji-picker .nmorph-emoji-picker__collapse-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-accent-color)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__expand-button,.nmorph-emoji-picker .nmorph-emoji-picker__collapse-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;border-radius:var(--default-border-radius)}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button,.nmorph-emoji-picker .nmorph-emoji-picker__emoji{font-size:20px;line-height:1}.nmorph-emoji-picker .nmorph-emoji-picker__quick-button:hover:not(:disabled),.nmorph-emoji-picker .nmorph-emoji-picker__emoji:hover:not(:disabled){background:color-mix(in srgb,var(--nmorph-accent-color) 14%,transparent)}.nmorph-emoji-picker .nmorph-emoji-picker__expand-button,.nmorph-emoji-picker .nmorph-emoji-picker__collapse-button{color:var(--nmorph-semi-contrast-text-color);--color: currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__expand-button:hover:not(:disabled),.nmorph-emoji-picker .nmorph-emoji-picker__collapse-button:hover:not(:disabled){color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.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__toolbar{display:flex;flex:0 0 auto;gap:var(--indentation-02);align-items:center;min-width:0}.nmorph-emoji-picker .nmorph-emoji-picker__search{display:flex;flex:1 1 auto;gap:6px;align-items:center;min-width:0;height:34px;padding:0 10px;color:var(--nmorph-semi-contrast-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 5%,transparent);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset);--color: currentColor}.nmorph-emoji-picker .nmorph-emoji-picker__search-input{flex:1 1 auto;min-width:0;padding:0;color:var(--nmorph-text-color);font:inherit;background:transparent;border:0;outline:none;appearance:none}.nmorph-emoji-picker .nmorph-emoji-picker__search-input::placeholder{color:var(--nmorph-placeholder-text-color)}.nmorph-emoji-picker .nmorph-emoji-picker__search-input::-webkit-search-cancel-button{appearance:none}.nmorph-emoji-picker .nmorph-emoji-picker__categories{display:flex;flex:0 0 auto;gap:4px;margin:var(--indentation-02) 0;overflow:auto hidden;scrollbar-width:thin}.nmorph-emoji-picker .nmorph-emoji-picker__category{flex:0 0 auto;max-width:120px;height:28px;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),.nmorph-emoji-picker .nmorph-emoji-picker__category.nmorph-emoji-picker__category--active{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-emoji-picker .nmorph-emoji-picker__body{flex:1 1 auto;min-height:0;padding:2px;overflow:hidden auto;scrollbar-gutter:stable}.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-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__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:28px;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}