@telefonica/mistica 16.70.0 → 16.72.0

package/dist-es/tooltip.js

@@ -89,7 +89,7 @@ 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 ft } from "./utils/helpers.js";
+import { isEqual as dt } 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";
@@ -99,7 +99,7 @@ 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 dt = (t)=>({
+const ft = (t)=>({
         border: `1px solid ${({
             default: C.colors.border,
             alternative: C.colors.border,
@@ -120,20 +120,20 @@ const dt = (t)=>({
         default:
             return "";
     }
-}, ut = (t)=>{
-    const m = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), T = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), g = t.offsetWidth - m, c = t.offsetHeight - T;
+}, 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;
     return {
         width: g,
         height: c
     };
-}, mt = (t, m, T, g, c)=>{
-    if (!t || !m) return;
-    const { top: b, bottom: _, left: W, right: V } = t, v = g - _, S = c - V, o = b, w = W, { width: X, height: z } = ut(m), f = X + I, N = z + I, O = f <= Math.max(w, S), R = N <= Math.max(v, o);
+}, 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 ? f <= w ? "left" : "right" : v > o ? "bottom" : "top";
+            return O ? d <= w ? "left" : "right" : v > o ? "bottom" : "top";
         case "right":
-            return O ? f <= S ? "right" : "left" : v > o ? "bottom" : "top";
+            return O ? d <= S ? "right" : "left" : v > o ? "bottom" : "top";
         case "top":
             return R ? N <= o ? "top" : "bottom" : w > S ? "left" : "right";
         case "bottom":
@@ -142,8 +142,8 @@ const dt = (t)=>({
             return;
     }
 }, Zt = (param)=>{
-    let { content: t, target: m, 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(), f = 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), u = 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 : f === N, st = Dt(), d = lt(K, x), it = lt(U, x, !0), n = xt(), M = s.useCallback(()=>{
+    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);
     }, []);
     s.useEffect(()=>{
@@ -153,14 +153,14 @@ const dt = (t)=>({
         M
     ]), s.useEffect(()=>{
         if (!y || !x) return;
-        const a = mt(d, y, c, n.height, n.width);
-        if (!a || !d) {
+        const a = ut(f, y, c, n.height, n.width);
+        if (!a || !f) {
             P(void 0), G(void 0), M();
             return;
         }
         let r, e;
         var _parseInt;
-        const { left: l, right: k, top: A, bottom: $ } = d, { width: F, height: B } = ut(y), nt = n.width - F, at = n.height - B, h = (_parseInt = parseInt(At(C.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
+        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){
             case "top":
                 r = {
@@ -209,18 +209,18 @@ const dt = (t)=>({
                 };
                 break;
         }
-        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}%`), ft(r, H) || P(r), ft(e, Y) || G(e);
+        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);
     }, [
         y,
-        d,
+        f,
         it,
         x,
         c,
         n,
         H,
         Y,
-        u,
-        f,
+        m,
+        d,
         M
     ]);
     const tt = s.useRef(!1);
@@ -235,28 +235,28 @@ const dt = (t)=>({
                     break;
             }
         }, r = ()=>tt.current = !1, e = (l)=>{
-            !o && u && d && (l.clientX < d.left || l.clientX > d.right || l.clientY < d.top || l.clientY > d.bottom) && M();
+            !o && m && f && (l.clientX < f.left || l.clientX > f.right || l.clientY < f.top || l.clientY > f.bottom) && M();
         };
         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);
         };
     }, [
-        u,
+        m,
         M,
-        d,
+        f,
         o
     ]), s.useEffect(()=>{
-        J || (Z || ot || rt ? O(f) : R(f));
+        J || (Z || ot || rt ? O(d) : R(d));
     }, [
         Z,
         ot,
         rt,
-        f,
+        d,
         O,
         R,
         J
     ]);
