@nmorph/nmorph-ui-kit 2.2.59 → 3.0.1

package/dist/components/form/nmorph-select/NmorphSelect.vue2.js

@@ -1,11 +1,11 @@
 import './NmorphSelect.css';
-import { defineComponent as de, computed as a, ref as s, watch as c, nextTick as W, onMounted as ve, onUnmounted as ce, provide as V, toRef as fe } from "vue";
+import { defineComponent as de, computed as a, ref as d, watch as v, nextTick as P, onMounted as ce, onUnmounted as ve, provide as V, toRef as fe } from "vue";
 import { useModifiers as pe } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as me, getNmorphOptionHeight as he, toCssSize as ge, resolveDomElement as ye } from "../../../utils/common.js";
+import { createCssSizeVariables as me, getNmorphOptionHeight as he, toCssSize as ye, resolveDomElement as ge } from "../../../utils/common.js";
 import { useVirtualList as He } from "../../../hooks/use-virtual-list.js";
-import { useI18n as be } from "vue-i18n";
-import { useFormItemModel as qe, useFormItemInput as Ie } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as Ae } from "../../../types/common.types.js";
+import { useI18n as qe } from "vue-i18n";
+import { useFormItemModel as be, useFormItemInput as Ie } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentThickness as Ae } from "../../../types/common.types.js";
 import xe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
 import Ne from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
 import Se from "../../basic/nmorph-icon/NmorphIcon.vue.js";
