@telefonica/mistica 17.5.0 → 17.7.0

package/dist-es/tooltip.js

@@ -78,280 +78,291 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as i, jsxs as D, Fragment as bt } from "react/jsx-runtime";
+import { jsx as i, jsxs as k, Fragment as _t } from "react/jsx-runtime";
 import * as s from "react";
-import { useTheme as vt, useBoundingRect as lt, useWindowSize as xt } from "./hooks.js";
-import { Portal as Mt } from "./portal.js";
-import { Transition as Et } from "react-transition-group";
-import { content as St, CONTENT_MIN_WIDTH as wt, tooltipTransitionClasses as Ot, tooltip as Rt, closeButtonIcon as Ct, contentContainer as It, tooltipCenter as _t, arrowContainer as Nt, arrow as yt, container as Lt } from "./tooltip.css-mistica.js";
-import kt from "./stack.js";
-import { Text2 as ct } from "./text.js";
-import { getCssVarValue as At } from "./utils/dom.js";
-import { TAB as $t, ESC as Ft } from "./utils/keys.js";
-import { isTouchableDevice as Bt } from "./utils/environment.js";
-import { isEqual as dt } from "./utils/helpers.js";
+import { useTheme as wt, useBoundingRect as tt, useWindowSize as Ct } from "./hooks.js";
+import { Portal as Nt } from "./portal.js";
+import { Transition as yt } from "react-transition-group";
+import { content as Lt, tooltipTransitionClasses as kt, tooltip as Ft, closeButtonIcon as $t, contentContainer as At, tooltipCenter as Dt, arrowContainer as Bt, arrow as Pt, container as Wt, CONTENT_MIN_WIDTH as zt } from "./tooltip.css-mistica.js";
+import Xt from "./stack.js";
+import { Text2 as dt } from "./text.js";
+import { TAB as Ht, ESC as Yt } from "./utils/keys.js";
+import { isTouchableDevice as Vt } from "./utils/environment.js";
+import { isEqual as pt } from "./utils/helpers.js";
 import et from "classnames";