-    const Tt = mt(d, y, c, n.height, n.width), gt = W !== void 0 ? W : (it === null || it === void 0 ? void 0 : it.width) === wt;
+    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, {
         children: [
             /* @__PURE__ */ i("div", {
@@ -266,22 +266,22 @@ const dt = (t)=>({
                     r && r !== K.current && (K.current = r);
                 },
                 onMouseOver: ()=>{
-                    !u && !o && L(!0);
+                    !m && !o && L(!0);
                 },
                 onMouseLeave: ()=>{
-                    !u && !o && L(!1);
+                    !m && !o && L(!1);
                 },
                 onClick: ()=>{
-                    (u || o) && L(o ? !Z : !0);
+                    (m || o) && L(o ? !Z : !0);
                 },
                 onFocus: ()=>{
                     tt.current && !o && Q(!0);
                 },
                 onBlur: ()=>{
-                    !u && !o && Q(!1);
+                    !m && !o && Q(!1);
                 },
-                "aria-describedby": f,
-                children: m
+                "aria-describedby": d,
+                children: u
             }),
             /* @__PURE__ */ i(Mt, {
                 children: /* @__PURE__ */ i(Et, {
@@ -310,7 +310,7 @@ const dt = (t)=>({
                             }
                         }, b), {
                             role: "tooltip",
-                            "aria-label": f,
+                            "aria-label": d,
                             tabIndex: -1,
                             children: /* @__PURE__ */ i("div", {
                                 className: et(Lt),
@@ -322,16 +322,16 @@ const dt = (t)=>({
                                 }),
                                 ref: Vt(ht, U),
                                 onMouseEnter: ()=>{
-                                    !u && a === "entered" && !o && q(!0);
+                                    !m && a === "entered" && !o && q(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    !u && !o && q(!1);
+                                    !m && !o && q(!1);
                                 },
                                 children: /* @__PURE__ */ D("div", {
                                     className: Rt,
                                     style: _object_spread_props(_object_spread({
                                         width: g
-                                    }, dt(st)), {
+                                    }, ft(st)), {
                                         maxWidth: Math.min(pt, n.width)
                                     }),
                                     children: [
@@ -363,7 +363,7 @@ const dt = (t)=>({
                                             style: Y,
                                             children: /* @__PURE__ */ i("div", {
                                                 className: et(yt),
-                                                style: dt(st)
+                                                style: ft(st)
                                             })
                                         })
                                     ]
@@ -375,9 +375,9 @@ const dt = (t)=>({
         ]
     });
 }, be = (_param)=>{
-    var { centerContent: t, extra: m, children: T, dataAttributes: g, title: c, description: b } = _param, _ = _object_without_properties(_param, [
+    var { centerContent: t, slot: u, children: T, dataAttributes: g, title: c, description: b } = _param, _ = _object_without_properties(_param, [
         "centerContent",
-        "extra",
+        "slot",
         "children",
         "dataAttributes",
         "title",
@@ -400,12 +400,12 @@ const dt = (t)=>({
                         })
                     ]
                 }),
-                m !== null && m !== void 0 ? m : T
+                u !== null && u !== void 0 ? u : T
             ]
         }),
         centerContent: t,
         dataAttributes: _object_spread({
-            "component-name": "Tooltip"
+            testid: "Tooltip"
         }, g)
     }, _));
 };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                     */ var t = "v16_70_mhti6u0", f = "v16_70_mhti6u2 v16_70_mhti6u1 v16_70_1y2v1nft7", n = "v16_70_mhti6u4 v16_70_mhti6u2 v16_70_mhti6u1 v16_70_1y2v1nft7 v16_70_mhti6u3 v16_70_1y2v1nffx v16_70_1y2v1nfh6 v16_70_1y2v1nfif v16_70_1y2v1nfjo v16_70_1y2v1nfq6 v16_70_1y2v1nfsm v16_70_1y2v1nfqr v16_70_1y2v1nf7x v16_70_1y2v1nffw v16_70_1y2v1nft9", i = "v16_70_mhti6u5";
+/* empty css                                     */ /* empty css                                     */ var t = "v16_72_mhti6u0", f = "v16_72_mhti6u2 v16_72_mhti6u1 v16_72_1y2v1nft6", n = "v16_72_mhti6u4 v16_72_mhti6u2 v16_72_mhti6u1 v16_72_1y2v1nft6 v16_72_mhti6u3 v16_72_1y2v1nffx v16_72_1y2v1nfh6 v16_72_1y2v1nfif v16_72_1y2v1nfjo v16_72_1y2v1nfq6 v16_72_1y2v1nfsm v16_72_1y2v1nfqr v16_72_1y2v1nf7x v16_72_1y2v1nffw v16_72_1y2v1nft8", i = "v16_72_mhti6u5";
 export { f as base, t as marginReset, i as notTouchable, n as touchable };

package/dist-es/touchable.js

@@ -108,7 +108,9 @@ const I = /*#__PURE__*/ c.forwardRef((e, t)=>{
         "aria-disabled": e["aria-disabled"],
         "aria-hidden": e["aria-hidden"],
         "aria-live": e["aria-live"]
-    }, J(e.dataAttributes, "Touchable")), u = {
+    }, J(_object_spread({
+        testid: "Touchable"
+    }, e.dataAttributes))), u = {
         "aria-checked": e["aria-checked"],
         "aria-disabled": e.disabled || e["aria-disabled"] ? !0 : void 0,
         "aria-controls": e["aria-controls"],

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

@@ -1,4 +1,4 @@
 /* empty css                                      */ /* empty css                                                */ var r = {
-    aspectRatio: "var(--v16_70_yqswj60)"
-}, y = "v16_70_yqswj61 v16_70_1y2v1nft8 v16_70_1y2v1nfsj v16_70_1y2v1nfsk v16_70_1y2v1nfpy", a = "v16_70_yqswj62", n = "v16_70_yqswj63 v16_70_1y2v1nfqr v16_70_1y2v1nfr8 v16_70_1y2v1nfte v16_70_1y2v1nftt";
+    aspectRatio: "var(--v16_72_yqswj60)"
+}, y = "v16_72_yqswj61 v16_72_1y2v1nft7 v16_72_1y2v1nfsj v16_72_1y2v1nfsk v16_72_1y2v1nfpy", a = "v16_72_yqswj62", n = "v16_72_yqswj63 v16_72_1y2v1nfqr v16_72_1y2v1nfr8 v16_72_1y2v1nftd v16_72_1y2v1nfts";
 export { a as container, n as containerWithWrapper, r as vars, y as wrapper };

package/dist-es/utils/dom.js

@@ -51,7 +51,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { isServerSide as a } from "./environment.js";
-const p = (e)=>{
+const d = (e)=>{
     if (a()) return !1;
     const t = document.createElement("input");
     return t.setAttribute("type", e), t.type === e;
@@ -75,15 +75,11 @@ try {
 } catch (e) {}
 const h = (e, t, r)=>e.addEventListener(t, r, c ? {
         passive: !0
-    } : !1), E = (e, t, r)=>e.removeEventListener(t, r, !1), g = (e, t)=>{
-    const r = t ? // TODO: remove deprecated component-name in next major release
-    {
-        "data-component-name": t,
-        "data-testid": t
-    } : {};
-    return e && Object.keys(e).forEach((n)=>{
-        r["data-" + n] = e[n];
-    }), r;
+    } : !1), E = (e, t, r)=>e.removeEventListener(t, r, !1), g = (e)=>{
+    const t = {};
+    return e && Object.keys(e).forEach((r)=>{
+        t["data-" + r] = e[r];
+    }), t;
 }, u = (e, t)=>{
     const r = `overflow${t}`, n = window.getComputedStyle(e)[r];
     return [
@@ -118,4 +114,4 @@ const h = (e, t, r)=>e.addEventListener(t, r, c ? {
     }
     return getComputedStyle(t !== null && t !== void 0 ? t : document.documentElement).getPropertyValue(e);
 };
-export { h as addPassiveEventListener, f as cancelEvent, m as createChangeEvent, i as getCssVarValue, g as getPrefixedDataAttributes, b as getScrollDistanceToBottom, w as getScrollableParentElement, P as hasScroll, l as isCssVar, p as isInputTypeSupported, y as listenResize, E as removePassiveEventListener };
+export { h as addPassiveEventListener, f as cancelEvent, m as createChangeEvent, i as getCssVarValue, g as getPrefixedDataAttributes, b as getScrollDistanceToBottom, w as getScrollableParentElement, P as hasScroll, l as isCssVar, d as isInputTypeSupported, y as listenResize, E as removePassiveEventListener };

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

@@ -1,2 +1,2 @@
-/* empty css                                     */ /* empty css                                 */ var f = "v16_70_19h163j0 v16_70_1y2v1nfte v16_70_1y2v1nftt v16_70_1y2v1nfq6 v16_70_1y2v1nffw v16_70_1y2v1nfsj v16_70_1y2v1nfsk v16_70_1y2v1nfv2";
+/* empty css                                     */ /* empty css                                 */ var f = "v16_72_19h163j0 v16_72_1y2v1nftd v16_72_1y2v1nfts v16_72_1y2v1nfq6 v16_72_1y2v1nffw v16_72_1y2v1nfsj v16_72_1y2v1nfsk v16_72_1y2v1nfv1";
 export { f as video };

package/dist-es/video.js

@@ -1,4 +1,32 @@
 'use client';
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
     var target = _object_without_properties_loose(source, excluded);
@@ -201,7 +229,9 @@ const K = {
         aspectRatio: m,
         width: n.width,
         height: n.height,
-        dataAttributes: X(B, "Video"),
+        dataAttributes: X(_object_spread({
+            testid: "Video"
+        }, B)),
         children: [
             /* @__PURE__ */ l("div", {
                 style: {

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

@@ -1,2 +1,2 @@
-/* empty css                                                     */ var a = "v16_70_1ezqdj90", r = "v16_70_1ezqdj91";
+/* empty css                                                     */ var a = "v16_72_1ezqdj90", r = "v16_72_1ezqdj91";
 export { a as container, r as waveFadeOut };

package/doc/components.md

@@ -1,6 +1,7 @@
 # Components Reference
 
-All components are imported from `@telefonica/mistica`. Before using any component, you should **always** read the definition .d.ts files located in `node_modules` so you have all the props and JSDoc context.
+All components are imported from `@telefonica/mistica`. Before using any component, you should **always** read
+the definition .d.ts files located in `node_modules` so you have all the props and JSDoc context.
 
 ```tsx
 import {ButtonPrimary, Stack, Text2, ...} from '@telefonica/mistica';
@@ -81,6 +82,29 @@ Positions a primary and optional secondary button:
 />
 ```
 
+## Pagination
+
+Use `Pagination` to navigate through a finite number of pages. It can be uncontrolled with `defaultPage` or
+controlled with `currentPage` and `onChange`.
+
+```tsx
+<Pagination totalPages={20} defaultPage={1} />
+```
+
+```tsx
+const [page, setPage] = React.useState(1);
+
+<Pagination totalPages={20} currentPage={page} onChange={setPage} />;
+```
+
+Common props:
+
+- `surroundingPageCount` -- number of pages shown around the current page. Defaults to `1`.
+- `hidePageList` -- hides page numbers and keeps only previous/next controls.
+- `hideNavigationControls` -- hides previous/next controls and keeps only page numbers.
+- `mode="iconOnly"` -- renders previous/next as icon buttons.
+- `navLeftLabel` / `navRightLabel` -- custom labels for previous/next controls.
+
 ## Text and Titles
 
 > 💡 **Centering text uses two complementary props:** [`<Align x="center">`](./layout.md#align) positions the
@@ -385,8 +409,8 @@ const [selectedIndex, setSelectedIndex] = React.useState(0);
       description="Page description text"
     />
   }
-  extra={<Placeholder />}
-  sideBySideExtraOnDesktop
+  slot={<Placeholder />}
+  sideBySideSlotOnDesktop
 />
 ```
 
@@ -444,7 +468,7 @@ dialog({
   title: 'Title',
   subtitle: 'Subtitle',
   message: 'Message',
-  extra: <Placeholder />,
+  slot: <Placeholder />,
   acceptText: 'Accept',
   cancelText: 'Cancel',
 });

package/doc/fonts.md

@@ -8,18 +8,15 @@ default serif font (Times New Roman on desktop). You must declare `@font-face` r
 
 Each skin has a designated font family. Use the correct one for the skin your app is using:
 
-| Skin                         | Getter function        | Font family         |
-| ---------------------------- | ---------------------- | ------------------- |
-| `movistar-new` _(preferred)_ | `getMovistarNewSkin()` | `'Movistar Sans'`   |
-| `movistar` _(legacy)_        | `getMovistarSkin()`    | `'On Air'`          |
-| `o2-new` _(preferred)_       | `getO2NewSkin()`       | `'On Air'`          |
-| `o2` _(legacy)_              | `getO2Skin()`          | `'On Air'`          |
-| `vivo-new` _(preferred)_     | `getVivoNewSkin()`     | `'Vivo Type'`       |
-| `vivo` _(legacy)_            | `getVivoSkin()`        | `'Roboto'`          |
-| `telefonica`                 | `getTelefonicaSkin()`  | `'Telefonica Sans'` |
-| `blau`                       | `getBlauSkin()`        | `'Roboto'`          |
-| `tu`                         | `getTuSkin()`          | `'Telefonica Sans'` |
-| `esimflag`                   | `getEsimflagSkin()`    | `'On Air'`          |
+| Skin             | Getter function          | Font family         |
+| ---------------- | ------------------------ | ------------------- |
+| `movistar`       | `getMovistarSkin()`      | `'Movistar Sans'`   |
+| `o2`             | `getO2Skin()`            | `'On Air'`          |
+| `vivo`           | `getVivoSkin()`          | `'Vivo Type'`       |
+| `vivo-evolution` | `getVivoEvolutionSkin()` | `'Vivo Type'`       |
+| `telefonica`     | `getTelefonicaSkin()`    | `'Telefonica Sans'` |
+| `blau`           | `getBlauSkin()`          | `'Roboto'`          |
+| `esimflag`       | `getEsimflagSkin()`      | `'On Air'`          |
 
 ## Setting font-family
 
@@ -46,7 +43,7 @@ Render `<GlobalStyles />` as a direct child of `ThemeContextProvider`, before th
 Declare the font weights your app needs. Mistica uses **300 (light), 400 (regular), 500 (medium) and 700
 (bold)**. Serve the `.woff2` files from your own static hosting.
 
-### On Air (Movistar, O2, O2 New, Esimflag)
+### On Air (O2, Esimflag)
 
 ```css
 @font-face {
@@ -79,7 +76,7 @@ body {
 }
 ```
 
-### Movistar Sans (Movistar New)
+### Movistar Sans (Movistar)
 
 ```css
 @font-face {
@@ -145,7 +142,7 @@ body {
 }
 ```
 
-### Telefonica Sans (Telefonica, Tu)
+### Telefonica Sans (Telefonica)
 
 ```css
 @font-face {

package/doc/llms/agents/figma-verifier.md

@@ -37,6 +37,12 @@ rules before starting.
      `font-family`, composite props that don't match the non-CodeConnect DOM, spacing values absent from the
      DOM, mismatched semantic structure (`Stack` vs `Inline`, flat vs nested), native HTML where a Mistica
      primitive exists, wrong/missing skin/font/body-background for the file's brand.
+   - **Layout primitives.** When the DOM shows `grid grid-cols-[repeat(12,…)]` with `col-[…/span_N]` children,
+     flag any implementation that used a raw `<div style={{display:'grid'}}>`, a fixed-width flex row, `Grid`,
+     or manual spacer columns instead of a `GridLayout` whose `template` matches the child spans. Flag a
+     `GridLayout` that is not wrapped in a `ResponsiveLayout`, and a full-width padded section
+     (`px-[48/32/16px]`) implemented without a `ResponsiveLayout`. Conversely, flag double-wrapping a
+     component that embeds its own `ResponsiveLayout` (`MainNavigationBar`, `NavigationBar`, `Tabs`).
 
 5. **Report**. One summary line (`clean` or `N issues found, M blocking`), then a bullet list ordered by
    severity. Each issue:

package/doc/llms/figma-mcp.md

@@ -34,29 +34,84 @@ that your implementation matches the designer's intent.
 **If you cannot point at a line in the DOM to justify a value, do not write that value.** Do not pick "nearby
 nicer" numbers.
 
-## Mapping Figma flex to Mistica layout primitives
-
-| Figma                                   | Mistica                                             |
-| --------------------------------------- | --------------------------------------------------- |
-| `flex gap-[Npx]` (vertical, `flex-col`) | `Stack space={N}`                                   |
-| `flex gap-[Npx]` (horizontal)           | `Inline space={N}`                                  |
-| `justify-between`                       | `Inline space="between"`                            |
-| `justify-around`                        | `Inline space="around"`                             |
-| `justify-evenly`                        | `Inline space="evenly"`                             |
-| `items-center`                          | `alignItems="center"` on `Inline`                   |
-| `flex-wrap`                             | `wrap` on `Inline`                                  |
-| `p-[Npx]` / `px-[Npx]` / `py-[Npx]`     | `Box padding={N}` / `paddingX={N}` / `paddingY={N}` |
-| `rounded-[var(--radii/container,...)]`  | `Boxed` (or `skinVars.borderRadii.container`)       |
-| `bg-[var(--background...)]`             | `ResponsiveLayout variant` or `Boxed variant`       |
+## Mapping Figma layout to Mistica layout primitives
+
+| Figma                                                         | Mistica                                                                                          |
+| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `flex gap-[Npx]` (vertical — has `flex-col`)                  | `Stack space={N}`                                                                                |
+| `flex gap-[Npx]` (horizontal — no `flex-col`)                 | `Inline space={N}`                                                                               |
+| Full-width section with `px-[48/32/16px]`, **no** `grid-cols` | `ResponsiveLayout` (responsive side margins; content stacks inside)                              |
+| `grid grid-cols-[repeat(12,…)]` on a full-width section       | `GridLayout` (inside a `ResponsiveLayout`) — see [Reading grid sections](#reading-grid-sections) |
+| `col-[S/span_N]` on a grid child                              | a `GridLayout` column of span `N` (drives the `template`)                                        |
+| `justify-between`                                             | `Inline space="between"`                                                                         |
+| `justify-around`                                              | `Inline space="around"`                                                                          |
+| `justify-evenly`                                              | `Inline space="evenly"`                                                                          |
+| `items-center`                                                | `alignItems="center"` on `Inline`                                                                |
+| `flex-wrap`                                                   | `wrap` on `Inline`                                                                               |
+| `p-[Npx]` / `px-[Npx]` / `py-[Npx]`                           | `Box padding={N}` / `paddingX={N}` / `paddingY={N}`                                              |
+| `rounded-[var(--radii/container,...)]`                        | `Boxed` (or `skinVars.borderRadii.container`)                                                    |
+| `bg-[var(--background...)]`                                   | `ResponsiveLayout variant` or `Boxed variant`                                                    |
 
 Each spacing primitive has its own allowed scale. Figma values outside the scale must be rounded to the
 nearest allowed value and noted — never silently apply arbitrary CSS.
 
+**Vertical vs. horizontal flex.** The presence of `flex-col` is the deciding signal: `flex` with `flex-col` is
+a `Stack`; `flex` without it is an `Inline`. A `flex flex-[1_0_0]` child fills its track — map it to a
+component sized to fill its `Inline` / `GridLayout` slot, not to a fixed width.
+
+## Reading grid sections
+
+A full-width section laid out as a 12-column grid is a `GridLayout`. The MCP output makes this explicit — the
+section `div` carries `grid grid-cols-[repeat(12,minmax(0,1fr))]` (plus `gap-x-[24px]` on desktop / `16px` on
+tablet), and each direct child carries a `col-[start/span_N]` class. Read the `span_N` of each non-empty child
+(ignore empty spacer `div`s), in order, and match the sequence to a `GridLayout` template:
+
+| Child column spans, in order | `GridLayout`                                      |
+| ---------------------------- | ------------------------------------------------- |
+| 6, 6                         | `template="6+6"` (`left` / `right`)               |
+| 8, 4                         | `template="8+4"` (`left` / `right`)               |
+| 4, 6                         | `template="4+6"` (`left` / `right`)               |
+| 3, 9                         | `template="3+9"` (`left` / `right`)               |
+| 5, 4                         | `template="5+4"` (`left` / `right`)               |
+| single span 10               | `template="10"` (`children`)                      |
+| single span 8                | `template="8"` (`children`)                       |
+| anything else                | no `template` — pass `children` (raw 12-col grid) |
+
+Rules:
+
+- **Wrap the `GridLayout` in a `ResponsiveLayout`.** `ResponsiveLayout` supplies the responsive side margins
+  only (it has no columns); `GridLayout` supplies the 12-column structure. The section's `px-[48px]` /
+  `px-[32px]` / `px-[16px]` is the `ResponsiveLayout` margin — do not re-apply it as `Box` padding. The
+  section's `py-[Npx]` is real vertical padding → `Box paddingY={N}` inside.
+- **Match the template; never hand-build the grid.** Do not emit a raw `<div style={{display:'grid'}}>`, a
+  fixed-width flex row, or manual spacer columns. The spacer-span templates (`4+6`, `5+4`, `10`, `8`) render
+  their own spacer columns internally — select the named `template` and ignore any empty spacer `div`s the MCP
+  DOM shows around the content.
+- **Background variant comes from the section fill**, not the grid: `bg-[var(--backgroundalternative,…)]` →
+  `ResponsiveLayout variant="alternative"` (likewise `--backgroundbrand` → `"brand"`, `--backgroundnegative` →
+  `"negative"`, an image/video background → `"media"`); plain `bg-[var(--background,…)]` → default.
+- **Mobile is the same `GridLayout`.** When the design stacks the grid to a single column on mobile, that is
+  `GridLayout`'s own responsive behaviour (it collapses to one column) — keep one `GridLayout`; do not branch
+  to a separate `Stack`.
+
+Working example (the `3+9` data section: a filter sidebar beside a table):
+
+```tsx
+<ResponsiveLayout variant="default">
+  <Box paddingY={32}>
+    <GridLayout template="3+9" left={<FilterPanel />} right={<DataTable />} />
+  </Box>
+</ResponsiveLayout>
+```
+
+Do not wrap components that embed their own `ResponsiveLayout` (e.g. `MainNavigationBar`, `NavigationBar`,
+`Tabs` — see the list in [`layout.md`](../layout.md)) in another `ResponsiveLayout`.
+
 ## Don't snap Figma values to Mistica's rhythm
 
-Mistica's 16 / 24 / 32 vertical-rhythm guidance in `patterns.md` and `layout.md` is for **greenfield
-composition** — UI you are designing yourself. It is not a reason to override explicit Figma values. When the
-DOM specifies a spacing, use it literally.
+Mistica's 16 / 24 / 32 vertical-rhythm guidance in [`patterns.md`](../patterns.md) and
+[`layout.md`](../layout.md) is for **greenfield composition** — UI you are designing yourself. It is not a
+reason to override explicit Figma values. When the DOM specifies a spacing, use it literally.
 
 ## Tokens over literal values
 
@@ -75,8 +130,8 @@ is ahead of the skin — flag it and extend the skin instead of hardcoding.
 
 Ignore per-node `font-[family-name:var(--fontfamily/fontfamily,'Movistar_Sans:Medium',...)]` and
 `font-['On_Air:Regular',...]` classes. Font family is set **once globally** under `ThemeContextProvider` via
-`GlobalStyles` — the active skin's font (see `fonts.md`) is the source of truth. Per-node font families in the
-MCP output are leaked style from the Figma file, not designer intent.
+`GlobalStyles` — the active skin's font (see [`fonts.md`](../fonts.md)) is the source of truth. Per-node font
+families in the MCP output are leaked style from the Figma file, not designer intent.
 
 Font weight is handled by the Mistica text components (`Text1`-`Text10` and `Title1`-`Title4`). Map Figma's
 `font-weight/text5` to the matching component (e.g. `Text5`), not to a CSS `font-weight`.
@@ -95,8 +150,8 @@ props from the combined picture.
 ### How to gather
 
 For any CodeConnect-wrapped **composite component** — one with multiple content slots (`headline`, `pretitle`,
-`title`, `subtitle`, `description`, `extra`, `slot`, `buttonPrimary`, `buttonSecondary`, `buttonLink`,
-`asset`, etc.) — re-fetch the node with Code Connect disabled before mapping props:
+`title`, `subtitle`, `description`, `slot`, `buttonPrimary`, `buttonSecondary`, `buttonLink`, `asset`, etc.) —
+re-fetch the node with Code Connect disabled before mapping props:
 
 ```
 get_design_context({
@@ -109,7 +164,7 @@ get_design_context({
 
 That returns the real child tree: the actual text nodes, their font-size tokens, the actual image aspect
 ratio, Tag instances with their `type` (e.g. the `--tagbackgroundinfo` CSS variable tells you `type="info"`),
-child slots that correspond to `extra` / `slot` / `headline`, sibling buttons, etc.
+child slots that correspond to `slot` / `headline`, sibling buttons, etc.
 
 Use `get_metadata` on the same node when you also need to understand which children are component instances
 vs. raw nodes.