@@ -36,53 +36,53 @@ const Xe = /* @__PURE__ */ de({
     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"],
-  setup(k, { expose: z, emit: $ }) {
+  setup(W, { expose: z, emit: $ }) {
     z();
-    const { t: E } = be(), t = k, g = a(
+    const { t: E } = qe(), t = W, y = a(
       () => t.noElementPlaceholder ? t.noElementPlaceholder : E("noElementPlaceholder")
-    ), _ = $, { modelValue: f, updateModelValue: y } = qe(
+    ), k = $, { modelValue: f, updateModelValue: g } = be(
       t,
-      (e) => _("update:model-value", e),
+      (e) => k("update:model-value", e),
       ""
-    ), m = () => t.nullable ? null : "", H = a(() => t.multiple ?? Array.isArray(f.value)), b = (e) => H.value ? Array.isArray(e) ? e : e ? [e] : [] : Array.isArray(e) ? e[0] ?? m() : e ?? m(), l = s(b(f.value)), r = s(t.open), d = a(() => t.disabled || t.loading), q = a(() => t.optionsWidth === "auto"), I = s(!0), { id: A, name: F, autocomplete: U, tabindex: j } = Ie(t), x = (e) => {
-      if (d.value) return;
+    ), m = () => t.nullable ? null : "", H = a(() => t.multiple ?? Array.isArray(f.value)), q = (e) => H.value ? Array.isArray(e) ? e : e ? [e] : [] : Array.isArray(e) ? e[0] ?? m() : e ?? m(), l = d(q(f.value)), r = d(t.open), i = a(() => t.disabled || t.loading), b = a(() => t.optionsWidth === "auto"), I = d(!0), { id: A, name: F, autocomplete: U, tabindex: j } = Ie(t), x = (e) => {
+      if (i.value) return;
       if (r.value = !1, !H.value) {
-        !t.valueRequired && l.value === e ? l.value = m() : l.value = e, y(l.value);
+        !t.valueRequired && l.value === e ? l.value = m() : l.value = e, g(l.value);
         return;
       }
       const n = Array.isArray(l.value) ? l.value : [], T = n.includes(e), ie = n.length === 1 && T;
-      t.valueRequired && ie || (T ? l.value = n.filter((se) => se !== e) : l.value = [...n, e], y(l.value));
-    }, h = s(!1), G = () => {
+      t.valueRequired && ie || (T ? l.value = n.filter((se) => se !== e) : l.value = [...n, e], g(l.value));
+    }, h = d(!1), G = () => {
       h.value = !0;
     }, J = () => {
       h.value = !1;
     }, K = a(
       () => pe({
-        nmorph: [Ae[t.height]],
+        nmorph: [Ae[t.thickness]],
         "nmorph-select": [
-          t.disabled && "disabled",
+          i.value && "disabled",
           f.value ? "on" : "off",
           t.loading && "loading",
-          r.value && !d.value && "open",
+          r.value && !i.value && "open",
           t.fill && "fill",
-          q.value && "options-auto-width",
+          b.value && "options-auto-width",
           I.value ? "selected-line-outset" : "selected-line-inset",
           h.value && "focus"
         ]
       })
     ), Q = a(
       () => me({
-        "--base-width": t.width
+        "--nmorph-private-select-width": t.width
       })
     ), X = () => {
-      d.value || (r.value = !r.value);
+      i.value || (r.value = !r.value);
     };
-    c(
+    v(
       r,
       (e) => {
         e && (I.value = !1);
@@ -92,63 +92,63 @@ const Xe = /* @__PURE__ */ de({
     const N = () => {
       r.value = !1;
     };
-    c(
+    v(
       () => t.loading,
       (e) => {
         e && (r.value = !1);
       }
-    ), c(
+    ), v(
       f,
       (e) => {
-        l.value = b(e);
+        l.value = q(e);
       },
       { deep: !0 }
     );
-    const v = a(() => t.options.length > 0 ? t.options : t.optionsMap), S = s(null), O = s([]), M = a(() => t.options), p = a(() => t.virtual && M.value.length > 0), B = a(() => t.virtualItemHeight || he(t.height)), L = a(() => t.virtualOverscan), R = a(() => t.virtualDynamicHeight), i = He(M, {
+    const c = a(() => t.options.length > 0 ? t.options : t.optionsMap), S = d(null), O = d([]), M = a(() => t.options), p = a(() => t.virtual && M.value.length > 0), _ = a(() => t.virtualItemHeight || he(t.thickness)), B = a(() => t.virtualOverscan), L = a(() => t.virtualDynamicHeight), s = He(M, {
       enabled: p,
-      itemHeight: B,
-      overscan: L,
-      dynamic: R
-    }), Y = a(() => i.virtualItems.value), Z = i.spacerStyle, ee = i.contentStyle, te = a(() => ge(t.virtualMaxHeight)), w = () => {
-      v.value.length > 0 || !S.value || (O.value = Array.from(S.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
+      itemHeight: _,
+      overscan: B,
+      dynamic: L
+    }), Y = a(() => s.virtualItems.value), Z = s.spacerStyle, ee = s.contentStyle, te = a(() => ye(t.virtualMaxHeight)), w = () => {
+      c.value.length > 0 || !S.value || (O.value = Array.from(S.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
     }, o = a(
-      () => v.value.length > 0 ? v.value.map((e) => e.value) : O.value
-    ), le = a(() => p.value ? Array.isArray(l.value) ? l.value : l.value ? [l.value] : [] : o.value), u = s(0), D = a(() => o.value[u.value] || ""), ae = a(() => `${A.value}-listbox`), re = (e) => `${A.value}-option-${e.replace(/\s+/g, "-")}`;
-    c(u, (e) => {
-      r.value && p.value && i.scrollToIndex(e);
-    }), c(
+      () => c.value.length > 0 ? c.value.map((e) => e.value) : O.value
+    ), le = a(() => p.value ? Array.isArray(l.value) ? l.value : l.value ? [l.value] : [] : o.value), u = d(0), D = a(() => o.value[u.value] || ""), ae = a(() => `${A.value}-listbox`), re = (e) => `${A.value}-option-${e.replace(/\s+/g, "-")}`;
+    v(u, (e) => {
+      r.value && p.value && s.scrollToIndex(e);
+    }), v(
       o,
       (e) => {
         u.value >= e.length && (u.value = Math.max(e.length - 1, 0));
       },
       { immediate: !0 }
-    ), c(r, async (e) => {
+    ), v(r, async (e) => {
       if (e) {
-        if (await W(), w(), !Array.isArray(l.value) && l.value) {
+        if (await P(), w(), !Array.isArray(l.value) && l.value) {
           const n = o.value.indexOf(l.value);
           n !== -1 && (u.value = n);
         }
-        i.refresh(), p.value && i.scrollToIndex(u.value);
+        s.refresh(), p.value && s.scrollToIndex(u.value);
       }
-    }), ve(async () => {
-      await W(), w(), document.addEventListener("click", N);
-    }), ce(() => {
+    }), ce(async () => {
+      await P(), w(), document.addEventListener("click", N);
+    }), ve(() => {
       document.removeEventListener("click", N);
     });
-    const ne = a(() => Array.isArray(l.value) ? g.value : l.value ? v.value.find((e) => e.value === l.value)?.label : g.value), ue = a(() => v.value.length > 0 ? v.value.filter((n) => Array.isArray(l.value) && l.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(l.value) ? l.value.map((n) => ({ text: n, value: n })) : l.value ? [{ text: l.value, value: l.value }] : []);
-    V("select-selected-value", l), V("select-change-selected-value", x), V("select-height", fe(t, "height"));
-    const C = s(null), oe = a(
-      () => q.value ? `${C.value?.clientWidth || 0}px` : void 0
-    ), P = { t: E, props: t, computedNoElementPlaceholder: g, emit: _, modelValue: f, updateModelValue: y, getEmptySingleValue: m, isMultiple: H, normalizeModelValue: b, initialValue: l, open: r, disabledInput: d, autoOptionsWidth: q, selectedLineOutset: I, id: A, name: F, autocomplete: U, tabindex: j, changeHandler: x, focus: h, focusHandler: G, blurHandler: J, modifiers: K, styles: Q, clickHandler: X, closeHandler: N, optionsMap: v, optionsDOMRef: S, slotDomOptions: O, renderedOptions: M, virtualEnabled: p, virtualItemHeight: B, virtualOverscan: L, virtualDynamicHeight: R, virtualList: i, virtualOptions: Y, virtualSpacerStyle: Z, virtualContentStyle: ee, virtualMaxHeight: te, refreshDomOptions: w, domOptions: o, nativeOptions: le, currentIndex: u, currentFocusedEl: D, listboxId: ae, getOptionId: re, selectedValueTitle: ne, tags: ue, nmorphSelectDOMRef: C, optionsMinWidth: oe, spaceHandler: () => {
-      d.value || (r.value = !r.value);
+    const ne = a(() => Array.isArray(l.value) ? y.value : l.value ? c.value.find((e) => e.value === l.value)?.label : y.value), ue = a(() => c.value.length > 0 ? c.value.filter((n) => Array.isArray(l.value) && l.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(l.value) ? l.value.map((n) => ({ text: n, value: n })) : l.value ? [{ text: l.value, value: l.value }] : []);
+    V("select-selected-value", l), V("select-change-selected-value", x), V("select-thickness", fe(t, "thickness"));
+    const R = d(null), oe = a(
+      () => b.value ? `${R.value?.clientWidth || 0}px` : void 0
+    ), C = { t: E, props: t, computedNoElementPlaceholder: y, emit: k, modelValue: f, updateModelValue: g, getEmptySingleValue: m, isMultiple: H, normalizeModelValue: q, initialValue: l, open: r, disabledInput: i, autoOptionsWidth: b, selectedLineOutset: I, id: A, name: F, autocomplete: U, tabindex: j, changeHandler: x, focus: h, focusHandler: G, blurHandler: J, modifiers: K, styles: Q, clickHandler: X, closeHandler: N, optionsMap: c, optionsDOMRef: S, slotDomOptions: O, renderedOptions: M, virtualEnabled: p, virtualItemHeight: _, virtualOverscan: B, virtualDynamicHeight: L, virtualList: s, virtualOptions: Y, virtualSpacerStyle: Z, virtualContentStyle: ee, virtualMaxHeight: te, refreshDomOptions: w, domOptions: o, nativeOptions: le, currentIndex: u, currentFocusedEl: D, listboxId: ae, getOptionId: re, selectedValueTitle: ne, tags: ue, nmorphSelectDOMRef: R, optionsMinWidth: oe, spaceHandler: () => {
+      i.value || (r.value = !r.value);
     }, arrowDownHandler: () => {
-      d.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value + 1) % o.value.length);
+      i.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value + 1) % o.value.length);
     }, arrowUpHandler: () => {
-      d.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value - 1 + o.value.length) % o.value.length);
+      i.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value - 1 + o.value.length) % o.value.length);
     }, enterHandler: () => {
       r.value && D.value && x(D.value);
     }, setVirtualOptionRef: (e, n) => {
-      i.measureElement(n, ye(e));
+      s.measureElement(n, ge(e));
     }, escapeHandler: () => {
       r.value = !1;
     }, homeHandler: () => {
@@ -168,7 +168,7 @@ const Xe = /* @__PURE__ */ de({
     }, get NmorphIconChevronDown() {
       return Me;
     } };
-    return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
+    return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
   }
 });
 export {

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.css

@@ -1 +1 @@
-.nmorph-select-option{--hover-bg: var(--nmorph-accent-color);--hover-color: var(--nmorph-white-color);display:flex;gap:var(--indentation-01);justify-content:space-between;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-select-option .nmorph-select-option__content{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select-option .nmorph-select-option__content span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select-option .nmorph-select-option__checked{flex:0 0 auto}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--hover-bg)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover span{color:var(--hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled){background:var(--hover-bg)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) span{color:var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}
+.nmorph-select-option{--nmorph-private-select-option-hover-background: var(--nmorph-accent-color);--nmorph-private-select-option-hover-color: var(--nmorph-white-color);display:flex;gap:var(--indentation-01);justify-content:space-between;align-items:center;box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-select-option .nmorph-select-option__content{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-select-option .nmorph-select-option__content span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select-option .nmorph-select-option__checked{flex:0 0 auto}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--nmorph-private-select-option-hover-background)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover span{color:var(--nmorph-private-select-option-hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--nmorph-private-icon-color: var(--nmorph-private-select-option-hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled){background:var(--nmorph-private-select-option-hover-background)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) span{color:var(--nmorph-private-select-option-hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) .nmorph-select-option__checked{--nmorph-private-icon-color: var(--nmorph-private-select-option-hover-color)}.nmorph-select-option.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue2.js

@@ -1,11 +1,11 @@
 import './NmorphSelectOption.css';
-import { defineComponent as g, inject as l, computed as t } from "vue";
+import { defineComponent as g, inject as s, computed as t } from "vue";
 import { useModifiers as y } from "../../../../../utils/create-modifiers.js";
 import { createCssVariables as b } from "../../../../../utils/common.js";
-import { NmorphComponentHeight as S } from "../../../../../types/common.types.js";
-import q from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import _ from "../../../../../assets/icons/success.svg.js";
-const H = /* @__PURE__ */ g({
+import { NmorphComponentThickness as S } from "../../../../../types/common.types.js";
+import k from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import q from "../../../../../assets/icons/success.svg.js";
+const V = /* @__PURE__ */ g({
   __name: "NmorphSelectOption",
   props: {
     value: { type: String, required: !0 },
@@ -16,41 +16,41 @@ const H = /* @__PURE__ */ g({
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1 },
+    thickness: { type: null, required: !1 },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["change-value"],
-  setup(c, { expose: d, emit: p }) {
+  setup(u, { expose: d, emit: p }) {
     d();
-    const r = l("select-selected-value"), o = l("select-change-selected-value"), a = l(
-      "select-height",
+    const r = s("select-selected-value"), o = s("select-change-selected-value"), l = s(
+      "select-thickness",
       void 0
-    ), e = c, s = p, f = () => {
-      e.disabled || (s("change-value", e.value), o && o(e.value));
-    }, i = t(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((v) => v === e.value) : !1), u = t(() => e.height || a?.value || "basic"), m = t(
+    ), e = u, a = p, f = () => {
+      e.disabled || (a("change-value", e.value), o && o(e.value));
+    }, n = t(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((v) => v === e.value) : !1), i = t(() => e.thickness || l?.value || "basic"), m = t(
       () => y({
-        nmorph: [S[u.value]],
+        nmorph: [S[i.value]],
         "nmorph-select-option": [
           e.disabled && "disabled",
           e.label && "with-label",
-          i.value && "checked",
+          n.value && "checked",
           e.focused && "focused"
         ]
       })
     ), h = t(
       () => b({
-        "--hover-bg": e.hoverBackground,
-        "--hover-color": e.hoverColor
+        "--nmorph-private-select-option-hover-background": e.hoverBackground,
+        "--nmorph-private-select-option-hover-color": e.hoverColor
       })
-    ), n = { selectSelectedValue: r, selectChangeSelectedValue: o, selectHeight: a, props: e, emit: s, clickHandler: f, checked: i, height: u, modifiers: m, styles: h, get NmorphIcon() {
-      return q;
+    ), c = { selectSelectedValue: r, selectChangeSelectedValue: o, selectThickness: l, props: e, emit: a, clickHandler: f, checked: n, thickness: i, modifiers: m, styles: h, get NmorphIcon() {
+      return k;
     }, get NmorphIconSuccess() {
-      return _;
+      return q;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  H as default
+  V as default
 };

package/dist/components/form/nmorph-select-button/NmorphSelectButton.css

@@ -1 +1 @@
-.nmorph-select-button{--track-padding: 4px;--item-size: calc(var(--default-thickness-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-small);display:inline-flex;align-items:center;width:fit-content;padding:var(--track-padding);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select-button.nmorph-select-button--thin{--item-size: calc(var(--thin-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-extra-small)}.nmorph-select-button.nmorph-select-button--thick{--item-size: calc(var(--thick-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-base)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}
+.nmorph-select-button{--nmorph-private-select-button-padding: max(3px, calc(var(--nmorph-private-control-height) * .1333));--nmorph-private-select-button-item-height: calc( var(--nmorph-private-control-height) - var(--nmorph-private-select-button-padding) * 2 );display:inline-flex;align-items:center;width:fit-content;padding:var(--nmorph-private-select-button-padding);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);transition:background-color ease-in-out var(--transition-02),border-color ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}

package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue2.js

@@ -1,58 +1,54 @@
 import './NmorphSelectButton.css';
-import { defineComponent as S, ref as b, watch as g, computed as s, provide as u } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { createCssVariables as h, createCssSizeVariables as q } from "../../../utils/common.js";
-import { useFormItemModel as v } from "../nmorph-form/use-form-item-input.js";
-import _ from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
-const x = /* @__PURE__ */ S({
+import { defineComponent as h, ref as b, watch as y, computed as n, provide as u } from "vue";
+import { useModifiers as S } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as q } from "../../../utils/common.js";
+import { useFormItemModel as _ } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentThickness as g } from "../../../types/common.types.js";
+import v from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
+const I = /* @__PURE__ */ h({
   __name: "NmorphSelectButton",
   props: {
     modelValue: { type: String, required: !1, default: "" },
     options: { type: Array, required: !1, default: () => [] },
     fill: { type: Boolean, required: !1, default: !1 },
-    trackPadding: { type: [Number, String], required: !1, default: void 0 },
-    itemSize: { type: [Number, String], required: !1, default: void 0 },
-    itemFontSize: { type: String, required: !1, default: void 0 },
+    customThickness: { type: [Number, String], required: !1, default: void 0 },
     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"],
-  setup(n, { expose: m, emit: f }) {
+  setup(d, { expose: m, emit: p }) {
     m();
-    const e = n, a = f, { modelValue: i, updateModelValue: l } = v(
+    const e = d, l = p, { modelValue: o, updateModelValue: s } = _(
       e,
-      (t) => a("update:model-value", t),
+      (t) => l("update:model-value", t),
       ""
-    ), r = b(i.value);
-    g(i, (t) => {
+    ), r = b(o.value);
+    y(o, (t) => {
       r.value = t;
     });
-    const p = s(
-      () => y({
-        "nmorph-select-button": [e.disabled && "disabled", e.fill && "fill", e.height]
+    const f = n(
+      () => S({
+        nmorph: [g[e.thickness]],
+        "nmorph-select-button": [e.disabled && "disabled", e.fill && "fill", e.thickness]
       })
-    ), c = s(() => ({
+    ), c = n(() => ({
       ...q({
-        "--track-padding": e.trackPadding,
-        "--item-size": e.itemSize
-      }),
-      ...h({
-        "--item-font-size": e.itemFontSize
+        "--nmorph-private-control-height": e.customThickness
       })
-    })), o = (t) => {
-      e.disabled || (r.value = t, l(t));
+    })), i = (t) => {
+      e.disabled || (r.value = t, s(t));
     };
-    u("select-button-selected-value", r), u("select-button-change-handler", o);
-    const d = { props: e, emit: a, modelValue: i, updateModelValue: l, initialValue: r, modifiers: p, styles: c, changeHandler: o, get NmorphSelectButtonItem() {
-      return _;
+    u("select-button-selected-value", r), u("select-button-change-handler", i);
+    const a = { props: e, emit: l, modelValue: o, updateModelValue: s, initialValue: r, modifiers: f, styles: c, changeHandler: i, get NmorphSelectButtonItem() {
+      return v;
     } };
-    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  x as default
+  I as default
 };

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.css

@@ -1 +1 @@
-.nmorph-select-button-item{display:inline-flex;justify-content:center;align-items:center;height:var(--item-size);padding:0 var(--indentation-04);font-size:var(--item-font-size);border-radius:var(--default-border-radius);cursor:pointer;opacity:.45}.nmorph-select-button-item input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.nmorph-select-button-item:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-select-button-item.nmorph-select-button-item--checked{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);opacity:1}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-select-button-item{display:inline-flex;justify-content:center;align-items:center;height:var(--nmorph-private-select-button-item-height);padding:0 var(--indentation-04);font-size:var(--nmorph-private-control-font-size);line-height:var(--nmorph-private-control-line-height);border-radius:var(--default-border-radius);transform:translateY(0);cursor:pointer;opacity:.45;transition:color ease-in-out var(--transition-02),background-color ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02),opacity ease-in-out var(--transition-02),transform ease-in-out var(--transition-01)}.nmorph-select-button-item input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.nmorph-select-button-item:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-select-button-item:not(.nmorph-select-button-item--disabled):hover{opacity:.72}.nmorph-select-button-item:not(.nmorph-select-button-item--disabled):active{transform:translateY(1px)}.nmorph-select-button-item .nmorph-select-button-item__content{min-width:0;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-select-button-item.nmorph-select-button-item--checked{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);opacity:1}.nmorph-select-button-item.nmorph-select-button-item--checked:hover{opacity:1}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js

@@ -1,12 +1,12 @@
 import './NmorphSelectButtonItem.css';
-import r from "./NmorphSelectButtonItem.vue2.js";
-import { openBlock as c, createElementBlock as i, withKeys as t, withModifiers as o, normalizeClass as l, createElementVNode as a, renderSlot as d } from "vue";
+import c from "./NmorphSelectButtonItem.vue2.js";
+import { openBlock as i, createElementBlock as l, withKeys as t, withModifiers as o, normalizeClass as s, createElementVNode as n, renderSlot as a } from "vue";
 /* empty css                            */
-import s from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const p = ["tabindex", "onKeydown"], m = ["value", "checked", "disabled"];
-function f(n, h, _, e, b, k) {
-  return c(), i("label", {
-    class: l(e.modifiers),
+import d from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const p = ["tabindex", "onKeydown"], m = ["value", "checked", "disabled"], _ = { class: "nmorph-select-button-item__content" };
+function h(r, f, b, e, u, k) {
+  return i(), l("label", {
+    class: s(e.modifiers),
     tabindex: e.props.tabindex,
     onClick: o(e.clickHandler, ["prevent"]),
     onKeydown: [
@@ -14,7 +14,7 @@ function f(n, h, _, e, b, k) {
       t(o(e.clickHandler, ["prevent"]), ["enter"])
     ]
   }, [
-    a("input", {
+    n("input", {
       ref: "inputDOMRef",
       type: "radio",
       value: e.props.value,
@@ -23,10 +23,12 @@ function f(n, h, _, e, b, k) {
       tabindex: "-1",
       class: "nmorph-native-input"
     }, null, 8, m),
-    d(n.$slots, "default")
+    n("span", _, [
+      a(r.$slots, "default")
+    ])
   ], 42, p);
 }
-const w = /* @__PURE__ */ s(r, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue"]]);
+const B = /* @__PURE__ */ d(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue"]]);
 export {
-  w as default
+  B as default
 };

package/dist/components/form/nmorph-slider/NmorphSlider.css

@@ -1 +1 @@
-.nmorph-slider{position:relative;width:100%;height:20px;--slider-height: 24px;--value-fixed-container-height: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{display:flex;align-items:center;width:100%;height:var(--value-fixed-container-height);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__input-container{position:relative;display:flex;align-items:center;width:100%;height:var(--slider-height);touch-action:none}.nmorph-slider .nmorph-slider__thumb{position:absolute;z-index:1;width:var(--nmorph-slider-thumb-width);height:20px;background:var(--nmorph-main-color);border:0;border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__thumb--smooth{transition:left ease-in-out .2s}.nmorph-slider .nmorph-slider__value{display:flex;justify-content:center;width:var(--value-fixed-container-width);margin-left:var(--indentation-04)}.nmorph-slider .nmorph-slide__native-input{position:absolute;top:50%;left:50%;width:100%;background:transparent;transform:translate(-50%,-50%);appearance:none}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-runnable-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-moz-range-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-thumb{visibility:hidden}.nmorph-slider .nmorph-slide__native-input::-moz-range-thumb{visibility:hidden}.nmorph-slider.nmorph-slider--fill,.nmorph-slider.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}
+.nmorph-slider{position:relative;width:100%;height:20px;--nmorph-private-slider-height: 24px;--nmorph-private-slider-value-container-height: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{display:flex;align-items:center;width:100%;height:var(--nmorph-private-slider-value-container-height);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__input-container{position:relative;display:flex;align-items:center;width:100%;height:var(--nmorph-private-slider-height);touch-action:none}.nmorph-slider .nmorph-tooltip{position:absolute;inset:0;z-index:2;width:100%;pointer-events:none}.nmorph-slider .nmorph-tooltip .nmorph-tooltip__content{width:100%;height:100%}.nmorph-slider .nmorph-tooltip .nmorph-tooltip__trigger{display:none}.nmorph-slider .nmorph-slider__thumb{position:absolute;z-index:1;width:var(--nmorph-private-slider-thumb-width);height:20px;background:var(--nmorph-main-color);border:0;border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__thumb--smooth{transition:left ease-in-out .2s}.nmorph-slider .nmorph-slide__native-input{position:absolute;top:50%;left:50%;width:100%;background:transparent;transform:translate(-50%,-50%);appearance:none}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-runnable-track{height:var(--nmorph-private-slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-moz-range-track{height:var(--nmorph-private-slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-thumb{visibility:hidden}.nmorph-slider .nmorph-slide__native-input::-moz-range-thumb{visibility:hidden}.nmorph-slider.nmorph-slider--fill,.nmorph-slider.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}

package/dist/components/form/nmorph-slider/NmorphSlider.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphSlider.css';
-import { defineComponent as A, computed as m, ref as o, watch as E, onMounted as G, onUnmounted as J } from "vue";
+import { defineComponent as A, computed as f, ref as i, watch as y, nextTick as M, onMounted as G, onUnmounted as J } from "vue";
 import { useModifiers as K } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as Q } from "../../../utils/common.js";
 import { useFormItemInput as Y, useFormItemModel as Z } from "../nmorph-form/use-form-item-input.js";
 import ee from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
-const de = /* @__PURE__ */ A({
+const ae = /* @__PURE__ */ A({
   __name: "NmorphSlider",
   props: {
     modelValue: { type: Number, required: !1, default: 0 },
@@ -23,73 +23,78 @@ const de = /* @__PURE__ */ A({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(L, { expose: N, emit: T }) {
-    N();
-    const e = L, { id: S, name: H, tabindex: _ } = Y(e), C = m(
+  setup(T, { expose: H, emit: _ }) {
+    H();
+    const e = T, { id: S, name: C, tabindex: V } = Y(e), z = f(
       () => K({
         nmorph: [],
         "nmorph-slider": [e.disabled && "disabled"]
       })
-    ), g = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), x = T, { modelValue: c, updateModelValue: y } = Z(
+    ), L = f(() => `${e.thumbWidth}px`), a = i(e.showTooltip), q = _, { modelValue: v, updateModelValue: W } = Z(
       e,
-      (t) => x("update:model-value", t),
+      (t) => q("update:model-value", t),
       0
-    ), n = o(c.value), f = o(null);
-    E(n, () => {
-      y(n.value);
-    }), E(c, (t) => {
+    ), n = i(v.value), b = i(null);
+    y(n, () => {
+      W(n.value);
+    }), y(v, (t) => {
       n.value = t;
     });
-    const P = o(null), V = m(() => {
-      const t = s.value - s.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = f.value?.clientWidth || 0, d = e.thumbWidth / a * 100, X = d / 2;
-      let $ = u - X;
-      const q = `${Math.max(0, Math.min(100 - d, $))}%`, I = a / 100, j = e.thumbWidth / 2 / I, M = (P.value?.tooltipBody.clientWidth ?? 24) / 2 / I, U = M === 1 / 0 ? 1.714 : M, k = `${parseFloat(q) + j - U}%`;
+    const E = i(null), u = i(24), l = () => {
+      u.value = E.value?.tooltipBody?.clientWidth || 24;
+    };
+    y([n, a], () => M(l), { flush: "post" });
+    const B = f(() => {
+      s.value, d.value;
+      const t = e.max - e.min, o = b.value?.clientWidth || 0;
+      if (!o || t <= 0) return { thumb: "0px", tooltip: "0px" };
+      const p = Math.max(0, Math.min(1, (n.value - e.min) / t)), c = Math.min(e.thumbWidth, o), h = p * Math.max(0, o - c), $ = h + c / 2, U = Math.max(0, o - u.value), j = Math.max(0, Math.min(U, $ - u.value / 2)), k = `${h}px`, O = `${j}px`;
       return {
-        thumb: q,
-        tooltip: k
+        thumb: k,
+        tooltip: O
       };
-    }), s = o(0), h = o(0), v = () => {
-      s.value = window.innerWidth, h.value = window.innerHeight;
+    }), s = i(0), d = i(0), w = () => {
+      s.value = window.innerWidth, d.value = window.innerHeight, M(l);
     };
     G(() => {
-      typeof window < "u" && (s.value = window.innerWidth, h.value = window.innerHeight, window.addEventListener("resize", v));
+      typeof window < "u" && (s.value = window.innerWidth, d.value = window.innerHeight, window.addEventListener("resize", w), M(l));
     }), J(() => {
-      typeof window < "u" && (document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", v));
+      typeof window < "u" && (document.removeEventListener("pointermove", m), document.removeEventListener("pointerup", r), document.removeEventListener("pointercancel", r), window.removeEventListener("resize", w));
     });
-    const b = (t) => {
-      w.value = !1;
-      const r = f.value?.getBoundingClientRect();
-      let u = 0;
-      if (r) {
-        const a = t - r.left, d = r.width;
-        u = Math.max(0, Math.min(1, a / d)), n.value = e.min + u * (e.max - e.min);
+    const x = (t) => {
+      g.value = !1;
+      const o = b.value?.getBoundingClientRect();
+      let p = 0;
+      if (o) {
+        const c = t - o.left, h = o.width;
+        p = Math.max(0, Math.min(1, c / h)), n.value = e.min + p * (e.max - e.min);
       }
       n.value = Math.round(n.value / e.step) * e.step, n.value = Math.max(e.min, Math.min(e.max, n.value));
-    }, l = (t) => {
-      t.preventDefault(), b(t.clientX);
-    }, i = () => {
-      document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), w.value = !0;
-    }, z = (t) => {
-      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), b(t.clientX), document.addEventListener("pointermove", l), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
-    }, F = o(null), O = () => {
-      e.showTooltip && (p.value = !0);
-    }, B = () => {
-      e.showTooltip && (p.value = !1);
+    }, m = (t) => {
+      t.preventDefault(), x(t.clientX);
+    }, r = () => {
+      document.removeEventListener("pointermove", m), document.removeEventListener("pointerup", r), document.removeEventListener("pointercancel", r), g.value = !0;
+    }, F = (t) => {
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), x(t.clientX), document.addEventListener("pointermove", m), document.addEventListener("pointerup", r), document.addEventListener("pointercancel", r));
+    }, I = i(null), D = () => {
+      e.showTooltip && (a.value = !0);
+    }, P = () => {
+      e.showTooltip && (a.value = !1);
     }, R = (t) => {
-      const r = t.target;
-      n.value = Number(r.value);
-    }, w = o(!0), D = m(() => ({
-      "--nmorph-slider-thumb-width": g.value,
+      const o = t.target;
+      n.value = Number(o.value);
+    }, g = i(!0), X = f(() => ({
+      "--nmorph-private-slider-thumb-width": L.value,
       ...Q({
-        "--slider-height": e.sliderHeight,
-        "--value-fixed-container-height": e.valueFixedContainerHeight
+        "--nmorph-private-slider-height": e.sliderHeight,
+        "--nmorph-private-slider-value-container-height": e.valueFixedContainerHeight
       })
-    })), W = { props: e, id: S, name: H, tabindex: _, modifiers: C, thumbWidthCss: g, tooltipVisible: p, emit: x, modelValue: c, updateModelValue: y, thumbValue: n, sliderContainer: f, tooltipRootRef: P, thumbXPercentPosition: V, windowWidth: s, windowHeight: h, resizeWindowHandler: v, updateThumbValue: b, pointerMove: l, pointerUp: i, pointerDownHandler: z, sliderFirst: F, handleMouseEnter: O, handleMouseLeave: B, nativeInputHandler: R, transitionEnabled: w, styles: D, get NmorphTooltip() {
+    })), N = { props: e, id: S, name: C, tabindex: V, modifiers: z, thumbWidthCss: L, tooltipVisible: a, emit: q, modelValue: v, updateModelValue: W, thumbValue: n, sliderContainer: b, tooltipRootRef: E, tooltipWidth: u, updateTooltipWidth: l, thumbXPercentPosition: B, windowWidth: s, windowHeight: d, resizeWindowHandler: w, updateThumbValue: x, pointerMove: m, pointerUp: r, pointerDownHandler: F, sliderFirst: I, handleMouseEnter: D, handleMouseLeave: P, nativeInputHandler: R, transitionEnabled: g, styles: X, get NmorphTooltip() {
       return ee;
     } };
-    return Object.defineProperty(W, "__isScriptSetup", { enumerable: !1, value: !0 }), W;
+    return Object.defineProperty(N, "__isScriptSetup", { enumerable: !1, value: !0 }), N;
   }
 });
 export {
-  de as default
+  ae as default
 };

package/dist/components/form/nmorph-switch/NmorphSwitch.css

@@ -1 +1 @@
-.nmorph-switch{--width: 40px;--height: 20px;--offset: 3px;--thumb-height: 14px;width:var(--width);height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;justify-content:flex-end;align-items:center;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);display:flex;justify-content:center;align-items:center;width:var(--thumb-height);height:var(--thumb-height);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);transition:left ease-in-out var(--transition-02)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - var(--thumb-height) - var(--offset));box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}
+.nmorph-switch{--nmorph-private-switch-width: 40px;--nmorph-private-switch-height: 20px;--nmorph-private-switch-offset: 3px;--nmorph-private-switch-thumb-height: 14px;width:var(--nmorph-private-switch-width);height:var(--nmorph-private-switch-height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;font-weight:var(--nmorph-typography-control-small-font-weight);font-size:var(--nmorph-typography-control-small-font-size);line-height:var(--nmorph-typography-control-small-line-height);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;justify-content:flex-end;align-items:center;width:100%;height:100%;padding:0 8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--nmorph-private-switch-height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--nmorph-private-switch-offset);left:var(--nmorph-private-switch-offset);display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-switch-thumb-height);height:var(--nmorph-private-switch-thumb-height);background:var(--nmorph-main-color);border-radius:var(--border-radius-999);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);transition:left ease-in-out var(--transition-02)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - var(--nmorph-private-switch-thumb-height) - var(--nmorph-private-switch-offset));box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}