@telefonica/mistica 16.5.0 → 16.6.0

package/dist-es/community/advanced-data-card.css-mistica.js

@@ -4,7 +4,7 @@ import "./advanced-data-card.css.ts.vanilla.css-mistica.js";
 var n = 216, _ = "_1x00fru4 _1x00fru2 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfi0 _1y2v1nf9b", a = {
     default: "_1x00fruk",
     mobile: "_1x00frul"
-}, t = "_1x00frut", o = "_1x00fruo", i = "_1x00frup _1x00fruo", u = "_1x00fru8 _1x00fru2 _1y2v1nfae _1y2v1nfbn _1y2v1nf7q _1y2v1nf9b", y = "_1y2v1nfhi _1y2v1nfis", x = "_1x00frud _1y2v1nfhi _1y2v1nfho _1y2v1nfia _1y2v1nfhu", e = "_1x00frui", h = "_1x00frua _1y2v1nf7w _1y2v1nf9b _1y2v1nfib", b = "_1x00frus _1y2v1nfho _1y2v1nfht", d = "_1y2v1nfi3 _1y2v1nfho _1y2v1nfbn", c = "_1y2v1nfho _1y2v1nfia _1y2v1nfi3 _1y2v1nfjx", m = "_1x00frum", p = "_1x00fruu", s = "_1x00frub", g = "_1x00fru2 _1y2v1nfae _1y2v1nfbn", l = "_1x00fruw", w = "_1x00fru5", C = "_1x00fru6", H = {
+}, t = "_1x00frut", o = "_1x00fruo", u = "_1x00frup _1x00fruo", i = "_1x00fru8 _1x00fru2 _1y2v1nfae _1y2v1nfbn _1y2v1nf7q _1y2v1nf9b", y = "_1y2v1nfhi _1y2v1nfis", x = "_1x00frud _1y2v1nfhi _1y2v1nfho _1y2v1nfia _1y2v1nfhu", e = "_1x00frui", h = "_1x00frua _1y2v1nf7w _1y2v1nf9b _1y2v1nfib", b = "_1x00frux", d = "_1x00frus _1y2v1nfho _1y2v1nfht", c = "_1y2v1nfi3 _1y2v1nfho _1y2v1nfbn", l = "_1y2v1nfho _1y2v1nfia _1y2v1nfi3 _1y2v1nfjx", m = "_1x00frum", p = "_1x00fruu", s = "_1x00frub", g = "_1x00fru2 _1y2v1nfae _1y2v1nfbn", C = "_1x00fruw", w = "_1x00fru5", H = "_1x00fru6", I = {
     topActionsCount: "var(--_1x00fruv)"
-}, I = "_1y2v1nf7w";
-export { n as MIN_HEIGHT, _ as actions, a as actionsVariants, t as adjustButtonLink, o as button, i as buttonMobile, u as cardContentStyle, y as container, x as dataCard, e as divider, h as extra, b as footerDirection, d as footerImage, c as footerText, m as marginRightAuto, p as marginRightButton, s as minHeight, g as paddingX, l as topActionsWithoutIcon, w as touchable, C as touchableCardHoverOverlay, H as vars, I as withPaddingTop };
+}, A = "_1y2v1nf7w";
+export { n as MIN_HEIGHT, _ as actions, a as actionsVariants, t as adjustButtonLink, o as button, u as buttonMobile, i as cardContentStyle, y as container, x as dataCard, e as divider, h as extra, b as flexColumn, d as footerDirection, c as footerImage, l as footerText, m as marginRightAuto, p as marginRightButton, s as minHeight, g as paddingX, C as topActionsWithoutIcon, w as touchable, H as touchableCardHoverOverlay, I as vars, A as withPaddingTop };

package/dist-es/community/advanced-data-card.js

