@profitliga/ui 2.0.4 → 2.0.6

package/dist/components/v2/Dialog/Dialog.vue2.js

@@ -1,11 +1,11 @@
-import { defineComponent as G, useModel as J, useId as Q, computed as g, useSlots as W, useTemplateRef as M, watch as Y, onBeforeUnmount as x, unref as t, openBlock as o, createBlock as p, createSlots as ee, withCtx as y, createElementVNode as v, createElementBlock as a, mergeProps as s, renderSlot as r, createCommentVNode as n, toDisplayString as R, normalizeProps as te, guardReactiveProps as oe, Fragment as ie, normalizeStyle as le, normalizeClass as se, resolveDynamicComponent as T, createTextVNode as ae, createVNode as ne, mergeModels as N } from "vue";
+import { defineComponent as G, useModel as J, useId as Q, computed as g, useSlots as W, useTemplateRef as M, watch as Y, onBeforeUnmount as x, unref as t, openBlock as o, createBlock as b, createSlots as ee, withCtx as y, createElementVNode as v, createElementBlock as n, mergeProps as l, renderSlot as r, createCommentVNode as a, toDisplayString as R, normalizeProps as te, guardReactiveProps as oe, Fragment as ie, normalizeStyle as se, normalizeClass as le, resolveDynamicComponent as T, createTextVNode as ne, createVNode as ae, mergeModels as A } from "vue";
 import { X as de } from "@lucide/vue";
 import { breakpoints as re } from "../../../utils/breakpoints.util.js";
 import { onClickOutside as ue } from "../../../utils/onClickOutside.util.js";
 import { useBodyScroll as ce } from "../../../utils/useBodyScroll.util.js";
 import { useFocusTrap as ve } from "../../../utils/useFocusTrap.util.js";
 import me from "../BottomSheet/BottomSheet.vue.js";
-import { ANIMATION_DURATION_MS as A } from "../shared/animation.const.js";
+import { ANIMATION_DURATION_MS as N } from "../shared/animation.const.js";
 import fe from "../shared/Portal.vue.js";
 import { useDelayedVisibility as ge } from "../shared/useDelayedVisibility.util.js";
 import { useLayerZIndex as ye } from "../shared/useLayerZIndex.util.js";