-import { vars as C } from "./skins/skin-contract.css-mistica.js";
-import { useThemeVariant as Dt, ThemeVariant as Wt } from "./theme-variant-context.js";
-import { combineRefs as Vt } from "./utils/common.js";
-import { useTooltipState as Ht, useSetTooltipState as Xt } from "./tooltip-context-provider.js";
-import { isRunningAcceptanceTest as zt } from "./utils/platform.js";
-import { IconButton as Pt } from "./icon-button.js";
-import Yt from "./generated/mistica-icons/icon-close-regular.js";
-import { closeButtonLabel as Gt } from "./text-tokens.js";
-const ft = (t)=>({
+import { vars as L } from "./skins/skin-contract.css-mistica.js";
+import { useThemeVariant as Gt, ThemeVariant as Kt } from "./theme-variant-context.js";
+import { combineRefs as Ut } from "./utils/common.js";
+import { useTooltipState as jt, useSetTooltipState as Zt } from "./tooltip-context-provider.js";
+import { isRunningAcceptanceTest as qt } from "./utils/platform.js";
+import { IconButton as Jt } from "./icon-button.js";
+import Qt from "./generated/mistica-icons/icon-close-regular.js";
+import { closeButtonLabel as te } from "./text-tokens.js";
+const ft = (e)=>({
         border: `1px solid ${({
-            default: C.colors.border,
-            alternative: C.colors.border,
-            brand: C.colors.backgroundContainer,
-            negative: C.colors.backgroundContainer,
-            media: C.colors.backgroundContainer
-        })[t]}`
-    }), pt = 496, Kt = 300, Ut = 500, jt = 100, p = 20, E = 6, I = E + p / 2 + 1, qt = (t)=>{
-    switch(t){
+            default: L.colors.border,
+            alternative: L.colors.border,
+            brand: L.colors.backgroundContainer,
+            negative: L.colors.backgroundContainer,
+            media: L.colors.backgroundContainer
+        })[e]}`
+    }), mt = 496, ee = 300, oe = 500, re = 100, l = 20, I = 6, z = 1, w = I + l / 2 + z, se = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+}, ie = (e)=>{
+    switch(e){
         case "left":
-            return `translateX(-${E}px)`;
+            return `translateX(-${I}px)`;
         case "right":
-            return `translateX(${E}px)`;
+            return `translateX(${I}px)`;
         case "top":
-            return `translateY(-${E}px)`;
+            return `translateY(-${I}px)`;
         case "bottom":
-            return `translateY(${E}px)`;
+            return `translateY(${I}px)`;
         default:
             return "";
     }
-}, mt = (t)=>{
-    const u = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), T = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), g = t.offsetWidth - u, c = t.offsetHeight - T;
+}, ut = (e)=>{
+    const u = parseFloat(getComputedStyle(e, null).paddingLeft) + parseFloat(getComputedStyle(e, null).paddingRight), n = parseFloat(getComputedStyle(e, null).paddingTop) + parseFloat(getComputedStyle(e, null).paddingBottom), x = e.offsetWidth - u, h = e.offsetHeight - n;
     return {
-        width: g,
-        height: c
+        width: x,
+        height: h
     };
-}, ut = (t, u, T, g, c)=>{
-    if (!t || !u) return;
-    const { top: b, bottom: _, left: W, right: V } = t, v = g - _, S = c - V, o = b, w = W, { width: X, height: z } = mt(u), d = X + I, N = z + I, O = d <= Math.max(w, S), R = N <= Math.max(v, o);
-    if (!(!R && !O)) switch(T){
-        case "left":
-            return O ? d <= w ? "left" : "right" : v > o ? "bottom" : "top";
-        case "right":
-            return O ? d <= S ? "right" : "left" : v > o ? "bottom" : "top";
-        case "top":
-            return R ? N <= o ? "top" : "bottom" : w > S ? "left" : "right";
-        case "bottom":
-            return R ? N <= v ? "bottom" : "top" : w > S ? "left" : "right";
-        default:
-            return;
-    }
-}, Zt = (param)=>{
-    let { content: t, target: u, targetStyle: T, width: g, position: c = "top", dataAttributes: b, delay: _ = !0, centerContent: W, open: V, onClose: v, closeButtonLabel: S, hasPointerInteractionOnly: o = !1, trackingEvent: w } = param;
-    const { texts: X, t: z } = vt(), d = s.useId(), { openTooltipId: N } = Ht(), { openTooltip: O, closeTooltip: R } = Xt(), [H, P] = s.useState(), [Y, G] = s.useState(), K = s.useRef(null), U = s.useRef(null), [y, ht] = s.useState(null), m = Bt(), j = _ ? Ut : 0, [ot, q] = s.useState(!1), [Z, L] = s.useState(!1), J = V !== void 0, [rt, Q] = s.useState(!1), x = J ? V : d === N, st = Dt(), f = lt(K, x), it = lt(U, x, !0), n = xt(), M = s.useCallback(()=>{
-        Q(!1), q(!1), L(!1);
+}, ne = (e, u, n, x, h, p)=>{
+    if (!e || !u) return;
+    const f = {
+        top: e.top,
+        bottom: x - e.bottom,
+        left: e.left,
+        right: h - e.right
+    }, F = ut(u), $ = F.width, A = p === void 0 ? F.height : p + 2 * z, C = (n === "top" || n === "bottom" ? A : $) + w, D = se[n], r = f[n] < C && f[D] > f[n] ? D : n;
+    return (r === "left" || r === "right") && f[r] < C ? f.bottom > f.top ? "bottom" : "top" : r;
+}, ae = (param)=>{
+    let { content: e, target: u, targetStyle: n, width: x, position: h = "top", alignment: p = "middle", dataAttributes: f, delay: F = !0, centerContent: $, open: A, onClose: C, closeButtonLabel: D, hasPointerInteractionOnly: r = !1, trackingEvent: ht } = param;
+    var _a_top, _a_bottom;
+    const { texts: Tt, t: gt, borderRadii: bt } = wt(), m = parseFloat(bt.popup), X = Math.max(zt, 2 * (m + z) + l), E = s.useId(), { openTooltipId: vt } = jt(), { openTooltip: ot, closeTooltip: rt } = Zt(), [B, H] = s.useState(), [Y, V] = s.useState(), G = s.useRef(null), K = s.useRef(null), st = s.useRef(null), [P, xt] = s.useState(null), T = Vt(), U = F ? oe : 0, [it, j] = s.useState(!1), [Z, N] = s.useState(!1), q = A !== void 0, [nt, J] = s.useState(!1), b = q ? A : E === vt, at = Gt(), a = tt(G, b), lt = tt(K, b, !0), Et = tt(st, b, !0), g = Ct(), c = ne(a, P, h, g.height, g.width, Et === null || Et === void 0 ? void 0 : Et.height), St = Math.max(0, (c === "top" ? (_a_top = a === null || a === void 0 ? void 0 : a.top) !== null && _a_top !== void 0 ? _a_top : g.height : c === "bottom" ? g.height - ((_a_bottom = a === null || a === void 0 ? void 0 : a.bottom) !== null && _a_bottom !== void 0 ? _a_bottom : 0) : g.height) - (c === "top" || c === "bottom" ? w : 0) - 2 * z), S = s.useCallback(()=>{
+        J(!1), j(!1), N(!1);
     }, []);
     s.useEffect(()=>{
-        x || M();
+        b || S();
     }, [
-        x,
-        M
+        b,
+        S
     ]), s.useEffect(()=>{
-        if (!y || !x) return;
-        const a = ut(f, y, c, n.height, n.width);
-        if (!a || !f) {
-            P(void 0), G(void 0), M();
+        if (!P || !b) return;
+        if (!c || !a) {
+            H(void 0), V(void 0), S();
             return;
         }
-        let r, e;
-        var _parseInt;
-        const { left: l, right: k, top: A, bottom: $ } = f, { width: F, height: B } = mt(y), nt = n.width - F, at = n.height - B, h = (_parseInt = parseInt(At(C.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
-        switch(a){
+        let o, t;
+        const { left: v, right: d, top: y, bottom: W } = a, { width: R, height: O } = ut(P), Rt = g.width - R, Ot = g.height - O, ct = p === "start" ? 0 : p === "end" ? 1 : 0.5, M = Math.max(0, Math.min(Rt, v + (d - v - R) * ct)), _ = Math.max(0, Math.min(Ot, y + (W - y - O) * ct));
+        switch(c){
             case "top":
-                r = {
-                    left: Math.max(0, Math.min(nt, (l + k - F) / 2)),
-                    top: A - B - p / 2,
-                    padding: `0px 0px ${I}px 0px`
-                }, e = {
-                    left: Math.max(h, Math.min(n.width - h - p, (l + k - p) / 2)),
+                o = {
+                    left: M,
+                    top: y - O - l / 2,
+                    padding: `0px 0px ${w}px 0px`
+                }, t = {
+                    left: Math.max(M + m, Math.min(M + R - m - l, (v + d - l) / 2)),
                     top: "100%"
                 };
                 break;
             case "bottom":
-                r = {
-                    left: Math.max(0, Math.min(nt, (l + k - F) / 2)),
-                    top: $ - E,
-                    padding: `${I}px 0px 0px 0px`
-                }, e = {
-                    left: Math.max(h, Math.min(n.width - h - p, (l + k - p) / 2)),
+                o = {
+                    left: M,
+                    top: W - I,
+                    padding: `${w}px 0px 0px 0px`
+                }, t = {
+                    left: Math.max(M + m, Math.min(M + R - m - l, (v + d - l) / 2)),
                     bottom: "100%",
                     transform: "rotate(180deg)"
                 };
                 break;
             case "left":
-                r = {
-                    left: l - F - p / 2,
-                    top: Math.max(0, Math.min(at, (A + $ - B) / 2)),
-                    padding: `0px ${I}px 0px 0px`
-                }, e = {
-                    top: Math.max(h, Math.min(n.height - h - p, (A + $ - p) / 2)),
+                o = {
+                    left: v - R - l / 2,
+                    top: _,
+                    padding: `0px ${w}px 0px 0px`
+                }, t = {
+                    top: Math.max(_ + m, Math.min(_ + O - m - l, (y + W - l) / 2)),
                     left: "100%",
                     transform: "rotate(-90deg)",
                     transformOrigin: "bottom"
                 };
                 break;
             case "right":
-            default:
-                r = {
-                    left: k - E,
-                    top: Math.max(0, Math.min(at, (A + $ - B) / 2)),
-                    padding: `0px 0px 0px ${I}px`
-                }, e = {
-                    top: Math.max(h, Math.min(n.height - h - p, (A + $ - p) / 2)),
+                o = {
+                    left: d - I,
+                    top: _,
+                    padding: `0px 0px 0px ${w}px`
+                }, t = {
+                    top: Math.max(_ + m, Math.min(_ + O - m - l, (y + W - l) / 2)),
                     right: "100%",
                     transform: "rotate(90deg)",
                     transformOrigin: "bottom"
                 };
                 break;
+            default:
+                {
+                    const Mt = c;
+                    throw new Error(`Invalid tooltip position: ${Mt}`);
+                }
         }
-        typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / B * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / F * 100}%`), dt(r, H) || P(r), dt(e, Y) || G(e);
+        typeof t.top == "number" && (t.top -= o.top, t.top = `${t.top / O * 100}%`), typeof t.left == "number" && (t.left -= o.left, t.left = `${t.left / R * 100}%`), pt(o, B) || H(o), pt(t, Y) || V(t);
     }, [
-        y,
-        f,
-        it,
-        x,
+        P,
+        a,
+        lt,
+        b,
         c,
-        n,
-        H,
+        p,
+        g,
+        B,
         Y,
         m,
-        d,
-        M
+        T,
+        E,
+        S
     ]);
