@telefonica/mistica 16.71.0 → 17.0.0

package/doc/llms/llms.md

@@ -30,8 +30,8 @@ a documented composite component would be simpler.
 
 1. **NEVER hardcode colors in app/component UI code.** Always use `skinVars.colors.*` design tokens from
    `@telefonica/mistica`. The exception is skin authoring: when creating or extending a `Skin`, you may use
-   built-in palette exports (for example `movistarNewPalette`) or your own custom palette/colors inside the
-   skin definition.
+   built-in palette exports (for example `movistarPalette`) or your own custom palette/colors inside the skin
+   definition.
 2. **Try not to use raw `<div>` for layout.** Use Mistica layout components: `Box`, `Stack`, `Inline`,
    `Align`, `ResponsiveLayout`, `GridLayout`, `Grid`.
 3. **NEVER set font sizes manually.** Use text components: `Text1`-`Text10`, `Title1`-`Title4`. If those don't
@@ -88,7 +88,7 @@ npm install @telefonica/mistica
 import '@telefonica/mistica/css/mistica.css';
 import {
   ThemeContextProvider,
-  getMovistarNewSkin,
+  getMovistarSkin,
   skinVars,
   ResponsiveLayout,
   Box,
@@ -99,7 +99,7 @@ import {
 } from '@telefonica/mistica';
 
 const misticaTheme = {
-  skin: getMovistarNewSkin(),
+  skin: getMovistarSkin(),
   i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
 };
 
@@ -107,7 +107,7 @@ const misticaTheme = {
 const GlobalStyles = () => (
   <style>{`
     body {
-      font-family: 'Movistar Sans', 'Helvetica', 'Arial', sans-serif; /* font for Movistar New skin */
+      font-family: 'Movistar Sans', 'Helvetica', 'Arial', sans-serif; /* font for Movistar skin */
       background-color: ${skinVars.colors.background};
     }
   `}</style>
@@ -152,13 +152,13 @@ type ThemeConfig = {
 };
 ```
 
-Available skins: `getMovistarNewSkin()`, `getVivoNewSkin()`, `getO2NewSkin()`, `getTelefonicaSkin()`,
-`getBlauSkin()`, `getTuSkin()`, and others via `getSkinByName()`. Legacy variants without the `New` suffix
-also exist (`getMovistarSkin()`, `getVivoSkin()`, `getO2Skin()`); prefer the `New` versions for new projects.
-You can also create a custom skin. If you need to customize default component colors, radii, or other visual
-tokens beyond the props exposed by a component, prefer extending a skin over overriding component styles.
-Built-in palette exports such as `movistarNewPalette`, `o2NewPalette`, `vivoNewPalette`, etc. are available
-for skin authoring, and custom skins may also define their own palette colors from scratch.
+Available skins: `getMovistarSkin()`, `getVivoSkin()`, `getVivoEvolutionSkin()`, `getO2Skin()`,
+`getTelefonicaSkin()`, `getBlauSkin()`, and others via `getSkinByName()`. You can also create a custom skin.
+
+If you need to customize default component colors, radii, or other visual tokens beyond the props exposed by a
+component, prefer extending a skin over overriding component styles. Built-in palette exports such as
+`movistarPalette`, `o2Palette`, `vivoPalette`, etc. are available for skin authoring, and custom skins may
+also define their own palette colors from scratch.
 
 Built-in Link integrations: `Next12`, `Next13`, `Next14`, `ReactRouter5`, `ReactRouter6`.
 
@@ -288,8 +288,8 @@ All tokens via `skinVars` from `@telefonica/mistica`:
 
 - **Colors**: `skinVars.colors.*` (286 tokens for backgrounds, text, borders, controls, status, tags)
 - **Raw colors**: `skinVars.rawColors.*` (same tokens as RGB values, for use with `applyAlpha`)
-- **Palettes for skin authoring**: built-in palette exports such as `movistarNewPalette`, `o2NewPalette`,
-  `vivoNewPalette`, etc. Use these only when creating/extending a `Skin`, not for styling app components
+- **Palettes for skin authoring**: built-in palette exports such as `movistarPalette`, `o2Palette`,
+  `vivoPalette`, etc. Use these only when creating/extending a `Skin`, not for styling app components
   directly.
 - **Border radii**: `skinVars.borderRadii.*` (container, button, input, popup, chip, sheet, avatar, tag, etc.)
 - **Spacing**: `skinVars.spacing.*` (button, card, input, tag, feedback, hero, header, drawer padding tokens)

package/doc/migration-guide.md

@@ -1,3 +1,60 @@
+## Migration Guide from mistica 16.x to mistica 17.x
+
+Mistica 17 is a major release. Among other breaking changes, the `extra` prop family has been renamed to
+`slot` across all components.
+
+### Renamed props: `*Extra` → `*Slot`
+
+- The `extra` prop has been renamed to `slot` in `CoverHero`, `Hero`, `Popover`, `Tooltip`, `Meter`, `Dialog`,
+  `HeaderLayout`, `Row`/`RowList`, `FeedbackScreen`, and `AdvancedDataCard`.
+- In `DataCard`, `MediaCard`, and `NakedCard` the previously deprecated `extra` prop has been removed. Use
+  `slot` instead (already available in mistica 16).
+- `CoverHero`: `sideExtra` has been renamed to `sideSlot`.
+- `MainNavigationBar`: `burgerMenuExtra` has been renamed to `burgerMenuSlot`.
+- `HeaderLayout`: `sideBySideExtraOnDesktop` has been renamed to `sideBySideSlotOnDesktop`.
+- `DataCard`: the previously deprecated `extraAlignment` prop has been removed. Use `slotAlignment` instead.
+- `AdvancedDataCard`: `extraDividerPadding` has been renamed to `slotDividerPadding`, and `noExtraDivider` has
+  been renamed to `noSlotDivider`.
+
+### Removed deprecated props and hooks
+
+- `isInverse` prop across all components (`Boxed`, `DataCard`, `CoverCard`, `MediaCard`, `BoxedRow`,
+  `ResponsiveLayout`, `LoadingScreen`, `BoxedAccordionItem`, `FeedbackScreen`, `HeaderLayout`,
+  `MainSectionHeaderLayout`, and `ThemeVariant`). Use `variant="brand"` instead.
+- `Spinner.rolePresentation` prop. Use `aria-hidden` instead.
+- `Theme.enableTabFocus` prop. Rely on native `:focus-visible` behavior; the internal TabFocus mechanism has
+  been removed.
+- `NavigationBar.paddingX` prop. Use `wide` instead.
+- `RowList.ariaLabelledby` and `BoxedRowList.ariaLabelledby` props. Use `aria-labelledby` instead.
+- Sheet items no longer accept Icon components. Define icons using `url` and `urlDark` properties instead.
+- Card prop aliases: `button`, `actions`, `media`, `poster`, `imageUrl`, `backgroundImage`, `backgroundVideo`,
+  `backgroundVideoRef`, and `secondaryButton`. Use the new card API with `buttonPrimary`, `buttonSecondary`,
+  `imageSrc`, `imageSrcSet`, `videoSrc`, and related props.
+- `useIsInverseVariant` hook has been removed.
+- `useIsInverseOrMediaVariant` hook has been removed.
+- Sheet public exports have been removed: `ActionsSheet`, `InfoSheet`, `ActionsListSheet`, and
+  `RadioListSheet`. Use `showSheet()` instead.
+
+### Test attributes
+
+- The `data-component-name` attribute has been removed from all components. Use `data-testid` instead for
+  testing.
+
+### Design tokens
+
+- The `legacyDisplay` border radius token has been removed from the skin contract. Components previously using
+  it now use the `container` token instead. This may cause visual changes to `EmptyState` and feedback screens
+  depending on your skin.
+
+### Skin changes
+
+- The `vivo-new` skin has been merged into `vivo`, replacing the old vivo skin. If you were using `vivo-new`,
+  migrate to `vivo`.
+- A new `vivo-evolution` skin has been introduced as an evolution path from the previous vivo-new design.
+- The `O2-new` skin has replaced the old O2 skin. The old O2 design is no longer available.
+- The `movistar-new` skin has replaced the old Movistar skin. The old Movistar design is no longer available.
+- The `Tu` skin has been removed entirely. No replacement is available.
+
 ## Migration Guide for the New Cards Ecosystem (Starting from Mistica 16.xx.xx)
 
 The changes introduced in this version are backwards compatible; however, several components and props have

package/doc/patterns.md

@@ -164,9 +164,13 @@ controlled when the page value drives data fetching, routing, or analytics.
 const [page, setPage] = React.useState(1);
 
 <Stack space={16}>
-  <RowList>{items.map((item) => <Row key={item.id} title={item.title} />)}</RowList>
+  <RowList>
+    {items.map((item) => (
+      <Row key={item.id} title={item.title} />
+    ))}
+  </RowList>
   <Pagination totalPages={20} currentPage={page} onChange={setPage} />
-</Stack>
+</Stack>;
 ```
 
 For constrained containers, products can hide the page list and keep only previous/next controls.
@@ -550,7 +554,7 @@ return (
 import Link from 'next/link';
 
 const theme = {
-  skin: getMovistarNewSkin(),
+  skin: getMovistarSkin(),
   i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
   Link: {type: 'Next14', Component: Link},
 };
@@ -562,7 +566,7 @@ const theme = {
 import {Link} from 'react-router-dom';
 
 const theme = {
-  skin: getMovistarNewSkin(),
+  skin: getMovistarSkin(),
   i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
   Link: {type: 'ReactRouter6', Component: Link},
 };

package/doc/theme-config.md

@@ -98,8 +98,8 @@ implements the `Skin` interface (you need to define all the required color const
 If you need to customize default component colors, border radii, or similar visual tokens and there is no
 component prop for that, prefer a custom skin over ad hoc CSS/style overrides. You can:
 
-- start from a built-in skin like `getMovistarNewSkin()` and override the tokens you need
-- start from a built-in palette export like `movistarNewPalette`
+- start from a built-in skin like `getMovistarSkin()` and override the tokens you need
+- start from a built-in palette export like `movistarPalette`
 - define your own palette/colors from scratch
 
 ```ts
@@ -131,11 +131,11 @@ const skin: Skin = {
 You can also extend an existing skin instead of defining everything from scratch:
 
 ```ts
-import {getMovistarNewSkin, movistarNewPalette, type Skin} from '@telefonica/mistica';
+import {getMovistarSkin, movistarPalette, type Skin} from '@telefonica/mistica';
 
-const baseSkin = getMovistarNewSkin();
+const baseSkin = getMovistarSkin();
 const palette = {
-  ...movistarNewPalette,
+  ...movistarPalette,
   brandPrimary: '#0050D8',
 };
 
@@ -156,7 +156,7 @@ const skin: Skin = {
 };
 ```
 
-If you also need different default radii, override `borderRadii` in the custom skin rather than setting
-border radius ad hoc in component styles.
+If you also need different default radii, override `borderRadii` in the custom skin rather than setting border
+radius ad hoc in component styles.
 
 You can see an example in the [examples folder](../examples/custom-skin/).

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "16.71.0",
+    "version": "17.0.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -152,6 +152,7 @@
         "vite-plugin-no-bundle": "^4.0.0"
     },
     "dependencies": {
+        "@figma/code-connect": "^1.4.8",
         "@juggle/resize-observer": "^3.3.1",
         "@tef-novum/webview-bridge": "^5.1.0",
         "@telefonica/libphonenumber": "^2.9.1",
@@ -186,8 +187,18 @@
     },
     "release": {
         "plugins": [
-            "@semantic-release/commit-analyzer",
-            "@semantic-release/release-notes-generator",
+            [
+                "@semantic-release/commit-analyzer",
+                {
+                    "preset": "angular"
+                }
+            ],
+            [
+                "@semantic-release/release-notes-generator",
+                {
+                    "preset": "angular"
+                }
+            ],
             "@semantic-release/changelog",
             "./scripts/set-version.js",
             "@semantic-release/npm",

package/src/__figma__/accordion.figma.ts

@@ -0,0 +1,59 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=13455-1028
+// source=src/accordion.tsx
+// component=Accordion
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Auto collapse" is a BOOLEAN mapping to the `singleOpen` prop.
+const singleOpen = instance.getBoolean('Auto collapse');
+
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+// "Subtitle" is a VARIANT (True | False) toggling the subtitle text layer.
+const hasSubtitle = instance.getEnum('Subtitle', {True: true, False: false});
+const subtitleLayer = instance.findText('Subtitle');
+const subtitle = subtitleLayer.type === 'TEXT' ? subtitleLayer.textContent : '';
+
+const bodyLayer = instance.findText('Body content');
+const content = bodyLayer.type === 'TEXT' ? bodyLayer.textContent : '';
+
+// "Detail" is a BOOLEAN toggling the detail text layer of the same name.
+const hasDetail = instance.getBoolean('Detail');
+const detailLayer = instance.findText('Detail');
+const detail = detailLayer.type === 'TEXT' ? detailLayer.textContent : '';
+
+// "Asset" BOOLEAN toggles the "Asset" child instance rendered as the `asset` slot.
+const hasAsset = instance.getBoolean('Asset');
+const asset = hasAsset ? instance.findInstance('Asset') : null;
+let assetCode;
+if (asset && asset.type === 'INSTANCE') {
+    assetCode = asset.executeTemplate().example;
+}
+
+// "Right slot" BOOLEAN toggles the swappable "🔄 Replace right slot" instance.
+const hasRight = instance.getBoolean('Right slot');
+const right = hasRight ? instance.getInstanceSwap('🔄 Replace right slot') : null;
+let rightCode;
+if (right && right.type === 'INSTANCE') {
+    rightCode = right.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <Accordion ${singleOpen ? 'singleOpen' : ''}>
+            <AccordionItem
+                title="${title}"
+                ${hasSubtitle ? figma.code`subtitle="${subtitle}"` : ''}
+                content={<Text3 regular color={skinVars.colors.textSecondary}>${content}</Text3>}
+                ${hasDetail ? figma.code`detail="${detail}"` : ''}
+                ${assetCode ? figma.code`asset={${assetCode}}` : ''}
+                ${rightCode ? figma.code`right={${rightCode}}` : ''}
+            />
+        </Accordion>
+    `,
+    imports: ['import {Accordion, AccordionItem, Text3, skinVars} from "@telefonica/mistica";'],
+    id: 'accordion',
+    metadata: {nestable: false},
+};

package/src/__figma__/accordion.mobile.figma.ts

@@ -0,0 +1,59 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=25050-313
+// source=src/accordion.tsx
+// component=Accordion
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Auto collapse" is a BOOLEAN mapping to the `singleOpen` prop.
+const singleOpen = instance.getBoolean('Auto collapse');
+
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+// "Subtitle" is a VARIANT (True | False) toggling the subtitle text layer.
+const hasSubtitle = instance.getEnum('Subtitle', {True: true, False: false});
+const subtitleLayer = instance.findText('Subtitle');
+const subtitle = subtitleLayer.type === 'TEXT' ? subtitleLayer.textContent : '';
+
+const bodyLayer = instance.findText('Body content');
+const content = bodyLayer.type === 'TEXT' ? bodyLayer.textContent : '';
+
+// "Detail" is a BOOLEAN toggling the detail text layer of the same name.
+const hasDetail = instance.getBoolean('Detail');
+const detailLayer = instance.findText('Detail');
+const detail = detailLayer.type === 'TEXT' ? detailLayer.textContent : '';
+
+// "Asset" BOOLEAN toggles the "Asset" child instance rendered as the `asset` slot.
+const hasAsset = instance.getBoolean('Asset');
+const asset = hasAsset ? instance.findInstance('Asset') : null;
+let assetCode;
+if (asset && asset.type === 'INSTANCE') {
+    assetCode = asset.executeTemplate().example;
+}
+
+// "Right slot" BOOLEAN toggles the swappable "🔄 Replace right slot" instance.
+const hasRight = instance.getBoolean('Right slot');
+const right = hasRight ? instance.getInstanceSwap('🔄 Replace right slot') : null;
+let rightCode;
+if (right && right.type === 'INSTANCE') {
+    rightCode = right.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <Accordion ${singleOpen ? 'singleOpen' : ''}>
+            <AccordionItem
+                title="${title}"
+                ${hasSubtitle ? figma.code`subtitle="${subtitle}"` : ''}
+                content={<Text3 regular color={skinVars.colors.textSecondary}>${content}</Text3>}
+                ${hasDetail ? figma.code`detail="${detail}"` : ''}
+                ${assetCode ? figma.code`asset={${assetCode}}` : ''}
+                ${rightCode ? figma.code`right={${rightCode}}` : ''}
+            />
+        </Accordion>
+    `,
+    imports: ['import {Accordion, AccordionItem, Text3, skinVars} from "@telefonica/mistica";'],
+    id: 'accordion-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/alert-dialog.figma.ts

@@ -0,0 +1,33 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=1217-4059
+// source=src/dialog.tsx
+// component=Dialog
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Title" BOOLEAN toggles the title text layer of the same name.
+const hasTitle = instance.getBoolean('Title');
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+const messageLayer = instance.findText('Description text');
+const message = messageLayer.type === 'TEXT' ? messageLayer.textContent : '';
+
+export default {
+    example: figma.code`
+        <ButtonPrimary
+            onPress={() =>
+                alert({
+                    ${hasTitle ? figma.code`title: '${title}',` : ''}
+                    message: '${message}',
+                    acceptText: 'Accept',
+                })
+            }
+        >
+            Open dialog
+        </ButtonPrimary>
+    `,
+    imports: ['import {ButtonPrimary, useDialog} from "@telefonica/mistica";'],
+    id: 'alert-dialog',
+    metadata: {nestable: false},
+};

package/src/__figma__/alert-dialog.mobile.figma.ts

@@ -0,0 +1,33 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=1953-10250
+// source=src/dialog.tsx
+// component=Dialog
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Title" BOOLEAN toggles the title text layer of the same name.
+const hasTitle = instance.getBoolean('Title');
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+const messageLayer = instance.findText('Description');
+const message = messageLayer.type === 'TEXT' ? messageLayer.textContent : '';
+
+export default {
+    example: figma.code`
+        <ButtonPrimary
+            onPress={() =>
+                alert({
+                    ${hasTitle ? figma.code`title: '${title}',` : ''}
+                    message: '${message}',
+                    acceptText: 'Accept',
+                })
+            }
+        >
+            Open dialog
+        </ButtonPrimary>
+    `,
+    imports: ['import {ButtonPrimary, useDialog} from "@telefonica/mistica";'],
+    id: 'alert-dialog-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/autocomplete.figma.ts

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=33584-2077
+// source=src/autocomplete.tsx
+// component=Autocomplete
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const labelLayer = instance.findText('Label');
+const label = labelLayer.type === 'TEXT' ? labelLayer.textContent : '';
+
+// "Helper text" is a BOOLEAN toggling the helper text layer of the same name.
+const hasHelperText = instance.getBoolean('Helper text');
+const helperTextLayer = instance.findText('Helper text');
+const helperText = helperTextLayer.type === 'TEXT' ? helperTextLayer.textContent : '';
+
+// These states are Figma VARIANTs (not BOOLEAN properties) but map onto boolean code props.
+const error = instance.getEnum('Error', {No: false, Yes: true});
+const disabled = instance.getEnum('Disabled', {False: false, True: true});
+const readOnly = instance.getEnum('Read only', {False: false, True: true});
+
+export default {
+    example: figma.code`
+        <Autocomplete
+            name="autocomplete"
+            label="${label}"
+            value=""
+            onChangeValue={() => {}}
+            getSuggestions={(_value) => []}
+            ${hasHelperText ? figma.code`helperText="${helperText}"` : ''}
+            ${error ? 'error' : ''}
+            ${disabled ? 'disabled' : ''}
+            ${readOnly ? 'readOnly' : ''}
+        />
+    `,
+    imports: ['import {Autocomplete} from "@telefonica/mistica";'],
+    id: 'autocomplete',
+    metadata: {nestable: false},
+};

package/src/__figma__/avatar.figma.ts

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=2725-4164
+// source=src/avatar.tsx
+// component=Avatar
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Type" VARIANT selects how the avatar renders: initials, image or icon.
+const type = instance.getEnum('Type', {
+    Letters: 'letters',
+    Image: 'image',
+    Icon: 'icon',
+});
+
+// "Initials" is a TEXT component property.
+const initials = instance.getString('Initials');
+
+// "Choose icon" INSTANCE_SWAP holds the icon rendered when Type=Icon.
+const icon = instance.getInstanceSwap('Choose icon');
+let iconCode;
+if (type === 'icon' && icon && icon.type === 'INSTANCE') {
+    iconCode = icon.executeTemplate().example;
+}
+
+// "Border" BOOLEAN maps to the `border` prop.
+const border = instance.getBoolean('Border');
+
+// "Badge" BOOLEAN toggles the nested Badge instance. Its "+9" and "Non-numeric"
+// variants decide the numeric/boolean value passed to the `badge` prop.
+const hasBadge = instance.getBoolean('Badge');
+const badgeInstance = instance.findInstance('Badge');
+let badgeValue;
+if (hasBadge && badgeInstance.type === 'INSTANCE') {
+    const plusNine = badgeInstance.getEnum('+9', {True: true, False: false});
+    const nonNumeric = badgeInstance.getEnum('Non-numeric', {True: true, False: false});
+    badgeValue = plusNine ? 15 : nonNumeric ? true : 2;
+}
+
+export default {
+    example: figma.code`
+        <Avatar
+            size={64}
+            ${type === 'image' ? figma.code`src="https://picsum.photos/1200/1200"` : ''}
+            ${type === 'letters' ? figma.code`initials="${initials}"` : ''}
+            ${iconCode ? figma.code`Icon={${iconCode}}` : ''}
+            ${hasBadge ? figma.code`badge={${badgeValue}}` : ''}
+            ${border ? 'border' : ''}
+        />
+    `,
+    imports: ['import {Avatar} from "@telefonica/mistica";'],
+    id: 'avatar',
+    metadata: {nestable: false},
+};

package/src/__figma__/avatar.mobile.figma.ts

@@ -0,0 +1,53 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=4772-9007
+// source=src/avatar.tsx
+// component=Avatar
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Type" VARIANT selects how the avatar renders: initials, image or icon.
+const type = instance.getEnum('Type', {
+    Initials: 'letters',
+    Image: 'image',
+    Icon: 'icon',
+});
+
+// "Initials" is a TEXT component property.
+const initials = instance.getString('Initials');
+
+// "Choose icon" INSTANCE_SWAP holds the icon rendered when Type=Icon.
+const icon = instance.getInstanceSwap('Choose icon');
+let iconCode;
+if (type === 'icon' && icon && icon.type === 'INSTANCE') {
+    iconCode = icon.executeTemplate().example;
+}
+
+// "Border" BOOLEAN maps to the `border` prop.
+const border = instance.getBoolean('Border');
+
+// "Badge" BOOLEAN toggles the nested Badge instance. Its "+9" and "Non-numeric"
+// variants decide the numeric/boolean value passed to the `badge` prop.
+const hasBadge = instance.getBoolean('Badge');
+const badgeInstance = instance.findInstance('Badge');
+let badgeValue;
+if (hasBadge && badgeInstance.type === 'INSTANCE') {
+    const plusNine = badgeInstance.getEnum('+9', {True: true, False: false});
+    const nonNumeric = badgeInstance.getEnum('Non-numeric', {True: true, False: false});
+    badgeValue = plusNine ? 15 : nonNumeric ? true : 2;
+}
+
+export default {
+    example: figma.code`
+        <Avatar
+            size={64}
+            ${type === 'image' ? figma.code`src="https://picsum.photos/1200/1200"` : ''}
+            ${type === 'letters' ? figma.code`initials="${initials}"` : ''}
+            ${iconCode ? figma.code`Icon={${iconCode}}` : ''}
+            ${hasBadge ? figma.code`badge={${badgeValue}}` : ''}
+            ${border ? 'border' : ''}
+        />
+    `,
+    imports: ['import {Avatar} from "@telefonica/mistica";'],
+    id: 'avatar-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/badge.figma.ts

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=2817-4076
+// source=src/badge.tsx
+// component=Badge
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "+9" and "Non-numeric" are VARIANT properties (False | True), not Figma BOOLEAN
+// properties. When "+9" is True the badge shows a big number (15). Otherwise, when
+// "Non-numeric" is True the badge renders a dot (no `value`), and when both are
+// False it shows a numeric value (2).
+const bigNumber = instance.getEnum('+9', {True: true, False: false});
+const nonNumeric = instance.getEnum('Non-numeric', {True: true, False: false});
+
+const value = bigNumber ? 15 : nonNumeric ? undefined : 2;
+
+export default {
+    example: figma.code`
+        <Badge value={${value}}>
+            {/* The content inside the badge is optional and can be used to display anything. For example <IconHeartRegular /> or <Avatar /> */}
+        </Badge>
+    `,
+    imports: ['import {Badge} from "@telefonica/mistica";'],
+    id: 'badge',
+    metadata: {nestable: false},
+};

package/src/__figma__/badge.mobile.figma.ts

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=6180-9123
+// source=src/badge.tsx
+// component=Badge
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "+9" and "Non-numeric" are VARIANT properties (False | True), not Figma BOOLEAN
+// properties. When "+9" is True the badge shows a big number (15). Otherwise, when
+// "Non-numeric" is True the badge renders a dot (no `value`), and when both are
+// False it shows a numeric value (2).
+const bigNumber = instance.getEnum('+9', {True: true, False: false});
+const nonNumeric = instance.getEnum('Non-numeric', {True: true, False: false});
+
+const value = bigNumber ? 15 : nonNumeric ? undefined : 2;
+
+export default {
+    example: figma.code`
+        <Badge value={${value}}>
+            {/* The content inside the badge is optional and can be used to display anything. For example <IconHeartRegular /> or <Avatar /> */}
+        </Badge>
+    `,
+    imports: ['import {Badge} from "@telefonica/mistica";'],
+    id: 'badge-mobile',
+    metadata: {nestable: false},
+};