@profitliga/ui 2.0.2 → 2.0.4

package/dist/components/v2/AlertDialog/AlertDialog.css

@@ -1 +1 @@
-.alert-dialog-trigger[data-v-143a5f3e]{display:contents}.alert-dialog-layer[data-v-143a5f3e]{position:relative}.alert-dialog-icon[data-v-143a5f3e]{--icon-bg:var(--color-primary-600);--icon-shadow:#008925b2;box-sizing:border-box;width:44px;height:44px;color:var(--color-neutral-0);background-color:var(--icon-bg);box-shadow:-1px 1px 10px 0px var(--icon-shadow);filter:opacity(.7);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;padding:8px;display:flex}.alert-dialog-icon--success[data-v-143a5f3e]{--icon-bg:var(--color-primary-600);--icon-shadow:#008925b2}.alert-dialog-icon--warning[data-v-143a5f3e]{--icon-bg:var(--color-warn-600);--icon-shadow:#d47d16b2}.alert-dialog-icon--error[data-v-143a5f3e]{--icon-bg:var(--color-error-600);--icon-shadow:#bd2429b2}.alert-dialog-content[data-v-143a5f3e]{box-sizing:content-box;scrollbar-width:thin;scrollbar-color:var(--theme-neutral-icon-primary) var(--theme-neutral-surface-icon);width:90vw;max-height:85vh;overflow-y:auto}.alert-dialog-content[data-v-143a5f3e]::-webkit-scrollbar{width:8px;height:0}.alert-dialog-content[data-v-143a5f3e]::-webkit-scrollbar-thumb{background-color:var(--theme-neutral-icon-primary);background-clip:padding-box;border:1px solid #0000;border-radius:999px}.alert-dialog-content[data-v-143a5f3e]::-webkit-scrollbar-track{background:var(--theme-neutral-surface-icon);border-radius:4px}.alert-dialog-content[data-v-143a5f3e]::-webkit-scrollbar-corner{background:0 0}.alert-dialog-content[data-v-143a5f3e]{box-sizing:border-box;z-index:1001;background-color:#fff;border-radius:12px;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.alert-dialog-content[data-state=open][data-v-143a5f3e]{animation:fadeIn var(--animation-duration) ease-in-out}.alert-dialog-content[data-state=closed][data-v-143a5f3e]{animation:fadeOut var(--animation-duration) ease-in-out}.alert-dialog-content__header[data-v-143a5f3e]{justify-content:flex-start;align-items:center;gap:12px;width:100%;margin-bottom:20px;display:flex}.alert-dialog-content__header--divided[data-v-143a5f3e]{border-bottom:1px solid var(--color-secondary-250);margin-bottom:12px;padding-bottom:12px}.alert-dialog-content__title[data-v-143a5f3e]{width:100%;color:var(--theme-neutral-text-title);margin:0;font-size:1.25rem;font-weight:500;line-height:120%}.alert-dialog-content__title--with-icon[data-v-143a5f3e]{font-weight:700}.alert-dialog-content__description[data-v-143a5f3e]{width:100%;color:var(--theme-neutral-text-body);margin:0 0 12px;font-size:1rem;font-weight:400;line-height:160%}.alert-dialog-content__actions[data-v-143a5f3e]{justify-content:flex-end;align-items:center;gap:12px;width:100%;margin-top:20px;display:flex}.alert-dialog-mobile[data-v-143a5f3e]{box-sizing:border-box;flex-direction:column;gap:16px;width:100%;padding:16px;display:flex}.alert-dialog-mobile__header[data-v-143a5f3e]{justify-content:flex-start;align-items:center;gap:12px;display:flex}.alert-dialog-mobile__header--divided[data-v-143a5f3e]{border-bottom:1px solid var(--color-secondary-250);padding-bottom:12px}.alert-dialog-mobile__title[data-v-143a5f3e]{color:var(--theme-neutral-text-title);margin:0;font-size:1.125rem;font-weight:500;line-height:1.5}.alert-dialog-mobile__title--with-icon[data-v-143a5f3e]{font-weight:700}.alert-dialog-mobile__description[data-v-143a5f3e]{color:var(--theme-neutral-text-body);font-size:1rem;font-weight:400;line-height:160%}.alert-dialog-mobile__actions[data-v-143a5f3e]{flex-direction:column-reverse;gap:8px;width:100%;display:flex}.alert-dialog-mobile__actions[data-v-143a5f3e] button{width:100%}
+.alert-dialog-trigger[data-v-4f6feced]{display:contents}.alert-dialog-layer[data-v-4f6feced]{position:relative}.alert-dialog-icon[data-v-4f6feced]{--icon-bg:var(--color-primary-600);--icon-shadow:#008925b2;box-sizing:border-box;width:44px;height:44px;color:var(--color-neutral-0);background-color:var(--icon-bg);box-shadow:-1px 1px 10px 0px var(--icon-shadow);filter:opacity(.7);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;padding:8px;display:flex}.alert-dialog-icon--success[data-v-4f6feced]{--icon-bg:var(--color-primary-600);--icon-shadow:#008925b2}.alert-dialog-icon--warning[data-v-4f6feced]{--icon-bg:var(--color-warn-600);--icon-shadow:#d47d16b2}.alert-dialog-icon--error[data-v-4f6feced]{--icon-bg:var(--color-error-600);--icon-shadow:#bd2429b2}.alert-dialog-content[data-v-4f6feced]{box-sizing:content-box;scrollbar-width:thin;scrollbar-color:var(--theme-neutral-icon-primary) var(--theme-neutral-surface-icon);width:90vw;max-height:85vh;overflow-y:auto}.alert-dialog-content[data-v-4f6feced]::-webkit-scrollbar{width:8px;height:0}.alert-dialog-content[data-v-4f6feced]::-webkit-scrollbar-thumb{background-color:var(--theme-neutral-icon-primary);background-clip:padding-box;border:1px solid #0000;border-radius:999px}.alert-dialog-content[data-v-4f6feced]::-webkit-scrollbar-track{background:var(--theme-neutral-surface-icon);border-radius:4px}.alert-dialog-content[data-v-4f6feced]::-webkit-scrollbar-corner{background:0 0}.alert-dialog-content[data-v-4f6feced]{box-sizing:border-box;z-index:1001;background-color:#fff;border-radius:12px;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.alert-dialog-content[data-state=open][data-v-4f6feced]{animation:fadeIn var(--animation-duration) ease-in-out}.alert-dialog-content[data-state=closed][data-v-4f6feced]{animation:fadeOut var(--animation-duration) ease-in-out}.alert-dialog-content__header[data-v-4f6feced]{justify-content:flex-start;align-items:center;gap:12px;width:100%;margin-bottom:20px;display:flex}.alert-dialog-content__header--divided[data-v-4f6feced]{border-bottom:1px solid var(--color-secondary-250);margin-bottom:12px;padding-bottom:12px}.alert-dialog-content__title[data-v-4f6feced]{width:100%;color:var(--theme-neutral-text-title);margin:0;font-size:1.25rem;font-weight:500;line-height:120%}.alert-dialog-content__title--with-icon[data-v-4f6feced]{font-weight:700}.alert-dialog-content__description[data-v-4f6feced]{width:100%;color:var(--theme-neutral-text-body);margin:0 0 12px;font-size:1rem;font-weight:400;line-height:160%}.alert-dialog-content__actions[data-v-4f6feced]{justify-content:flex-end;align-items:center;gap:12px;width:100%;margin-top:20px;display:flex}.alert-dialog-mobile[data-v-4f6feced]{box-sizing:border-box;flex-direction:column;gap:16px;width:100%;padding:16px;display:flex}.alert-dialog-mobile__header[data-v-4f6feced]{justify-content:flex-start;align-items:center;gap:12px;display:flex}.alert-dialog-mobile__header--divided[data-v-4f6feced]{border-bottom:1px solid var(--color-secondary-250);padding-bottom:12px}.alert-dialog-mobile__title[data-v-4f6feced]{color:var(--theme-neutral-text-title);margin:0;font-size:1.125rem;font-weight:500;line-height:1.5}.alert-dialog-mobile__title--with-icon[data-v-4f6feced]{font-weight:700}.alert-dialog-mobile__description[data-v-4f6feced]{color:var(--theme-neutral-text-body);font-size:1rem;font-weight:400;line-height:160%}.alert-dialog-mobile__actions[data-v-4f6feced]{flex-direction:column-reverse;gap:8px;width:100%;display:flex}.alert-dialog-mobile__actions[data-v-4f6feced] button{width:100%}

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

@@ -1,8 +1,8 @@
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 export type AlertDialogVariant = 'success' | 'warning' | 'error';
 export interface AlertDialogProps {
     width?: number;
-    breakpointMobile?: TBreakpoints;
+    breakpointMobile?: TBreakpointMobile;
     /**
      * Статус диалога. Добавляет в шапку цветную плашку с иконкой:
      * success — галочка, warning и error — восклицательный знак.

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

@@ -1,6 +1,6 @@
 import { AlertDialogProps, AlertDialogVariant } from './AlertDialog.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 type __VLS_Props = AlertDialogProps;
 type __VLS_PublicProps = {
     'open'?: boolean;
@@ -40,7 +40,7 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
 }>, {
     width: number;
     variant: AlertDialogVariant;
-    breakpointMobile: TBreakpoints;
+    breakpointMobile: TBreakpointMobile;
     divider: boolean;
     testId: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {

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

@@ -2,7 +2,7 @@ import './AlertDialog.css';
 import o from "./AlertDialog.vue2.js";
 /* empty css                 */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-143a5f3e"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4f6feced"]]);
 export {
-  f as default
+  a as default
 };

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