@@ -78,115 +78,185 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as e, jsx as r, Fragment as _ } from "react/jsx-runtime";
-import * as k from "react";
-import { Boxed as q } from "../boxed.js";
-import S from "../stack.js";
-import { container as z, dataCard as J, MIN_HEIGHT as K, touchable as Q, touchableCardHoverOverlay as U, cardContentStyle as Z, minHeight as L, topActionsWithoutIcon as $, extra as rr, paddingX as er, divider as tr, actions as ar, actionsVariants as or, marginRightButton as ir, buttonMobile as F, footerDirection as sr, marginRightAuto as nr, withPaddingTop as cr, footerImage as dr, footerText as lr, adjustButtonLink as mr, button as hr, vars as pr } from "./advanced-data-card.css-mistica.js";
-import { vars as ur } from "../image.css-mistica.js";
-import P from "../divider.js";
-import { Text2 as g, Text as vr } from "../text.js";
-import { text4 as fr } from "../text-props.js";
-import { vars as N } from "../skins/skin-contract.css-mistica.js";
-import H from "../box.js";
-import gr from "../touchable.js";
-import u from "classnames";
-import { CardActionsGroup as Nr } from "../card.js";
-import { useTheme as yr } from "../hooks.js";
-import { getPrefixedDataAttributes as xr } from "../utils/dom.js";
-import Cr from "../inline.js";
-import { applyCssVars as j } from "../utils/css.js";
-const Ar = (param)=>{
-    let { headline: a, pretitle: o, pretitleAs: s = "p", pretitleLinesMax: m, title: n, titleAs: c = "h3", titleLinesMax: d, subtitle: l, subtitleLinesMax: i, description: t, descriptionLinesMax: h } = param;
-    const { textPresets: y } = yr();
-    return /* @__PURE__ */ e(S, {
-        space: 4,
+import { jsxs as d, jsx as r, Fragment as N } from "react/jsx-runtime";
+import * as $ from "react";
+import { Boxed as rr } from "../boxed.js";
+import ar from "../stack.js";
+import { container as er, dataCard as or, MIN_HEIGHT as tr, touchable as dr, touchableCardHoverOverlay as nr, cardContentStyle as ir, minHeight as sr, topActionsWithoutIcon as cr, extra as mr, paddingX as hr, flexColumn as lr, divider as fr, actions as gr, actionsVariants as vr, marginRightButton as ur, buttonMobile as A, footerDirection as pr, marginRightAuto as yr, withPaddingTop as xr, footerImage as Nr, footerText as Br, adjustButtonLink as Tr, button as Cr, vars as wr } from "./advanced-data-card.css-mistica.js";
+import { vars as Ir } from "../image.css-mistica.js";
+import W from "../divider.js";
+import { Text as b, Text2 as g } from "../text.js";
+import { text4 as E } from "../text-props.js";
+import { vars as O } from "../skins/skin-contract.css-mistica.js";
+import G from "../box.js";
+import Rr from "../touchable.js";
+import v from "classnames";
+import { useInnerText as P, CardActionsGroup as Dr } from "../card.js";
+import { useTheme as Hr } from "../hooks.js";
+import { getPrefixedDataAttributes as Fr } from "../utils/dom.js";
+import Sr from "../inline.js";
+import { applyCssVars as X } from "../utils/css.js";
+import V from "../tag.js";
+import { isBiggerHeading as Y } from "../utils/headings.js";
+const jr = (param)=>{
+    let { headline: a, headlineRef: h, pretitle: n, pretitleAs: s, pretitleLinesMax: l, title: o, titleAs: i, titleLinesMax: f, subtitle: e, subtitleLinesMax: c, description: t, descriptionLinesMax: x } = param;
+    const { textPresets: m } = Hr();
+    return /** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */ /* @__PURE__ */ d("div", {
+        className: lr,
         children: [
-            a,
-            o && /* @__PURE__ */ r(g, {
-                color: N.colors.textPrimary,
-                truncate: m,
-                as: s,
-                regular: !0,
-                hyphens: "auto",
-                children: o
+            Y(i, s) ? /* @__PURE__ */ d(N, {
+                children: [
+                    o && /* @__PURE__ */ r("div", {
+                        style: {
+                            paddingBottom: e || t ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ r(b, _object_spread_props(_object_spread({}, E), {
+                            truncate: f,
+                            weight: m.cardTitle.weight,
+                            as: i,
+                            hyphens: "auto",
+                            children: o
+                        }))
+                    }),
+                    a && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
+                    /* @__PURE__ */ r("div", {
+                        ref: h,
+                        style: {
+                            order: -2,
+                            paddingBottom: 4
+                        },
+                        children: typeof a == "string" ? /* @__PURE__ */ r(V, {
+                            type: "promo",
+                            children: a
+                        }) : a
+                    }),
+                    n && /* @__PURE__ */ r("div", {
+                        style: {
+                            order: -1,
+                            paddingBottom: o || e || t ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ r(g, {
+                            truncate: l,
+                            as: s,
+                            regular: !0,
+                            hyphens: "auto",
+                            children: n
+                        })
+                    })
+                ]
+            }) : /* @__PURE__ */ d(N, {
+                children: [
+                    n && /* @__PURE__ */ r("div", {
+                        style: {
+                            paddingBottom: o || e || t ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ r(g, {
+                            truncate: l,
+                            as: s,
+                            regular: !0,
+                            hyphens: "auto",
+                            children: n
+                        })
+                    }),
+                    a && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
+                    /* @__PURE__ */ r("div", {
+                        ref: h,
+                        style: {
+                            order: -1,
+                            paddingBottom: 4
+                        },
+                        children: typeof a == "string" ? /* @__PURE__ */ r(V, {
+                            type: "promo",
+                            children: a
+                        }) : a
+                    }),
+                    o && /* @__PURE__ */ r("div", {
+                        style: {
+                            paddingBottom: e || t ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ r(b, _object_spread_props(_object_spread({}, E), {
+                            truncate: f,
+                            weight: m.cardTitle.weight,
+                            as: i,
+                            hyphens: "auto",
+                            children: o
+                        }))
+                    })
+                ]
             }),
-            /* @__PURE__ */ r(vr, _object_spread_props(_object_spread({}, fr), {
-                truncate: d,
-                weight: y.cardTitle.weight,
-                as: c,
-                hyphens: "auto",
-                children: n
-            })),
-            /* @__PURE__ */ r(g, {
-                color: N.colors.textPrimary,
-                truncate: i,
-                as: "p",
-                regular: !0,
-                hyphens: "auto",
-                children: l
+            e && /* @__PURE__ */ r("div", {
+                style: {
+                    paddingBottom: t ? 4 : 0
+                },
+                children: /* @__PURE__ */ r(g, {
+                    truncate: c,
+                    as: "div",
+                    regular: !0,
+                    hyphens: "auto",
+                    children: e
+                })
             }),
             t && /* @__PURE__ */ r(g, {
-                truncate: h,
-                as: "p",
+                truncate: x,
+                as: "div",
                 regular: !0,
-                color: N.colors.textSecondary,
+                color: O.colors.textSecondary,
                 hyphens: "auto",
                 children: t
             })
         ]
     });
-}, Tr = (param)=>{
-    let { button: a, footerImage: o, footerText: s, footerTextLinesMax: m, buttonLink: n } = param;
-    const c = !!a, d = !!o, l = !!s, i = !!n, t = c && (d || l) && i, h = i && !t ? "178px" : "";
-    return /* @__PURE__ */ e(_, {
+}, Ar = (param)=>{
+    let { button: a, footerImage: h, footerText: n, footerTextLinesMax: s, buttonLink: l } = param;
+    const o = !!a, i = !!h, f = !!n, e = !!l, c = o && (i || f) && e, t = e && !c ? "178px" : "";
+    return /* @__PURE__ */ d(N, {
         children: [
             /* @__PURE__ */ r("div", {
-                className: tr,
-                children: /* @__PURE__ */ r(P, {})
+                className: fr,
+                children: /* @__PURE__ */ r(W, {})
             }),
-            /* @__PURE__ */ e("div", {
-                className: u(ar, or[t ? "mobile" : "default"]),
+            /* @__PURE__ */ d("div", {
+                className: v(gr, vr[c ? "mobile" : "default"]),
                 children: [
-                    c && /* @__PURE__ */ r("div", {
-                        className: u(ir, F),
+                    o && /* @__PURE__ */ r("div", {
+                        className: v(ur, A),
                         children: a
                     }),
-                    /* @__PURE__ */ e("div", {
-                        className: u(sr, t ? nr : cr),
+                    /* @__PURE__ */ d("div", {
+                        className: v(pr, c ? yr : xr),
                         children: [
-                            d && /* @__PURE__ */ r("div", {
-                                className: dr,
+                            i && /* @__PURE__ */ r("div", {
+                                className: Nr,
                                 children: /* @__PURE__ */ r("div", {
-                                    style: j({
-                                        [ur.mediaBorderRadius]: N.borderRadii.mediaSmall
+                                    style: X({
+                                        [Ir.mediaBorderRadius]: O.borderRadii.mediaSmall
                                     }),
-                                    children: o
+                                    children: h
                                 })
                             }),
-                            l && /* @__PURE__ */ r("div", {
+                            f && /* @__PURE__ */ r("div", {
                                 style: {
-                                    maxWidth: h
+                                    maxWidth: t
                                 },
-                                className: lr,
+                                className: Br,
                                 children: /* @__PURE__ */ r(g, {
-                                    truncate: m,
+                                    truncate: s,
                                     regular: !0,
-                                    children: s
+                                    children: n
                                 })
                             })
                         ]
                     }),
-                    i && /* @__PURE__ */ r("div", {
-                        className: u(mr, t ? hr : F),
-                        children: n
+                    e && /* @__PURE__ */ r("div", {
+                        className: v(Tr, c ? Cr : A),
+                        children: l
                     })
                 ]
             })
         ]
     });
-}, br = /*#__PURE__*/ k.forwardRef((_param, W)=>{
-    var { stackingGroup: a, headline: o, pretitle: s, pretitleAs: m, pretitleLinesMax: n, title: c, titleAs: d, titleLinesMax: l, subtitle: i, subtitleLinesMax: t, description: h, descriptionLinesMax: y, extra: p, extraDividerPadding: E = 24, noExtraDivider: G = !1, button: C, footerImage: A, footerText: T, footerTextLinesMax: M, buttonLink: b, dataAttributes: V, actions: v, "aria-label": B, onClose: w } = _param, f = _object_without_properties(_param, [
+}, br = /*#__PURE__*/ $.forwardRef((_param, K)=>{
+    var { stackingGroup: a, headline: h, pretitle: n, pretitleAs: s, pretitleLinesMax: l, title: o, titleAs: i = "h3", titleLinesMax: f, subtitle: e, subtitleLinesMax: c, description: t, descriptionLinesMax: x, extra: m, extraDividerPadding: _ = 24, noExtraDivider: k = !1, button: B, footerImage: T, footerText: C, footerTextLinesMax: q, buttonLink: w, dataAttributes: z, actions: u, "aria-label": J, onClose: I } = _param, p = _object_without_properties(_param, [
         "stackingGroup",
         "headline",
         "pretitle",
@@ -212,65 +282,81 @@ const Ar = (param)=>{
         "aria-label",
         "onClose"
     ]);
-    const x = !!f.href || !!f.onPress || !!f.to, O = {
-        button: C,
-        footerImage: A,
-        footerText: T,
-        footerTextLinesMax: M,
-        buttonLink: b
-    }, D = !!C || !!A || !!T || !!b, I = !!(p != null && p.length), X = ((v == null ? void 0 : v.length) || 0) + (w ? 1 : 0);
-    return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({
-        className: z
-    }, xr(V, "AdvancedDataCard")), {
-        ref: W,
-        "aria-label": x ? void 0 : B,
+    const y = !!p.href || !!p.onPress || !!p.to, M = {
+        button: B,
+        footerImage: T,
+        footerText: C,
+        footerTextLinesMax: q,
+        buttonLink: w
+    }, R = !!B || !!T || !!C || !!w, D = !!(m != null && m.length), Q = ((u == null ? void 0 : u.length) || 0) + (I ? 1 : 0), { text: H, ref: U } = P(), { text: F, ref: Z } = P(), S = J || (Y(i, s) ? [
+        o,
+        H,
+        n,
+        e,
+        t,
+        F
+    ] : [
+        n,
+        H,
+        o,
+        e,
+        t,
+        F
+    ]).filter(Boolean).join(" ");
+    return /* @__PURE__ */ d("section", _object_spread_props(_object_spread({
+        className: er
+    }, Fr(z, "AdvancedDataCard")), {
+        ref: K,
+        "aria-label": y ? void 0 : S,
         children: [
-            /* @__PURE__ */ e(q, {
-                className: J,
+            /* @__PURE__ */ d(rr, {
+                className: or,
                 width: "100%",
                 height: "100%",
-                minHeight: K,
+                minHeight: tr,
                 children: [
-                    /* @__PURE__ */ e(gr, _object_spread_props(_object_spread({
+                    /* @__PURE__ */ d(Rr, _object_spread_props(_object_spread({
                         maybe: !0
-                    }, f), {
-                        "aria-label": x ? B : void 0,
-                        className: Q,
+                    }, p), {
+                        "aria-label": y ? S : void 0,
+                        className: dr,
                         children: [
-                            x && /* @__PURE__ */ r("div", {
-                                className: U
+                            y && /* @__PURE__ */ r("div", {
+                                className: nr
                             }),
                             /* @__PURE__ */ r("div", {
-                                className: u(Z, !D && !I ? L : ""),
-                                children: /* @__PURE__ */ r(H, {
+                                className: v(ir, !R && !D ? sr : ""),
+                                "aria-hidden": y,
+                                children: /* @__PURE__ */ r(G, {
                                     paddingTop: 8,
-                                    children: /* @__PURE__ */ e(Cr, {
+                                    children: /* @__PURE__ */ d(Sr, {
                                         space: 0,
                                         children: [
-                                            /* @__PURE__ */ e(S, {
+                                            /* @__PURE__ */ d(ar, {
                                                 space: 8,
                                                 children: [
                                                     a,
-                                                    /* @__PURE__ */ r(Ar, {
-                                                        headline: o,
-                                                        pretitle: s,
-                                                        pretitleAs: m,
-                                                        pretitleLinesMax: n,
-                                                        title: c,
-                                                        titleAs: d,
-                                                        titleLinesMax: l,
-                                                        subtitle: i,
-                                                        subtitleLinesMax: t,
-                                                        description: h,
-                                                        descriptionLinesMax: y
+                                                    /* @__PURE__ */ r(jr, {
+                                                        headline: h,
+                                                        headlineRef: U,
+                                                        pretitle: n,
+                                                        pretitleAs: s,
+                                                        pretitleLinesMax: l,
+                                                        title: o,
+                                                        titleAs: i,
+                                                        titleLinesMax: f,
+                                                        subtitle: e,
+                                                        subtitleLinesMax: c,
+                                                        description: t,
+                                                        descriptionLinesMax: x
                                                     })
                                                 ]
                                             }),
                                             !a && /* @__PURE__ */ r("div", {
-                                                style: j({
-                                                    [pr.topActionsCount]: String(X)
+                                                style: X({
+                                                    [wr.topActionsCount]: String(Q)
                                                 }),
-                                                className: $
+                                                className: cr
                                             })
                                         ]
                                     })
@@ -281,31 +367,32 @@ const Ar = (param)=>{
                                     flexGrow: 1
                                 }
                             }),
-                            I && /* @__PURE__ */ r("div", {
-                                className: rr,
-                                children: p.map((Y, R)=>/* @__PURE__ */ e("div", {
+                            D && /* @__PURE__ */ r("div", {
+                                className: mr,
+                                ref: Z,
+                                children: m.map((L, j)=>/* @__PURE__ */ d("div", {
                                         children: [
                                             /* @__PURE__ */ r("div", {
-                                                className: er,
-                                                children: Y
+                                                className: hr,
+                                                children: L
                                             }),
-                                            R + 1 !== p.length && /* @__PURE__ */ r(H, {
-                                                paddingY: E,
-                                                children: !G && /* @__PURE__ */ r(P, {})
+                                            j + 1 !== m.length && /* @__PURE__ */ r(G, {
+                                                paddingY: _,
+                                                children: !k && /* @__PURE__ */ r(W, {})
                                             })
                                         ]
-                                    }, R))
+                                    }, j))
                             })
                         ]
                     })),
-                    D && /* @__PURE__ */ r(Tr, _object_spread({}, O))
+                    R && /* @__PURE__ */ r(Ar, _object_spread({}, M))
                 ]
             }),
-            /* @__PURE__ */ r(Nr, {
-                actions: v,
-                onClose: w
+            /* @__PURE__ */ r(Dr, {
+                actions: u,
+                onClose: I
             })
         ]
     }));
-}), Yr = br;
-export { br as AdvancedDataCard, Yr as default };
+}), $r = br;
+export { br as AdvancedDataCard, $r as default };

package/dist-es/cover-hero.css-mistica.js

@@ -3,7 +3,7 @@ import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./grid-layout.css.ts.vanilla.css-mistica.js";
 import "./carousel.css.ts.vanilla.css-mistica.js";
 import "./cover-hero.css.ts.vanilla.css-mistica.js";
-var e = "moeazi9 _1y2v1nfi3", o = "moeazi2 _1y2v1nfhi _1y2v1nfho _1y2v1nfhu _1y2v1nfhx _1y2v1nfib _1y2v1nfkv _1y2v1nfm4", y = "moeazi4 _1y2v1nfhi _1y2v1nfho _1y2v1nfib", f = "moeazi7", _ = "_1y2v1nfhi", m = "_1y2v1nfhj _1y2v1nfmj _1y2v1nfib _1y2v1nfis", t = "moeazic _1y2v1nfhj _1y2v1nfkv _1y2v1nfla _1y2v1nfib _1y2v1nfis", h = "moeazi6", s = "_1y2v1nfhi", z = "moeazie", p = {
+var e = "moeazi9 _1y2v1nfi3", o = "moeazi2 _1y2v1nfhi _1y2v1nfho _1y2v1nfhu _1y2v1nfhx _1y2v1nfib _1y2v1nfkv _1y2v1nfm4", y = "moeazi4 _1y2v1nfhi _1y2v1nfho _1y2v1nfib", f = "_1y2v1nfho _1y2v1nfhu", _ = "moeazi7", m = "_1y2v1nfhi", t = "_1y2v1nfhj _1y2v1nfmj _1y2v1nfib _1y2v1nfis", h = "moeazic _1y2v1nfhj _1y2v1nfkv _1y2v1nfla _1y2v1nfib _1y2v1nfis", s = "moeazi6", z = "_1y2v1nfhi", p = "moeazie", c = {
     aspectRatio: "var(--moeazi0)"
-}, c = "moeazi5";
-export { e as centered, o as coverHero, y as coverHeroContainer, f as hasSideExtra, _ as mainContent, m as mediaLayer, t as mediaOverlay, h as minHeight, s as sideExtra, z as sixColumns, p as vars, c as withAspectRatio };
+}, x = "moeazi5";
+export { e as centered, o as coverHero, y as coverHeroContainer, f as flexColumn, _ as hasSideExtra, m as mainContent, t as mediaLayer, h as mediaOverlay, s as minHeight, z as sideExtra, p as sixColumns, c as vars, x as withAspectRatio };