@profitliga/ui 2.0.3 → 2.0.5

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

@@ -1,7 +1,7 @@
-import { defineComponent as $, useModel as p, useTemplateRef as M, computed as n, openBlock as h, createBlock as B, unref as L, mergeProps as P, createSlots as W, withCtx as a, createVNode as g, renderSlot as i, mergeModels as m } from "vue";
-import { useElementSize as C } from "@vueuse/core";
-import I from "../Input/Input.vue.js";
-import S from "./InputSelectChip.vue.js";
+import { defineComponent as $, useModel as p, useTemplateRef as B, computed as s, openBlock as M, createBlock as h, unref as L, mergeProps as g, createSlots as P, withCtx as a, createVNode as S, renderSlot as i, mergeModels as m } from "vue";
+import { useElementSize as W } from "@vueuse/core";
+import C from "../Input/Input.vue.js";
+import I from "./InputSelectChip.vue.js";
 const R = 234, F = /* @__PURE__ */ $({
   inheritAttrs: !1,
   __name: "InputSelect",
@@ -10,7 +10,7 @@ const R = 234, F = /* @__PURE__ */ $({
     selectPlaceholder: { default: "Label" },
     selectLabel: { default: void 0 },
     dropdownWidth: { default: void 0 },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     size: { default: "default" },
     nativeType: { default: "text" },
     label: { default: void 0 },
@@ -40,11 +40,11 @@ const R = 234, F = /* @__PURE__ */ $({
   }),
   emits: /* @__PURE__ */ m(["input", "change", "focus", "blur", "enter", "clear", "select"], ["update:modelValue", "update:selected"]),
   setup(o, { emit: b }) {
-    const s = o, d = b, u = p(o, "modelValue"), r = p(o, "selected"), f = M("inputRef"), v = n(() => f.value?.$el), { width: c } = C(v), y = n(
-      () => s.dropdownWidth ?? (Math.round(c.value) || R)
-    ), k = n(
-      () => s.selectLabel ?? s.selectPlaceholder
-    ), V = n(() => {
+    const n = o, d = b, u = p(o, "modelValue"), r = p(o, "selected"), f = B("inputRef"), v = s(() => f.value?.$el), { width: c } = W(v), y = s(
+      () => n.dropdownWidth ?? (Math.round(c.value) || R)
+    ), k = s(
+      () => n.selectLabel ?? n.selectPlaceholder
+    ), V = s(() => {
       const {
         options: t,
         selectPlaceholder: e,
@@ -52,10 +52,10 @@ const R = 234, F = /* @__PURE__ */ $({
         dropdownWidth: T,
         breakpointMobile: x,
         ...w
-      } = s;
+      } = n;
       return w;
     });
-    return (t, e) => (h(), B(L(I), P({
+    return (t, e) => (M(), h(L(C), g({
       ref_key: "inputRef",
       ref: f,
       modelValue: u.value,
@@ -68,9 +68,9 @@ const R = 234, F = /* @__PURE__ */ $({
       onBlur: e[6] || (e[6] = (l) => d("blur", l)),
       onEnter: e[7] || (e[7] = (l) => d("enter", l)),
       onClear: e[8] || (e[8] = (l) => d("clear"))
-    }), W({
+    }), P({
       "control-start": a(() => [
-        g(S, {
+        S(I, {
           modelValue: r.value,
           "onUpdate:modelValue": e[0] || (e[0] = (l) => r.value = l),
           options: o.options,

package/dist/components/v2/InputSelect/InputSelectChip.css

@@ -1 +1 @@
-.input-chip[data-v-7ffc00f6]{flex-shrink:0;align-self:stretch;display:flex}.input-chip[data-v-7ffc00f6] .popover-trigger{align-items:stretch;display:flex}.input-chip__button[data-v-7ffc00f6]{padding:.5rem var(--field-chip-padding-x);font:inherit;font-weight:500;font-size:var(--field-chip-font-size);white-space:nowrap;color:var(--theme-primary-600);background-color:var(--theme-primary-75);cursor:pointer;transition:color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.25rem;line-height:1rem;display:flex}.input-chip__button[data-v-7ffc00f6]:hover:not(:disabled){background-color:var(--theme-primary-200)}.input-chip__button[data-v-7ffc00f6]:focus-visible{outline:.125rem solid var(--theme-primary-500);outline-offset:-.125rem}.input-chip__button[data-v-7ffc00f6]:disabled{cursor:not-allowed;color:var(--theme-neutral-300);background-color:var(--theme-neutral-surface-disabled)}.input-chip__label[data-v-7ffc00f6]{text-overflow:ellipsis;overflow:hidden}.input-chip__arrow[data-v-7ffc00f6]{width:var(--field-chip-icon-size);height:var(--field-chip-icon-size);flex-shrink:0}.input-chip-list[data-v-7ffc00f6]{outline:none;flex-direction:column;gap:.5rem;padding:.5rem;display:flex}.input-chip-list__option[data-v-7ffc00f6]{width:100%;min-height:2rem;font:inherit;text-align:left;color:var(--theme-neutral-text-title);cursor:pointer;transition:background-color var(--animation-duration-fast) ease;background-color:#0000;border:none;border-radius:.5rem;align-items:center;gap:.5rem;padding:.25rem .5rem;font-size:.875rem;font-weight:400;line-height:1.25rem;display:flex}.input-chip-list__option[data-v-7ffc00f6]:hover:not(.input-chip-list__option--disabled),.input-chip-list__option--active[data-v-7ffc00f6]{background-color:var(--theme-secondary-50)}.input-chip-list__option--disabled[data-v-7ffc00f6]{cursor:not-allowed;opacity:.5}.input-chip-list__label[data-v-7ffc00f6]{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}
+.input-chip[data-v-6f0af893]{flex-shrink:0;align-self:stretch;display:flex}.input-chip[data-v-6f0af893] .popover-trigger{align-items:stretch;display:flex}.input-chip__button[data-v-6f0af893]{padding:.5rem var(--field-chip-padding-x);font:inherit;font-weight:500;font-size:var(--field-chip-font-size);white-space:nowrap;color:var(--theme-primary-600);background-color:var(--theme-primary-75);cursor:pointer;transition:color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.25rem;line-height:1rem;display:flex}.input-chip__button[data-v-6f0af893]:hover:not(:disabled){background-color:var(--theme-primary-200)}.input-chip__button[data-v-6f0af893]:focus-visible{outline:.125rem solid var(--theme-primary-500);outline-offset:-.125rem}.input-chip__button[data-v-6f0af893]:disabled{cursor:not-allowed;color:var(--theme-neutral-300);background-color:var(--theme-neutral-surface-disabled)}.input-chip__label[data-v-6f0af893]{text-overflow:ellipsis;overflow:hidden}.input-chip__arrow[data-v-6f0af893]{width:var(--field-chip-icon-size);height:var(--field-chip-icon-size);flex-shrink:0}.input-chip-list[data-v-6f0af893]{outline:none;flex-direction:column;gap:.5rem;padding:.5rem;display:flex}.input-chip-list__option[data-v-6f0af893]{width:100%;min-height:2rem;font:inherit;text-align:left;color:var(--theme-neutral-text-title);cursor:pointer;transition:background-color var(--animation-duration-fast) ease;background-color:#0000;border:none;border-radius:.5rem;align-items:center;gap:.5rem;padding:.25rem .5rem;font-size:.875rem;font-weight:400;line-height:1.25rem;display:flex}.input-chip-list__option[data-v-6f0af893]:hover:not(.input-chip-list__option--disabled),.input-chip-list__option--active[data-v-6f0af893]{background-color:var(--theme-secondary-50)}.input-chip-list__option--disabled[data-v-6f0af893]{cursor:not-allowed;opacity:.5}.input-chip-list__label[data-v-6f0af893]{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}

package/dist/components/v2/InputSelect/InputSelectChip.vue.d.ts

@@ -1,4 +1,4 @@
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 import { InputSelectOption } from './InputSelect.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 interface Props {
@@ -10,7 +10,7 @@ interface Props {
     /** Доступное имя чипа и списка */
     label: string;
     disabled?: boolean;
-    breakpointMobile?: TBreakpoints;
+    breakpointMobile?: TBreakpointMobile;
     testId?: string;
 }
 type __VLS_Props = Props;
@@ -25,7 +25,7 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
     onSelect?: ((option: InputSelectOption) => any) | undefined;
 }>, {
     disabled: boolean;
-    breakpointMobile: TBreakpoints;
+    breakpointMobile: TBreakpointMobile;
     testId: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
     listRef: HTMLDivElement;

package/dist/components/v2/InputSelect/InputSelectChip.vue.js

@@ -2,7 +2,7 @@ import './InputSelectChip.css';
 import t from "./InputSelectChip.vue2.js";
 /* empty css                     */
 import o from "../../../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ o(t, [["__scopeId", "data-v-7ffc00f6"]]);
+const a = /* @__PURE__ */ o(t, [["__scopeId", "data-v-6f0af893"]]);
 export {
-  c as default
+  a as default
 };

package/dist/components/v2/InputSelect/InputSelectChip.vue2.js

@@ -1,28 +1,28 @@
-import { defineComponent as N, useModel as O, ref as y, useId as P, useTemplateRef as U, computed as b, watch as h, openBlock as m, createElementBlock as _, createVNode as g, unref as u, withCtx as E, createElementVNode as f, Fragment as q, renderList as H, mergeProps as $, toDisplayString as C, mergeModels as S, nextTick as j } from "vue";
+import { defineComponent as N, useModel as O, ref as M, useId as P, useTemplateRef as U, computed as b, watch as h, openBlock as m, createElementBlock as _, createVNode as g, unref as u, withCtx as E, createElementVNode as f, Fragment as q, renderList as H, mergeProps as S, toDisplayString as $, mergeModels as C, nextTick as j } from "vue";
 import { ChevronDown as z } from "@lucide/vue";
 import G from "../Popover/Popover.vue.js";
 import J from "../Radio/RadioMarker.vue.js";
 import { useTestId as Q } from "../shared/useTestId.util.js";
 const W = { class: "input-chip" }, X = ["disabled"], Y = { class: "input-chip__label" }, Z = ["aria-label", "aria-activedescendant"], ee = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], te = { class: "input-chip-list__label" }, re = /* @__PURE__ */ N({
   __name: "InputSelectChip",
-  props: /* @__PURE__ */ S({
+  props: /* @__PURE__ */ C({
     options: {},
     width: {},
     placeholder: {},
     label: {},
     disabled: { type: Boolean, default: !1 },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     testId: { default: void 0 }
   }, {
     modelValue: { default: void 0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ S(["select"], ["update:modelValue"]),
-  setup(o, { emit: R }) {
-    const i = o, V = R, r = O(o, "modelValue"), s = y(!1), d = `input-chip-list-${P()}`, k = Q(() => i.testId), p = U("listRef"), a = y(-1), B = b(
+  emits: /* @__PURE__ */ C(["select"], ["update:modelValue"]),
+  setup(o, { emit: B }) {
+    const i = o, R = B, r = O(o, "modelValue"), s = M(!1), d = `input-chip-list-${P()}`, k = Q(() => i.testId), p = U("listRef"), a = M(-1), V = b(
       () => i.options.find((e) => e.value === r.value)
     ), T = b(
-      () => B.value?.label ?? i.placeholder
+      () => V.value?.label ?? i.placeholder
     ), A = b(
       () => a.value === -1 ? void 0 : `${d}-option-${a.value}`
     );
@@ -74,17 +74,17 @@ const W = { class: "input-chip" }, X = ["disabled"], Y = { class: "input-chip__l
         case " ": {
           const l = i.options[a.value];
           if (!l) break;
-          e.preventDefault(), D(l);
+          e.preventDefault(), y(l);
           break;
         }
       }
     }
-    function D(e) {
-      e.disabled || (r.value = e.value, V("select", e), s.value = !1);
+    function y(e) {
+      e.disabled || (r.value = e.value, R("select", e), s.value = !1);
     }
-    let M = null;
+    let D = null;
     return h(s, (e) => {
-      e ? (M = document.activeElement, a.value = -1) : (a.value = -1, M?.focus());
+      e ? (D = document.activeElement, a.value = -1) : (a.value = -1, D?.focus());
     }), h(p, (e) => {
       e && s.value && I();
     }), h(
@@ -107,12 +107,12 @@ const W = { class: "input-chip" }, X = ["disabled"], Y = { class: "input-chip__l
         "trigger-controls": d
       }, {
         trigger: E(({ props: t }) => [
-          f("button", $({
+          f("button", S({
             type: "button",
             class: "input-chip__button",
             disabled: o.disabled
           }, { ...t, ...u(k)("select-trigger") }), [
-            f("span", Y, C(T.value), 1),
+            f("span", Y, $(T.value), 1),
             g(u(z), {
               class: "input-chip__arrow",
               "stroke-width": 2,
@@ -132,7 +132,7 @@ const W = { class: "input-chip" }, X = ["disabled"], Y = { class: "input-chip__l
             class: "input-chip-list",
             onKeydown: L
           }, [
-            (m(!0), _(q, null, H(o.options, (t, n) => (m(), _("div", $({
+            (m(!0), _(q, null, H(o.options, (t, n) => (m(), _("div", S({
               id: `${d}-option-${n}`,
               key: t.value,
               role: "option",
@@ -144,7 +144,7 @@ const W = { class: "input-chip" }, X = ["disabled"], Y = { class: "input-chip__l
               "aria-selected": t.value === r.value,
               "aria-disabled": t.disabled || void 0
             }, { ref_for: !0 }, u(k)("select-option", t.value), {
-              onClick: (c) => D(t),
+              onClick: (c) => y(t),
               onMouseenter: (c) => K(n, t.disabled)
             }), [
               g(u(J), {
@@ -152,7 +152,7 @@ const W = { class: "input-chip" }, X = ["disabled"], Y = { class: "input-chip__l
                 disabled: t.disabled,
                 state: a.value === n ? "hover" : "default"
               }, null, 8, ["checked", "disabled", "state"]),
-              f("span", te, C(t.label), 1)
+              f("span", te, $(t.label), 1)
             ], 16, ee))), 128))
           ], 40, Z)
         ]),

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

@@ -1 +1 @@
-.popover-trigger[data-v-a20b3039]{display:block}.popover-mobile[data-v-a20b3039]{width:100%}.popover-content[data-v-a20b3039]{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-a20b3039]{animation:fadeIn var(--animation-duration) ease-in-out}.popover-content[data-state=closed][data-v-a20b3039]{animation:fadeOut var(--animation-duration) ease-in-out}.popover-arrow[data-v-a20b3039]{background-color:var(--theme-neutral-0);pointer-events:none;width:10px;height:10px;position:absolute;transform:rotate(45deg)}.popover-arrow--bottom[data-v-a20b3039]{top:-5px}.popover-arrow--top[data-v-a20b3039]{bottom:-5px}.popover-arrow--right[data-v-a20b3039]{left:-5px}.popover-arrow--left[data-v-a20b3039]{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

@@ -1,4 +1,4 @@
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
 export type PopoverAlign = 'start' | 'center' | 'end';
 export interface PopoverProps {
@@ -9,7 +9,7 @@ export interface PopoverProps {
     alignOffset?: number;
     arrow?: boolean;
     zIndex?: number | 'auto';
-    breakpointMobile?: TBreakpoints;
+    breakpointMobile?: TBreakpointMobile;
     disableOutsidePointerEvents?: boolean;
     /**
      * Доступное имя попапа (`aria-label`). Роль `dialog` проставляется только
@@ -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

@@ -1,6 +1,6 @@
 import { PopoverProps, PopoverSide, PopoverAlign } from './Popover.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 type __VLS_Props = PopoverProps;
 type __VLS_PublicProps = {
     'open'?: boolean;
@@ -43,12 +43,13 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
     sideOffset: number;
     align: PopoverAlign;
     alignOffset: number;
-    breakpointMobile: TBreakpoints;
+    breakpointMobile: TBreakpointMobile;
     arrow: boolean;
     testId: string;
     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 m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-a20b3039"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-cb7adfa2"]]);
 export {
-  m as default
+  f as default
 };

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

@@ -1,14 +1,14 @@
-import { defineComponent as se, useModel as ae, useId as le, computed as g, useTemplateRef as F, reactive as K, ref as re, watch as de, onBeforeUnmount as fe, openBlock as h, createElementBlock as T, Fragment as ue, mergeProps as z, unref as c, renderSlot as S, createCommentVNode as A, createBlock as W, withCtx as U, createElementVNode as G, mergeModels as Z, nextTick as ce } from "vue";
-import { breakpoints as pe } from "../../../utils/breakpoints.util.js";
-import { onClickOutside as me } from "../../../utils/onClickOutside.util.js";
-import { useFocusTrap as ve } from "../../../utils/useFocusTrap.util.js";
-import ge from "../BottomSheet/BottomSheet.vue.js";
+import { defineComponent as se, useModel as ae, useId as le, computed as m, useTemplateRef as W, reactive as F, ref as re, watch as de, onBeforeUnmount as fe, openBlock as h, createElementBlock as T, Fragment as ue, mergeProps as z, unref as c, renderSlot as S, createCommentVNode as A, createBlock as K, withCtx as U, createElementVNode as G, mergeModels as Z, nextTick as ce } from "vue";
+import { onClickOutside as pe } from "../../../utils/onClickOutside.util.js";
+import { useFocusTrap as ge } from "../../../utils/useFocusTrap.util.js";
+import ve from "../BottomSheet/BottomSheet.vue.js";
 import { ANIMATION_DURATION_MS as j } from "../shared/animation.const.js";
-import he from "../shared/Portal.vue.js";
-import { useDelayedVisibility as we } from "../shared/useDelayedVisibility.util.js";
+import me from "../shared/Portal.vue.js";
+import { useDelayedVisibility as he } from "../shared/useDelayedVisibility.util.js";
+import { useIsMobile as we } from "../shared/useIsMobile.util.js";
 import { useTestId as be } from "../shared/useTestId.util.js";
 import { useTriggerAria as ye } from "../shared/useTriggerAria.util.js";
-const Oe = { class: "popover-mobile" }, xe = ["role", "aria-label", "aria-labelledby", "data-state"], M = 10, p = 8, ze = /* @__PURE__ */ se({
+const Oe = { class: "popover-mobile" }, xe = ["role", "aria-label", "aria-labelledby", "data-state"], k = 10, p = 8, ze = /* @__PURE__ */ se({
   inheritAttrs: !1,
   __name: "Popover",
   props: /* @__PURE__ */ Z({
@@ -19,12 +19,13 @@ const Oe = { class: "popover-mobile" }, xe = ["role", "aria-label", "aria-labell
     alignOffset: { default: 0 },
     arrow: { type: Boolean, default: !0 },
     zIndex: { default: "auto" },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     disableOutsidePointerEvents: { type: Boolean, default: !1 },
     label: { default: void 0 },
     labelledBy: { default: void 0 },
     triggerHasPopup: { default: "dialog" },
     triggerControls: { default: void 0 },
+    triggerWidth: { default: "full" },
     trapFocus: { type: Boolean, default: !0 },
     testId: { default: void 0 }
   }, {
@@ -32,14 +33,14 @@ const Oe = { class: "popover-mobile" }, xe = ["role", "aria-label", "aria-labell
     openModifiers: {}
   }),
   emits: /* @__PURE__ */ Z(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
-  setup(a, { emit: q }) {
-    const e = a, w = q, r = ae(a, "open"), H = pe.smaller(e.breakpointMobile), E = `popover-content-${le()}`, R = be(() => e.testId), J = g(
+  setup(s, { emit: q }) {
+    const e = s, w = q, r = ae(s, "open"), H = we(e.breakpointMobile), E = `popover-content-${le()}`, I = be(() => e.testId), J = m(
       () => e.label || e.labelledBy ? "dialog" : void 0
     );
     function Q() {
       r.value = !r.value;
     }
-    const X = g(() => ({
+    const X = m(() => ({
       "aria-haspopup": e.triggerHasPopup,
       "aria-expanded": r.value,
       "aria-controls": r.value ? E : void 0
@@ -47,25 +48,25 @@ const Oe = { class: "popover-mobile" }, xe = ["role", "aria-label", "aria-labell
     function N() {
       r.value = !1;
     }
-    const Y = g(() => r.value && !H.value), b = F("triggerRef"), m = F("contentRef"), I = ve(() => m.value);
+    const Y = m(() => r.value && !H.value), b = W("triggerRef"), g = W("contentRef"), R = ge(() => g.value);
     ye({
       host: () => b.value,
       isOpen: () => r.value,
       contentId: () => e.triggerControls ?? E,
       hasPopup: () => e.triggerHasPopup
     });
-    const l = K({
+    const l = F({
       top: 0,
       left: 0,
       side: e.side
-    }), y = K({ x: 0, y: 0 }), B = re(!1);
+    }), y = F({ x: 0, y: 0 }), B = re(!1);
     function _() {
-      const o = b.value, s = m.value;
-      if (!o || !s) return;
-      const t = o.getBoundingClientRect(), n = s.getBoundingClientRect(), x = window.innerWidth, V = window.innerHeight, D = V - t.bottom, $ = t.top, C = t.left, L = x - t.right;
+      const o = b.value, a = g.value;
+      if (!o || !a) return;
+      const t = o.getBoundingClientRect(), n = a.getBoundingClientRect(), x = window.innerWidth, V = window.innerHeight, $ = V - t.bottom, D = t.top, C = t.left, L = x - t.right;
       let i = e.side;
-      const k = i === "top" || i === "bottom" ? n.height : n.width;
-      i === "bottom" && D < k + e.sideOffset && $ > D ? i = "top" : i === "top" && $ < k + e.sideOffset && D > $ ? i = "bottom" : i === "right" && L < k + e.sideOffset && C > L ? i = "left" : i === "left" && C < k + e.sideOffset && L > C && (i = "right");
+      const M = i === "top" || i === "bottom" ? n.height : n.width;
+      i === "bottom" && $ < M + e.sideOffset && D > $ ? i = "top" : i === "top" && D < M + e.sideOffset && $ > D ? i = "bottom" : i === "right" && L < M + e.sideOffset && C > L ? i = "left" : i === "left" && C < M + e.sideOffset && L > C && (i = "right");
       let f, u;
       i === "bottom" || i === "top" ? (f = i === "bottom" ? t.bottom + e.sideOffset : t.top - n.height - e.sideOffset, e.align === "start" ? u = t.left + e.alignOffset : e.align === "end" ? u = t.right - n.width - e.alignOffset : u = t.left + t.width / 2 - n.width / 2 + e.alignOffset) : (u = i === "right" ? t.right + e.sideOffset : t.left - n.width - e.sideOffset, e.align === "start" ? f = t.top + e.alignOffset : e.align === "end" ? f = t.bottom - n.height - e.alignOffset : f = t.top + t.height / 2 - n.height / 2 + e.alignOffset), u = Math.min(
         Math.max(u, p),
@@ -81,19 +82,19 @@ const Oe = { class: "popover-mobile" }, xe = ["role", "aria-label", "aria-labell
         )
       ), l.top = f, l.left = u, l.side = i, y.x = t.left + t.width / 2, y.y = t.top + t.height / 2, B.value = !0;
     }
-    const ee = g(() => ({
+    const ee = m(() => ({
       top: `${l.top}px`,
       left: `${l.left}px`,
       width: `${e.width}px`,
       visibility: B.value ? void 0 : "hidden",
       ...e.zIndex !== "auto" ? { zIndex: e.zIndex } : {}
-    })), te = g(() => {
+    })), te = m(() => {
       if (l.side === "top" || l.side === "bottom") {
-        const n = Math.max(12, e.width - 12 - M), x = y.x - l.left - M / 2;
+        const n = Math.max(12, e.width - 12 - k), x = y.x - l.left - k / 2;
         return { left: `${Math.min(Math.max(x, 12), n)}px` };
       }
-      const o = m.value?.offsetHeight ?? 0, s = Math.max(12, o - 12 - M), t = y.y - l.top - M / 2;
-      return { top: `${Math.min(Math.max(t, 12), s)}px` };
+      const o = g.value?.offsetHeight ?? 0, a = Math.max(12, o - 12 - k), t = y.y - l.top - k / 2;
+      return { top: `${Math.min(Math.max(t, 12), a)}px` };
     });
     function d() {
       ce(_);
@@ -104,44 +105,44 @@ const Oe = { class: "popover-mobile" }, xe = ["role", "aria-label", "aria-labell
     function oe(o) {
       w("pointerDownOutside", o), !e.disableOutsidePointerEvents && !o.defaultPrevented && N();
     }
-    const { visible: ie, dataState: ne } = we(
+    const { visible: ie, dataState: ne } = he(
       Y,
       j,
       {
         onOpen: () => {
-          B.value = !1, document.addEventListener("keydown", P), window.addEventListener("resize", d), window.addEventListener("scroll", d, !0), d(), e.trapFocus && I.activate({ focusDelayMs: j });
+          B.value = !1, document.addEventListener("keydown", P), window.addEventListener("resize", d), window.addEventListener("scroll", d, !0), d(), e.trapFocus && R.activate({ focusDelayMs: j });
         },
         onCloseStart: () => {
-          document.removeEventListener("keydown", P), window.removeEventListener("resize", d), window.removeEventListener("scroll", d, !0), I.deactivate();
+          document.removeEventListener("keydown", P), window.removeEventListener("resize", d), window.removeEventListener("scroll", d, !0), R.deactivate();
         }
       }
     );
     let O, v;
-    return de(m, (o) => {
-      O?.(), v?.disconnect(), o ? (O = me(o, oe, {
+    return de(g, (o) => {
+      O?.(), v?.disconnect(), o ? (O = pe(o, oe, {
         ignore: [b]
       }), v = new ResizeObserver(d), v.observe(o)) : (O = void 0, v = void 0);
     }), fe(() => {
-      O?.(), v?.disconnect(), document.removeEventListener("keydown", P), window.removeEventListener("resize", d), window.removeEventListener("scroll", d, !0), I.deactivate();
-    }), (o, s) => (h(), T(ue, null, [
+      O?.(), v?.disconnect(), document.removeEventListener("keydown", P), window.removeEventListener("resize", d), window.removeEventListener("scroll", d, !0), R.deactivate();
+    }), (o, a) => (h(), T(ue, null, [
       o.$slots.trigger ? (h(), T("span", z({
         key: 0,
         ref_key: "triggerRef",
         ref: b,
-        class: "popover-trigger"
-      }, c(R)("trigger"), { onClick: Q }), [
+        class: ["popover-trigger", `popover-trigger--${s.triggerWidth}`]
+      }, c(I)("trigger"), { onClick: Q }), [
         S(o.$slots, "trigger", { props: X.value }, void 0, !0)
       ], 16)) : A("", !0),
-      c(H) ? (h(), W(c(ge), {
+      c(H) ? (h(), K(c(ve), {
         key: 1,
         open: r.value,
-        "onUpdate:open": s[0] || (s[0] = (t) => r.value = t),
-        "disable-outside-pointer-events": a.disableOutsidePointerEvents,
-        label: a.label,
-        "labelled-by": a.labelledBy,
-        "test-id": a.testId,
-        onEscapeKeyDown: s[1] || (s[1] = (t) => w("escapeKeyDown", t)),
-        onPointerDownOutside: s[2] || (s[2] = (t) => w("pointerDownOutside", t))
+        "onUpdate:open": a[0] || (a[0] = (t) => r.value = t),
+        "disable-outside-pointer-events": s.disableOutsidePointerEvents,
+        label: s.label,
+        "labelled-by": s.labelledBy,
+        "test-id": s.testId,
+        onEscapeKeyDown: a[1] || (a[1] = (t) => w("escapeKeyDown", t)),
+        onPointerDownOutside: a[2] || (a[2] = (t) => w("pointerDownOutside", t))
       }, {
         default: U(() => [
           G("div", Oe, [
@@ -149,24 +150,24 @@ const Oe = { class: "popover-mobile" }, xe = ["role", "aria-label", "aria-labell
           ])
         ]),
         _: 3
-      }, 8, ["open", "disable-outside-pointer-events", "label", "labelled-by", "test-id"])) : c(ie) ? (h(), W(he, { key: 2 }, {
+      }, 8, ["open", "disable-outside-pointer-events", "label", "labelled-by", "test-id"])) : c(ie) ? (h(), K(me, { key: 2 }, {
         default: U(() => [
           G("div", z({
             id: E,
             ref_key: "contentRef",
-            ref: m,
+            ref: g,
             role: J.value,
-            "aria-label": a.labelledBy ? void 0 : a.label,
-            "aria-labelledby": a.labelledBy,
+            "aria-label": s.labelledBy ? void 0 : s.label,
+            "aria-labelledby": s.labelledBy,
             "data-state": c(ne),
             class: "popover-content",
             style: ee.value
-          }, { ...o.$attrs, ...c(R)("content") }), [
-            a.arrow ? (h(), T("div", z({
+          }, { ...o.$attrs, ...c(I)("content") }), [
+            s.arrow ? (h(), T("div", z({
               key: 0,
               class: ["popover-arrow", `popover-arrow--${l.side}`],
               style: te.value
-            }, c(R)("arrow")), null, 16)) : A("", !0),
+            }, c(I)("arrow")), null, 16)) : A("", !0),
             S(o.$slots, "default", {}, void 0, !0)
           ], 16, xe)
         ]),

package/dist/components/v2/Radio/Radio.css

@@ -1 +1 @@
-.radio[data-v-b337a8cb]{cursor:pointer;align-items:flex-start;gap:.5rem;display:inline-flex}.radio__input[data-v-b337a8cb]{clip-path:inset(50%);white-space:nowrap;border:0;width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}.radio__text[data-v-b337a8cb]{flex-direction:column;gap:.25rem;min-width:0;display:flex}.radio__label[data-v-b337a8cb]{color:var(--theme-neutral-text-title);overflow-wrap:break-word;font-size:.875rem;font-weight:400;line-height:1.25rem}.radio__description[data-v-b337a8cb]{color:var(--theme-neutral-text-caption);overflow-wrap:break-word;font-size:1rem;font-weight:400;line-height:1.25rem}.radio[data-v-b337a8cb]:not(:has(.radio__description)){align-items:center}.radio--small .radio__label[data-v-b337a8cb]{font-size:.75rem;line-height:1rem}.radio--disabled[data-v-b337a8cb]{cursor:not-allowed;opacity:.5}.radio--disabled .radio__label[data-v-b337a8cb]{color:var(--theme-neutral-500)}
+.radio[data-v-1ce22716]{cursor:pointer;align-items:flex-start;gap:.5rem;display:inline-flex}.radio__input[data-v-1ce22716]{clip-path:inset(50%);white-space:nowrap;border:0;width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}.radio__text[data-v-1ce22716]{flex-direction:column;gap:.25rem;min-width:0;display:flex}.radio__content[data-v-1ce22716]{flex:1 1 0;min-width:0}.radio__label[data-v-1ce22716]{color:var(--theme-neutral-text-title);overflow-wrap:break-word;font-size:.875rem;font-weight:400;line-height:1.25rem}.radio__description[data-v-1ce22716]{color:var(--theme-neutral-text-caption);overflow-wrap:break-word;font-size:1rem;font-weight:400;line-height:1.25rem}.radio[data-v-1ce22716]:not(:has(.radio__description)):not(:has(.radio__content)){align-items:center}.radio--small .radio__label[data-v-1ce22716]{font-size:.75rem;line-height:1rem}.radio--disabled[data-v-1ce22716]{cursor:not-allowed;opacity:.5}.radio--disabled .radio__label[data-v-1ce22716]{color:var(--theme-neutral-500)}

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

@@ -7,6 +7,10 @@ type __VLS_PublicProps = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        content?(_: {
+            checked: boolean;
+            disabled: boolean;
+        }): any;
         default?(_: {}): any;
         description?(_: {}): any;
     };

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

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