@@ -1,12 +1,12 @@
 import { defineComponent as W, useModel as Z, useId as j, computed as m, useTemplateRef as R, onBeforeUnmount as G, openBlock as o, createElementBlock as n, Fragment as H, mergeProps as i, unref as t, renderSlot as s, createCommentVNode as d, createBlock as g, withCtx as A, createElementVNode as c, normalizeClass as T, resolveDynamicComponent as z, normalizeStyle as J, mergeModels as O } from "vue";
 import { CircleCheck as Q, CircleAlert as X } from "@lucide/vue";
-import { breakpoints as Y } from "../../../utils/breakpoints.util.js";
-import { useBodyScroll as x } from "../../../utils/useBodyScroll.util.js";
-import { useFocusTrap as ee } from "../../../utils/useFocusTrap.util.js";
-import te from "../BottomSheet/BottomSheet.vue.js";
+import { useBodyScroll as Y } from "../../../utils/useBodyScroll.util.js";
+import { useFocusTrap as x } from "../../../utils/useFocusTrap.util.js";
+import ee from "../BottomSheet/BottomSheet.vue.js";
 import { ANIMATION_DURATION_MS as _ } from "../shared/animation.const.js";
-import oe from "../shared/Portal.vue.js";
-import { useDelayedVisibility as ae } from "../shared/useDelayedVisibility.util.js";
+import te from "../shared/Portal.vue.js";
+import { useDelayedVisibility as oe } from "../shared/useDelayedVisibility.util.js";
+import { useIsMobile as ae } from "../shared/useIsMobile.util.js";
 import { useLayerZIndex as ie } from "../shared/useLayerZIndex.util.js";
 import { useTestId as le } from "../shared/useTestId.util.js";
 import { useTriggerAria as se } from "../shared/useTriggerAria.util.js";
