@nmorph/nmorph-ui-kit 2.2.42 → 2.2.44

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

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

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

@@ -1,15 +1,15 @@
-import { openBlock as t, createElementBlock as o, createElementVNode as n } from "vue";
+import { openBlock as o, createElementBlock as t, createElementVNode as n } from "vue";
 const r = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
-function l(d, e) {
-  return t(), o("svg", r, [...e[0] || (e[0] = [
+function l(a, e) {
+  return o(), t("svg", r, [...e[0] || (e[0] = [
     n("path", { d: "M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z" }, null, -1)
   ])]);
 }
-const s = { render: l };
+const d = { render: l };
 export {
-  s as default,
+  d as default,
   l as render
 };

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

@@ -9,8 +9,8 @@ function a(l, e) {
     t("path", { d: "M694.044 621.227a109.227 109.227 0 1 0 0-218.454 109.227 109.227 0 0 0 0 218.454m0 72.817a182.044 182.044 0 1 1 0-364.088 182.044 182.044 0 0 1 0 364.088" }, null, -1)
   ])]);
 }
-const m = { render: a };
+const p = { render: a };
 export {
-  m as default,
+  p as default,
   a as render
 };

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

@@ -3,7 +3,7 @@ const n = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
-function c(s, e) {
+function c(l, e) {
   return t(), o("svg", n, [...e[0] || (e[0] = [
     r("path", { d: "m31.008 27.231-7.58-6.447c-.784-.705-1.622-1.029-2.299-.998a11.95 11.95 0 0 0 2.87-7.787c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-.031.677.293 1.515.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007.23s.997-2.903-.23-4.007M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16" }, null, -1)
   ])]);

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

@@ -1,16 +1,16 @@
-import { openBlock as n, createElementBlock as o, createElementVNode as t } from "vue";
+import { openBlock as o, createElementBlock as n, createElementVNode as t } from "vue";
 const r = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
 function a(l, e) {
-  return n(), o("svg", r, [...e[0] || (e[0] = [
+  return o(), n("svg", r, [...e[0] || (e[0] = [
     t("path", { d: "M512 64a448 448 0 1 0 0 896 448 448 0 0 0 0-896m0 64a384 384 0 1 1 0 768 384 384 0 0 1 0-768" }, null, -1),
     t("path", { d: "M352 384a48 48 0 1 1 0 96 48 48 0 0 1 0-96m320 0a48 48 0 1 1 0 96 48 48 0 0 1 0-96M352.64 585.6a32 32 0 0 1 43.648 11.712C419.84 638.08 462.976 672 512 672s92.16-33.92 115.712-74.688a32 32 0 0 1 55.36 32C649.6 687.296 586.752 736 512 736s-137.6-48.704-171.072-106.688A32 32 0 0 1 352.64 585.6" }, null, -1)
   ])]);
 }
-const m = { render: a };
+const s = { render: a };
 export {
-  m as default,
+  s as default,
   a as render
 };

package/dist/components/basic/nmorph-button/NmorphButton.vue.js

@@ -1,10 +1,10 @@
 import './NmorphButton.css';
-import { defineComponent as C, useSlots as z, computed as o, ref as V, openBlock as t, createElementBlock as i, normalizeStyle as $, normalizeClass as N, createElementVNode as O, createBlock as r, unref as a, withCtx as s, createVNode as E, renderSlot as n, Fragment as H, createCommentVNode as f, toDisplayString as M } from "vue";
+import { defineComponent as C, useSlots as z, computed as o, ref as N, openBlock as t, createElementBlock as r, normalizeStyle as V, normalizeClass as $, createElementVNode as O, createBlock as i, unref as a, withCtx as s, createVNode as E, renderSlot as n, Fragment as H, createCommentVNode as f, toDisplayString as M } from "vue";
 import { useModifiers as D } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as w } from "../../../types/common.types.js";
+import { NmorphComponentHeight as I } from "../../../types/common.types.js";
 import d from "../nmorph-icon/NmorphIcon.vue.js";
 /* empty css                             */
-import I from "../../../assets/icons/loading.svg.js";
+import w from "../../../assets/icons/loading.svg.js";
 const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
   key: 1,
   class: "nmorph-button__label"
@@ -32,10 +32,10 @@ const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:model-value"],
-  setup(y, { expose: g, emit: h }) {
-    const e = y, b = h, u = z(), v = o(() => !!u.icon), c = o(() => !!u["icon-only"]), p = o(() => e.active || !!e.modelValue), B = o(
+  setup(y, { expose: h, emit: g }) {
+    const e = y, b = g, u = z(), v = o(() => !!u.icon), c = o(() => !!u["icon-only"]), p = o(() => e.active || !!e.modelValue), B = o(
       () => D({
-        nmorph: [w[e.height], e.fill && "fill"],
+        nmorph: [I[e.height], e.fill && "fill"],
         "nmorph-button": [
           e.styleType,
           e.shape,
@@ -48,7 +48,7 @@ const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
           e.danger && "danger"
         ]
       })
-    ), m = V(null), _ = {
+    ), m = N(null), _ = {
       thin: "small",
       basic: "medium",
       thick: "large"
@@ -59,9 +59,9 @@ const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
     } : {}), x = () => {
       !e.toggle || e.disabled || e.loading || b("update:model-value", !e.modelValue);
     };
-    return g({ buttonDOMElement: m }), (l, j) => (t(), i("div", {
-      class: N(B.value),
-      style: $(S.value)
+    return h({ buttonDOMElement: m }), (l, L) => (t(), r("div", {
+      class: $(B.value),
+      style: V(S.value)
     }, [
       O("button", {
         ref_key: "buttonDOMElement",
@@ -74,28 +74,28 @@ const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
         "aria-pressed": e.toggle ? p.value : void 0,
         onClick: x
       }, [
-        e.loading ? (t(), r(a(d), {
+        e.loading ? (t(), i(a(d), {
           key: 0,
           size: k.value
         }, {
           default: s(() => [
-            E(a(I))
+            E(a(w))
           ]),
           _: 1
-        }, 8, ["size"])) : c.value ? (t(), r(a(d), { key: 1 }, {
+        }, 8, ["size"])) : c.value ? (t(), i(a(d), { key: 1 }, {
           default: s(() => [
             n(l.$slots, "icon-only")
           ]),
           _: 3
-        })) : (t(), i(H, { key: 2 }, [
-          v.value ? (t(), r(a(d), { key: 0 }, {
+        })) : (t(), r(H, { key: 2 }, [
+          v.value ? (t(), i(a(d), { key: 0 }, {
             default: s(() => [
               n(l.$slots, "icon")
             ]),
             _: 3
           })) : f("", !0),
           n(l.$slots, "default"),
-          e.text !== void 0 ? (t(), i("span", F, M(e.text), 1)) : f("", !0),
+          e.text !== void 0 ? (t(), r("span", F, M(e.text), 1)) : f("", !0),
           n(l.$slots, "append")
         ], 64))
       ], 8, T)

package/dist/components/basic/nmorph-icon/NmorphIcon.css

@@ -1 +1 @@
-.nmorph-icon{display:flex;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}.nmorph-icon{--color: var(--nmorph-icon-color, var(--nmorph-text-color))}
+.nmorph-icon,.nmorph-icon .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}.nmorph-icon{--color: var(--nmorph-icon-color, var(--nmorph-text-color))}

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css

@@ -0,0 +1 @@
+.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-audio-preview-width, 360px);min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-audio-preview .nmorph-audio-preview__play{flex:0 0 auto}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:600}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue.js

@@ -0,0 +1,207 @@
+import './NmorphAudioPreview.css';
+import { defineComponent as q, useSlots as G, ref as _, watch as J, computed as l, openBlock as t, createElementBlock as p, normalizeStyle as N, normalizeClass as K, createElementVNode as i, createBlock as h, unref as r, withCtx as m, createVNode as s, toDisplayString as y, withDirectives as Q, vModelText as W, renderSlot as X, createCommentVNode as H } from "vue";
+import { useModifiers as Y } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Z } from "../../../utils/common.js";
+import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import ee from "../../../assets/icons/audio.svg.js";
+import oe from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import ae from "../../../assets/icons/pause.svg.js";
+import re from "../../../assets/icons/play.svg.js";
+import te from "../../../assets/icons/open.svg.js";
+import ne from "../../../assets/icons/download.svg.js";
+import le from "../../../assets/icons/loading.svg.js";
+const ie = ["src", "preload"], se = { class: "nmorph-audio-preview__icon" }, de = { class: "nmorph-audio-preview__body" }, ue = { class: "nmorph-audio-preview__header" }, ce = { class: "nmorph-audio-preview__name" }, pe = {
+  key: 0,
+  class: "nmorph-audio-preview__error"
+}, me = {
+  key: 1,
+  class: "nmorph-audio-preview__time"
+}, ve = ["disabled", "aria-label"], fe = {
+  key: 0,
+  class: "nmorph-audio-preview__actions"
+}, _e = ["href", "aria-label"], he = ["href", "download", "aria-label"], Me = /* @__PURE__ */ q({
+  __name: "NmorphAudioPreview",
+  props: {
+    src: {},
+    name: { default: "" },
+    durationMs: { default: void 0 },
+    width: { default: void 0 },
+    compact: { type: Boolean, default: !1 },
+    preload: { default: "metadata" },
+    downloadHref: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorText: { default: "" },
+    showDefaultActions: { type: Boolean, default: !0 }
+  },
+  emits: ["play", "pause", "open", "download", "error"],
+  setup(S, { expose: T, emit: $ }) {
+    const e = S, u = $, x = G(), a = _(null), n = _(!1), v = _(0), f = _(e.durationMs ? e.durationMs / 1e3 : 0);
+    J(
+      () => e.durationMs,
+      (o) => {
+        f.value = o ? o / 1e3 : f.value;
+      }
+    );
+    const d = l(() => f.value || 0), g = l({
+      get: () => d.value > 0 ? v.value / d.value * 100 : 0,
+      set: (o) => {
+        !a.value || d.value <= 0 || (a.value.currentTime = o / 100 * d.value, v.value = a.value.currentTime);
+      }
+    }), B = l(() => ({ "--nmorph-audio-preview-progress": `${g.value}%` })), C = l(
+      () => !!x.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), M = l(
+      () => Y({
+        "nmorph-audio-preview": [
+          e.compact && "compact",
+          e.loading && "loading",
+          e.error && "error",
+          n.value && "playing"
+        ]
+      })
+    ), z = l(
+      () => Z({
+        "--nmorph-audio-preview-width": e.width
+      })
+    ), k = (o) => {
+      if (!Number.isFinite(o) || o < 0) return "0:00";
+      const c = Math.floor(o), b = Math.floor(c / 60), j = c % 60;
+      return `${b}:${j.toString().padStart(2, "0")}`;
+    }, A = l(() => k(v.value)), D = l(() => k(d.value)), I = async () => {
+      if (!(!a.value || e.loading || e.error)) {
+        if (n.value) {
+          a.value.pause();
+          return;
+        }
+        try {
+          await a.value.play();
+        } catch {
+          n.value = !1;
+        }
+      }
+    }, P = () => {
+      !a.value || Number.isNaN(a.value.duration) || (f.value = a.value.duration);
+    }, V = () => {
+      v.value = a.value?.currentTime || 0;
+    }, E = (o) => {
+      n.value = !0, u("play", o);
+    }, L = (o) => {
+      n.value = !1, u("pause", o);
+    }, O = () => {
+      n.value = !1;
+    }, R = (o) => {
+      n.value = !1, u("error", o);
+    }, U = () => u("open"), F = () => u("download");
+    return T({ audioRef: a }), (o, c) => (t(), p("div", {
+      class: K(M.value),
+      style: N(z.value)
+    }, [
+      i("audio", {
+        ref_key: "audioRef",
+        ref: a,
+        src: e.src,
+        preload: e.preload,
+        onLoadedmetadata: P,
+        onTimeupdate: V,
+        onPlay: E,
+        onPause: L,
+        onEnded: O,
+        onError: R
+      }, null, 40, ie),
+      i("div", se, [
+        e.loading ? (t(), h(r(w), {
+          key: 0,
+          size: "medium"
+        }, {
+          default: m(() => [
+            s(r(le))
+          ]),
+          _: 1
+        })) : (t(), h(r(w), {
+          key: 1,
+          size: "medium"
+        }, {
+          default: m(() => [
+            s(r(ee))
+          ]),
+          _: 1
+        }))
+      ]),
+      s(r(oe), {
+        class: "nmorph-audio-preview__play",
+        height: "thin",
+        "style-type": "transparent",
+        disabled: e.loading || e.error,
+        onClick: I
+      }, {
+        "icon-only": m(() => [
+          n.value ? (t(), h(r(ae), { key: 0 })) : (t(), h(r(re), { key: 1 }))
+        ]),
+        _: 1
+      }, 8, ["disabled"]),
+      i("div", de, [
+        i("div", ue, [
+          i("span", ce, y(e.name || "Audio"), 1),
+          e.error && e.errorText ? (t(), p("span", pe, y(e.errorText), 1)) : (t(), p("span", me, y(A.value) + " / " + y(D.value), 1))
+        ]),
+        Q(i("input", {
+          "onUpdate:modelValue": c[0] || (c[0] = (b) => g.value = b),
+          class: "nmorph-audio-preview__range",
+          type: "range",
+          min: "0",
+          max: "100",
+          step: "0.1",
+          style: N(B.value),
+          disabled: e.loading || e.error || d.value <= 0,
+          "aria-label": `Audio progress ${e.name || ""}`
+        }, null, 12, ve), [
+          [
+            W,
+            g.value,
+            void 0,
+            { number: !0 }
+          ]
+        ])
+      ]),
+      C.value ? (t(), p("div", fe, [
+        X(o.$slots, "actions", {}, () => [
+          i("a", {
+            href: e.src,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "nmorph-audio-preview__action-link",
+            "aria-label": `Open ${e.name || "audio"}`,
+            onClick: U
+          }, [
+            s(r(w), { size: "small" }, {
+              default: m(() => [
+                s(r(te))
+              ]),
+              _: 1
+            })
+          ], 8, _e),
+          e.downloadHref ? (t(), p("a", {
+            key: 0,
+            href: e.downloadHref,
+            download: e.name,
+            class: "nmorph-audio-preview__action-link",
+            "aria-label": `Download ${e.name || "audio"}`,
+            onClick: F
+          }, [
+            s(r(w), { size: "small" }, {
+              default: m(() => [
+                s(r(ne))
+              ]),
+              _: 1
+            })
+          ], 8, he)) : H("", !0)
+        ])
+      ])) : H("", !0)
+    ], 6));
+  }
+});
+export {
+  Me as default
+};

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphAudioPreview.css';
+import o from "./NmorphAudioPreview.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

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

@@ -0,0 +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}