@telefonica/mistica 16.57.0 → 16.58.0-beta.2

package/dist/callout.css-mistica.js

@@ -10,30 +10,30 @@ function _export(target, all) {
 }
 _export(exports, {
     get background () {
-        return g;
+        return n;
     },
     get closeButtonContainer () {
-        return a;
+        return b;
     },
     get closeButtonContainerSize () {
-        return m;
+        return y;
     },
     get container () {
-        return n;
+        return a;
     },
     get content () {
-        return e;
+        return t;
     }
 });
-/* empty css                                     */ /* empty css                                       */ /* empty css                                   */ var n = "v16_57_14g0jmy1 v16_57_14g0jmy0 v16_57_1y2v1nfgc v16_57_1y2v1nfhl v16_57_1y2v1nfiu v16_57_1y2v1nfk3 v16_57_1y2v1nfq4 v16_57_1y2v1nfsw v16_57_1y2v1nft8", e = "v16_57_14g0jmy3 v16_57_14g0jmy2 v16_57_1y2v1nfqq v16_57_1y2v1nfpy", a = "v16_57_14g0jmy5 v16_57_14g0jmy4 v16_57_1y2v1nfpz v16_57_1y2v1nfu8", m = "v16_57_14g0jmy6", g = {
-    "default-over-brand": "v16_57_14g0jmyh v16_57_14g0jmy7 v16_57_1y2v1nf83",
-    "default-over-negative": "v16_57_14g0jmyi v16_57_14g0jmy8 v16_57_1y2v1nf83",
-    "default-over-alternative": "v16_57_14g0jmyj v16_57_14g0jmy9 v16_57_1y2v1nf83",
-    "default-over-default": "v16_57_14g0jmyk v16_57_14g0jmya v16_57_1y2v1nf8d",
-    "default-over-media": "v16_57_14g0jmyl v16_57_14g0jmyb v16_57_1y2v1nf83",
-    "brand-over-brand": "v16_57_14g0jmym v16_57_14g0jmyc v16_57_1y2v1nf8a",
-    "brand-over-negative": "v16_57_14g0jmyn v16_57_14g0jmyd v16_57_1y2v1nf8a",
-    "brand-over-alternative": "v16_57_14g0jmyo v16_57_14g0jmye v16_57_1y2v1nf87",
-    "brand-over-default": "v16_57_14g0jmyp v16_57_14g0jmyf v16_57_1y2v1nf87",
-    "brand-over-media": "v16_57_14g0jmyq v16_57_14g0jmyg v16_57_1y2v1nf87"
+/* empty css                                     */ /* empty css                                       */ /* empty css                                   */ var a = "v16_58_0-beta_2_14g0jmy1 v16_58_0-beta_2_14g0jmy0 v16_58_0-beta_2_1y2v1nfgc v16_58_0-beta_2_1y2v1nfhl v16_58_0-beta_2_1y2v1nfiu v16_58_0-beta_2_1y2v1nfk3 v16_58_0-beta_2_1y2v1nfq4 v16_58_0-beta_2_1y2v1nfsw v16_58_0-beta_2_1y2v1nft8", t = "v16_58_0-beta_2_14g0jmy3 v16_58_0-beta_2_14g0jmy2 v16_58_0-beta_2_1y2v1nfqq v16_58_0-beta_2_1y2v1nfpy", b = "v16_58_0-beta_2_14g0jmy5 v16_58_0-beta_2_14g0jmy4 v16_58_0-beta_2_1y2v1nfpz v16_58_0-beta_2_1y2v1nfu8", y = "v16_58_0-beta_2_14g0jmy6", n = {
+    "default-over-brand": "v16_58_0-beta_2_14g0jmyh v16_58_0-beta_2_14g0jmy7 v16_58_0-beta_2_1y2v1nf83",
+    "default-over-negative": "v16_58_0-beta_2_14g0jmyi v16_58_0-beta_2_14g0jmy8 v16_58_0-beta_2_1y2v1nf83",
+    "default-over-alternative": "v16_58_0-beta_2_14g0jmyj v16_58_0-beta_2_14g0jmy9 v16_58_0-beta_2_1y2v1nf83",
+    "default-over-default": "v16_58_0-beta_2_14g0jmyk v16_58_0-beta_2_14g0jmya v16_58_0-beta_2_1y2v1nf8d",
+    "default-over-media": "v16_58_0-beta_2_14g0jmyl v16_58_0-beta_2_14g0jmyb v16_58_0-beta_2_1y2v1nf83",
+    "brand-over-brand": "v16_58_0-beta_2_14g0jmym v16_58_0-beta_2_14g0jmyc v16_58_0-beta_2_1y2v1nf8a",
+    "brand-over-negative": "v16_58_0-beta_2_14g0jmyn v16_58_0-beta_2_14g0jmyd v16_58_0-beta_2_1y2v1nf8a",
+    "brand-over-alternative": "v16_58_0-beta_2_14g0jmyo v16_58_0-beta_2_14g0jmye v16_58_0-beta_2_1y2v1nf87",
+    "brand-over-default": "v16_58_0-beta_2_14g0jmyp v16_58_0-beta_2_14g0jmyf v16_58_0-beta_2_1y2v1nf87",
+    "brand-over-media": "v16_58_0-beta_2_14g0jmyq v16_58_0-beta_2_14g0jmyg v16_58_0-beta_2_1y2v1nf87"
 };

package/dist/card-internal.css-mistica.js

@@ -10,73 +10,79 @@ function _export(target, all) {
 }
 _export(exports, {
     get actionsContainerVariants () {
-        return r;
+        return d;
     },
     get backgroundImageOrVideoContainer () {
         return l;
     },
     get boxed () {
-        return m;
+        return y;
     },
     get container () {
-        return a;
+        return t;
     },
     get containerPaddingBottomVariants () {
-        return f;
+        return b;
     },
     get containerPaddingTopVariants () {
-        return y;
+        return e;
     },
     get containerPaddingXVariants () {
-        return d;
+        return n;
     },
     get contentContainer () {
-        return q;
+        return c;
     },
     get slotContainerSpaceBetween () {
         return u;
     },
+    get stretchedLink () {
+        return g;
+    },
+    get stretchedTouchable () {
+        return p;
+    },
     get textContent () {
         return s;
     },
     get topActionsContainer () {
-        return c;
+        return q;
     },
     get touchable () {
-        return t;
+        return f;
     },
     get touchableCardOverlay () {
-        return i;
+        return o;
     },
     get touchableCardOverlayInverse () {
-        return p;
+        return i;
     },
     get touchableContainer () {
-        return e;
+        return r;
     },
     get touchableContent () {
-        return o;
+        return m;
     },
     get vars () {
-        return n;
+        return a;
     }
 });
-/* empty css                                     */ /* empty css                                         */ var n = {
-    aspectRatio: "var(--v16_57_1499nmd0)"
-}, a = "v16_57_1499nmd2 v16_57_1499nmd1 v16_57_1y2v1nfpy v16_57_1y2v1nfq4 v16_57_1y2v1nfq9", d = {
-    display: "v16_57_1499nmd5 v16_57_1499nmd3 v16_57_1y2v1nfj0 v16_57_1y2v1nfk9",
-    default: "v16_57_1499nmd6",
-    snap: "v16_57_1499nmd7 v16_57_1499nmd4 v16_57_1y2v1nfiu v16_57_1y2v1nfk3"
-}, y = {
-    display: "v16_57_1499nmda v16_57_1499nmd8 v16_57_1y2v1nfgi",
-    default: "v16_57_1499nmdb",
-    snap: "v16_57_1499nmdc v16_57_1499nmd9 v16_57_1y2v1nfgc"
-}, f = {
-    display: "v16_57_1499nmdf v16_57_1499nmdd v16_57_1y2v1nfhr",
-    default: "v16_57_1499nmdg",
-    snap: "v16_57_1499nmdh v16_57_1499nmde v16_57_1y2v1nfhl"
-}, r = {
-    display: "v16_57_1499nmdl v16_57_1499nmdi v16_57_1y2v1nfgi",
-    default: "v16_57_1499nmdm v16_57_1499nmdj v16_57_1y2v1nfgc",
-    snap: "v16_57_1499nmdn v16_57_1499nmdk v16_57_1y2v1nfgc"
-}, m = "v16_57_1499nmdo", t = "v16_57_1499nmdq v16_57_1499nmdp v16_57_1y2v1nffx v16_57_1y2v1nfh6 v16_57_1y2v1nfif v16_57_1y2v1nfjo v16_57_1y2v1nfq4 v16_57_1y2v1nfqa v16_57_1y2v1nfsm v16_57_1y2v1nffw v16_57_1y2v1nfqr v16_57_1y2v1nfr8", e = "v16_57_1499nmdr", o = "v16_57_1499nmdt v16_57_1499nmds v16_57_1y2v1nfpy v16_57_1y2v1nfq4 v16_57_1y2v1nfqr v16_57_1y2v1nfr8 v16_57_1y2v1nft8 v16_57_1y2v1nfpx", i = "v16_57_1499nmdv v16_57_1499nmdu", p = "v16_57_1499nmdw v16_57_1499nmdu", q = "v16_57_1499nmdy v16_57_1499nmdx v16_57_1y2v1nfpy v16_57_1y2v1nfq4 v16_57_1y2v1nfq9 v16_57_1y2v1nfqg", s = "v16_57_1499nmd10 v16_57_1499nmdz v16_57_1y2v1nfpy v16_57_1y2v1nfq4 v16_57_1y2v1nfqa v16_57_1y2v1nfr8 v16_57_1y2v1nfqr", c = "v16_57_1499nmd12 v16_57_1499nmd11 v16_57_1y2v1nfpz v16_57_1y2v1nftj v16_57_1y2v1nfud v16_57_1y2v1nfq4 v16_57_1y2v1nfq9", l = "v16_57_1499nmd14 v16_57_1499nmd13 v16_57_1y2v1nfqr v16_57_1y2v1nfr8 v16_57_1y2v1nfpz v16_57_1y2v1nfv2", u = "v16_57_1499nmd15 v16_57_1y2v1nfq4 v16_57_1y2v1nfqa v16_57_1y2v1nfqg v16_57_1y2v1nfqp";
+/* empty css                                     */ /* empty css                                         */ var a = {
+    aspectRatio: "var(--v16_58_0-beta_2_1499nmd0)"
+}, t = "v16_58_0-beta_2_1499nmd2 v16_58_0-beta_2_1499nmd1 v16_58_0-beta_2_1y2v1nfpy v16_58_0-beta_2_1y2v1nfq4 v16_58_0-beta_2_1y2v1nfq9", n = {
+    display: "v16_58_0-beta_2_1499nmd5 v16_58_0-beta_2_1499nmd3 v16_58_0-beta_2_1y2v1nfj0 v16_58_0-beta_2_1y2v1nfk9",
+    default: "v16_58_0-beta_2_1499nmd6",
+    snap: "v16_58_0-beta_2_1499nmd7 v16_58_0-beta_2_1499nmd4 v16_58_0-beta_2_1y2v1nfiu v16_58_0-beta_2_1y2v1nfk3"
+}, e = {
+    display: "v16_58_0-beta_2_1499nmda v16_58_0-beta_2_1499nmd8 v16_58_0-beta_2_1y2v1nfgi",
+    default: "v16_58_0-beta_2_1499nmdb",
+    snap: "v16_58_0-beta_2_1499nmdc v16_58_0-beta_2_1499nmd9 v16_58_0-beta_2_1y2v1nfgc"
+}, b = {
+    display: "v16_58_0-beta_2_1499nmdf v16_58_0-beta_2_1499nmdd v16_58_0-beta_2_1y2v1nfhr",
+    default: "v16_58_0-beta_2_1499nmdg",
+    snap: "v16_58_0-beta_2_1499nmdh v16_58_0-beta_2_1499nmde v16_58_0-beta_2_1y2v1nfhl"
+}, d = {
+    display: "v16_58_0-beta_2_1499nmdl v16_58_0-beta_2_1499nmdi v16_58_0-beta_2_1y2v1nfgi",
+    default: "v16_58_0-beta_2_1499nmdm v16_58_0-beta_2_1499nmdj v16_58_0-beta_2_1y2v1nfgc",
+    snap: "v16_58_0-beta_2_1499nmdn v16_58_0-beta_2_1499nmdk v16_58_0-beta_2_1y2v1nfgc"
+}, y = "v16_58_0-beta_2_1499nmdo", f = "v16_58_0-beta_2_1499nmdq v16_58_0-beta_2_1499nmdp v16_58_0-beta_2_1y2v1nffx v16_58_0-beta_2_1y2v1nfh6 v16_58_0-beta_2_1y2v1nfif v16_58_0-beta_2_1y2v1nfjo v16_58_0-beta_2_1y2v1nfq4 v16_58_0-beta_2_1y2v1nfqa v16_58_0-beta_2_1y2v1nfsm v16_58_0-beta_2_1y2v1nffw v16_58_0-beta_2_1y2v1nfqr v16_58_0-beta_2_1y2v1nfr8", r = "v16_58_0-beta_2_1499nmdr", m = "v16_58_0-beta_2_1499nmdt v16_58_0-beta_2_1499nmds v16_58_0-beta_2_1y2v1nfpy v16_58_0-beta_2_1y2v1nfq4 v16_58_0-beta_2_1y2v1nfqr v16_58_0-beta_2_1y2v1nfr8 v16_58_0-beta_2_1y2v1nft8 v16_58_0-beta_2_1y2v1nfpx", o = "v16_58_0-beta_2_1499nmdv v16_58_0-beta_2_1499nmdu", i = "v16_58_0-beta_2_1499nmdw v16_58_0-beta_2_1499nmdu", c = "v16_58_0-beta_2_1499nmdy v16_58_0-beta_2_1499nmdx v16_58_0-beta_2_1y2v1nfq4 v16_58_0-beta_2_1y2v1nfq9 v16_58_0-beta_2_1y2v1nfqg", p = "v16_58_0-beta_2_1499nmdz", s = "v16_58_0-beta_2_1499nmd11 v16_58_0-beta_2_1499nmd10 v16_58_0-beta_2_1y2v1nfq4 v16_58_0-beta_2_1y2v1nfqa v16_58_0-beta_2_1y2v1nfr8 v16_58_0-beta_2_1y2v1nfqr", q = "v16_58_0-beta_2_1499nmd13 v16_58_0-beta_2_1499nmd12 v16_58_0-beta_2_1y2v1nfpz v16_58_0-beta_2_1y2v1nftj v16_58_0-beta_2_1y2v1nfud v16_58_0-beta_2_1y2v1nfq4 v16_58_0-beta_2_1y2v1nfq9", l = "v16_58_0-beta_2_1499nmd15 v16_58_0-beta_2_1499nmd14 v16_58_0-beta_2_1y2v1nfqr v16_58_0-beta_2_1y2v1nfr8 v16_58_0-beta_2_1y2v1nfpz v16_58_0-beta_2_1y2v1nfv2", u = "v16_58_0-beta_2_1499nmd16 v16_58_0-beta_2_1y2v1nfq4 v16_58_0-beta_2_1y2v1nfqa v16_58_0-beta_2_1y2v1nfqg v16_58_0-beta_2_1y2v1nfqp", g = "v16_58_0-beta_2_1499nmd17";

package/dist/card-internal.css.d.ts

@@ -13,7 +13,9 @@ export declare const touchableContent: string;
 export declare const touchableCardOverlay: string;
 export declare const touchableCardOverlayInverse: string;
 export declare const contentContainer: string;
+export declare const stretchedTouchable: string;
 export declare const textContent: string;
 export declare const topActionsContainer: string;
 export declare const backgroundImageOrVideoContainer: string;
 export declare const slotContainerSpaceBetween: string;
+export declare const stretchedLink: string;

package/dist/card-internal.d.ts

@@ -2,13 +2,13 @@ import * as React from 'react';
 import Tag from './tag';
 import Image from './image';
 import Video from './video';
-import { type PressHandler } from './touchable';
 import type { DataAttributes, HeadingType, IconProps, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
 import type { ExclusifyUnion } from './utils/utility-types';
 import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
 import type { Variant } from './theme-variant-context';
 import type { VideoElement, VideoSource, AspectRatio as VideoAspectRatio } from './video';
 import type { AspectRatio as ImageAspectRatio } from './image';
+import type { PressHandler } from './touchable';
 export type CardAspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto' | number;
 export type MediaAspectRatio = ImageAspectRatio | VideoAspectRatio | 'auto' | number;
 export type CardType = 'data' | 'media' | 'cover' | 'naked';
@@ -65,10 +65,16 @@ type MediaProps = {
 type TextContentProps = {
     type: CardType;
     headline?: string | RendersNullableElement<typeof Tag>;
-    pretitle?: string;
+    pretitle?: string | {
+        text: string;
+        'aria-label'?: React.AriaAttributes['aria-label'];
+    };
     pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
-    title?: string;
+    title?: string | {
+        text: string;
+        'aria-label'?: React.AriaAttributes['aria-label'];
+    };
     titleAs?: HeadingType;
     titleLinesMax?: number;
     subtitle?: string;
@@ -104,6 +110,18 @@ type TouchableProps = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     role?: string;
     'aria-current'?: React.AriaAttributes['aria-current'];
+    /**
+     * Aria label for the touchable element. If set the whole card will be announced as a link/button by screen readers.
+     */
+    touchableAriaLabel?: React.AriaAttributes['aria-label'];
+    /**
+     * When true, the touchable content of the card will be segregated for screen readers. Only one of those elements will be announced as link/button,
+     * according to the following logic:
+     * - If there is title or pretitle it will be the one between these two with the higher hierarchy (for example, if titleAs is 'h2' and pretitleAs is 'h3', the title will be the touchable element).
+     * - If those are not present it will be the next hierarchy element: headline, subtitle, ...
+     * This behaviour can be overriden with the touchableAriaLabel prop.
+     */
+    segregateTouchableContent?: boolean;
 } & ExclusifyUnion<{
     href: string | undefined;
     newTab?: boolean;