-    const tt = s.useRef(!1);
+    const Q = s.useRef(!1);
     s.useEffect(()=>{
-        const a = (l)=>{
-            switch(l.key){
-                case Ft:
-                    o || M();
+        const o = (d)=>{
+            switch(d.key){
+                case Yt:
+                    r || S();
                     break;
-                case $t:
-                    tt.current = !0;
+                case Ht:
+                    Q.current = !0;
                     break;
             }
-        }, r = ()=>tt.current = !1, e = (l)=>{
-            !o && m && f && (l.clientX < f.left || l.clientX > f.right || l.clientY < f.top || l.clientY > f.bottom) && M();
+        }, t = ()=>Q.current = !1, v = (d)=>{
+            !r && T && a && (d.clientX < a.left || d.clientX > a.right || d.clientY < a.top || d.clientY > a.bottom) && S();
         };
-        return document.addEventListener("keydown", a, !1), document.addEventListener("keyup", r, !1), document.addEventListener("click", e, !1), ()=>{
-            document.removeEventListener("keydown", a, !1), document.removeEventListener("keyup", r, !1), document.removeEventListener("click", e, !1);
+        return document.addEventListener("keydown", o, !1), document.addEventListener("keyup", t, !1), document.addEventListener("click", v, !1), ()=>{
+            document.removeEventListener("keydown", o, !1), document.removeEventListener("keyup", t, !1), document.removeEventListener("click", v, !1);
         };
     }, [
-        m,
-        M,
-        f,
-        o
+        T,
+        S,
+        a,
+        r
     ]), s.useEffect(()=>{
-        J || (Z || ot || rt ? O(d) : R(d));
+        q || (Z || it || nt ? ot(E) : rt(E));
     }, [
         Z,
+        it,
+        nt,
+        E,
         ot,
         rt,
-        d,
-        O,
-        R,
-        J
+        q
     ]);
-    const Tt = ut(f, y, c, n.height, n.width), gt = W !== void 0 ? W : (it === null || it === void 0 ? void 0 : it.width) === wt;
-    return /* @__PURE__ */ D(bt, {
+    const It = $ !== void 0 ? $ : (lt === null || lt === void 0 ? void 0 : lt.width) === X;
+    return /* @__PURE__ */ k(_t, {
         children: [
             /* @__PURE__ */ i("div", {
-                style: T,
-                ref: (a)=>{
-                    const r = a === null || a === void 0 ? void 0 : a.firstElementChild;
-                    r && r !== K.current && (K.current = r);
+                style: n,
+                ref: (o)=>{
+                    const t = o === null || o === void 0 ? void 0 : o.firstElementChild;
+                    t && t !== G.current && (G.current = t);
                 },
                 onMouseOver: ()=>{
-                    !m && !o && L(!0);
+                    !T && !r && N(!0);
                 },
                 onMouseLeave: ()=>{
-                    !m && !o && L(!1);
+                    !T && !r && N(!1);
                 },
                 onClick: ()=>{
-                    (m || o) && L(o ? !Z : !0);
+                    (T || r) && N(r ? !Z : !0);
                 },
                 onFocus: ()=>{
-                    tt.current && !o && Q(!0);
+                    Q.current && !r && J(!0);
                 },
                 onBlur: ()=>{
-                    !m && !o && Q(!1);
+                    !T && !r && J(!1);
                 },
-                "aria-describedby": d,
+                "aria-describedby": E,
                 children: u
             }),
-            /* @__PURE__ */ i(Mt, {
-                children: /* @__PURE__ */ i(Et, {
-                    in: x,
-                    nodeRef: U,
-                    timeout: zt() ? 0 : {
-                        enter: Kt + j,
-                        exit: jt
+            /* @__PURE__ */ i(Nt, {
+                children: /* @__PURE__ */ i(yt, {
+                    in: b,
+                    nodeRef: K,
+                    timeout: qt() ? 0 : {
+                        enter: ee + U,
+                        exit: re
                     },
                     onExited: ()=>{
-                        P(void 0), G(void 0);
+                        H(void 0), V(void 0);
                     },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    children: (a)=>/* @__PURE__ */ i("div", _object_spread_props(_object_spread({
+                    children: (o)=>/* @__PURE__ */ i("div", _object_spread_props(_object_spread({
                             style: {
                                 /**
                * Hack to prevent text from wrapping automatically when touching the viewport's edges,
                * even if the content's width didn't reach the max width.
                * https://stackoverflow.com/questions/66106629/how-to-disable-text-wrapping-when-viewport-border-is-reached
-               */ width: `calc(100vw + ${pt}px)`,
+               */ width: `calc(100vw + ${mt}px)`,
                                 top: 0,
                                 left: 0,
                                 position: "fixed",
-                                visibility: H ? "visible" : "hidden"
+                                visibility: B ? "visible" : "hidden"
                             }
-                        }, b), {
+                        }, f), {
                             role: "tooltip",
-                            "aria-label": d,
+                            "aria-label": E,
                             tabIndex: -1,
                             children: /* @__PURE__ */ i("div", {
-                                className: et(Lt),
+                                className: et(Wt),
                                 style: _object_spread_props(_object_spread({
-                                    pointerEvents: a === "entered" ? "auto" : "none",
-                                    transform: qt(Tt)
-                                }, H, Ot[a]), {
-                                    transition: a === "entering" ? `opacity .1s linear ${j}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${j}ms` : "opacity .1s linear"
+                                    pointerEvents: o === "entered" ? "auto" : "none",
+                                    transform: ie(c)
+                                }, B, kt[o]), {
+                                    transition: o === "entering" ? `opacity .1s linear ${U}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${U}ms` : "opacity .1s linear"
                                 }),
-                                ref: Vt(ht, U),
+                                ref: Ut(xt, K),
                                 onMouseEnter: ()=>{
-                                    !m && a === "entered" && !o && q(!0);
+                                    !T && o === "entered" && !r && j(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    !m && !o && q(!1);
+                                    !T && !r && j(!1);
                                 },
-                                children: /* @__PURE__ */ D("div", {
-                                    className: Rt,
+                                children: /* @__PURE__ */ k("div", {
+                                    className: Ft,
                                     style: _object_spread_props(_object_spread({
-                                        width: g
-                                    }, ft(st)), {
-                                        maxWidth: Math.min(pt, n.width)
+                                        width: x,
+                                        minWidth: X,
+                                        minHeight: c === "left" || c === "right" ? X : void 0
+                                    }, ft(at)), {
+                                        maxWidth: Math.min(mt, g.width)
                                     }),
                                     children: [
                                         /* @__PURE__ */ i("div", {
-                                            className: et(It, {
-                                                [_t]: gt
+                                            style: {
+                                                maxHeight: St
+                                            },
+                                            className: et(At, {
+                                                [Dt]: It
                                             }),
-                                            children: /* @__PURE__ */ D(Wt, {
+                                            children: /* @__PURE__ */ k(Kt, {
                                                 variant: "default",
                                                 children: [
-                                                    t,
-                                                    v && /* @__PURE__ */ i("div", {
-                                                        className: Ct,
-                                                        children: /* @__PURE__ */ i(Pt, {
+                                                    /* @__PURE__ */ i("div", {
+                                                        ref: st,
+                                                        children: e
+                                                    }),
+                                                    C && /* @__PURE__ */ i("div", {
+                                                        className: $t,
+                                                        children: /* @__PURE__ */ i(Jt, {
                                                             onPress: ()=>{
-                                                                L(!1), v();
+                                                                N(!1), C();
                                                             },
-                                                            trackingEvent: w,
-                                                            "aria-label": S || X.closeButtonLabel || z(Gt),
-                                                            Icon: Yt,
+                                                            trackingEvent: ht,
+                                                            "aria-label": D || Tt.closeButtonLabel || gt(te),
+                                                            Icon: Qt,
                                                             small: !0
                                                         })
                                                     })
@@ -359,11 +370,11 @@ const ft = (t)=>({
                                             })
                                         }),
                                         /* @__PURE__ */ i("div", {
-                                            className: Nt,
+                                            className: Bt,
                                             style: Y,
                                             children: /* @__PURE__ */ i("div", {
-                                                className: et(yt),
-                                                style: ft(st)
+                                                className: et(Pt),
+                                                style: ft(at)
                                             })
                                         })
                                     ]
@@ -374,8 +385,8 @@ const ft = (t)=>({
             })
         ]
     });
-}, be = (_param)=>{
-    var { centerContent: t, slot: u, children: T, dataAttributes: g, title: c, description: b } = _param, _ = _object_without_properties(_param, [
+}, _e = (_param)=>{
+    var { centerContent: e, slot: u, children: n, dataAttributes: x, title: h, description: p } = _param, f = _object_without_properties(_param, [
         "centerContent",
         "slot",
         "children",
@@ -383,30 +394,30 @@ const ft = (t)=>({
         "title",
         "description"
     ]);
-    return /* @__PURE__ */ i(Zt, _object_spread({
-        content: /* @__PURE__ */ D("div", {
-            className: St,
+    return /* @__PURE__ */ i(ae, _object_spread({
+        content: /* @__PURE__ */ k("div", {
+            className: Lt,
             children: [
-                (c || b) && /* @__PURE__ */ D(kt, {
+                (h || p) && /* @__PURE__ */ k(Xt, {
                     space: 4,
                     children: [
-                        c && /* @__PURE__ */ i(ct, {
+                        h && /* @__PURE__ */ i(dt, {
                             medium: !0,
-                            children: c
+                            children: h
                         }),
-                        b && /* @__PURE__ */ i(ct, {
+                        p && /* @__PURE__ */ i(dt, {
                             regular: !0,
-                            children: b
+                            children: p
                         })
                     ]
                 }),
-                u !== null && u !== void 0 ? u : T
+                u !== null && u !== void 0 ? u : n
             ]
         }),
-        centerContent: t,
+        centerContent: e,
         dataAttributes: _object_spread({
             testid: "Tooltip"
-        }, g)
-    }, _));
+        }, x)
+    }, f));
 };
-export { Zt as BaseTooltip, be as default };
+export { ae as BaseTooltip, _e as default };

package/dist-es/touchable.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                     */ var t = "v17_5_mhti6u0", h = "v17_5_mhti6u2 v17_5_mhti6u1 v17_5_1y2v1nfuh", n = "v17_5_mhti6u4 v17_5_mhti6u2 v17_5_mhti6u1 v17_5_1y2v1nfuh v17_5_mhti6u3 v17_5_1y2v1nfh7 v17_5_1y2v1nfig v17_5_1y2v1nfjp v17_5_1y2v1nfky v17_5_1y2v1nfrg v17_5_1y2v1nftw v17_5_1y2v1nfs1 v17_5_1y2v1nf8k v17_5_1y2v1nfh6 v17_5_1y2v1nfuj", u = "v17_5_mhti6u5";
+/* empty css                                     */ /* empty css                                     */ var t = "v17_7_mhti6u0", h = "v17_7_mhti6u2 v17_7_mhti6u1 v17_7_1y2v1nfuh", n = "v17_7_mhti6u4 v17_7_mhti6u2 v17_7_mhti6u1 v17_7_1y2v1nfuh v17_7_mhti6u3 v17_7_1y2v1nfh7 v17_7_1y2v1nfig v17_7_1y2v1nfjp v17_7_1y2v1nfky v17_7_1y2v1nfrg v17_7_1y2v1nftw v17_7_1y2v1nfs1 v17_7_1y2v1nf8k v17_7_1y2v1nfh6 v17_7_1y2v1nfuj", u = "v17_7_mhti6u5";
 export { h as base, t as marginReset, u as notTouchable, n as touchable };

package/dist-es/utils/aspect-ratio-support.css-mistica.js

@@ -1,4 +1,4 @@
 /* empty css                                      */ /* empty css                                                */ var r = {
-    aspectRatio: "var(--v17_5_yqswj60)"
-}, a = "v17_5_yqswj61 v17_5_1y2v1nfui v17_5_1y2v1nftt v17_5_1y2v1nftu v17_5_1y2v1nfr8", n = "v17_5_yqswj62", y = "v17_5_yqswj63 v17_5_1y2v1nfs1 v17_5_1y2v1nfsi v17_5_1y2v1nfuo v17_5_1y2v1nfv3";
+    aspectRatio: "var(--v17_7_yqswj60)"
+}, a = "v17_7_yqswj61 v17_7_1y2v1nfui v17_7_1y2v1nftt v17_7_1y2v1nftu v17_7_1y2v1nfr8", n = "v17_7_yqswj62", y = "v17_7_yqswj63 v17_7_1y2v1nfs1 v17_7_1y2v1nfsi v17_7_1y2v1nfuo v17_7_1y2v1nfv3";
 export { n as container, y as containerWithWrapper, r as vars, a as wrapper };

package/dist-es/video.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                 */ var f = "v17_5_19h163j0 v17_5_1y2v1nfuo v17_5_1y2v1nfv3 v17_5_1y2v1nfrg v17_5_1y2v1nfh6 v17_5_1y2v1nftt v17_5_1y2v1nftu v17_5_1y2v1nfwc";
+/* empty css                                     */ /* empty css                                 */ var f = "v17_7_19h163j0 v17_7_1y2v1nfuo v17_7_1y2v1nfv3 v17_7_1y2v1nfrg v17_7_1y2v1nfh6 v17_7_1y2v1nftt v17_7_1y2v1nftu v17_7_1y2v1nfwc";
 export { f as video };

package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                                     */ var a = "v17_5_1ezqdj90", r = "v17_5_1ezqdj91";
+/* empty css                                                     */ var a = "v17_7_1ezqdj90", r = "v17_7_1ezqdj91";
 export { a as container, r as waveFadeOut };

package/doc/components.md

@@ -161,6 +161,41 @@ Common props: `color`, `truncate`, `textAlign`, `as` (HTML tag), `wordBreak`, `d
 All cards support touchable props (`onPress`, `href`, `to`), buttons (`buttonPrimary`, `buttonSecondary`,
 `buttonLink`), and content props (`headline`, `pretitle`, `title`, `subtitle`, `description`, `slot`).
 
+### Card selection
+
+Use `checkbox`, `switch`, or `radioValue` to make a card selectable. The selector appears in the top-right
+corner, and the card body becomes the interaction target. It exposes the control's role and checked state,
+supports Space, and preserves arrow navigation for radios inside a `RadioGroup`. AdvancedDataCard supports the
+same selection props.
+
+These props are mutually exclusive with each other and with `selected`, `onPress`, `href`, `to`, top actions
+and dismiss. Footer actions remain independent.
+
+```tsx
+<DataCard title="Notifications" switch={{name: 'notifications', defaultValue: true}} />
+<DataCard title="Option" checkbox={{name: 'option'}} />
+<RadioGroup name="options" defaultValue="first">
+  <DataCard title="First option" radioValue="first" />
+  <DataCard title="Second option" radioValue="second" />
+</RadioGroup>
+```
+
+Checkbox and switch configurations support `name`, `value`, `defaultValue`, `onChange` and `disabled`.
+Controls placed in `slot` or `footerSlot` remain independent and do not automatically select the card.
+
+Use `selected` to control the outline from a custom control or an external action. It cannot be combined with
+the built-in selector props. It does not change the card's existing interaction, actions or video behavior,
+and can be used with or without `onPress`. The outline uses the card variant.
+
+```tsx
+<DataCard
+  title="Custom selection"
+  selected={selected}
+  slot={<Checkbox name="custom-selection" checked={selected} onChange={setSelected}>Select card</Checkbox>}
+/>
+<DataCard title="Favorite" selected={favorite} slot={customFavoriteControl} />
+```
+
 ### DataCard
 
 General-purpose card for data display. Supports `size`: `'default'`, `'snap'`, `'display'`.