@@ -15,7 +15,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
   __name: "AlertDialog",
   props: /* @__PURE__ */ O({
     width: { default: 500 },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     variant: { default: void 0 },
     divider: { type: Boolean, default: void 0 },
     testId: { default: void 0 }
@@ -25,35 +25,35 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
   }),
   emits: /* @__PURE__ */ O(["escapeKeyDown"], ["update:open"]),
   setup(l, { emit: N }) {
-    const u = l, I = Y.smaller(u.breakpointMobile), w = N, r = Z(l, "open"), y = j(), p = `alert-dialog-title-${y}`, C = `alert-dialog-description-${y}`, k = `alert-dialog-content-${y}`, K = m(() => `${u.width}px`), a = le(() => u.testId), L = m(() => ({
+    const u = l, I = ae(u.breakpointMobile), w = N, r = Z(l, "open"), y = j(), p = `alert-dialog-title-${y}`, C = `alert-dialog-description-${y}`, b = `alert-dialog-content-${y}`, K = m(() => `${u.width}px`), a = le(() => u.testId), L = m(() => ({
       "aria-haspopup": "dialog",
       "aria-expanded": r.value,
-      "aria-controls": r.value ? k : void 0
-    })), D = m(
+      "aria-controls": r.value ? b : void 0
+    })), S = m(
       () => u.variant === "success" ? Q : X
-    ), S = m(() => u.divider ?? !!u.variant), B = R("triggerRef"), E = R("contentRef");
+    ), B = m(() => u.divider ?? !!u.variant), D = R("triggerRef"), M = R("contentRef");
     se({
-      host: () => B.value,
+      host: () => D.value,
       isOpen: () => r.value,
-      contentId: () => k,
+      contentId: () => b,
       hasPopup: () => "dialog"
     });
-    const { lockScroll: P, unlockScroll: U } = x(), b = ee(() => E.value), $ = ie();
+    const { lockScroll: P, unlockScroll: U } = Y(), k = x(() => M.value), $ = ie();
     function V() {
       r.value = !1;
     }
     function h(e) {
       e.key === "Escape" && (w("escapeKeyDown", e), e.defaultPrevented || V());
     }
-    const F = m(() => r.value && !I.value), { visible: q, dataState: M } = ae(
+    const F = m(() => r.value && !I.value), { visible: q, dataState: E } = oe(
       F,
       _,
       {
         onOpen: () => {
-          $.acquire(), P(), b.activate({ focusDelayMs: _ }), document.addEventListener("keydown", h);
+          $.acquire(), P(), k.activate({ focusDelayMs: _ }), document.addEventListener("keydown", h);
         },
         onCloseStart: () => {
-          b.deactivate(), document.removeEventListener("keydown", h);
+          k.deactivate(), document.removeEventListener("keydown", h);
         },
         onCloseEnd: () => {
           U(), $.release();
@@ -61,19 +61,19 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
       }
     );
     return G(() => {
-      document.removeEventListener("keydown", h), b.deactivate();
+      document.removeEventListener("keydown", h), k.deactivate();
     }), (e, v) => (o(), n(H, null, [
       e.$slots.trigger ? (o(), n("span", i({
         key: 0,
         ref_key: "triggerRef",
-        ref: B,
+        ref: D,
         class: "alert-dialog-trigger"
       }, t(a)("trigger"), {
         onClick: v[0] || (v[0] = (f) => r.value = !0)
       }), [
         s(e.$slots, "trigger", { props: L.value }, void 0, !0)
       ], 16)) : d("", !0),
-      t(I) ? (o(), g(t(te), {
+      t(I) ? (o(), g(t(ee), {
         key: 1,
         open: r.value,
         "onUpdate:open": v[1] || (v[1] = (f) => r.value = f),
@@ -87,7 +87,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
           c("div", re, [
             c("div", {
               class: T(["alert-dialog-mobile__header", {
-                "alert-dialog-mobile__header--divided": S.value
+                "alert-dialog-mobile__header--divided": B.value
               }])
             }, [
               l.variant ? (o(), n("span", i({
@@ -95,7 +95,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
                 class: ["alert-dialog-icon", `alert-dialog-icon--${l.variant}`]
               }, t(a)("icon")), [
                 s(e.$slots, "icon", {}, () => [
-                  (o(), g(z(D.value), { size: 28 }))
+                  (o(), g(z(S.value), { size: 28 }))
                 ], !0)
               ], 16)) : d("", !0),
               c("h2", i({
@@ -122,7 +122,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
           ])
         ]),
         _: 3
-      }, 8, ["open", "test-id"])) : t(q) ? (o(), g(oe, { key: 2 }, {
+      }, 8, ["open", "test-id"])) : t(q) ? (o(), g(te, { key: 2 }, {
         default: A(() => [
           c("div", {
             class: "alert-dialog-layer",
@@ -130,23 +130,23 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
           }, [
             c("div", i({
               class: "overlay alert-dialog-overlay",
-              "data-state": t(M)
+              "data-state": t(E)
             }, t(a)("overlay")), null, 16, ne),
             c("div", i({
-              id: k,
+              id: b,
               ref_key: "contentRef",
-              ref: E,
+              ref: M,
               role: "alertdialog",
               "aria-modal": "true",
               "aria-labelledby": p,
               "aria-describedby": e.$slots.default ? C : void 0,
-              "data-state": t(M),
+              "data-state": t(E),
               class: "alert-dialog-content",
               style: { maxWidth: K.value }
             }, { ...e.$attrs, ...t(a)("content") }), [
               c("div", {
                 class: T(["alert-dialog-content__header", {
-                  "alert-dialog-content__header--divided": S.value
+                  "alert-dialog-content__header--divided": B.value
                 }])
               }, [
                 l.variant ? (o(), n("span", i({
@@ -154,7 +154,7 @@ const re = { class: "alert-dialog-mobile" }, ne = ["data-state"], de = ["aria-de
                   class: ["alert-dialog-icon", `alert-dialog-icon--${l.variant}`]
                 }, t(a)("icon")), [
                   s(e.$slots, "icon", {}, () => [
-                    (o(), g(z(D.value), { size: 28 }))
+                    (o(), g(z(S.value), { size: 28 }))
                   ], !0)
                 ], 16)) : d("", !0),
                 c("h2", i({

package/dist/components/v2/Checkbox/Checkbox.css

@@ -1 +1 @@
-.checkbox-v2[data-v-b2ea32b4]{--checkbox-color:var(--theme-neutral-border-default);cursor:pointer;align-items:flex-start;gap:.5rem;display:inline-flex}.checkbox-v2__input[data-v-b2ea32b4]{clip-path:inset(50%);white-space:nowrap;border:0;width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}.checkbox-v2__box[data-v-b2ea32b4]{width:1.25rem;height:1.25rem;color:var(--theme-neutral-0);border:.0625rem solid var(--checkbox-color);transition:background-color var(--animation-duration-fast) ease, border-color var(--animation-duration-fast) ease, outline-color var(--animation-duration-fast) ease;border-radius:.3125rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.checkbox-v2__mark[data-v-b2ea32b4]{width:100%;height:100%}.checkbox-v2__text[data-v-b2ea32b4]{flex-direction:column;gap:.25rem;min-width:0;display:flex}.checkbox-v2__label[data-v-b2ea32b4]{color:var(--theme-neutral-text-title);overflow-wrap:break-word;font-size:.875rem;font-weight:400;line-height:1.25rem}.checkbox-v2__description[data-v-b2ea32b4]{color:var(--theme-neutral-text-caption);overflow-wrap:break-word;font-size:1rem;font-weight:400;line-height:1.25rem}.checkbox-v2[data-v-b2ea32b4]:not(:has(.checkbox-v2__description)){align-items:center}.checkbox-v2--icon-right[data-v-b2ea32b4]{flex-direction:row-reverse}.checkbox-v2--checked .checkbox-v2__box[data-v-b2ea32b4]{background-color:var(--checkbox-color)}.checkbox-v2--checked[data-v-b2ea32b4]{--checkbox-color:var(--theme-primary-500)}.checkbox-v2[data-v-b2ea32b4]:hover:not(.checkbox-v2--disabled){--checkbox-color:var(--theme-primary-300)}.checkbox-v2[data-v-b2ea32b4]:has(.checkbox-v2__input:focus-visible){--checkbox-color:var(--theme-primary-300)}.checkbox-v2:has(.checkbox-v2__input:focus-visible) .checkbox-v2__box[data-v-b2ea32b4]{outline:.0625rem solid var(--theme-primary-300);outline-offset:.125rem}.checkbox-v2[data-v-b2ea32b4]:active:not(.checkbox-v2--disabled){--checkbox-color:var(--theme-primary-700)}.checkbox-v2--disabled[data-v-b2ea32b4]{--checkbox-color:var(--theme-neutral-surface-disabled);cursor:not-allowed;opacity:.5}.checkbox-v2--disabled .checkbox-v2__label[data-v-b2ea32b4]{color:var(--theme-neutral-400)}.checkbox-v2--disabled.checkbox-v2--checked[data-v-b2ea32b4]{--checkbox-color:var(--theme-neutral-icon-disabled)}
+.checkbox-v2[data-v-05f1e5a6]{--checkbox-color:var(--theme-neutral-border-default);cursor:pointer;align-items:flex-start;gap:.5rem;display:inline-flex}.checkbox-v2__input[data-v-05f1e5a6]{clip-path:inset(50%);white-space:nowrap;border:0;width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}.checkbox-v2__box[data-v-05f1e5a6]{width:1.25rem;height:1.25rem;color:var(--theme-neutral-0);border:.0625rem solid var(--checkbox-color);transition:background-color var(--animation-duration-fast) ease, border-color var(--animation-duration-fast) ease, outline-color var(--animation-duration-fast) ease;border-radius:.3125rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.checkbox-v2__mark[data-v-05f1e5a6]{width:100%;height:100%}.checkbox-v2__text[data-v-05f1e5a6]{flex-direction:column;gap:.25rem;min-width:0;display:flex}.checkbox-v2__label[data-v-05f1e5a6]{color:var(--theme-neutral-text-title);overflow-wrap:break-word;font-size:.875rem;font-weight:400;line-height:1.25rem}.checkbox-v2__description[data-v-05f1e5a6]{color:var(--theme-neutral-text-caption);overflow-wrap:break-word;font-size:1rem;font-weight:400;line-height:1.25rem}.checkbox-v2[data-v-05f1e5a6]:not(:has(.checkbox-v2__description)){align-items:center}.checkbox-v2--icon-right[data-v-05f1e5a6]{flex-direction:row-reverse}.checkbox-v2--checked .checkbox-v2__box[data-v-05f1e5a6]{background-color:var(--checkbox-color)}.checkbox-v2--checked[data-v-05f1e5a6]{--checkbox-color:var(--theme-primary-500)}.checkbox-v2[data-v-05f1e5a6]:hover:not(.checkbox-v2--disabled){--checkbox-color:var(--theme-primary-300)}.checkbox-v2[data-v-05f1e5a6]:has(.checkbox-v2__input:focus-visible){--checkbox-color:var(--theme-primary-300)}.checkbox-v2:has(.checkbox-v2__input:focus-visible) .checkbox-v2__box[data-v-05f1e5a6]{outline:.0625rem solid var(--theme-primary-300);outline-offset:.125rem}.checkbox-v2[data-v-05f1e5a6]:active:not(.checkbox-v2--disabled){--checkbox-color:var(--theme-primary-700)}.checkbox-v2--disabled[data-v-05f1e5a6]{--checkbox-color:var(--theme-neutral-surface-disabled);cursor:not-allowed;opacity:.5}.checkbox-v2--disabled .checkbox-v2__label[data-v-05f1e5a6]{color:var(--theme-neutral-400)}.checkbox-v2--disabled.checkbox-v2--checked[data-v-05f1e5a6]{--checkbox-color:var(--theme-neutral-icon-disabled)}.checkbox-v2--error[data-v-05f1e5a6]:not(.checkbox-v2--disabled){--checkbox-color:var(--theme-error-500)}.checkbox-v2--error:not(.checkbox-v2--disabled) .checkbox-v2__label[data-v-05f1e5a6]{color:var(--theme-error-500)}.checkbox-v2__error[data-v-05f1e5a6]{color:var(--theme-error-500);overflow-wrap:break-word;font-size:.875rem;font-weight:400;line-height:1.25rem}

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

@@ -5,6 +5,17 @@ export interface CheckboxProps {
     label?: string;
     /** Пояснение под подписью. Можно заменить слотом `description` */
     description?: string;
+    /**
+     * Состояние ошибки: квадрат и подпись краснеют, показывается
+     * `errorMessage`. Типовой случай — незаполненное согласие на обработку
+     * персональных данных при отправке формы.
+     */
+    error?: boolean;
+    /**
+     * Текст ошибки под флажком. Показывается только при `error: true`, поэтому
+     * проп можно держать заполненным постоянно — так же, как у `Input`.
+     */
+    errorMessage?: string;
     disabled?: boolean;
     iconPosition?: CheckboxIconPosition;
     /** Имя поля в форме */

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

@@ -31,8 +31,10 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
     disabled: boolean;
     id: string;
     iconPosition: CheckboxIconPosition;
+    error: boolean;
     name: string;
     description: string;
+    errorMessage: string;
     ariaLabel: string;
     testId: string;
     ariaLabelledby: string;

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

@@ -2,7 +2,7 @@ import './Checkbox.css';
 import o from "./Checkbox.vue2.js";
 /* empty css              */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-b2ea32b4"]]);
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-05f1e5a6"]]);
 export {
-  m as default
+  f as default
 };

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

@@ -1,26 +1,28 @@
-import { defineComponent as $, useModel as x, useSlots as R, useId as T, useTemplateRef as E, computed as n, watchEffect as N, openBlock as l, createElementBlock as o, mergeProps as d, unref as c, createElementVNode as v, createCommentVNode as f, renderSlot as y, createTextVNode as g, toDisplayString as w, mergeModels as L } from "vue";
-import { useTestId as P } from "../shared/useTestId.util.js";
-const S = ["for"], D = ["id", "name", "value", "checked", "disabled", "aria-label", "aria-labelledby"], A = {
+import { defineComponent as R, useModel as y, useSlots as T, useId as _, useTemplateRef as N, computed as i, watchEffect as P, openBlock as l, createElementBlock as o, mergeProps as n, unref as d, createElementVNode as f, createCommentVNode as c, renderSlot as w, createTextVNode as B, toDisplayString as h, mergeModels as L } from "vue";
+import { useTestId as S } from "../shared/useTestId.util.js";
+const D = ["for"], A = ["id", "name", "value", "checked", "disabled", "aria-label", "aria-labelledby", "aria-invalid"], H = {
   key: 0,
   class: "checkbox-v2__mark",
   viewBox: "0 0 20 20",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, H = {
+}, Z = {
   key: 1,
   class: "checkbox-v2__mark",
   viewBox: "0 0 20 20",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, Z = {
+}, j = {
   key: 0,
   class: "checkbox-v2__text"
-}, z = /* @__PURE__ */ $({
+}, F = /* @__PURE__ */ R({
   inheritAttrs: !1,
   __name: "Checkbox",
   props: /* @__PURE__ */ L({
     label: { default: void 0 },
     description: { default: void 0 },
+    error: { type: Boolean, default: !1 },
+    errorMessage: { default: void 0 },
     disabled: { type: Boolean, default: !1 },
     iconPosition: { default: "left" },
     name: { default: void 0 },
@@ -36,31 +38,36 @@ const S = ["for"], D = ["id", "name", "value", "checked", "disabled", "aria-labe
     indeterminateModifiers: {}
   }),
   emits: /* @__PURE__ */ L(["change"], ["update:modelValue", "update:indeterminate"]),
-  setup(e, { emit: B }) {
-    const t = e, C = B, u = x(e, "modelValue"), r = x(e, "indeterminate"), h = R(), i = P(() => t.testId), V = T(), b = E("inputRef"), m = n(() => t.id ?? `${V}-checkbox`), k = n(() => !!(t.label || h.default)), p = n(
-      () => !!(t.description || h.description)
-    ), I = n(() => k.value || p.value), M = n(() => [
+  setup(e, { emit: M }) {
+    const a = e, C = M, u = y(e, "modelValue"), v = y(e, "indeterminate"), m = T(), s = S(() => a.testId), V = _(), b = N("inputRef"), k = i(() => a.id ?? `${V}-checkbox`), x = i(() => !!(a.label || m.default)), p = i(
+      () => !!(a.description || m.description)
+    ), I = i(
+      () => x.value || p.value || g.value
+    ), $ = i(() => [
       "checkbox-v2",
-      `checkbox-v2--icon-${t.iconPosition}`,
+      `checkbox-v2--icon-${a.iconPosition}`,
       {
-        "checkbox-v2--checked": u.value || r.value,
-        "checkbox-v2--disabled": t.disabled
+        "checkbox-v2--checked": u.value || v.value,
+        "checkbox-v2--disabled": a.disabled,
+        "checkbox-v2--error": a.error
       }
-    ]);
-    N(() => {
-      b.value && (b.value.indeterminate = r.value);
+    ]), g = i(
+      () => !!(a.error && a.errorMessage)
+    );
+    P(() => {
+      b.value && (b.value.indeterminate = v.value);
     });
-    function _(s) {
-      if (t.disabled) return;
-      const a = s.target.checked;
-      r.value = !1, u.value = a, C("change", a);
+    function E(r) {
+      if (a.disabled) return;
+      const t = r.target.checked;
+      v.value = !1, u.value = t, C("change", t);
     }
-    return (s, a) => (l(), o("label", d({
-      class: M.value,
-      for: m.value
-    }, c(i)("root")), [
-      v("input", d({
-        id: m.value,
+    return (r, t) => (l(), o("label", n({
+      class: $.value,
+      for: k.value
+    }, d(s)("root")), [
+      f("input", n({
+        id: k.value,
         ref_key: "inputRef",
         ref: b,
         type: "checkbox",
@@ -70,46 +77,51 @@ const S = ["for"], D = ["id", "name", "value", "checked", "disabled", "aria-labe
         checked: u.value,
         disabled: e.disabled,
         "aria-label": e.ariaLabel,
-        "aria-labelledby": e.ariaLabelledby
-      }, { ...s.$attrs, ...c(i)("input") }, { onChange: _ }), null, 16, D),
-      v("span", d({
+        "aria-labelledby": e.ariaLabelledby,
+        "aria-invalid": e.error || void 0
+      }, { ...r.$attrs, ...d(s)("input") }, { onChange: E }), null, 16, A),
+      f("span", n({
         class: "checkbox-v2__box",
         "aria-hidden": "true"
-      }, c(i)("box")), [
-        r.value ? (l(), o("svg", A, [...a[0] || (a[0] = [
-          v("path", {
+      }, d(s)("box")), [
+        v.value ? (l(), o("svg", H, [...t[0] || (t[0] = [
+          f("path", {
             d: "M4 10H16",
             stroke: "currentColor",
             "stroke-width": "2"
           }, null, -1)
-        ])])) : u.value ? (l(), o("svg", H, [...a[1] || (a[1] = [
-          v("path", {
+        ])])) : u.value ? (l(), o("svg", Z, [...t[1] || (t[1] = [
+          f("path", {
             d: "M8.13636 13.70149L5.03409 10.25373L4 11.40299L8.13636 16L17 6.14925L15.9659 5L8.13636 13.70149Z",
             fill: "currentColor"
           }, null, -1)
-        ])])) : f("", !0)
+        ])])) : c("", !0)
       ], 16),
-      I.value ? (l(), o("span", Z, [
-        k.value ? (l(), o("span", d({
+      I.value ? (l(), o("span", j, [
+        x.value ? (l(), o("span", n({
           key: 0,
           class: "checkbox-v2__label"
-        }, c(i)("label")), [
-          y(s.$slots, "default", {}, () => [
-            g(w(e.label), 1)
+        }, d(s)("label")), [
+          w(r.$slots, "default", {}, () => [
+            B(h(e.label), 1)
           ], !0)
-        ], 16)) : f("", !0),
-        p.value ? (l(), o("span", d({
+        ], 16)) : c("", !0),
+        p.value ? (l(), o("span", n({
           key: 1,
           class: "checkbox-v2__description"
-        }, c(i)("description")), [
-          y(s.$slots, "description", {}, () => [
-            g(w(e.description), 1)
+        }, d(s)("description")), [
+          w(r.$slots, "description", {}, () => [
+            B(h(e.description), 1)
           ], !0)
-        ], 16)) : f("", !0)
-      ])) : f("", !0)
-    ], 16, S));
+        ], 16)) : c("", !0),
+        g.value ? (l(), o("span", n({
+          key: 2,
+          class: "checkbox-v2__error"
+        }, d(s)("error")), h(e.errorMessage), 17)) : c("", !0)
+      ])) : c("", !0)
+    ], 16, D));
   }
 });
 export {
-  z as default
+  F as default
 };

package/dist/components/v2/Combobox/Combobox.css

@@ -1 +1 @@
-.combobox[data-v-621b3df7]{--combobox-field-height:2.5rem;--combobox-field-radius:.5rem;--combobox-font-size:.875rem;--combobox-line-height:1.25rem;--combobox-label-font-size:.875rem;--combobox-label-line-height:1rem;--combobox-border-color:var(--theme-neutral-border-default);flex-direction:column;display:flex}.combobox--small[data-v-621b3df7]{--combobox-field-height:2.25rem;--combobox-label-font-size:.75rem}.combobox--large[data-v-621b3df7]{--combobox-field-height:2.75rem;--combobox-field-radius:.75rem;--combobox-font-size:1rem;--combobox-line-height:1.5rem;--combobox-label-font-size:1rem;--combobox-label-line-height:1.25rem}.combobox__label[data-v-621b3df7]{font-weight:400;font-size:var(--combobox-label-font-size);line-height:var(--combobox-label-line-height);color:var(--theme-neutral-text-title);cursor:pointer;padding:.375rem .5rem}.combobox__field[data-v-621b3df7]{min-height:var(--combobox-field-height);background-color:var(--theme-neutral-0);border:.0625rem solid var(--combobox-border-color);border-radius:var(--combobox-field-radius);cursor:text;transition:border-color var(--animation-duration-fast) ease;align-items:center;gap:.25rem;padding:.25rem .5rem;display:flex}.combobox__content[data-v-621b3df7]{flex:auto;align-items:center;gap:.25rem;min-width:0;display:flex}.combobox__input[data-v-621b3df7]{min-width:2rem;font-family:inherit;font-weight:400;font-size:var(--combobox-font-size);line-height:var(--combobox-line-height);color:var(--theme-neutral-text-body);text-overflow:ellipsis;background:0 0;border:none;outline:none;flex:4rem;order:3;padding:0}@media (max-width:1009.98px){.combobox__input[data-v-621b3df7]{font-size:1rem}}.combobox__input[data-v-621b3df7]::placeholder{color:var(--theme-neutral-550)}.combobox__input[data-v-621b3df7]:disabled{color:var(--theme-neutral-text-disabled);cursor:not-allowed}.combobox__input[data-v-621b3df7]:disabled::placeholder{color:var(--theme-neutral-text-disabled)}.combobox__input[data-v-621b3df7]:read-only{cursor:pointer}.combobox__chips[data-v-621b3df7]{flex:0 auto;order:1;align-items:center;gap:.25rem;min-width:0;display:flex;overflow:hidden}.combobox__chip[data-v-621b3df7]{max-width:100%;height:1.125rem;color:var(--theme-neutral-text-subtitle);background-color:var(--theme-neutral-surface-icon);border-radius:.375rem;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .375rem;font-size:.75rem;font-weight:400;line-height:1rem;display:flex}.combobox__chip-label[data-v-621b3df7]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.combobox__chip-remove[data-v-621b3df7]{color:var(--theme-neutral-icon-caption);cursor:pointer;transition:color var(--animation-duration-fast) ease;background:0 0;border:none;align-items:center;margin:0;padding:0;display:flex}.combobox__chip-remove[data-v-621b3df7]:hover:not(:disabled){color:var(--theme-neutral-text-body)}.combobox__chip-remove[data-v-621b3df7]:focus-visible{outline:.125rem solid var(--theme-primary-500);outline-offset:.125rem}.combobox__chip-remove[data-v-621b3df7]:disabled{cursor:not-allowed}.combobox__chip-icon[data-v-621b3df7],.combobox__chip-avatar[data-v-621b3df7]{flex-shrink:0;width:.75rem;height:.75rem}.combobox__chip-avatar[data-v-621b3df7]{object-fit:cover;border-radius:50%}.combobox__chip--measured[data-v-621b3df7]{visibility:hidden;pointer-events:none;position:absolute;top:0;left:-9999px}.combobox__chip--counter[data-v-621b3df7]{color:var(--theme-neutral-text-caption);flex-shrink:0;order:2}.combobox__arrow-button[data-v-621b3df7]{cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;margin:0;padding:0;display:flex}.combobox__arrow-button[data-v-621b3df7]:disabled{cursor:not-allowed}.combobox__arrow[data-v-621b3df7]{width:1.125rem;height:1.125rem;color:var(--theme-neutral-text-body);transition:transform var(--animation-duration-fast) ease}.combobox__message[data-v-621b3df7]{color:var(--theme-neutral-text-body);margin:0;padding:.25rem .5rem;font-size:.625rem;font-weight:400;line-height:1.2}.combobox[data-v-621b3df7]:hover:not(.combobox--disabled){--combobox-border-color:var(--theme-primary-300)}.combobox--open[data-v-621b3df7],.combobox--open[data-v-621b3df7]:hover{--combobox-border-color:var(--theme-primary-500)}.combobox--open .combobox__arrow[data-v-621b3df7]{transform:rotate(180deg)}.combobox--invalid[data-v-621b3df7]{--combobox-border-color:var(--theme-error-500)}.combobox--invalid .combobox__label[data-v-621b3df7],.combobox--invalid .combobox__message[data-v-621b3df7]{color:var(--theme-error-500)}.combobox--invalid[data-v-621b3df7]:hover:not(.combobox--disabled){--combobox-border-color:var(--theme-error-500)}.combobox--disabled[data-v-621b3df7]{--combobox-border-color:var(--theme-neutral-border-disabled)}.combobox--disabled .combobox__field[data-v-621b3df7]{cursor:not-allowed}.combobox--disabled .combobox__label[data-v-621b3df7],.combobox--disabled .combobox__message[data-v-621b3df7],.combobox--disabled .combobox__arrow[data-v-621b3df7]{color:var(--theme-neutral-text-disabled)}.combobox--disabled .combobox__label[data-v-621b3df7]{cursor:not-allowed}.combobox__field[data-v-621b3df7]:has(.combobox__input:focus-visible){outline:.125rem solid var(--theme-primary-500);outline-offset:.125rem}.combobox-list[data-v-621b3df7]{flex-direction:column;display:flex}.combobox-list__search[data-v-621b3df7]{padding:.5rem .5rem 0}.combobox-list__scroll[data-v-621b3df7]{max-height:15rem;overflow-y:auto}.combobox-list__options[data-v-621b3df7]{flex-direction:column;gap:.5rem;height:max-content;padding:.5rem;display:flex}.combobox-list__option[data-v-621b3df7]{width:100%;min-height:2rem;color:var(--theme-neutral-text-title);text-align:left;cursor:pointer;transition:background-color var(--animation-duration-fast) ease;background-color:#0000;border-radius:.5rem;align-items:flex-start;gap:.5rem;padding:.375rem .5rem;font-size:.875rem;font-weight:400;line-height:1.25rem;display:flex}.combobox-list__option[data-v-621b3df7]:hover:not(.combobox-list__option--disabled),.combobox-list__option--active[data-v-621b3df7]{background-color:var(--theme-secondary-50)}.combobox-list__option--disabled[data-v-621b3df7]{cursor:not-allowed;opacity:.5}.combobox-list__label[data-v-621b3df7]{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}.combobox-list__status[data-v-621b3df7]{color:var(--theme-neutral-text-caption);margin:0;padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem}
+.combobox[data-v-cb477f62]{--combobox-field-height:2.5rem;--combobox-field-radius:.5rem;--combobox-font-size:.875rem;--combobox-line-height:1.25rem;--combobox-label-font-size:.875rem;--combobox-label-line-height:1rem;--combobox-border-color:var(--theme-neutral-border-default);flex-direction:column;display:flex}.combobox--small[data-v-cb477f62]{--combobox-field-height:2.25rem;--combobox-label-font-size:.75rem}.combobox--large[data-v-cb477f62]{--combobox-field-height:2.75rem;--combobox-field-radius:.75rem;--combobox-font-size:1rem;--combobox-line-height:1.5rem;--combobox-label-font-size:1rem;--combobox-label-line-height:1.25rem}.combobox__label[data-v-cb477f62]{font-weight:400;font-size:var(--combobox-label-font-size);line-height:var(--combobox-label-line-height);color:var(--theme-neutral-text-title);cursor:pointer;align-items:center;gap:.125rem;padding:.375rem .5rem;display:flex}.combobox__required[data-v-cb477f62]{color:var(--theme-error-500);flex-shrink:0}.combobox__field[data-v-cb477f62]{min-height:var(--combobox-field-height);background-color:var(--theme-neutral-0);border:.0625rem solid var(--combobox-border-color);border-radius:var(--combobox-field-radius);cursor:text;transition:border-color var(--animation-duration-fast) ease;align-items:center;gap:.25rem;padding:.25rem .5rem;display:flex}.combobox__content[data-v-cb477f62]{flex:auto;align-items:center;gap:.25rem;min-width:0;display:flex}.combobox__input[data-v-cb477f62]{min-width:2rem;font-family:inherit;font-weight:400;font-size:var(--combobox-font-size);line-height:var(--combobox-line-height);color:var(--theme-neutral-text-body);text-overflow:ellipsis;background:0 0;border:none;outline:none;flex:4rem;order:3;padding:0}@media (max-width:1009.98px){.combobox__input[data-v-cb477f62]{font-size:1rem}}.combobox__input[data-v-cb477f62]::placeholder{color:var(--theme-neutral-550)}.combobox__input[data-v-cb477f62]:disabled{color:var(--theme-neutral-text-disabled);cursor:not-allowed}.combobox__input[data-v-cb477f62]:disabled::placeholder{color:var(--theme-neutral-text-disabled)}.combobox__input[data-v-cb477f62]:read-only{cursor:pointer}.combobox__chips[data-v-cb477f62]{flex:0 auto;order:1;align-items:center;gap:.25rem;min-width:0;display:flex;overflow:hidden}.combobox__chip[data-v-cb477f62]{max-width:100%;height:1.125rem;color:var(--theme-neutral-text-subtitle);background-color:var(--theme-neutral-surface-icon);border-radius:.375rem;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .375rem;font-size:.75rem;font-weight:400;line-height:1rem;display:flex}.combobox__chip-label[data-v-cb477f62]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.combobox__chip-remove[data-v-cb477f62]{color:var(--theme-neutral-icon-caption);cursor:pointer;transition:color var(--animation-duration-fast) ease;background:0 0;border:none;align-items:center;margin:0;padding:0;display:flex}.combobox__chip-remove[data-v-cb477f62]:hover:not(:disabled){color:var(--theme-neutral-text-body)}.combobox__chip-remove[data-v-cb477f62]:focus-visible{outline:.125rem solid var(--theme-primary-500);outline-offset:.125rem}.combobox__chip-remove[data-v-cb477f62]:disabled{cursor:not-allowed}.combobox__chip-icon[data-v-cb477f62],.combobox__chip-avatar[data-v-cb477f62]{flex-shrink:0;width:.75rem;height:.75rem}.combobox__chip-avatar[data-v-cb477f62]{object-fit:cover;border-radius:50%}.combobox__chip--measured[data-v-cb477f62]{visibility:hidden;pointer-events:none;position:absolute;top:0;left:-9999px}.combobox__chip--counter[data-v-cb477f62]{color:var(--theme-neutral-text-caption);flex-shrink:0;order:2}.combobox__clear-button[data-v-cb477f62]{color:var(--theme-neutral-icon-caption);cursor:pointer;transition:color var(--animation-duration-fast) ease;background:0 0;border:none;flex-shrink:0;align-items:center;margin:0;padding:0;display:flex}.combobox__clear-button[data-v-cb477f62]:hover{color:var(--theme-neutral-text-body)}.combobox__clear-button[data-v-cb477f62]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.combobox__clear[data-v-cb477f62]{width:1rem;height:1rem}.combobox__arrow-button[data-v-cb477f62]{cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;margin:0;padding:0;display:flex}.combobox__arrow-button[data-v-cb477f62]:disabled{cursor:not-allowed}.combobox__arrow[data-v-cb477f62]{width:1.125rem;height:1.125rem;color:var(--theme-neutral-text-body);transition:transform var(--animation-duration-fast) ease}.combobox__message[data-v-cb477f62]{color:var(--theme-neutral-text-body);margin:0;padding:.25rem .5rem;font-size:.625rem;font-weight:400;line-height:1.2}.combobox[data-v-cb477f62]:hover:not(.combobox--disabled){--combobox-border-color:var(--theme-primary-300)}.combobox--open[data-v-cb477f62],.combobox--open[data-v-cb477f62]:hover{--combobox-border-color:var(--theme-primary-500)}.combobox--open .combobox__arrow[data-v-cb477f62]{transform:rotate(180deg)}.combobox--invalid[data-v-cb477f62]{--combobox-border-color:var(--theme-error-500)}.combobox--invalid .combobox__label[data-v-cb477f62],.combobox--invalid .combobox__message[data-v-cb477f62]{color:var(--theme-error-500)}.combobox--invalid[data-v-cb477f62]:hover:not(.combobox--disabled){--combobox-border-color:var(--theme-error-500)}.combobox--disabled[data-v-cb477f62]{--combobox-border-color:var(--theme-neutral-border-disabled)}.combobox--disabled .combobox__field[data-v-cb477f62]{cursor:not-allowed}.combobox--disabled .combobox__label[data-v-cb477f62],.combobox--disabled .combobox__message[data-v-cb477f62],.combobox--disabled .combobox__arrow[data-v-cb477f62]{color:var(--theme-neutral-text-disabled)}.combobox--disabled .combobox__label[data-v-cb477f62]{cursor:not-allowed}.combobox__field[data-v-cb477f62]:has(.combobox__input:focus-visible){outline:.125rem solid var(--theme-primary-500);outline-offset:.125rem}.combobox-list[data-v-cb477f62]{flex-direction:column;display:flex}.combobox-list__search[data-v-cb477f62]{padding:.5rem .5rem 0}.combobox-list__scroll[data-v-cb477f62]{max-height:15rem;overflow-y:auto}.combobox-list__options[data-v-cb477f62]{flex-direction:column;gap:.5rem;height:max-content;padding:.5rem;display:flex}.combobox-list__option[data-v-cb477f62]{width:100%;min-height:2rem;color:var(--theme-neutral-text-title);text-align:left;cursor:pointer;transition:background-color var(--animation-duration-fast) ease;background-color:#0000;border-radius:.5rem;align-items:flex-start;gap:.5rem;padding:.375rem .5rem;font-size:.875rem;font-weight:400;line-height:1.25rem;display:flex}.combobox-list__option[data-v-cb477f62]:hover:not(.combobox-list__option--disabled),.combobox-list__option--active[data-v-cb477f62]{background-color:var(--theme-secondary-50)}.combobox-list__option--disabled[data-v-cb477f62]{cursor:not-allowed;opacity:.5}.combobox-list__label[data-v-cb477f62]{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}.combobox-list__status[data-v-cb477f62]{color:var(--theme-neutral-text-caption);margin:0;padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem}

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

@@ -1,5 +1,5 @@
 import { Component, VNodeChild } from 'vue';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 import { PopoverAlign, PopoverSide } from '../Popover';
 export type ComboboxSize = 'small' | 'default' | 'large';
 export type ComboboxValue = string | number;
@@ -76,6 +76,12 @@ export interface ComboboxProps<T extends ComboboxOptionData = ComboboxOptionData
     loading?: boolean;
     /** Подпись над полем. */
     label?: string;
+    /**
+     * Обязательное поле: к подписи добавляется красная звёздочка, полю —
+     * `aria-required`. Проверку значения проп на себя не берёт, это забота
+     * формы, — он только помечает поле.
+     */
+    required?: boolean;
     placeholder?: string;
     /** Плейсхолдер поля поиска в мобильной шторке. */
     searchPlaceholder?: string;
@@ -85,6 +91,26 @@ export interface ComboboxProps<T extends ComboboxOptionData = ComboboxOptionData
     invalid?: boolean;
     size?: ComboboxSize;
     disabled?: boolean;
+    /**
+     * Не раскрывать список, пока показывать нечего: ни вариантов, ни загрузки.
+     * Пригодится серверному поиску, где до первого запроса список пуст и пустая
+     * плашка только мешает.
+     *
+     * Прячется только состояние «ещё не искали». Как только в поле есть
+     * запрос, список раскрывается в любом случае — в том числе когда сервер
+     * вернул ноль вариантов: «Ничего не найдено» это и есть ответ на запрос,
+     * прятать его нельзя. Различие важное, и компонент проводит его сам, по
+     * непустому запросу, — отдельного пропа для этого не нужно.
+     *
+     * Внутреннее состояние «открыт» при этом сохраняется: как только придут
+     * варианты или включится `loading`, список раскроется сам, без повторного
+     * клика. По умолчанию выключено — пустое состояние со своим текстом и слотом
+     * `empty` остаётся штатным поведением.
+     *
+     * На мобильных не действует: там поле поиска живёт внутри шторки, и, спрятав
+     * её, запрос было бы негде набрать.
+     */
+    hideEmptyList?: boolean;
     /** Текст пустого списка, когда вариантов нет вовсе. */
     emptyText?: string;
     /** Текст пустого списка, когда под запрос ничего не подошло. */
@@ -110,7 +136,7 @@ export interface ComboboxProps<T extends ComboboxOptionData = ComboboxOptionData
     /** Доступное имя, когда видимой подписи нет. */
     ariaLabel?: string;
     /** Ниже этой ширины экрана список открывается шторкой снизу. */
-    breakpointMobile?: TBreakpoints;
+    breakpointMobile?: TBreakpointMobile;
     /** Базовый `data-testid`; внутренние части получают суффикс имени части. */
     testId?: string;
 }

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

@@ -2,19 +2,20 @@ import { ComboboxOptionData, ComboboxProps, ComboboxSlots, ComboboxValue } from
 import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
 declare const _default: <T extends ComboboxOptionData = ComboboxOptionData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onClear?: (() => any) | undefined;
         readonly onSearch?: ((query: string) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((value: ComboboxValue | ComboboxValue[] | undefined) => any) | undefined;
         readonly onSelect?: ((option: T) => any) | undefined;
         readonly onChange?: ((value: ComboboxValue | ComboboxValue[] | undefined) => any) | undefined;
         readonly "onUpdate:search"?: ((value: string) => any) | undefined;
-    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onUpdate:modelValue" | "onChange" | "onSelect" | "onSearch" | "onUpdate:search"> & ({
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onUpdate:modelValue" | "onChange" | "onSelect" | "onClear" | "onSearch" | "onUpdate:search"> & ({
         modelValue?: ComboboxValue | ComboboxValue[] | undefined;
         search?: string;
     } & ComboboxProps<T>) & Partial<{}>> & PublicProps;
     expose(exposed: ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: Readonly<ComboboxSlots<T>> & ComboboxSlots<T>;
-    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: T) => void) & ((evt: "change", value: ComboboxValue | ComboboxValue[] | undefined) => void)) & (((evt: "update:modelValue", value: ComboboxValue | ComboboxValue[] | undefined) => void) & ((evt: "update:search", value: string) => void));
+    emit: (((evt: "clear") => void) & ((evt: "search", query: string) => void) & ((evt: "select", option: T) => void) & ((evt: "change", value: ComboboxValue | ComboboxValue[] | undefined) => void)) & (((evt: "update:modelValue", value: ComboboxValue | ComboboxValue[] | undefined) => void) & ((evt: "update:search", value: string) => void));
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -2,7 +2,7 @@ import './Combobox.css';
 import o from "./Combobox.vue2.js";
 /* empty css              */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-621b3df7"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-cb477f62"]]);
 export {
   p as default
 };