@@ -18,13 +18,13 @@ const $e = { class: "dialog-mobile" }, he = {
 }, we = {
   key: 1,
   class: "dialog-mobile__divider"
-}, Ie = ["data-state"], Oe = ["aria-describedby", "data-state"], De = { class: "dialog-content__heading" }, Be = ["aria-label"], Se = {
+}, Ie = ["data-state"], Oe = ["aria-describedby", "data-state"], De = { class: "dialog-content__heading" }, Be = ["aria-label"], Ee = {
   key: 0,
   class: "dialog-content__divider"
 }, Fe = /* @__PURE__ */ G({
   inheritAttrs: !1,
   __name: "Dialog",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ A({
     title: { default: void 0 },
     closeButton: { default: () => ({ enabled: !0 }) },
     width: { default: 500 },
@@ -37,52 +37,54 @@ const $e = { class: "dialog-mobile" }, he = {
     open: { type: Boolean, default: !1 },
     openModifiers: {}
   }),
-  emits: /* @__PURE__ */ N(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
+  emits: /* @__PURE__ */ A(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
   setup(i, { emit: V }) {
-    const m = i, b = V, u = J(i, "open"), S = re.smaller(m.breakpointMobile), k = Q(), f = `dialog-title-${k}`, $ = `dialog-content-${k}`, z = `dialog-body-${k}`, l = pe(() => m.testId), K = g(() => ({
+    const m = i, k = V, u = J(i, "open"), E = re.smaller(m.breakpointMobile), $ = Q(), f = `dialog-title-${$}`, h = `dialog-content-${$}`, S = `dialog-body-${$}`, s = pe(() => m.testId), K = g(() => ({
       "aria-haspopup": "dialog",
       "aria-expanded": u.value,
-      "aria-controls": u.value ? $ : void 0
-    })), E = g(() => m.title?.as ?? "h2"), L = g(() => `${m.width}px`), U = W(), h = g(() => m.divider ?? !!U.icon), C = M("triggerRef"), w = M("contentRef");
+      "aria-controls": u.value ? h : void 0
+    })), z = g(() => m.title?.as ?? "h2"), L = g(() => `${m.width}px`), U = W(), w = g(() => m.divider ?? !!U.icon), C = M("triggerRef"), I = M("contentRef");
     be({
       host: () => C.value,
       isOpen: () => u.value,
-      contentId: () => $,
+      contentId: () => h,
       hasPopup: () => "dialog"
     });
-    const { lockScroll: F, unlockScroll: Z } = ce(), I = ve(() => w.value), O = ye(), q = g(
-      () => m.zIndex === "auto" ? O.zIndex.value : m.zIndex
+    const { lockScroll: F, unlockScroll: Z } = ce(), O = ve(() => I.value), p = ye(), q = g(
+      () => m.zIndex === "auto" ? p.zIndex.value : m.zIndex
     );
     function P() {
       u.value = !1;
     }
     function D(e) {
-      e.key === "Escape" && (b("escapeKeyDown", e), e.defaultPrevented || P());
+      e.key === "Escape" && (k("escapeKeyDown", e), e.defaultPrevented || P());
     }
     function H(e) {
-      b("pointerDownOutside", e), !m.disableOutsidePointerEvents && !e.defaultPrevented && P();
+      k("pointerDownOutside", e), !m.disableOutsidePointerEvents && !e.defaultPrevented && P();
     }
-    const X = g(() => u.value && !S.value), { visible: j, dataState: _ } = ge(
+    const X = g(() => u.value && !E.value), { visible: j, dataState: _ } = ge(
       X,
-      A,
+      N,
       {
         onOpen: () => {
-          O.acquire(), F(), I.activate({ focusDelayMs: A }), document.addEventListener("keydown", D);
+          p.acquire(), F(), O.activate({ focusDelayMs: N }), document.addEventListener("keydown", D);
         },
         onCloseStart: () => {
-          I.deactivate(), document.removeEventListener("keydown", D);
+          O.deactivate(), document.removeEventListener("keydown", D);
         },
         onCloseEnd: () => {
-          Z(), O.release();
+          Z(), p.release();
         }
       }
     );
     let B;
-    return Y(w, (e) => {
-      B?.(), B = e ? ue(e, H) : void 0;
+    return Y(I, (e) => {
+      p.registerElement(e), B?.(), B = e ? ue(e, H, {
+        ignore: () => p.elementsAbove()
+      }) : void 0;
     }), x(() => {
-      B?.(), document.removeEventListener("keydown", D), I.deactivate();
-    }), (e, d) => t(S) ? (o(), p(t(me), {
+      B?.(), document.removeEventListener("keydown", D), O.deactivate();
+    }), (e, d) => t(E) ? (o(), b(t(me), {
       key: 0,
       open: u.value,
       "onUpdate:open": d[0] || (d[0] = (c) => u.value = c),
@@ -90,35 +92,35 @@ const $e = { class: "dialog-mobile" }, he = {
       "disable-outside-pointer-events": i.disableOutsidePointerEvents,
       "labelled-by": i.title?.text && !e.$slots.title ? f : void 0,
       "test-id": i.testId,
-      onEscapeKeyDown: d[1] || (d[1] = (c) => b("escapeKeyDown", c)),
-      onPointerDownOutside: d[2] || (d[2] = (c) => b("pointerDownOutside", c))
+      onEscapeKeyDown: d[1] || (d[1] = (c) => k("escapeKeyDown", c)),
+      onPointerDownOutside: d[2] || (d[2] = (c) => k("pointerDownOutside", c))
     }, ee({
       default: y(() => [
         v("div", $e, [
-          e.$slots.icon || i.title?.text && !e.$slots.title ? (o(), a("div", he, [
-            e.$slots.icon ? (o(), a("span", s({
+          e.$slots.icon || i.title?.text && !e.$slots.title ? (o(), n("div", he, [
+            e.$slots.icon ? (o(), n("span", l({
               key: 0,
               class: "dialog-mobile__icon"
-            }, t(l)("icon")), [
+            }, t(s)("icon")), [
               r(e.$slots, "icon", {}, void 0, !0)
-            ], 16)) : n("", !0),
-            i.title?.text && !e.$slots.title ? (o(), a("div", s({
+            ], 16)) : a("", !0),
+            i.title?.text && !e.$slots.title ? (o(), n("div", l({
               key: 1,
               id: f,
               class: "dialog-mobile__title"
-            }, t(l)("title")), R(i.title.text), 17)) : n("", !0)
-          ])) : n("", !0),
-          h.value ? (o(), a("div", we)) : n("", !0),
-          v("div", s({ class: "dialog-mobile__content" }, t(l)("body")), [
+            }, t(s)("title")), R(i.title.text), 17)) : a("", !0)
+          ])) : a("", !0),
+          w.value ? (o(), n("div", we)) : a("", !0),
+          v("div", l({ class: "dialog-mobile__content" }, t(s)("body")), [
             r(e.$slots, "title", {}, void 0, !0),
             r(e.$slots, "default", {}, void 0, !0)
           ], 16),
-          e.$slots.actions ? (o(), a("div", s({
+          e.$slots.actions ? (o(), n("div", l({
             key: 2,
             class: "dialog-mobile__actions"
-          }, t(l)("actions")), [
+          }, t(s)("actions")), [
             r(e.$slots, "actions", {}, void 0, !0)
-          ], 16)) : n("", !0)
+          ], 16)) : a("", !0)
         ])
       ]),
       _: 2
@@ -130,109 +132,109 @@ const $e = { class: "dialog-mobile" }, he = {
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["open", "z-index", "disable-outside-pointer-events", "labelled-by", "test-id"])) : (o(), a(ie, { key: 1 }, [
-      e.$slots.trigger ? (o(), a("span", s({
+    ]), 1032, ["open", "z-index", "disable-outside-pointer-events", "labelled-by", "test-id"])) : (o(), n(ie, { key: 1 }, [
+      e.$slots.trigger ? (o(), n("span", l({
         key: 0,
         ref_key: "triggerRef",
         ref: C,
         class: "dialog-trigger"
-      }, t(l)("trigger"), {
+      }, t(s)("trigger"), {
         onClick: d[3] || (d[3] = (c) => u.value = !0)
       }), [
         r(e.$slots, "trigger", { props: K.value }, void 0, !0)
-      ], 16)) : n("", !0),
-      t(j) ? (o(), p(fe, { key: 1 }, {
+      ], 16)) : a("", !0),
+      t(j) ? (o(), b(fe, { key: 1 }, {
         default: y(() => [
           v("div", {
             class: "dialog-layer",
-            style: le({ zIndex: q.value })
+            style: se({ zIndex: q.value })
           }, [
-            v("div", s({
+            v("div", l({
               class: "overlay dialog-overlay",
               "data-state": t(_)
-            }, t(l)("overlay")), null, 16, Ie),
-            v("div", s({
-              id: $,
+            }, t(s)("overlay")), null, 16, Ie),
+            v("div", l({
+              id: h,
               ref_key: "contentRef",
-              ref: w,
+              ref: I,
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": f,
-              "aria-describedby": e.$slots.default ? z : void 0,
+              "aria-describedby": e.$slots.default ? S : void 0,
               "data-state": t(_),
               class: "dialog-content",
               style: { width: L.value }
-            }, { ...e.$attrs, ...t(l)("content") }), [
+            }, { ...e.$attrs, ...t(s)("content") }), [
               v("div", {
-                class: se(["dialog-content__header", {
-                  "dialog-content__header--divided": h.value
+                class: le(["dialog-content__header", {
+                  "dialog-content__header--divided": w.value
                 }])
               }, [
                 v("div", De, [
-                  e.$slots.icon ? (o(), a("span", s({
+                  e.$slots.icon ? (o(), n("span", l({
                     key: 0,
                     class: "dialog-content__icon"
-                  }, t(l)("icon")), [
+                  }, t(s)("icon")), [
                     r(e.$slots, "icon", {}, void 0, !0)
-                  ], 16)) : n("", !0),
-                  i.title?.text ? (o(), p(T(E.value), s({
+                  ], 16)) : a("", !0),
+                  i.title?.text ? (o(), b(T(z.value), l({
                     key: 1,
                     id: f,
                     class: ["dialog-content__title", {
                       "dialog-content__title--with-icon": e.$slots.icon
                     }]
-                  }, t(l)("title")), {
+                  }, t(s)("title")), {
                     default: y(() => [
-                      ae(R(i.title.text), 1)
+                      ne(R(i.title.text), 1)
                     ]),
                     _: 1
-                  }, 16, ["class"])) : e.$slots.title ? (o(), p(T(E.value), s({
+                  }, 16, ["class"])) : e.$slots.title ? (o(), b(T(z.value), l({
                     key: 2,
                     id: f,
                     class: ["dialog-content__title", {
                       "dialog-content__title--with-icon": e.$slots.icon
                     }]
-                  }, t(l)("title")), {
+                  }, t(s)("title")), {
                     default: y(() => [
                       r(e.$slots, "title", {}, void 0, !0)
                     ]),
                     _: 3
-                  }, 16, ["class"])) : (o(), p(ke, { key: 3 }, {
+                  }, 16, ["class"])) : (o(), b(ke, { key: 3 }, {
                     default: y(() => [
                       v("h2", { id: f }, "Диалоговое окно")
                     ]),
                     _: 1
                   }))
                 ]),
-                i.closeButton?.enabled ? (o(), a("button", s({
+                i.closeButton?.enabled ? (o(), n("button", l({
                   key: 0,
                   type: "button",
                   class: "dialog-content__close",
                   "aria-label": i.closeButton.label ?? "Закрыть"
-                }, t(l)("close"), {
+                }, t(s)("close"), {
                   onClick: d[4] || (d[4] = (c) => u.value = !1)
                 }), [
-                  ne(t(de), { size: 20 })
-                ], 16, Be)) : n("", !0)
+                  ae(t(de), { size: 20 })
+                ], 16, Be)) : a("", !0)
               ], 2),
-              h.value ? (o(), a("div", Se)) : n("", !0),
-              v("div", s({
-                id: z,
+              w.value ? (o(), n("div", Ee)) : a("", !0),
+              v("div", l({
+                id: S,
                 class: "dialog-content__wrapper"
-              }, t(l)("body")), [
+              }, t(s)("body")), [
                 r(e.$slots, "default", {}, void 0, !0)
               ], 16),
-              e.$slots.actions ? (o(), a("div", s({
+              e.$slots.actions ? (o(), n("div", l({
                 key: 1,
                 class: "dialog-content__actions"
-              }, t(l)("actions")), [
+              }, t(s)("actions")), [
                 r(e.$slots, "actions", {}, void 0, !0)
-              ], 16)) : n("", !0)
+              ], 16)) : a("", !0)
             ], 16, Oe)
           ], 4)
         ]),
         _: 3
-      })) : n("", !0)
+      })) : a("", !0)
     ], 64));
   }
 });

package/dist/components/v2/Drawer/Drawer.css

@@ -1 +1 @@
-.drawer-trigger[data-v-fa82d1f1]{display:contents}.drawer-layer[data-v-fa82d1f1]{position:relative}.drawer-content[data-v-fa82d1f1]{box-sizing:border-box;background-color:var(--theme-neutral-0);z-index:1002;flex-direction:column;padding:24px;display:flex;position:fixed;box-shadow:0 2px 5px #3a3a3a40}.drawer-content--left[data-v-fa82d1f1]{border-radius:0 12px 12px 0;max-width:90vw;height:100%;top:0;bottom:0;left:0}.drawer-content--left[data-state=open][data-v-fa82d1f1]{animation:slideLeftIn var(--animation-duration) ease-in-out}.drawer-content--left[data-state=closed][data-v-fa82d1f1]{animation:slideLeftOut var(--animation-duration) ease-in-out}.drawer-content--right[data-v-fa82d1f1]{border-radius:12px 0 0 12px;max-width:90vw;height:100%;top:0;bottom:0;right:0}.drawer-content--right[data-state=open][data-v-fa82d1f1]{animation:slideRightIn var(--animation-duration) ease-in-out}.drawer-content--right[data-state=closed][data-v-fa82d1f1]{animation:slideRightOut var(--animation-duration) ease-in-out}.drawer-content--top[data-v-fa82d1f1]{border-radius:0 0 12px 12px;width:100%;max-height:90dvh;top:0;left:0;right:0}.drawer-content--top[data-state=open][data-v-fa82d1f1]{animation:slideTopIn var(--animation-duration) ease-in-out}.drawer-content--top[data-state=closed][data-v-fa82d1f1]{animation:slideTopOut var(--animation-duration) ease-in-out}.drawer-content--bottom[data-v-fa82d1f1]{border-radius:12px 12px 0 0;width:100%;max-height:90dvh;bottom:0;left:0;right:0}.drawer-content--bottom[data-state=open][data-v-fa82d1f1]{animation:slideBottomIn var(--animation-duration) ease-in-out}.drawer-content--bottom[data-state=closed][data-v-fa82d1f1]{animation:slideBottomOut var(--animation-duration) ease-in-out}.drawer-content__header[data-v-fa82d1f1]{flex:none;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;margin-bottom:16px;display:flex}.drawer-content__title[data-v-fa82d1f1]{flex:1 1 0;min-width:0;font-weight:500}.drawer-content__close[data-v-fa82d1f1]{background:0 0;border:none;justify-content:center;align-items:center;width:20px;min-width:20px;height:20px;margin-left:auto;padding:0;display:flex}.drawer-content__close[data-v-fa82d1f1]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.drawer-content__close svg[data-v-fa82d1f1]{width:20px;height:20px;color:var(--color-secondary-400);transition:color .3s ease-in-out}.drawer-content__close[data-v-fa82d1f1]:hover{cursor:pointer}.drawer-content__close:hover svg[data-v-fa82d1f1]{color:var(--color-secondary-500);transition:color .3s ease-in-out}.drawer-content__divider[data-v-fa82d1f1]{background-color:var(--theme-secondary-250);flex:none;width:100%;height:1px;margin-top:-4px;margin-bottom:12px}.drawer-content__wrapper[data-v-fa82d1f1]{box-sizing:content-box;scrollbar-width:thin;scrollbar-color:var(--theme-neutral-icon-primary) var(--theme-neutral-surface-icon);flex-direction:column;flex:1 1 0;justify-content:flex-start;align-items:flex-start;gap:12px;width:100%;min-height:0;display:flex;overflow-y:auto}.drawer-content__wrapper[data-v-fa82d1f1]::-webkit-scrollbar{width:8px;height:0}.drawer-content__wrapper[data-v-fa82d1f1]::-webkit-scrollbar-thumb{background-color:var(--theme-neutral-icon-primary);background-clip:padding-box;border:1px solid #0000;border-radius:999px}.drawer-content__wrapper[data-v-fa82d1f1]::-webkit-scrollbar-track{background:var(--theme-neutral-surface-icon);border-radius:4px}.drawer-content__wrapper[data-v-fa82d1f1]::-webkit-scrollbar-corner{background:0 0}.drawer-content__actions[data-v-fa82d1f1]{flex:none;justify-content:flex-end;align-items:center;gap:8px;width:100%;margin-top:32px;display:flex}.drawer-mobile[data-v-fa82d1f1]{flex-direction:column;gap:16px;width:100%;display:flex}.drawer-mobile__title[data-v-fa82d1f1]{color:var(--theme-neutral-text-title);font-size:1.125rem;font-weight:500;line-height:1.5}.drawer-mobile__divider[data-v-fa82d1f1]{background-color:var(--theme-secondary-250);width:100%;height:1px;margin-top:-4px}.drawer-mobile__content[data-v-fa82d1f1]{flex-direction:column;gap:12px;display:flex}.drawer-mobile__actions[data-v-fa82d1f1]{flex-direction:column-reverse;gap:8px;width:100%;display:flex}.drawer-mobile__actions[data-v-fa82d1f1] button{width:100%}
+.drawer-trigger[data-v-4d3b35ae]{display:contents}.drawer-layer[data-v-4d3b35ae]{position:relative}.drawer-content[data-v-4d3b35ae]{box-sizing:border-box;background-color:var(--theme-neutral-0);z-index:1002;flex-direction:column;padding:24px;display:flex;position:fixed;box-shadow:0 2px 5px #3a3a3a40}.drawer-content--left[data-v-4d3b35ae]{border-radius:0 12px 12px 0;max-width:90vw;height:100%;top:0;bottom:0;left:0}.drawer-content--left[data-state=open][data-v-4d3b35ae]{animation:slideLeftIn var(--animation-duration) ease-in-out}.drawer-content--left[data-state=closed][data-v-4d3b35ae]{animation:slideLeftOut var(--animation-duration) ease-in-out}.drawer-content--right[data-v-4d3b35ae]{border-radius:12px 0 0 12px;max-width:90vw;height:100%;top:0;bottom:0;right:0}.drawer-content--right[data-state=open][data-v-4d3b35ae]{animation:slideRightIn var(--animation-duration) ease-in-out}.drawer-content--right[data-state=closed][data-v-4d3b35ae]{animation:slideRightOut var(--animation-duration) ease-in-out}.drawer-content--top[data-v-4d3b35ae]{border-radius:0 0 12px 12px;width:100%;max-height:90dvh;top:0;left:0;right:0}.drawer-content--top[data-state=open][data-v-4d3b35ae]{animation:slideTopIn var(--animation-duration) ease-in-out}.drawer-content--top[data-state=closed][data-v-4d3b35ae]{animation:slideTopOut var(--animation-duration) ease-in-out}.drawer-content--bottom[data-v-4d3b35ae]{border-radius:12px 12px 0 0;width:100%;max-height:90dvh;bottom:0;left:0;right:0}.drawer-content--bottom[data-state=open][data-v-4d3b35ae]{animation:slideBottomIn var(--animation-duration) ease-in-out}.drawer-content--bottom[data-state=closed][data-v-4d3b35ae]{animation:slideBottomOut var(--animation-duration) ease-in-out}.drawer-content__header[data-v-4d3b35ae]{flex:none;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;margin-bottom:16px;display:flex}.drawer-content__title[data-v-4d3b35ae]{flex:1 1 0;min-width:0;font-weight:500}.drawer-content__close[data-v-4d3b35ae]{background:0 0;border:none;justify-content:center;align-items:center;width:20px;min-width:20px;height:20px;margin-left:auto;padding:0;display:flex}.drawer-content__close[data-v-4d3b35ae]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.drawer-content__close svg[data-v-4d3b35ae]{width:20px;height:20px;color:var(--color-secondary-400);transition:color .3s ease-in-out}.drawer-content__close[data-v-4d3b35ae]:hover{cursor:pointer}.drawer-content__close:hover svg[data-v-4d3b35ae]{color:var(--color-secondary-500);transition:color .3s ease-in-out}.drawer-content__divider[data-v-4d3b35ae]{background-color:var(--theme-secondary-250);flex:none;width:100%;height:1px;margin-top:-4px;margin-bottom:12px}.drawer-content__wrapper[data-v-4d3b35ae]{box-sizing:content-box;scrollbar-width:thin;scrollbar-color:var(--theme-neutral-icon-primary) var(--theme-neutral-surface-icon);flex-direction:column;flex:1 1 0;justify-content:flex-start;align-items:flex-start;gap:12px;width:100%;min-height:0;display:flex;overflow-y:auto}.drawer-content__wrapper[data-v-4d3b35ae]::-webkit-scrollbar{width:8px;height:0}.drawer-content__wrapper[data-v-4d3b35ae]::-webkit-scrollbar-thumb{background-color:var(--theme-neutral-icon-primary);background-clip:padding-box;border:1px solid #0000;border-radius:999px}.drawer-content__wrapper[data-v-4d3b35ae]::-webkit-scrollbar-track{background:var(--theme-neutral-surface-icon);border-radius:4px}.drawer-content__wrapper[data-v-4d3b35ae]::-webkit-scrollbar-corner{background:0 0}.drawer-content__actions[data-v-4d3b35ae]{flex:none;justify-content:flex-end;align-items:center;gap:8px;width:100%;margin-top:32px;display:flex}.drawer-mobile[data-v-4d3b35ae]{flex-direction:column;gap:16px;width:100%;display:flex}.drawer-mobile__title[data-v-4d3b35ae]{color:var(--theme-neutral-text-title);font-size:1.125rem;font-weight:500;line-height:1.5}.drawer-mobile__divider[data-v-4d3b35ae]{background-color:var(--theme-secondary-250);width:100%;height:1px;margin-top:-4px}.drawer-mobile__content[data-v-4d3b35ae]{flex-direction:column;gap:12px;display:flex}.drawer-mobile__actions[data-v-4d3b35ae]{flex-direction:column-reverse;gap:8px;width:100%;display:flex}.drawer-mobile__actions[data-v-4d3b35ae] button{width:100%}

package/dist/components/v2/Drawer/Drawer.vue.js

@@ -2,7 +2,7 @@ import './Drawer.css';
 import o from "./Drawer.vue2.js";
 /* empty css            */
 import r from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fa82d1f1"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-4d3b35ae"]]);
 export {
   m as default
 };

package/dist/components/v2/Drawer/Drawer.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as W, useModel as Y, useId as _, computed as b, useTemplateRef as T, ref as ee, watch as te, onBeforeUnmount as oe, unref as t, openBlock as s, createBlock as w, createSlots as ie, withCtx as m, createElementVNode as d, createElementBlock as u, mergeProps as n, toDisplayString as N, createCommentVNode as c, renderSlot as f, normalizeProps as se, guardReactiveProps as ae, Fragment as ne, normalizeStyle as re, resolveDynamicComponent as x, createTextVNode as le, createVNode as de, mergeModels as A } from "vue";
+import { defineComponent as W, useModel as Y, useId as _, computed as g, useTemplateRef as T, ref as ee, watch as te, onBeforeUnmount as oe, unref as t, openBlock as s, createBlock as w, createSlots as ie, withCtx as m, createElementVNode as d, createElementBlock as u, mergeProps as n, toDisplayString as A, createCommentVNode as c, renderSlot as f, normalizeProps as se, guardReactiveProps as ae, Fragment as ne, normalizeStyle as re, resolveDynamicComponent as N, createTextVNode as le, createVNode as de, mergeModels as x } from "vue";
 import { X as ue } from "@lucide/vue";
 import { breakpoints as ce } from "../../../utils/breakpoints.util.js";
 import { onClickOutside as fe } from "../../../utils/onClickOutside.util.js";
@@ -8,20 +8,20 @@ import pe from "../BottomSheet/BottomSheet.vue.js";
 import { ANIMATION_DURATION_MS as K } from "../shared/animation.const.js";
 import ye from "../shared/Portal.vue.js";
 import { useDelayedVisibility as be } from "../shared/useDelayedVisibility.util.js";
-import { useLayerZIndex as we } from "../shared/useLayerZIndex.util.js";
-import { useTestId as ge } from "../shared/useTestId.util.js";
+import { useLayerZIndex as ge } from "../shared/useLayerZIndex.util.js";
+import { useTestId as we } from "../shared/useTestId.util.js";
 import { useTriggerAria as ke } from "../shared/useTriggerAria.util.js";
 import he from "../shared/VisuallyHidden.vue.js";
 const $e = { class: "drawer-mobile" }, Ie = {
   key: 1,
   class: "drawer-mobile__divider"
-}, Ce = ["data-state"], Oe = ["aria-describedby", "data-state"], Pe = { class: "drawer-content__header" }, De = ["aria-label"], Se = {
+}, Ce = ["data-state"], Oe = ["aria-describedby", "data-state"], Pe = { class: "drawer-content__header" }, De = ["aria-label"], Ee = {
   key: 0,
   class: "drawer-content__divider"
 }, Ue = /* @__PURE__ */ W({
   inheritAttrs: !1,
   __name: "Drawer",
-  props: /* @__PURE__ */ A({
+  props: /* @__PURE__ */ x({
     position: { default: "right" },
     title: { default: void 0 },
     closeButton: { default: () => ({ enabled: !0 }) },
@@ -37,25 +37,25 @@ const $e = { class: "drawer-mobile" }, Ie = {
     open: { type: Boolean, default: !1 },
     openModifiers: {}
   }),
-  emits: /* @__PURE__ */ A(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
+  emits: /* @__PURE__ */ x(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
   setup(o, { expose: V, emit: q }) {
-    const i = o, g = q, r = Y(o, "open"), S = ce.smaller(i.breakpointMobile), k = _(), v = `drawer-title-${k}`, h = `drawer-content-${k}`, B = `drawer-body-${k}`, a = ge(() => i.testId), L = b(() => ({
+    const i = o, k = q, r = Y(o, "open"), E = ce.smaller(i.breakpointMobile), h = _(), v = `drawer-title-${h}`, $ = `drawer-content-${h}`, S = `drawer-body-${h}`, a = we(() => i.testId), L = g(() => ({
       "aria-haspopup": "dialog",
       "aria-expanded": r.value,
-      "aria-controls": r.value ? h : void 0
-    })), E = b(() => i.title?.as ?? "h2"), F = b(
+      "aria-controls": r.value ? $ : void 0
+    })), B = g(() => i.title?.as ?? "h2"), F = g(
       () => i.position === "left" || i.position === "right" ? { width: `${i.width}px` } : { height: `${i.height}px` }
-    ), z = T("triggerRef"), $ = T("contentRef");
+    ), z = T("triggerRef"), I = T("contentRef");
     ke({
       host: () => z.value,
       isOpen: () => r.value,
-      contentId: () => h,
+      contentId: () => $,
       hasPopup: () => "dialog"
     });
-    const { lockScroll: U, unlockScroll: Z } = ve(), I = me(() => $.value), C = we(), H = b(
-      () => i.zIndex === "auto" ? C.zIndex.value : i.zIndex
+    const { lockScroll: U, unlockScroll: Z } = ve(), C = me(() => I.value), p = ge(), H = g(
+      () => i.zIndex === "auto" ? p.zIndex.value : i.zIndex
     ), O = ee(!1);
-    async function p(e) {
+    async function y(e) {
       if (!i.beforeClose) {
         r.value = !1;
         return;
@@ -70,46 +70,48 @@ const $e = { class: "drawer-mobile" }, Ie = {
       }
     }
     function P(e) {
-      e.key === "Escape" && (g("escapeKeyDown", e), e.defaultPrevented || p("escapeKey"));
+      e.key === "Escape" && (k("escapeKeyDown", e), e.defaultPrevented || y("escapeKey"));
     }
     function X(e) {
-      g("pointerDownOutside", e), !i.disableOutsidePointerEvents && !e.defaultPrevented && p("outsidePointer");
+      k("pointerDownOutside", e), !i.disableOutsidePointerEvents && !e.defaultPrevented && y("outsidePointer");
     }
     function R(e, l) {
-      e.defaultPrevented || !i.beforeClose || (e.preventDefault(), p(l));
+      e.defaultPrevented || !i.beforeClose || (e.preventDefault(), y(l));
     }
     function j(e) {
-      g("escapeKeyDown", e), R(e, "escapeKey");
+      k("escapeKeyDown", e), R(e, "escapeKey");
     }
     function G(e) {
-      g("pointerDownOutside", e), !i.disableOutsidePointerEvents && R(e, "outsidePointer");
+      k("pointerDownOutside", e), !i.disableOutsidePointerEvents && R(e, "outsidePointer");
     }
-    const J = b(() => r.value && !S.value), { visible: Q, dataState: M } = be(
+    const J = g(() => r.value && !E.value), { visible: Q, dataState: M } = be(
       J,
       K,
       {
         onOpen: () => {
-          C.acquire(), U(), I.activate({ focusDelayMs: K }), document.addEventListener("keydown", P);
+          p.acquire(), U(), C.activate({ focusDelayMs: K }), document.addEventListener("keydown", P);
         },
         onCloseStart: () => {
-          I.deactivate(), document.removeEventListener("keydown", P);
+          C.deactivate(), document.removeEventListener("keydown", P);
         },
         onCloseEnd: () => {
-          Z(), C.release();
+          Z(), p.release();
         }
       }
     );
     let D;
-    return te($, (e) => {
-      D?.(), D = e ? fe(e, X) : void 0;
+    return te(I, (e) => {
+      p.registerElement(e), D?.(), D = e ? fe(e, X, {
+        ignore: () => p.elementsAbove()
+      }) : void 0;
     }), oe(() => {
-      D?.(), document.removeEventListener("keydown", P), I.deactivate();
+      D?.(), document.removeEventListener("keydown", P), C.deactivate();
     }), V({
-      requestClose: (e = "programmatic") => p(e)
-    }), (e, l) => t(S) ? (s(), w(t(pe), {
+      requestClose: (e = "programmatic") => y(e)
+    }), (e, l) => t(E) ? (s(), w(t(pe), {
       key: 0,
       open: r.value,
-      "onUpdate:open": l[0] || (l[0] = (y) => r.value = y),
+      "onUpdate:open": l[0] || (l[0] = (b) => r.value = b),
       "z-index": o.zIndex,
       "disable-outside-pointer-events": o.disableOutsidePointerEvents,
       "disable-swipe-to-close": !!o.beforeClose,
@@ -124,7 +126,7 @@ const $e = { class: "drawer-mobile" }, Ie = {
             key: 0,
             id: v,
             class: "drawer-mobile__title"
-          }, t(a)("title")), N(o.title.text), 17)) : c("", !0),
+          }, t(a)("title")), A(o.title.text), 17)) : c("", !0),
           o.divider ? (s(), u("div", Ie)) : c("", !0),
           d("div", n({ class: "drawer-mobile__content" }, t(a)("body")), [
             f(e.$slots, "title", {}, void 0, !0),
@@ -142,8 +144,8 @@ const $e = { class: "drawer-mobile" }, Ie = {
     }, [
       e.$slots.trigger ? {
         name: "trigger",
-        fn: m((y) => [
-          f(e.$slots, "trigger", se(ae(y)), void 0, !0)
+        fn: m((b) => [
+          f(e.$slots, "trigger", se(ae(b)), void 0, !0)
         ]),
         key: "0"
       } : void 0
@@ -154,7 +156,7 @@ const $e = { class: "drawer-mobile" }, Ie = {
         ref: z,
         class: "drawer-trigger"
       }, t(a)("trigger"), {
-        onClick: l[1] || (l[1] = (y) => r.value = !0)
+        onClick: l[1] || (l[1] = (b) => r.value = !0)
       }), [
         f(e.$slots, "trigger", { props: L.value }, void 0, !0)
       ], 16)) : c("", !0),
@@ -169,28 +171,28 @@ const $e = { class: "drawer-mobile" }, Ie = {
               "data-state": t(M)
             }, t(a)("overlay")), null, 16, Ce),
             d("div", n({
-              id: h,
+              id: $,
               ref_key: "contentRef",
-              ref: $,
+              ref: I,
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": v,
-              "aria-describedby": e.$slots.default ? B : void 0,
+              "aria-describedby": e.$slots.default ? S : void 0,
               class: ["drawer-content", `drawer-content--${o.position}`],
               "data-state": t(M),
               style: F.value
             }, { ...e.$attrs, ...t(a)("content") }), [
               d("div", Pe, [
-                o.title?.text ? (s(), w(x(E.value), n({
+                o.title?.text ? (s(), w(N(B.value), n({
                   key: 0,
                   id: v,
                   class: "drawer-content__title"
                 }, t(a)("title")), {
                   default: m(() => [
-                    le(N(o.title.text), 1)
+                    le(A(o.title.text), 1)
                   ]),
                   _: 1
-                }, 16)) : e.$slots.title ? (s(), w(x(E.value), n({
+                }, 16)) : e.$slots.title ? (s(), w(N(B.value), n({
                   key: 1,
                   id: v,
                   class: "drawer-content__title"
@@ -211,14 +213,14 @@ const $e = { class: "drawer-mobile" }, Ie = {
                   class: "drawer-content__close",
                   "aria-label": o.closeButton.label ?? "Закрыть"
                 }, t(a)("close"), {
-                  onClick: l[2] || (l[2] = (y) => p("closeButton"))
+                  onClick: l[2] || (l[2] = (b) => y("closeButton"))
                 }), [
                   de(t(ue), { size: 20 })
                 ], 16, De)) : c("", !0)
               ]),
-              o.divider ? (s(), u("div", Se)) : c("", !0),
+              o.divider ? (s(), u("div", Ee)) : c("", !0),
               d("div", n({
-                id: B,
+                id: S,
                 class: "drawer-content__wrapper"
               }, t(a)("body")), [
                 f(e.$slots, "default", {}, void 0, !0)

package/dist/components/v2/Popover/Popover.css

@@ -1 +1 @@
-.popover-trigger[data-v-3289c013]{display:block}.popover-mobile[data-v-3289c013]{width:100%}.popover-content[data-v-3289c013]{z-index:1001;background-color:var(--theme-neutral-0);filter:drop-shadow(-1px 1px 10px #8d8f9340);border-radius:16px;position:fixed}.popover-content[data-state=open][data-v-3289c013]{animation:fadeIn var(--animation-duration) ease-in-out}.popover-content[data-state=closed][data-v-3289c013]{animation:fadeOut var(--animation-duration) ease-in-out}.popover-arrow[data-v-3289c013]{background-color:var(--theme-neutral-0);pointer-events:none;width:10px;height:10px;position:absolute;transform:rotate(45deg)}.popover-arrow--bottom[data-v-3289c013]{top:-5px}.popover-arrow--top[data-v-3289c013]{bottom:-5px}.popover-arrow--right[data-v-3289c013]{left:-5px}.popover-arrow--left[data-v-3289c013]{right:-5px}
+.popover-trigger[data-v-cb7adfa2]{display:block}.popover-trigger--content[data-v-cb7adfa2]{width:fit-content}.popover-mobile[data-v-cb7adfa2]{width:100%}.popover-content[data-v-cb7adfa2]{z-index:1001;background-color:var(--theme-neutral-0);filter:drop-shadow(-1px 1px 10px #8d8f9340);border-radius:16px;position:fixed}.popover-content[data-state=open][data-v-cb7adfa2]{animation:fadeIn var(--animation-duration) ease-in-out}.popover-content[data-state=closed][data-v-cb7adfa2]{animation:fadeOut var(--animation-duration) ease-in-out}.popover-arrow[data-v-cb7adfa2]{background-color:var(--theme-neutral-0);pointer-events:none;width:10px;height:10px;position:absolute;transform:rotate(45deg)}.popover-arrow--bottom[data-v-cb7adfa2]{top:-5px}.popover-arrow--top[data-v-cb7adfa2]{bottom:-5px}.popover-arrow--right[data-v-cb7adfa2]{left:-5px}.popover-arrow--left[data-v-cb7adfa2]{right:-5px}

package/dist/components/v2/Popover/Popover.types.d.ts

@@ -32,6 +32,19 @@ export interface PopoverProps {
      * именно на него — иначе связь ведёт на безролевую обёртку.
      */
     triggerControls?: string;
+    /**
+     * Ширина обёртки слота `trigger`.
+     *
+     * По умолчанию `full` — обёртка блочная и занимает всю доступную ширину.
+     * Так нужно тем, у кого сам триггер растянут по ней (`Select` задаёт
+     * кнопке `width: 100%`, и от `content` она схлопнулась бы в ноль).
+     *
+     * `content` обтягивает содержимое. Нужно полям, которые в макете идут по
+     * своему содержимому, а не по ширине контейнера: иначе обёртка
+     * растягивается на всю строку, ловит клики мимо поля и сдвигает точку, от
+     * которой считается положение попапа.
+     */
+    triggerWidth?: 'full' | 'content';
     /**
      * Удерживать фокус внутри попапа, пока он открыт, и вернуть его на триггер
      * при закрытии. Отключается для попапов, которые управляют фокусом сами.

package/dist/components/v2/Popover/Popover.vue.d.ts

@@ -49,6 +49,7 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
     labelledBy: string;
     triggerHasPopup: "dialog" | "menu" | "listbox" | "grid" | "tree";
     triggerControls: string;
+    triggerWidth: "full" | "content";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
     triggerRef: HTMLSpanElement;
     contentRef: HTMLDivElement;

package/dist/components/v2/Popover/Popover.vue.js

@@ -2,7 +2,7 @@ import './Popover.css';
 import o from "./Popover.vue2.js";
 /* empty css             */
 import r from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-3289c013"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-cb7adfa2"]]);
 export {
-  _ as default
+  f as default
 };