@nmorph/nmorph-ui-kit 3.0.4 → 3.0.5

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

@@ -1,25 +1,21 @@
 import './NmorphTooltip.css';
-import f from "./NmorphTooltip.vue2.js";
-import { openBlock as e, createElementBlock as t, normalizeStyle as d, normalizeClass as h, createElementVNode as n, renderSlot as s, Fragment as y, createBlock as c, Transition as _, withCtx as m, createCommentVNode as r, toDisplayString as p } from "vue";
+import h from "./NmorphTooltip.vue2.js";
+import { openBlock as t, createElementBlock as e, normalizeStyle as c, normalizeClass as a, createElementVNode as n, renderSlot as d, Fragment as y, createBlock as p, Transition as _, withCtx as f, createCommentVNode as l, toDisplayString as m, Teleport as v, createVNode as k } from "vue";
 /* empty css                   */
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = {
+import C from "../../../_virtual/_plugin-vue_export-helper.js";
+const T = {
   ref: "slotDOMRef",
   class: "nmorph-tooltip__trigger"
-}, C = { class: "nmorph-tooltip__shadow-content" }, P = {
+}, P = { class: "nmorph-tooltip__shadow-content" }, g = {
   key: 0,
   class: "nmorph-tooltip__triangle"
-}, g = { key: 1 }, x = {
-  key: 0,
-  ref: "tooltipBody",
-  class: "nmorph-tooltip__info-content"
-}, E = { class: "nmorph-tooltip__shadow-content" }, M = { key: 0 };
-function b(l, a, i, o, u, w) {
-  return e(), t(
+}, x = { key: 1 }, w = { class: "nmorph-tooltip__shadow-content" }, B = { key: 0 }, E = { class: "nmorph-tooltip__shadow-content" }, M = { key: 0 };
+function b(r, s, i, o, N, R) {
+  return t(), e(
     "div",
     {
-      class: h(o.modifiers),
-      style: d(o.styles)
+      class: a(o.modifiers),
+      style: c(o.styles)
     },
     [
       n(
@@ -38,77 +34,81 @@ function b(l, a, i, o, u, w) {
         [
           n(
             "div",
-            v,
+            T,
             [
-              s(l.$slots, "default")
+              d(r.$slots, "default")
             ],
             512
             /* NEED_PATCH */
           ),
-          o.props.disabled ? r("v-if", !0) : (e(), t(
+          !o.props.disabled && !o.teleportTooltip ? (t(), e(
             y,
             { key: 0 },
             [
-              o.props.forceCoordinate ? (e(), c(_, {
+              o.props.forceCoordinate ? (t(), p(_, {
                 key: 0,
                 name: "opacity"
               }, {
-                default: m(() => [
-                  o.shouldRenderTooltip ? (e(), t(
+                default: f(() => [
+                  o.shouldRenderTooltip ? (t(), e(
                     "div",
                     {
                       key: 0,
                       ref: "tooltipBody",
-                      class: "nmorph-tooltip__info-content",
-                      style: d({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y })
+                      class: a(o.tooltipContentClass),
+                      style: c({ left: i.forceCoordinate?.x, bottom: i.forceCoordinate?.y })
                     },
                     [
-                      n("div", C, [
-                        o.props.forceCoordinate ? r("v-if", !0) : (e(), t("div", P)),
-                        o.props.text ? (e(), t(
+                      n("div", P, [
+                        o.props.forceCoordinate ? l("v-if", !0) : (t(), e("div", g)),
+                        o.props.text ? (t(), e(
                           "span",
-                          g,
-                          p(i.text),
+                          x,
+                          m(i.text),
                           1
                           /* TEXT */
-                        )) : s(l.$slots, "content", { key: 2 })
+                        )) : d(r.$slots, "content", { key: 2 })
                       ])
                     ],
-                    4
-                    /* STYLE */
-                  )) : r("v-if", !0)
+                    6
+                    /* CLASS, STYLE */
+                  )) : l("v-if", !0)
                 ]),
                 _: 3
                 /* FORWARDED */
-              })) : (e(), c(_, {
+              })) : (t(), p(_, {
                 key: 1,
                 name: "opacity"
               }, {
-                default: m(() => [
-                  o.shouldRenderTooltip ? (e(), t(
+                default: f(() => [
+                  o.shouldRenderTooltip ? (t(), e(
                     "div",
-                    x,
+                    {
+                      key: 0,
+                      ref: "tooltipBody",
+                      class: a(o.tooltipContentClass)
+                    },
                     [
-                      n("div", E, [
-                        a[0] || (a[0] = n(
+                      n("div", w, [
+                        s[0] || (s[0] = n(
                           "div",
                           { class: "nmorph-tooltip__triangle" },
                           null,
                           -1
                           /* CACHED */
                         )),
-                        o.props.text ? (e(), t(
+                        o.props.text ? (t(), e(
                           "span",
-                          M,
-                          p(i.text),
+                          B,
+                          m(i.text),
                           1
                           /* TEXT */
-                        )) : s(l.$slots, "content", { key: 1 })
+                        )) : d(r.$slots, "content", { key: 1 })
                       ])
                     ],
-                    512
-                    /* NEED_PATCH */
-                  )) : r("v-if", !0)
+                    2
+                    /* CLASS */
+                  )) : l("v-if", !0)
                 ]),
                 _: 3
                 /* FORWARDED */
@@ -116,17 +116,57 @@ function b(l, a, i, o, u, w) {
             ],
             64
             /* STABLE_FRAGMENT */
-          ))
+          )) : l("v-if", !0)
         ],
         544
         /* NEED_HYDRATION, NEED_PATCH */
-      )
+      ),
+      o.teleportTooltip ? (t(), p(v, {
+        key: 0,
+        to: o.props.teleportTo
+      }, [
+        k(_, { name: "opacity" }, {
+          default: f(() => [
+            o.shouldRenderTooltip ? (t(), e(
+              "div",
+              {
+                key: 0,
+                ref: "tooltipBody",
+                class: a(o.tooltipContentClass),
+                style: c(o.tooltipContentStyle)
+              },
+              [
+                n("div", E, [
+                  s[1] || (s[1] = n(
+                    "div",
+                    { class: "nmorph-tooltip__triangle" },
+                    null,
+                    -1
+                    /* CACHED */
+                  )),
+                  o.props.text ? (t(), e(
+                    "span",
+                    M,
+                    m(i.text),
+                    1
+                    /* TEXT */
+                  )) : d(r.$slots, "content", { key: 1 })
+                ])
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : l("v-if", !0)
+          ]),
+          _: 3
+          /* FORWARDED */
+        })
+      ], 8, ["to"])) : l("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const R = /* @__PURE__ */ k(f, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
+const O = /* @__PURE__ */ C(h, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-tooltip/NmorphTooltip.vue"]]);
 export {
-  R as default
+  O as default
 };

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-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)}