@nmorph/nmorph-ui-kit 3.0.4 → 3.0.6

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphTooltip.css';
-import { defineComponent as j, ref as o, useSlots as A, computed as f, watch as F, onBeforeUnmount as G } from "vue";
-import { usePlacement as U } from "../../../hooks/use-placement.js";
-import { useZIndex as V } from "../../../hooks/use-z-index.js";
-import { useModifiers as Y } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Z } from "../../../utils/common.js";
-const P = 600, $ = /* @__PURE__ */ j({
+import { defineComponent as Z, ref as l, useSlots as $, computed as t, watch as H, onBeforeUnmount as J } from "vue";
+import { usePlacement as K } from "../../../hooks/use-placement.js";
+import { useZIndex as Q } from "../../../hooks/use-z-index.js";
+import { useModifiers as X } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ee } from "../../../utils/common.js";
+const E = 600, ie = /* @__PURE__ */ Z({
   __name: "NmorphTooltip",
   props: {
     text: { type: String, required: !1, default: "" },
@@ -17,60 +17,63 @@ const P = 600, $ = /* @__PURE__ */ j({
     openDelay: { type: Number, required: !1, default: 0 },
     closeDelay: { type: Number, required: !1, default: 0 },
     zIndex: { type: Number, required: !1, default: void 0 },
+    teleportTo: { type: null, required: !1, default: "body" },
+    disabledTeleport: { type: Boolean, required: !1, default: !0 },
     width: { type: [Number, String], required: !1, default: void 0 },
     maxWidth: { type: [Number, String], required: !1, default: void 0 },
     height: { type: [Number, String], required: !1, default: void 0 }
   },
-  setup(C, { expose: N }) {
-    const e = C, r = o(e.forceShow), g = o(null), T = o(null), b = A(), n = o(null), a = o(null), u = o(null), i = o("mouse"), p = o(!1), m = f(() => !!(e.text || b.content)), O = f(() => r.value && m.value && !e.disabled), { placement: S } = U({
+  setup(k, { expose: z }) {
+    const e = k, n = l(e.forceShow), I = l(null), q = l(null), T = l(null), x = $(), a = l(null), u = l(null), s = l(null), i = l("mouse"), f = l(!1), m = t(() => !!(e.text || x.content)), b = t(() => n.value && m.value && !e.disabled), { placement: g, placementCoords: S, placementReady: C } = K({
       initialPlacement: e.position,
-      contentDOMElement: g,
-      relativeElement: T
-    }), B = f(
-      () => Y({
+      contentDOMElement: T,
+      relativeElement: q,
+      enabled: b
+    }), R = t(
+      () => X({
         "nmorph-tooltip": [
-          S.value,
+          g.value,
           e.disabled && "disabled",
           !!e.forceCoordinate?.x && !!e.forceCoordinate?.y && "force-coords"
         ]
       })
-    ), s = () => {
-      n.value && clearTimeout(n.value), n.value = null;
-    }, c = () => {
+    ), p = () => {
       a.value && clearTimeout(a.value), a.value = null;
-    }, v = () => {
+    }, d = () => {
       u.value && clearTimeout(u.value), u.value = null;
-    }, l = (t) => {
-      if (s(), c(), e.disabled || !m.value) {
-        r.value = !1;
+    }, v = () => {
+      s.value && clearTimeout(s.value), s.value = null;
+    }, r = (o) => {
+      if (p(), d(), e.disabled || !m.value) {
+        n.value = !1;
         return;
       }
-      r.value = t;
-    }, d = () => {
-      if (c(), !(e.disabled || !m.value)) {
+      n.value = o;
+    }, c = () => {
+      if (d(), !(e.disabled || !m.value)) {
         if (e.openDelay <= 0) {
-          l(!0);
+          r(!0);
           return;
         }
-        s(), n.value = setTimeout(() => l(!0), e.openDelay);
+        p(), a.value = setTimeout(() => r(!0), e.openDelay);
       }
     }, h = () => {
       if (!e.forceShow) {
-        if (s(), e.closeDelay <= 0) {
-          l(!1);
+        if (p(), e.closeDelay <= 0) {
+          r(!1);
           return;
         }
-        c(), a.value = setTimeout(() => l(!1), e.closeDelay);
+        d(), u.value = setTimeout(() => r(!1), e.closeDelay);
       }
     }, y = () => {
-      r.value ? h() : d();
-    }, M = () => {
-      e.trigger !== "hover" || i.value !== "mouse" || d();
-    }, E = () => {
+      n.value ? h() : c();
+    }, L = () => {
+      e.trigger !== "hover" || i.value !== "mouse" || c();
+    }, W = () => {
       e.trigger !== "hover" || i.value !== "mouse" || h();
-    }, k = (t) => {
-      if (p.value) {
-        p.value = !1, t.preventDefault();
+    }, j = (o) => {
+      if (f.value) {
+        f.value = !1, o.preventDefault();
         return;
       }
       if (e.disabled || e.trigger === "manual") return;
@@ -80,42 +83,55 @@ const P = 600, $ = /* @__PURE__ */ j({
         return;
       }
       e.trigger === "click" && y();
-    }, z = (t) => {
-      i.value = t.pointerType || "mouse", !(e.disabled || e.touch !== "longpress") && (t.pointerType !== "touch" && t.pointerType !== "pen" || (v(), u.value = setTimeout(() => {
-        p.value = !0, d();
-      }, P)));
-    }, I = () => {
+    }, A = (o) => {
+      i.value = o.pointerType || "mouse", !(e.disabled || e.touch !== "longpress") && (o.pointerType !== "touch" && o.pointerType !== "pen" || (v(), s.value = setTimeout(() => {
+        f.value = !0, c();
+      }, E)));
+    }, F = () => {
       v();
-    }, x = f(() => e.forceCoordinate ? "100%" : "auto"), _ = V(
-      () => r.value,
+    }, w = t(() => e.forceCoordinate ? "100%" : "auto"), D = Q(
+      () => n.value,
       () => e.zIndex
-    ), L = f(() => ({
-      "--nmorph-private-tooltip-root-width": x.value,
-      "--nmorph-private-tooltip-z-index": _.value,
-      ...Z({
+    ), P = t(() => ({
+      "--nmorph-private-tooltip-root-width": w.value,
+      "--nmorph-private-tooltip-z-index": D.value,
+      ...ee({
         "--nmorph-private-tooltip-width": e.width,
         "--nmorph-private-tooltip-max-width": e.maxWidth,
         "--nmorph-private-tooltip-height": e.height
       })
-    })), q = o(null);
-    F(
+    })), N = t(
+      () => !e.disabledTeleport && !e.forceCoordinate && typeof document < "u"
+    ), _ = t(() => N.value && b.value), B = t(() => g.value.split("-")[0]), G = t(() => [
+      "nmorph-tooltip__info-content",
+      `nmorph-tooltip__info-content--${B.value}`,
+      _.value && "nmorph-tooltip__info-content--teleported"
+    ]), U = t(() => ({
+      ...P.value,
+      ..._.value ? {
+        left: S.value.x,
+        top: S.value.y,
+        visibility: C.value ? "visible" : "hidden"
+      } : {}
+    }));
+    H(
       () => [e.forceShow, e.disabled],
-      ([t, D], R) => {
-        const W = R?.[0] ?? !1;
-        if (D) {
-          l(!1);
+      ([o, M], V) => {
+        const Y = V?.[0] ?? !1;
+        if (M) {
+          r(!1);
           return;
         }
-        t ? l(!0) : W && l(!1);
+        o ? r(!0) : Y && r(!1);
       },
       { immediate: !0 }
-    ), G(() => {
-      s(), c(), v();
-    }), N({ tooltipBody: q, open: d, close: h, toggle: y });
-    const w = { LONG_PRESS_DELAY_IN_MS: P, props: e, showTooltip: r, tooltipDOMRef: g, slotDOMRef: T, slots: b, openTimer: n, closeTimer: a, longPressTimer: u, lastPointerType: i, suppressNextClick: p, hasTooltipContent: m, shouldRenderTooltip: O, placement: S, modifiers: B, clearOpenTimer: s, clearCloseTimer: c, clearLongPressTimer: v, setTooltipOpen: l, open: d, close: h, toggle: y, handleMouseEnter: M, handleMouseLeave: E, handleClick: k, handlePointerDown: z, handlePointerEnd: I, rootWidth: x, zIndex: _, styles: L, tooltipBody: q };
-    return Object.defineProperty(w, "__isScriptSetup", { enumerable: !1, value: !0 }), w;
+    ), J(() => {
+      p(), d(), v();
+    }), z({ tooltipBody: T, open: c, close: h, toggle: y });
+    const O = { LONG_PRESS_DELAY_IN_MS: E, props: e, showTooltip: n, tooltipDOMRef: I, slotDOMRef: q, tooltipBody: T, slots: x, openTimer: a, closeTimer: u, longPressTimer: s, lastPointerType: i, suppressNextClick: f, hasTooltipContent: m, shouldRenderTooltip: b, placement: g, placementCoords: S, placementReady: C, modifiers: R, clearOpenTimer: p, clearCloseTimer: d, clearLongPressTimer: v, setTooltipOpen: r, open: c, close: h, toggle: y, handleMouseEnter: L, handleMouseLeave: W, handleClick: j, handlePointerDown: A, handlePointerEnd: F, rootWidth: w, zIndex: D, styles: P, canTeleportTooltip: N, teleportTooltip: _, placementSide: B, tooltipContentClass: G, tooltipContentStyle: U };
+    return Object.defineProperty(O, "__isScriptSetup", { enumerable: !1, value: !0 }), O;
   }
 });
 export {
-  $ as default
+  ie as default
 };

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.css

@@ -1 +1 @@
-.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative;width:100%;min-width:0}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload.nmorph-file-upload--compact .nmorph-file-upload__file{padding:var(--indentation-01) var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__list>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__file{margin-bottom:0}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__list>div{display:flex;flex-wrap:wrap;gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__file{width:auto;margin-bottom:0}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-video-preview,.nmorph-file-upload .nmorph-file-upload__file>.nmorph-audio-preview,.nmorph-file-upload .nmorph-file-upload__file>.nmorph-file-card{flex:1 1 0;min-width:0}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 0;gap:var(--indentation-02);align-items:center;min-width:0;max-width:100%;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 0;width:var(--nmorph-private-file-upload-name-width, auto);min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}
+.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative;width:100%;min-width:0}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{display:grid;gap:var(--indentation-02);box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:0;padding:var(--indentation-02) var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-file-upload.nmorph-file-upload--compact .nmorph-file-upload__file{padding:var(--indentation-01) var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__list>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__file{margin-bottom:0}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__list>div{display:flex;flex-wrap:wrap;gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__file{width:auto;margin-bottom:0}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-video-preview,.nmorph-file-upload .nmorph-file-upload__file>.nmorph-audio-preview,.nmorph-file-upload .nmorph-file-upload__file>.nmorph-file-card{flex:1 1 0;min-width:0}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 0;gap:var(--indentation-02);align-items:center;min-width:0;max-width:100%;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 0;width:var(--nmorph-private-file-upload-name-width, auto);min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}

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

@@ -1 +1 @@
-.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}
+.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)}.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/components/nmorph-select-button-item/NmorphSelectButtonItem.css

@@ -1 +1 @@
-.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}
+.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: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-time-picker/NmorphTimePicker.css

@@ -1 +1 @@
-.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}
+.nmorph-time-picker{--nmorph-private-time-picker-width: fit-content;position:relative;display:inline-block;width:var(--nmorph-private-time-picker-width);min-width:0;height:var(--nmorph-private-control-height)}.nmorph-time-picker .nmorph-time-picker__input{display:inline-flex;gap:8px;align-items:center;box-sizing:border-box;width:100%;min-width:0;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}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:0 1 auto;min-width:0;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--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__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__panel--with-seconds{grid-template-columns:minmax(64px,1fr) 8px minmax(64px,1fr) 8px minmax(64px,1fr)}.nmorph-time-picker__column{min-width:0;padding:4px;background:color-mix(in srgb,var(--nmorph-text-color) 4%,transparent);border-radius:var(--default-border-radius)}.nmorph-time-picker__column .nmorph-scroll{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}.nmorph-time-picker__column .nmorph-scroll__viewport{padding:0 2px 0 0}.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__option{width:100%;min-width:0}.nmorph-time-picker__option .nmorph-button__content{width:100%;min-width:0;padding-right:var(--indentation-02);padding-left:var(--indentation-02);background:transparent}.nmorph-time-picker__option.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{background:color-mix(in srgb,var(--nmorph-accent-color) 14%,transparent)}.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);border-color:var(--nmorph-accent-color);box-shadow:none}.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content span,.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content .nmorph-icon{color:var(--nmorph-focus-text-color);--nmorph-private-icon-color: var(--nmorph-focus-text-color)}

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

@@ -1,30 +1,30 @@
 import './NmorphTimePicker.css';
-import b from "./NmorphTimePicker.vue2.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as a, createElementVNode as r, withKeys as m, withModifiers as t, createVNode as d, withCtx as p, toDisplayString as c, createCommentVNode as _, createBlock as f, Fragment as s, renderList as h } from "vue";
+import v from "./NmorphTimePicker.vue2.js";
+import { openBlock as i, createElementBlock as a, normalizeStyle as b, normalizeClass as k, createElementVNode as o, withKeys as m, withModifiers as c, createVNode as n, withCtx as t, toDisplayString as x, createCommentVNode as p, createBlock as d, Fragment as s, renderList as h } from "vue";
 /* empty css                      */
-import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], H = {
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const u = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], g = ["id", "name", "autocomplete", "step", "value", "disabled"], w = { class: "nmorph-time-picker__selected-value" }, y = ["id"], C = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, g = ["disabled", "onClick"], O = {
+}, N = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
-}, N = ["disabled", "onClick"], M = {
+}, O = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Seconds"
-}, V = ["disabled", "onClick"];
-function I(S, l, z, e, B, D) {
-  return i(), n(
+};
+function H(S, r, B, e, V, I) {
+  return i(), a(
     "div",
     {
-      class: a(e.modifiers),
-      style: v(e.styles)
+      class: k(e.modifiers),
+      style: b(e.styles)
     },
     [
-      r("div", {
+      o("div", {
         ref: "inputDOMRef",
         class: "nmorph-time-picker__input",
         role: "combobox",
@@ -32,15 +32,15 @@ function I(S, l, z, e, B, D) {
         "aria-controls": `${e.id}-dropdown`,
         tabindex: e.props.disabled ? -1 : e.tabindex,
         onClick: e.toggleOpen,
-        onFocus: l[0] || (l[0] = (...o) => e.focusHandler && e.focusHandler(...o)),
-        onBlur: l[1] || (l[1] = (...o) => e.blurHandler && e.blurHandler(...o)),
+        onFocus: r[0] || (r[0] = (...l) => e.focusHandler && e.focusHandler(...l)),
+        onBlur: r[1] || (r[1] = (...l) => e.blurHandler && e.blurHandler(...l)),
         onKeydown: [
-          m(t(e.toggleOpen, ["prevent"]), ["space"]),
-          m(t(e.toggleOpen, ["prevent"]), ["enter"]),
-          m(t(e.closeHandler, ["prevent"]), ["escape"])
+          m(c(e.toggleOpen, ["prevent"]), ["space"]),
+          m(c(e.toggleOpen, ["prevent"]), ["enter"]),
+          m(c(e.closeHandler, ["prevent"]), ["escape"])
         ]
       }, [
-        r("input", {
+        o("input", {
           id: e.id,
           class: "nmorph-time-picker__native",
           name: e.name,
@@ -50,41 +50,41 @@ function I(S, l, z, e, B, D) {
           value: e.modelValue || "",
           disabled: e.props.disabled,
           onInput: e.nativeInputHandler
-        }, null, 40, w),
-        d(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
-          default: p(() => [
-            d(e.NmorphIconClock)
+        }, null, 40, g),
+        n(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
+          default: t(() => [
+            n(e.NmorphIconClock)
           ]),
           _: 1
           /* STABLE */
         }),
-        r(
+        o(
           "div",
-          x,
-          c(e.displayValue),
+          w,
+          x(e.displayValue),
           1
           /* TEXT */
         ),
-        e.showClearButton ? (i(), n("button", {
+        e.showClearButton ? (i(), a("button", {
           key: 0,
           class: "nmorph-time-picker__clear",
           type: "button",
           "aria-label": "Clear time",
-          onClick: t(e.clearHandler, ["stop"])
+          onClick: c(e.clearHandler, ["stop"])
         }, [
-          d(e.NmorphIcon, {
+          n(e.NmorphIcon, {
             width: "14px",
             height: "14px"
           }, {
-            default: p(() => [
-              d(e.NmorphIconCircleClose)
+            default: t(() => [
+              n(e.NmorphIconCircleClose)
             ]),
             _: 1
             /* STABLE */
           })
-        ])) : _("v-if", !0)
-      ], 40, y),
-      e.inputDOMRef && !e.props.disabled ? (i(), f(e.NmorphDropdown, {
+        ])) : p("v-if", !0)
+      ], 40, u),
+      e.inputDOMRef && !e.props.disabled ? (i(), d(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.inputDOMRef,
@@ -95,98 +95,131 @@ function I(S, l, z, e, B, D) {
         onOnOutsideClick: e.closeHandler,
         onOnEscapeKeydown: e.closeHandler
       }, {
-        default: p(() => [
-          r("div", {
+        default: t(() => [
+          o("div", {
             id: `${e.id}-dropdown`,
-            class: a(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+            class: k(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
           }, [
-            r("div", H, [
-              (i(!0), n(
-                s,
-                null,
-                h(e.hourOptions, (o) => (i(), n("button", {
-                  key: o.value,
-                  type: "button",
-                  class: a(["nmorph-time-picker__option", [
-                    e.optionHeightModifiers,
-                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }
-                  ]]),
-                  disabled: o.disabled,
-                  onClick: (k) => e.selectUnit("hour", o.value)
-                }, c(o.label), 11, g))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
+            o("div", C, [
+              n(e.NmorphScroll, {
+                height: "210px",
+                gap: 6,
+                "scroll-x-prop": "hidden",
+                "css-scroll-behavior": "auto"
+              }, {
+                default: t(() => [
+                  (i(!0), a(
+                    s,
+                    null,
+                    h(e.hourOptions, (l) => (i(), d(e.NmorphButton, {
+                      key: l.value,
+                      class: "nmorph-time-picker__option",
+                      design: "plain",
+                      text: l.label,
+                      thickness: e.props.thickness,
+                      active: l.value === e.pickerValue.hour,
+                      disabled: l.disabled,
+                      onClick: (_) => e.selectUnit("hour", l.value)
+                    }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              })
             ]),
-            l[3] || (l[3] = r(
+            r[3] || (r[3] = o(
               "div",
               { class: "nmorph-time-picker__separator" },
               ":",
               -1
               /* CACHED */
             )),
-            r("div", O, [
-              (i(!0), n(
-                s,
-                null,
-                h(e.minuteOptions, (o) => (i(), n("button", {
-                  key: o.value,
-                  type: "button",
-                  class: a(["nmorph-time-picker__option", [
-                    e.optionHeightModifiers,
-                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }
-                  ]]),
-                  disabled: o.disabled,
-                  onClick: (k) => e.selectUnit("minute", o.value)
-                }, c(o.label), 11, N))),
-                128
-                /* KEYED_FRAGMENT */
-              ))
+            o("div", N, [
+              n(e.NmorphScroll, {
+                height: "210px",
+                gap: 6,
+                "scroll-x-prop": "hidden",
+                "css-scroll-behavior": "auto"
+              }, {
+                default: t(() => [
+                  (i(!0), a(
+                    s,
+                    null,
+                    h(e.minuteOptions, (l) => (i(), d(e.NmorphButton, {
+                      key: l.value,
+                      class: "nmorph-time-picker__option",
+                      design: "plain",
+                      text: l.label,
+                      thickness: e.props.thickness,
+                      active: l.value === e.pickerValue.minute,
+                      disabled: l.disabled,
+                      onClick: (_) => e.selectUnit("minute", l.value)
+                    }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              })
             ]),
-            e.props.showSeconds ? (i(), n(
+            e.props.showSeconds ? (i(), a(
               s,
               { key: 0 },
               [
-                l[2] || (l[2] = r(
+                r[2] || (r[2] = o(
                   "div",
                   { class: "nmorph-time-picker__separator" },
                   ":",
                   -1
                   /* CACHED */
                 )),
-                r("div", M, [
-                  (i(!0), n(
-                    s,
-                    null,
-                    h(e.secondOptions, (o) => (i(), n("button", {
-                      key: o.value,
-                      type: "button",
-                      class: a(["nmorph-time-picker__option", [
-                        e.optionHeightModifiers,
-                        { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }
-                      ]]),
-                      disabled: o.disabled,
-                      onClick: (k) => e.selectUnit("second", o.value)
-                    }, c(o.label), 11, V))),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
+                o("div", O, [
+                  n(e.NmorphScroll, {
+                    height: "210px",
+                    gap: 6,
+                    "scroll-x-prop": "hidden",
+                    "css-scroll-behavior": "auto"
+                  }, {
+                    default: t(() => [
+                      (i(!0), a(
+                        s,
+                        null,
+                        h(e.secondOptions, (l) => (i(), d(e.NmorphButton, {
+                          key: l.value,
+                          class: "nmorph-time-picker__option",
+                          design: "plain",
+                          text: l.label,
+                          thickness: e.props.thickness,
+                          active: l.value === e.pickerValue.second,
+                          disabled: l.disabled,
+                          onClick: (_) => e.selectUnit("second", l.value)
+                        }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
                 ])
               ],
               64
               /* STABLE_FRAGMENT */
-            )) : _("v-if", !0)
-          ], 10, C)
+            )) : p("v-if", !0)
+          ], 10, y)
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : _("v-if", !0)
+      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : p("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const F = /* @__PURE__ */ u(b, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
+const E = /* @__PURE__ */ f(v, [["render", H], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
 export {
-  F as default
+  E as default
 };