@nmorph/nmorph-ui-kit 2.2.59 → 3.0.1

package/dist/components/form/nmorph-switch/NmorphSwitch.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphSwitch.css';
-import { defineComponent as N, ref as l, computed as n, watch as V } from "vue";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as I } from "../../../utils/common.js";
-import { useFormItemInput as w, useFormItemModel as B } from "../nmorph-form/use-form-item-input.js";
+import { defineComponent as N, ref as o, computed as d, watch as V } from "vue";
+import { useModifiers as w } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as _ } from "../../../utils/common.js";
+import { useFormItemInput as I, useFormItemModel as B } from "../nmorph-form/use-form-item-input.js";
 import H from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import x from "../../../assets/icons/loader.svg.js";
 const j = /* @__PURE__ */ N({
@@ -24,47 +24,47 @@ const j = /* @__PURE__ */ N({
   },
   emits: ["update:model-value"],
   setup(f, { expose: m, emit: p }) {
-    const e = f, { id: c, name: h, tabindex: v } = w(e), u = p, { modelValue: o, updateModelValue: i } = B(
+    const e = f, { id: c, name: h, tabindex: v } = I(e), l = p, { modelValue: i, updateModelValue: u } = B(
       e,
-      (a) => u("update:model-value", a),
+      (r) => l("update:model-value", r),
       !1
-    ), r = l(!1), g = () => {
-      r.value = !0;
+    ), a = o(!1), g = () => {
+      a.value = !0;
     }, b = () => {
-      r.value = !1;
-    }, y = n(
-      () => _({
+      a.value = !1;
+    }, y = d(
+      () => w({
         "nmorph-switch": [
           e.disabled && "disabled",
           t.value ? "on" : "off",
           e.loading && "loading",
-          r.value && "focus"
+          a.value && "focus"
         ]
       })
-    ), t = l(o.value === e.activeValue), S = () => {
+    ), t = o(i.value === e.activeValue), S = () => {
       if (e.disabled) return;
       t.value = !t.value;
-      const a = t.value ? e.activeValue : e.inactiveValue;
-      i(a);
-    }, s = l(null);
+      const r = t.value ? e.activeValue : e.inactiveValue;
+      u(r);
+    }, s = o(null);
     m({ inputDOMRef: s });
-    const q = n(
-      () => I({
-        "--width": e.width,
-        "--height": e.height,
-        "--offset": e.offset,
-        "--thumb-height": e.thumbHeight
+    const q = d(
+      () => _({
+        "--nmorph-private-switch-width": e.width,
+        "--nmorph-private-switch-height": e.height,
+        "--nmorph-private-switch-offset": e.offset,
+        "--nmorph-private-switch-thumb-height": e.thumbHeight
       })
     );
-    V(o, (a) => {
-      t.value = a === e.activeValue;
+    V(i, (r) => {
+      t.value = r === e.activeValue;
     });
-    const d = { props: e, id: c, name: h, tabindex: v, emit: u, modelValue: o, updateModelValue: i, focus: r, focusHandler: g, blurHandler: b, modifiers: y, initialValue: t, changeHandler: S, inputDOMRef: s, styles: q, get NmorphIcon() {
+    const n = { props: e, id: c, name: h, tabindex: v, emit: l, modelValue: i, updateModelValue: u, focus: a, focusHandler: g, blurHandler: b, modifiers: y, initialValue: t, changeHandler: S, inputDOMRef: s, styles: q, get NmorphIcon() {
       return H;
     }, get NmorphIconLoaderDots() {
       return x;
     } };
-    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {

package/dist/components/form/nmorph-text-input/NmorphTextInput.css

@@ -1 +1 @@
-.nmorph-text-input{--prepend-icon-indent: 8px;--prepend-icon-size: 14px;--nmorph-text-input-prepend-icon-color: var(--nmorph-placeholder-text-color);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}.nmorph-text-input__input-side{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%}.nmorph-text-input__prepend-icon{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--prepend-icon-size);min-width:var(--prepend-icon-size);height:var(--prepend-icon-size);min-height:var(--prepend-icon-size);margin-left:var(--prepend-icon-indent);color:var(--nmorph-text-input-prepend-icon-color);pointer-events:none}.nmorph-text-input__prepend-icon .nmorph-icon{--color: var(--nmorph-text-input-prepend-icon-color)}.nmorph-text-input__prepend-icon svg,.nmorph-text-input__prepend-icon .nmorph-icon,.nmorph-text-input__prepend-icon .nmorph-icon__content{width:100%;min-width:100%;height:100%;min-height:100%}.nmorph-text-input__prepend-icon svg{fill:var(--nmorph-text-input-prepend-icon-color);stroke-width:0}.nmorph-text-input__prepend-icon path{stroke:var(--nmorph-text-input-prepend-icon-color)}.nmorph-text-input input{width:100%;height:var(--height);text-indent:var(--nmorph-text-input-indentation);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-text-input--with-action input{padding-right:calc(var(--height) + var(--indentation-03))}.nmorph-text-input input:focus{background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-text-input.nmorph--focused{--nmorph-text-input-prepend-icon-color: var(--nmorph-focus-text-color)}.nmorph-text-input input:-webkit-autofill,.nmorph-text-input input:-webkit-autofill:hover,.nmorph-text-input input:-webkit-autofill:active{caret-color:var(--nmorph-text-color);box-shadow:var(--nmorph-shadow-inset),inset 0 0 0 1000px var(--nmorph-main-color);-webkit-text-fill-color:var(--nmorph-text-color)}.nmorph-text-input input:-webkit-autofill:focus{caret-color:var(--nmorph-focus-text-color);outline:none;box-shadow:var(--nmorph-shadow-outset),inset 0 0 0 1000px var(--nmorph-accent-color);-webkit-text-fill-color:var(--nmorph-focus-text-color)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input__password-btn{position:absolute;right:0;height:100%}.nmorph-text-input__password-btn .nmorph-button__content{padding:var(--indentation-03)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn{margin-top:var(--indentation-00)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button{--height: var(--thin-component)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}
+.nmorph-text-input{--nmorph-private-text-input-prepend-icon-indent: 8px;--nmorph-private-text-input-prepend-icon-size: 14px;--nmorph-private-text-input-prepend-icon-color: var(--nmorph-placeholder-text-color);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}.nmorph-text-input__input-side{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%}.nmorph-text-input__prepend-icon{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-text-input-prepend-icon-size);min-width:var(--nmorph-private-text-input-prepend-icon-size);height:var(--nmorph-private-text-input-prepend-icon-size);min-height:var(--nmorph-private-text-input-prepend-icon-size);margin-left:var(--nmorph-private-text-input-prepend-icon-indent);color:var(--nmorph-private-text-input-prepend-icon-color);pointer-events:none}.nmorph-text-input__prepend-icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-private-text-input-prepend-icon-color)}.nmorph-text-input__prepend-icon svg,.nmorph-text-input__prepend-icon .nmorph-icon,.nmorph-text-input__prepend-icon .nmorph-icon__content{width:100%;min-width:100%;height:100%;min-height:100%}.nmorph-text-input__prepend-icon svg{fill:var(--nmorph-private-text-input-prepend-icon-color);stroke-width:0}.nmorph-text-input__prepend-icon path{stroke:var(--nmorph-private-text-input-prepend-icon-color)}.nmorph-text-input input{width:100%;height:var(--nmorph-private-control-height);padding-top:var(--nmorph-private-control-text-offset-y);padding-bottom:0;line-height:calc(var(--nmorph-private-control-height) - var(--nmorph-private-control-text-offset-y));text-indent:var(--nmorph-private-text-input-indentation);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-text-input--with-action input{padding-right:calc(var(--nmorph-private-control-height) + var(--indentation-03))}.nmorph-text-input input:focus{background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-text-input.nmorph--focused{--nmorph-private-text-input-prepend-icon-color: var(--nmorph-focus-text-color)}.nmorph-text-input input:-webkit-autofill,.nmorph-text-input input:-webkit-autofill:hover,.nmorph-text-input input:-webkit-autofill:active{caret-color:var(--nmorph-text-color);box-shadow:var(--nmorph-shadow-inset),inset 0 0 0 1000px var(--nmorph-main-color);-webkit-text-fill-color:var(--nmorph-text-color)}.nmorph-text-input input:-webkit-autofill:focus{caret-color:var(--nmorph-focus-text-color);outline:none;box-shadow:var(--nmorph-shadow-outset),inset 0 0 0 1000px var(--nmorph-accent-color);-webkit-text-fill-color:var(--nmorph-focus-text-color)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input__password-btn{position:absolute;right:0;height:100%}.nmorph-text-input__password-btn.nmorph-button.nmorph-button--plain .nmorph-button__content{padding:var(--indentation-03);background:transparent;border:none;box-shadow:none}.nmorph-text-input__password-btn.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{background:transparent;border:none;box-shadow:none}.nmorph-text-input.nmorph--thin-component .nmorph-text-input__password-btn{margin-top:var(--indentation-00)}.nmorph-text-input.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button{--nmorph-private-control-height: var(--thin-component)}.nmorph-text-input.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-text-input.nmorph--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js

@@ -1,57 +1,56 @@
 import './NmorphTextInput.css';
-import m from "./NmorphTextInput.vue2.js";
-import { openBlock as t, createElementBlock as r, normalizeStyle as s, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as f, withKeys as y, createBlock as d, withModifiers as u, withCtx as a, createVNode as b, resolveDynamicComponent as x } from "vue";
+import s from "./NmorphTextInput.vue2.js";
+import { openBlock as t, createElementBlock as r, normalizeStyle as m, normalizeClass as c, createElementVNode as i, renderSlot as f, createCommentVNode as l, mergeProps as h, withKeys as y, createBlock as d, withModifiers as u, withCtx as a, createVNode as b, resolveDynamicComponent as _ } from "vue";
 /* empty css                     */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = { class: "nmorph-text-input__input-side" }, k = {
+import k from "../../../_virtual/_plugin-vue_export-helper.js";
+const v = { class: "nmorph-text-input__input-side" }, x = {
   key: 0,
   class: "nmorph-text-input__prepend-icon"
 }, w = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
-function B(p, o, N, e, C, I) {
+function B(p, e, N, o, C, I) {
   return t(), r(
     "div",
     {
-      class: c(e.modifiers),
-      style: s(e.styles)
+      class: c(o.modifiers),
+      style: m(o.styles)
     },
     [
       i("div", v, [
-        e.slots["prepend-icon"] ? (t(), r("div", k, [
-          h(p.$slots, "prepend-icon")
+        o.slots["prepend-icon"] ? (t(), r("div", x, [
+          f(p.$slots, "prepend-icon")
         ])) : l("v-if", !0),
-        i("input", f({
-          id: e.id,
+        i("input", h({
+          id: o.id,
           ref: "inputDOMRef",
-          name: e.name,
-          autocomplete: e.autocomplete,
-          tabindex: e.tabindex,
+          name: o.name,
+          autocomplete: o.autocomplete,
+          tabindex: o.tabindex,
           class: "nmorph-native-input",
-          type: e.type,
-          placeholder: e.props.placeholder,
-          disabled: e.props.disabled,
-          value: e.modelValue
-        }, e.props.inputAttrs, {
-          onInput: e.handleInput,
-          onFocus: o[0] || (o[0] = (...n) => e.handleFocus && e.handleFocus(...n)),
-          onBlur: o[1] || (o[1] = (...n) => e.handleBlur && e.handleBlur(...n)),
-          onKeydown: o[2] || (o[2] = (n) => e.emit("keydown", n)),
-          onKeyup: o[3] || (o[3] = y((n) => e.emit("on-enter"), ["enter"]))
+          type: o.type,
+          placeholder: o.props.placeholder,
+          disabled: o.props.disabled,
+          value: o.modelValue
+        }, o.props.inputAttrs, {
+          onInput: o.handleInput,
+          onFocus: e[0] || (e[0] = (...n) => o.handleFocus && o.handleFocus(...n)),
+          onBlur: e[1] || (e[1] = (...n) => o.handleBlur && o.handleBlur(...n)),
+          onKeydown: e[2] || (e[2] = (n) => o.emit("keydown", n)),
+          onKeyup: e[3] || (e[3] = y((n) => o.emit("on-enter"), ["enter"]))
         }), null, 16, w),
-        e.props.typePassword || e.props.clearable ? (t(), d(e.NmorphButton, {
+        o.props.typePassword || o.props.clearable ? (t(), d(o.NmorphButton, {
           key: 1,
-          disabled: e.props.disabled,
+          disabled: o.props.disabled,
           class: "nmorph-text-input__password-btn",
-          "style-type": "transparent",
-          width: "32px",
-          height: e.props.height,
-          onMousedown: o[4] || (o[4] = u(() => {
+          design: "plain",
+          thickness: o.props.thickness,
+          onMousedown: e[4] || (e[4] = u(() => {
           }, ["prevent"])),
-          onClick: e.actionButtonClickHandler
+          onClick: o.actionButtonClickHandler
         }, {
           default: a(() => [
-            b(e.NmorphIcon, null, {
+            b(o.NmorphIcon, null, {
               default: a(() => [
-                (t(), d(x(e.actionIcon)))
+                (t(), d(_(o.actionIcon)))
               ]),
               _: 1
               /* STABLE */
@@ -59,14 +58,14 @@ function B(p, o, N, e, C, I) {
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["disabled", "height"])) : l("v-if", !0)
+        }, 8, ["disabled", "thickness"])) : l("v-if", !0)
       ])
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const M = /* @__PURE__ */ _(m, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
+const g = /* @__PURE__ */ k(s, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
 export {
-  M as default
+  g as default
 };

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js

@@ -1,15 +1,16 @@
 import './NmorphTextInput.css';
-import { defineComponent as k, useSlots as C, computed as o, ref as E } from "vue";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
-import { useFocusableInput as V } from "../../../hooks/use-focusable-input.js";
-import { useFormItemInput as j, useFormItemModel as H } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as R } from "../../../types/common.types.js";
-import A from "../../../assets/icons/eye-blocked.svg.js";
-import D from "../../basic/nmorph-button/NmorphButton.vue.js";
-import T from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import z from "../../../assets/icons/error.svg.js";
-import G from "../../../assets/icons/eye.svg.js";
-const ee = /* @__PURE__ */ k({
+import { defineComponent as F, useSlots as V, computed as r, ref as z } from "vue";
+import { useModifiers as M } from "../../../utils/create-modifiers.js";
+import { createCssVariables as E, createCssSizeVariables as O } from "../../../utils/common.js";
+import { useFocusableInput as j } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as R, useFormItemModel as T } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentThickness as A } from "../../../types/common.types.js";
+import D from "../../../assets/icons/eye-blocked.svg.js";
+import H from "../../basic/nmorph-button/NmorphButton.vue.js";
+import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import J from "../../../assets/icons/error.svg.js";
+import K from "../../../assets/icons/eye.svg.js";
+const oe = /* @__PURE__ */ F({
   __name: "NmorphTextInput",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -17,51 +18,63 @@ const ee = /* @__PURE__ */ k({
     modelValue: { type: String, required: !1, default: "" },
     clearable: { type: Boolean, required: !1, default: !1 },
     indentation: { type: String, required: !1, default: "" },
+    prependIconIndent: { type: [Number, String], required: !1, default: void 0 },
+    prependIconSize: { type: [Number, String], required: !1, default: void 0 },
+    prependIconColor: { type: String, required: !1, default: void 0 },
     inputAttrs: { type: Object, required: !1, default: () => ({}) },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "basic" },
+    thickness: { type: null, required: !1, default: "basic" },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
-  setup(f, { expose: h, emit: y }) {
-    const l = C(), e = f, r = y, { id: b, name: g, autocomplete: q, tabindex: I } = j(e), { modelValue: v, updateModelValue: n } = H(
+  setup(f, { expose: y, emit: h }) {
+    const p = V(), e = f, o = h, { id: b, name: I, autocomplete: v, tabindex: q } = R(e), { modelValue: S, updateModelValue: n } = T(
       e,
-      (a) => r("update:model-value", a),
+      (a) => o("update:model-value", a),
       ""
-    ), w = o(
-      () => O({
-        nmorph: [R[e.height], u.value && "focused"],
+    ), g = r(
+      () => M({
+        nmorph: [A[e.thickness], i.value && "focused"],
         "nmorph-text-input": [e.typePassword && "password", (e.typePassword || e.clearable) && "with-action"]
       })
     ), x = (a) => {
-      const M = a.target;
-      n(M.value);
-    }, t = E(!1), N = () => {
+      const P = a.target;
+      n(P.value);
+    }, t = z(!1), N = () => {
       e.clearable ? n("") : t.value = !t.value;
-    }, _ = o(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), {
+    }, w = r(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), {
       elementRef: s,
-      focused: u,
-      handleFocus: B,
-      handleBlur: S,
-      focus: p,
-      blur: i,
+      focused: i,
+      handleFocus: _,
+      handleBlur: B,
+      focus: l,
+      blur: u,
       select: d
-    } = V({
-      onFocus: () => r("focus"),
-      onBlur: () => r("blur")
+    } = j({
+      onFocus: () => o("focus"),
+      onBlur: () => o("blur")
     });
-    h({ inputDOMRef: s, focus: p, blur: i, select: d });
-    const P = o(() => e.clearable ? z : t.value ? A : G), m = o(() => e.indentation || (l["prepend-icon"] ? "28px" : "8px")), F = o(() => ({ "--nmorph-text-input-indentation": m.value })), c = { slots: l, props: e, emit: r, id: b, name: g, autocomplete: q, tabindex: I, modelValue: v, updateModelValue: n, modifiers: w, handleInput: x, showPassword: t, actionButtonClickHandler: N, type: _, inputDOMRef: s, focused: u, handleFocus: B, handleBlur: S, focus: p, blur: i, select: d, actionIcon: P, indentation: m, styles: F, get NmorphIcon() {
-      return T;
+    y({ inputDOMRef: s, focus: l, blur: u, select: d });
+    const C = r(() => e.clearable ? J : t.value ? D : K), c = r(() => e.indentation || (p["prepend-icon"] ? "28px" : "8px")), k = r(() => ({
+      "--nmorph-private-text-input-indentation": c.value,
+      ...O({
+        "--nmorph-private-text-input-prepend-icon-indent": e.prependIconIndent,
+        "--nmorph-private-text-input-prepend-icon-size": e.prependIconSize
+      }),
+      ...E({
+        "--nmorph-private-text-input-prepend-icon-color": e.prependIconColor
+      })
+    })), m = { slots: p, props: e, emit: o, id: b, name: I, autocomplete: v, tabindex: q, modelValue: S, updateModelValue: n, modifiers: g, handleInput: x, showPassword: t, actionButtonClickHandler: N, type: w, inputDOMRef: s, focused: i, handleFocus: _, handleBlur: B, focus: l, blur: u, select: d, actionIcon: C, indentation: c, styles: k, get NmorphIcon() {
+      return G;
     }, get NmorphButton() {
-      return D;
+      return H;
     } };
-    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {
-  ee as default
+  oe as default
 };

package/dist/components/form/nmorph-textarea/NmorphTextarea.css

@@ -1 +1 @@
-.nmorph-textarea{height:auto}.nmorph-textarea textarea{display:block;box-sizing:border-box;width:100%;min-width:0;padding:var(--indentation-03) var(--indentation-03) var(--indentation-03) var(--nmorph-textarea-indentation);color:var(--nmorph-text-color);font:inherit;line-height:var(--line-height-regular);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset);transition:background var(--transition-02) ease,box-shadow var(--transition-02) ease,color var(--transition-02) ease;resize:var(--nmorph-textarea-resize)}.nmorph-textarea textarea:focus{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-textarea textarea:disabled{cursor:not-allowed;opacity:.6;resize:none}.nmorph-textarea.nmorph-textarea--auto-size textarea{overflow-y:hidden}
+.nmorph-textarea{height:auto}.nmorph-textarea textarea{display:block;box-sizing:border-box;width:100%;min-width:0;padding:var(--indentation-03) var(--indentation-03) var(--indentation-03) var(--nmorph-private-textarea-indentation);color:var(--nmorph-text-color);font:inherit;line-height:var(--line-height-regular);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset);transition:background var(--transition-02) ease,box-shadow var(--transition-02) ease,color var(--transition-02) ease;resize:var(--nmorph-private-textarea-resize)}.nmorph-textarea textarea:focus{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-textarea textarea:disabled{cursor:not-allowed;opacity:.6;resize:none}.nmorph-textarea.nmorph-textarea--auto-size textarea{overflow-y:hidden}

package/dist/components/form/nmorph-textarea/NmorphTextarea.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphTextarea.css';
-import { defineComponent as B, computed as n, watch as C, onMounted as T, nextTick as V } from "vue";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
-import { useFocusableInput as j } from "../../../hooks/use-focusable-input.js";
-import { useFormItemInput as k, useFormItemModel as P } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as A } from "../../../types/common.types.js";
-const J = /* @__PURE__ */ B({
+import { defineComponent as k, computed as n, watch as B, onMounted as C, nextTick as T } from "vue";
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as O } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as j, useFormItemModel as P } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentThickness as A } from "../../../types/common.types.js";
+const J = /* @__PURE__ */ k({
   __name: "NmorphTextarea",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -19,30 +19,30 @@ const J = /* @__PURE__ */ B({
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "basic" },
+    thickness: { type: null, required: !1, default: "basic" },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
   setup(g, { expose: x, emit: b }) {
-    const e = g, r = b, { id: w, name: q, autocomplete: S, tabindex: v } = k(e), { modelValue: s, updateModelValue: l } = P(
+    const e = g, r = b, { id: w, name: q, autocomplete: S, tabindex: v } = j(e), { modelValue: i, updateModelValue: l } = P(
       e,
       (t) => r("update:model-value", t),
       ""
     ), {
-      elementRef: i,
+      elementRef: s,
       focused: u,
       handleFocus: _,
       handleBlur: z,
       focus: d,
       blur: p,
       select: m
-    } = j({
+    } = O({
       onFocus: () => r("focus"),
       onBlur: () => r("blur")
     }), F = n(
-      () => O({
-        nmorph: [A[e.height], u.value && "focused"],
+      () => V({
+        nmorph: [A[e.thickness], u.value && "focused"],
         "nmorph-textarea": [e.disabled && "disabled", e.autoSize && "auto-size"]
       })
     ), f = (t) => {
@@ -50,8 +50,8 @@ const J = /* @__PURE__ */ B({
       return parseFloat(o.paddingTop) + parseFloat(o.paddingBottom);
     }, a = async () => {
       if (!e.autoSize) return;
-      await V();
-      const t = i.value;
+      await T();
+      const t = s.value;
       if (!t) return;
       t.style.height = "auto";
       const o = window.getComputedStyle(t), I = parseFloat(o.lineHeight) || 20, y = e.maxRows ? e.maxRows * I + f(t) : 1 / 0, N = Math.min(t.scrollHeight, y);
@@ -60,11 +60,11 @@ const J = /* @__PURE__ */ B({
       const o = t.target;
       l(o.value), a();
     };
-    C(s, a), T(a), x({ textareaDOMRef: i, focus: d, blur: p, select: m, resizeToContent: a });
+    B(i, a), C(a), x({ textareaDOMRef: s, focus: d, blur: p, select: m, resizeToContent: a });
     const c = n(() => Math.max(e.minRows, 1)), R = n(() => Math.max(e.rows, c.value)), H = n(() => ({
-      "--nmorph-textarea-resize": e.autoSize ? "none" : e.resize,
-      "--nmorph-textarea-indentation": e.indentation
-    })), h = { props: e, emit: r, id: w, name: q, autocomplete: S, tabindex: v, modelValue: s, updateModelValue: l, textareaDOMRef: i, focused: u, handleFocus: _, handleBlur: z, focus: d, blur: p, select: m, modifiers: F, getVerticalPadding: f, resizeToContent: a, handleInput: M, minRows: c, rows: R, styles: H };
+      "--nmorph-private-textarea-resize": e.autoSize ? "none" : e.resize,
+      "--nmorph-private-textarea-indentation": e.indentation
+    })), h = { props: e, emit: r, id: w, name: q, autocomplete: S, tabindex: v, modelValue: i, updateModelValue: l, textareaDOMRef: s, focused: u, handleFocus: _, handleBlur: z, focus: d, blur: p, select: m, modifiers: F, getVerticalPadding: f, resizeToContent: a, handleInput: M, minRows: c, rows: R, styles: H };
     return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
   }
 });

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.css

@@ -1 +1 @@
-.nmorph-time-picker{--width: 160px;position:relative;width:var(--width);height:var(--height)}.nmorph-time-picker .nmorph-time-picker__input{display:flex;align-items:center;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto;margin-right:6px}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr);gap:6px;align-items:start;padding:8px;color:var(--nmorph-text-color)}.nmorph-time-picker .nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr)}.nmorph-time-picker .nmorph-time-picker__column{display:grid;grid-auto-flow:row;grid-auto-rows:var(--height);grid-template-columns:minmax(0,1fr);gap:4px;align-content:start;max-height:220px;padding:2px;overflow:hidden auto;scrollbar-gutter:stable}.nmorph-time-picker .nmorph-time-picker__separator{display:flex;justify-content:center;align-items:flex-start;min-width:8px;padding-top:calc((var(--height) - 1em) / 2 + 2px);color:var(--nmorph-semi-contrast-text-color);font-weight:700;line-height:1}.nmorph-time-picker .nmorph-time-picker__option{display:flex;justify-content:center;align-items:center;width:100%;min-width:0;min-height:var(--height);margin:0;padding:0 8px;color:var(--nmorph-text-color);font:inherit;line-height:1;background:transparent;border:0;border-radius:4px;box-shadow:none;cursor:pointer;appearance:none}.nmorph-time-picker .nmorph-time-picker__option:hover:not(:disabled),.nmorph-time-picker .nmorph-time-picker__option--active{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-time-picker .nmorph-time-picker__option:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:1px}.nmorph-time-picker .nmorph-time-picker__option:disabled{cursor:not-allowed;opacity:.35}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}
+.nmorph-time-picker{--nmorph-private-time-picker-width: 160px;position:relative;width:var(--nmorph-private-time-picker-width);height:var(--nmorph-private-control-height)}.nmorph-time-picker .nmorph-time-picker__input{display:flex;align-items:center;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto;margin-right:6px}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(64px,1fr) 8px minmax(64px,1fr);gap:8px;align-items:start;box-sizing:border-box;width:100%;padding:10px;color:var(--nmorph-text-color)}.nmorph-time-picker .nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(64px,1fr) 8px minmax(64px,1fr) 8px minmax(64px,1fr)}.nmorph-time-picker .nmorph-time-picker__column{display:grid;grid-auto-flow:row;grid-auto-rows:var(--nmorph-private-control-height);grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;max-height:210px;padding:4px;overflow:hidden auto;background:color-mix(in srgb,var(--nmorph-text-color) 4%,transparent);border-radius:var(--default-border-radius);scrollbar-gutter:stable}.nmorph-time-picker .nmorph-time-picker__separator{display:flex;justify-content:center;align-items:flex-start;min-width:8px;padding-top:calc((var(--nmorph-private-control-height) - 1em) / 2 + 2px);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--font-weight-bold);line-height:1}.nmorph-time-picker .nmorph-time-picker__option{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-width:0;min-height:var(--nmorph-private-control-height);margin:0;padding:0 8px;color:var(--nmorph-text-color);font:inherit;line-height:1;background:var(--nmorph-main-color);border:0;border-radius:4px;box-shadow:var(--nmorph-shadow-outset);cursor:pointer;appearance:none}.nmorph-time-picker .nmorph-time-picker__option:hover:not(:disabled),.nmorph-time-picker .nmorph-time-picker__option--active{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker .nmorph-time-picker__option:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:1px}.nmorph-time-picker .nmorph-time-picker__option:disabled{cursor:not-allowed;opacity:.35}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -88,7 +88,7 @@ function I(S, l, z, e, B, D) {
         key: 0,
         open: e.open,
         "relative-element": e.inputDOMRef,
-        width: e.props.showSeconds ? 216 : 152,
+        width: e.props.showSeconds ? 300 : 208,
         "fill-width": !1,
         "z-index": e.props.zIndex,
         "aria-label": e.name,

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue2.js

@@ -1,16 +1,16 @@
 import './NmorphTimePicker.css';
-import { defineComponent as te, ref as _, computed as n, watch as oe } from "vue";
-import { useI18n as re } from "vue-i18n";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { defineComponent as te, ref as V, computed as n, watch as re } from "vue";
+import { useI18n as oe } from "vue-i18n";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as ne } from "../../../utils/common.js";
 import { useFocusableInput as ue } from "../../../hooks/use-focusable-input.js";
 import { useFormItemInput as le, useFormItemModel as se } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as B } from "../../../types/common.types.js";
+import { NmorphComponentThickness as O } from "../../../types/common.types.js";
 import ae from "../../../assets/icons/clock.svg.js";
 import ie from "../../../assets/icons/circle-close.svg.js";
 import de from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import ce from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const Ie = /* @__PURE__ */ te({
+const Te = /* @__PURE__ */ te({
   __name: "NmorphTimePicker",
   props: {
     modelValue: { type: [String, null], required: !1, default: null },
@@ -27,19 +27,19 @@ const Ie = /* @__PURE__ */ te({
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "basic" },
+    thickness: { type: null, required: !1, default: "basic" },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(H, { expose: M, emit: k }) {
-    const t = H, m = k, { t: I } = re(), { id: F, name: P, autocomplete: $, tabindex: z } = le(t), { modelValue: s, updateModelValue: p } = se(
+  setup(B, { expose: M, emit: F }) {
+    const t = B, m = F, { t: T } = oe(), { id: H, name: P, autocomplete: $, tabindex: z } = le(t), { modelValue: s, updateModelValue: p } = se(
       t,
       (e) => m("update:model-value", e),
       null
-    ), a = _(!1), {
-      elementRef: T,
-      focused: w,
+    ), a = V(!1), {
+      elementRef: I,
+      focused: k,
       handleFocus: D,
       handleBlur: R
     } = ue({
@@ -47,25 +47,25 @@ const Ie = /* @__PURE__ */ te({
       onBlur: () => m("blur")
     }), c = (e) => String(e).padStart(2, "0"), f = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
       if (!e) return null;
-      const o = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
-      if (!o) return null;
-      const r = Number(o[1]), v = Number(o[2]), d = Number(o[3] || 0);
-      return r > 23 || v > 59 || d > 59 ? null : { hour: r, minute: v, second: d };
-    }, g = (e) => {
-      const o = `${c(e.hour)}:${c(e.minute)}`;
-      return t.showSeconds ? `${o}:${c(e.second)}` : o;
-    }, h = (e) => e.hour * 3600 + e.minute * 60 + e.second, y = n(() => i(t.minTime)), N = n(() => i(t.maxTime)), x = n(() => i(s.value)), l = _(x.value || { hour: 0, minute: 0, second: 0 }), C = n(() => t.placeholder || I("pickATime"));
-    oe(s, (e) => {
-      const o = i(e);
-      o && (l.value = o);
+      const r = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+      if (!r) return null;
+      const o = Number(r[1]), v = Number(r[2]), d = Number(r[3] || 0);
+      return o > 23 || v > 59 || d > 59 ? null : { hour: o, minute: v, second: d };
+    }, y = (e) => {
+      const r = `${c(e.hour)}:${c(e.minute)}`;
+      return t.showSeconds ? `${r}:${c(e.second)}` : r;
+    }, h = (e) => e.hour * 3600 + e.minute * 60 + e.second, g = n(() => i(t.minTime)), N = n(() => i(t.maxTime)), w = n(() => i(s.value)), l = V(w.value || { hour: 0, minute: 0, second: 0 }), x = n(() => t.placeholder || T("pickATime"));
+    re(s, (e) => {
+      const r = i(e);
+      r && (l.value = r);
     });
     const b = (e) => {
-      const o = h(e);
-      return !!(y.value && o < h(y.value) || N.value && o > h(N.value));
-    }, S = (e, o, r) => {
-      const v = f(r), d = /* @__PURE__ */ new Set();
-      for (let u = 0; u <= o; u += v) d.add(u);
-      return d.add(l.value[e]), Array.from(d).filter((u) => u >= 0 && u <= o).sort((u, q) => u - q).map((u) => {
+      const r = h(e);
+      return !!(g.value && r < h(g.value) || N.value && r > h(N.value));
+    }, S = (e, r, o) => {
+      const v = f(o), d = /* @__PURE__ */ new Set();
+      for (let u = 0; u <= r; u += v) d.add(u);
+      return d.add(l.value[e]), Array.from(d).filter((u) => u >= 0 && u <= r).sort((u, q) => u - q).map((u) => {
         const q = { ...l.value, [e]: u };
         return {
           label: c(u),
@@ -73,9 +73,9 @@ const Ie = /* @__PURE__ */ te({
           disabled: b(q)
         };
       });
-    }, A = n(() => S("hour", 23, t.hourStep)), U = n(() => S("minute", 59, t.minuteStep)), j = n(() => S("second", 59, t.secondStep)), E = (e, o) => {
-      const r = { ...l.value, [e]: o };
-      b(r) || (l.value = r, p(g(r)));
+    }, A = n(() => S("hour", 23, t.hourStep)), U = n(() => S("minute", 59, t.minuteStep)), j = n(() => S("second", 59, t.secondStep)), E = (e, r) => {
+      const o = { ...l.value, [e]: r };
+      b(o) || (l.value = o, p(y(o)));
     }, G = () => {
       p(null), a.value = !1;
     }, J = () => {
@@ -83,31 +83,31 @@ const Ie = /* @__PURE__ */ te({
     }, K = () => {
       t.disabled || (a.value = !a.value);
     }, L = (e) => {
-      const o = e.target, r = i(o.value);
-      !r || b(r) || (l.value = r, p(g(r)));
-    }, Q = n(() => s.value || C.value), W = n(
+      const r = e.target, o = i(r.value);
+      !o || b(o) || (l.value = o, p(y(o)));
+    }, Q = n(() => s.value || x.value), W = n(
       () => t.showSeconds ? f(t.secondStep) : f(t.minuteStep) * 60
     ), X = n(() => t.clearable && !!s.value && !t.disabled), Y = n(
-      () => O({
-        nmorph: [B[t.height]],
+      () => _({
+        nmorph: [O[t.thickness]],
         "nmorph-time-picker": [
           t.disabled && "disabled",
           a.value && "open",
-          w.value && "focus",
+          k.value && "focus",
           !s.value && "placeholder"
         ]
       })
     ), Z = n(
-      () => O({
-        nmorph: [B[t.height]]
+      () => _({
+        nmorph: [O[t.thickness]]
       })
     ), ee = n(
       () => ne({
-        "--width": t.width
+        "--nmorph-private-time-picker-width": t.width
       })
     );
-    M({ inputDOMRef: T });
-    const V = { props: t, emit: m, t: I, id: F, name: P, autocomplete: $, tabindex: z, modelValue: s, updateModelValue: p, open: a, inputDOMRef: T, focused: w, focusHandler: D, blurHandler: R, pad: c, normalizeStep: f, parseTime: i, formatTime: g, timeToSeconds: h, minTimeParts: y, maxTimeParts: N, modelTimeParts: x, pickerValue: l, placeholderText: C, isOutsideRange: b, getUnitOptions: S, hourOptions: A, minuteOptions: U, secondOptions: j, selectUnit: E, clearHandler: G, closeHandler: J, toggleOpen: K, nativeInputHandler: L, displayValue: Q, inputStep: W, showClearButton: X, modifiers: Y, optionHeightModifiers: Z, styles: ee, get NmorphDropdown() {
+    M({ inputDOMRef: I });
+    const C = { props: t, emit: m, t: T, id: H, name: P, autocomplete: $, tabindex: z, modelValue: s, updateModelValue: p, open: a, inputDOMRef: I, focused: k, focusHandler: D, blurHandler: R, pad: c, normalizeStep: f, parseTime: i, formatTime: y, timeToSeconds: h, minTimeParts: g, maxTimeParts: N, modelTimeParts: w, pickerValue: l, placeholderText: x, isOutsideRange: b, getUnitOptions: S, hourOptions: A, minuteOptions: U, secondOptions: j, selectUnit: E, clearHandler: G, closeHandler: J, toggleOpen: K, nativeInputHandler: L, displayValue: Q, inputStep: W, showClearButton: X, modifiers: Y, optionHeightModifiers: Z, styles: ee, get NmorphDropdown() {
       return ce;
     }, get NmorphIcon() {
       return de;
@@ -116,9 +116,9 @@ const Ie = /* @__PURE__ */ te({
     }, get NmorphIconClock() {
       return ae;
     } };
-    return Object.defineProperty(V, "__isScriptSetup", { enumerable: !1, value: !0 }), V;
+    return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
   }
 });
 export {
-  Ie as default
+  Te as default
 };

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.css

@@ -1 +1 @@
-.nmorph-backtop{position:fixed;right:var(--nmorph-backtop-right);bottom:calc(var(--nmorph-backtop-bottom) + env(safe-area-inset-bottom,0px));z-index:var(--nmorph-backtop-z-index);opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.nmorph-backtop .nmorph-backtop__up-icon{transform:rotate(180deg)}.nmorph-backtop.nmorph-backtop--show{opacity:1;pointer-events:auto}.nmorph-backtop.nmorph-backtop--common .nmorph-button{background:var(--nmorph-overlay-color);border-radius:4px}
+.nmorph-backtop{position:fixed;right:var(--nmorph-private-backtop-right);bottom:calc(var(--nmorph-private-backtop-bottom) + env(safe-area-inset-bottom,0px));z-index:var(--nmorph-private-backtop-z-index);opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.nmorph-backtop .nmorph-backtop__up-icon{transform:rotate(180deg)}.nmorph-backtop.nmorph-backtop--show{opacity:1;pointer-events:auto}.nmorph-backtop.nmorph-backtop--plain .nmorph-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-backtop.nmorph-backtop--plain .nmorph-button.nmorph-button--plain .nmorph-button__content,.nmorph-backtop.nmorph-backtop--plain .nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{border:0}