@magicfeedback/popup-sdk 1.8.5 → 1.10.0

package/dist/react-native.js

@@ -552,7 +552,7 @@ var init_style = __esm({
     style_default = `/**
  * NO EDITAR A MANO \u2014 generado por scripts/vendor-survey-css.mjs
  *
- * Copia de @magicfeedback/native@2.2.22 \u2192 dist/styles/magicfeedback-default.css
+ * Copia de @magicfeedback/native@2.2.31 \u2192 dist/styles/magicfeedback-default.css
  * (la hoja can\xF3nica del paquete, la que apunta su campo "style"), con estos cambios locales:
  *
  *  1. Sin el @import de Google Fonts (Nunito): no queremos una petici\xF3n externa desde la
@@ -563,7 +563,9 @@ var init_style = __esm({
  *     repintar\xEDa su web.
  *  4. El grupo .magicfeedback-radio se cualifica como div.magicfeedback-radio (la clase acaba
  *     tambi\xE9n en el <input> del boolean).
- *  5. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
+ *  5. Todo :hover va dentro de @media (hover: hover): en t\xE1ctil WebKit deja el hover pegado
+ *     en el \xFAltimo punto tocado y la opci\xF3n de la p\xE1gina siguiente parec\xEDa seleccionada.
+ *  6. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
  *     radio nativo).
  *
  * Las variables --mf-* se dejan en :root a prop\xF3sito: el modal del priority-list se portea a
@@ -801,9 +803,11 @@ var init_style = __esm({
     text-underline-offset: 2px;
 }
 
-.magicfeedback-info-message a:hover,
-.magicfeedback-start-message a:hover {
-    color: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-info-message a:hover,
+    .magicfeedback-start-message a:hover {
+        color: var(--mf-primary-hover);
+    }
 }
 
 .magicfeedback-info-message ul,
@@ -1029,10 +1033,12 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-checkbox-container:hover,
-.magicfeedback-radio-container:hover {
-    background-color: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-checkbox-container:hover,
+    .magicfeedback-radio-container:hover {
+        background-color: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-checkbox-container:has(input:checked),
@@ -1099,9 +1105,11 @@ div.magicfeedback-radio {
     height: inherit;
 }
 
-.magicfeedback-boolean-option label:hover {
-    background-color: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-boolean-option label:hover {
+        background-color: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-boolean-option input[type="radio"]:checked + label {
@@ -1172,9 +1180,11 @@ div.magicfeedback-radio {
     border: 2px solid transparent;
 }
 
-.magicfeedback-rating-option-label-container img:hover {
-    transform: scale(1.1);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-rating-option-label-container img:hover {
+        transform: scale(1.1);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-rating-option-label-container input[type="radio"]:checked + img {
@@ -1326,9 +1336,11 @@ div.magicfeedback-radio {
     font-size: 0.8rem;
 }
 
-.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
-.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+    .magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
@@ -1365,8 +1377,10 @@ div.magicfeedback-radio {
     font-size: var(--mf-font-size-sm);
 }
 
-.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
@@ -1399,9 +1413,11 @@ div.magicfeedback-radio {
     color: var(--mf-primary);
 }
 
-.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
-.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+    .magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
@@ -1455,10 +1471,12 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
-    color: #fbbf24;
-    transform: scale(1.1);
+@media (hover: hover) {
+    .magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
+    .magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
+        color: #fbbf24;
+        transform: scale(1.1);
+    }
 }
 
 .magicfeedback-rating-star-selected {
@@ -1499,9 +1517,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-image-option-label-container:hover img {
-    border-color: var(--mf-primary);
-    box-shadow: var(--mf-shadow-md);
+@media (hover: hover) {
+    .magicfeedback-image-option-label-container:hover img {
+        border-color: var(--mf-primary);
+        box-shadow: var(--mf-shadow-md);
+    }
 }
 
 .magicfeedback-image-option-label-container input:checked + img {
@@ -1516,6 +1536,9 @@ div.magicfeedback-radio {
     width: 100%;
     overflow-x: auto;
     border-radius: var(--mf-radius-md);
+    /* the layout follows the space the survey gets (a pop-in, a sidebar),
+       not the size of the window */
+    container-type: inline-size;
 }
 
 .magicfeedback-multi-question-matrix-table {
@@ -1542,9 +1565,11 @@ div.magicfeedback-radio {
     background-color: var(--mf-bg-secondary);
 }
 
-.magicfeedback-multi-question-matrix-row-tr:hover {
-    background-color: var(--mf-bg-hover);
-    box-shadow: var(--mf-shadow-sm);
+@media (hover: hover) {
+    .magicfeedback-multi-question-matrix-row-tr:hover {
+        background-color: var(--mf-bg-hover);
+        box-shadow: var(--mf-shadow-sm);
+    }
 }
 
 .magicfeedback-multi-question-matrix-table td {
@@ -1565,6 +1590,296 @@ div.magicfeedback-radio {
     accent-color: var(--mf-primary);
 }
 
+.magicfeedback-multi-question-matrix-question {
+    min-width: 200px;
+    padding: 10px;
+}
+
+/* the column header names the option in a table; the per-cell label is for
+   screen readers until the rows stack */
+.magicfeedback-multi-question-matrix-option-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
+/* narrow container: every row becomes its own question with the options
+   stacked underneath, instead of a table cut off at the side */
+@container (max-width: 599px) {
+    .magicfeedback-multi-question-matrix-table,
+    .magicfeedback-multi-question-matrix-table tbody,
+    .magicfeedback-multi-question-matrix-table tr,
+    .magicfeedback-multi-question-matrix-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .magicfeedback-multi-question-matrix-table thead {
+        display: none;
+    }
+
+    .magicfeedback-multi-question-matrix-row-tr,
+    .magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
+        margin-bottom: var(--mf-space-lg);
+        background: transparent;
+        box-shadow: none;
+    }
+
+    @media (hover: hover) {
+        .magicfeedback-multi-question-matrix-row-tr:hover {
+            margin-bottom: var(--mf-space-lg);
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
+    .magicfeedback-multi-question-matrix-table td.magicfeedback-multi-question-matrix-question {
+        min-width: 0;
+        padding: 0 0 var(--mf-space-sm);
+        text-align: start;
+    }
+
+    .magicfeedback-multi-question-matrix-question .magicfeedback-multi-question-matrix-label {
+        font-weight: 600;
+    }
+
+    .magicfeedback-multi-question-matrix-table td.magicfeedback-multi-question-matrix-option {
+        display: flex;
+        align-items: center;
+        gap: var(--mf-space-sm);
+        margin-bottom: var(--mf-space-sm);
+        padding: 0 var(--mf-space-md);
+        text-align: start;
+        background: var(--mf-bg-secondary);
+        border: 2px solid var(--mf-border);
+        border-radius: var(--mf-radius-md);
+        cursor: pointer;
+        transition: var(--mf-transition-fast);
+    }
+
+    @media (hover: hover) {
+        .magicfeedback-multi-question-matrix-option:hover {
+            border-color: var(--mf-primary-border);
+        }
+    }
+
+    .magicfeedback-multi-question-matrix-option:has(input:checked) {
+        border-color: var(--mf-primary);
+        background: var(--mf-primary-light);
+    }
+
+    .magicfeedback-multi-question-matrix-table .magicfeedback-multi-question-matrix-option input[type="radio"] {
+        flex-shrink: 0;
+    }
+
+    /* the whole card is the click target */
+    .magicfeedback-multi-question-matrix-option-label {
+        position: static;
+        flex: 1;
+        width: auto;
+        height: auto;
+        padding: var(--mf-space-md) 0;
+        overflow: visible;
+        clip: auto;
+        white-space: normal;
+        font-size: var(--mf-font-size-base);
+        color: var(--mf-text-primary);
+        cursor: pointer;
+    }
+}
+
+/* ========================================
+   MAXDIFF (BEST\u2013WORST)
+   ======================================== */
+.magicfeedback-max-diff {
+    /* "least" gets its own hue, apart from the brand color "most" uses; dark
+       enough to read as header text and to hold the white center dot */
+    --mf-max-diff-worst: #b45309;
+    width: 100%;
+}
+
+.magicfeedback-max-diff-container {
+    width: 100%;
+    /* the layout follows the space the survey gets (a pop-in, a sidebar),
+       not the size of the window */
+    container-type: inline-size;
+}
+
+.magicfeedback-max-diff-progress {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-md);
+    margin-bottom: var(--mf-space-lg);
+}
+
+.magicfeedback-max-diff-progress-label {
+    font-size: 0.8125rem;
+    font-weight: var(--mf-font-weight-bold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-max-diff-progress-track {
+    flex: 1;
+    height: 6px;
+    overflow: hidden;
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-border);
+}
+
+.magicfeedback-max-diff-progress-fill {
+    display: block;
+    height: 100%;
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-primary);
+}
+
+.magicfeedback-max-diff-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.magicfeedback-max-diff-head,
+.magicfeedback-max-diff-head-spacer {
+    border-bottom: 1px solid var(--mf-border);
+}
+
+.magicfeedback-max-diff-head {
+    width: 11rem;
+    padding: 0 var(--mf-space-sm) var(--mf-space-sm);
+    font-size: 0.8125rem;
+    font-weight: var(--mf-font-weight-extrabold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    text-align: center;
+    vertical-align: bottom;
+}
+
+.magicfeedback-max-diff-head-best {
+    color: var(--mf-primary);
+}
+
+.magicfeedback-max-diff-head-worst {
+    color: var(--mf-max-diff-worst);
+}
+
+.magicfeedback-max-diff-head-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.magicfeedback-max-diff-row {
+    transition: background-color 0.15s ease;
+}
+
+.magicfeedback-max-diff-row > * {
+    border-bottom: 1px solid var(--mf-border);
+}
+
+.magicfeedback-max-diff-row:has(.magicfeedback-max-diff-best:checked) {
+    background-color: color-mix(in srgb, var(--mf-primary) 8%, transparent);
+}
+
+.magicfeedback-max-diff-row:has(.magicfeedback-max-diff-worst:checked) {
+    background-color: color-mix(in srgb, var(--mf-max-diff-worst) 8%, transparent);
+}
+
+.magicfeedback-max-diff-item {
+    padding: var(--mf-space-md) var(--mf-space-sm);
+    font-size: 1.0625rem;
+    font-weight: var(--mf-font-weight-semibold);
+    line-height: 1.4;
+    text-align: center;
+    color: var(--mf-text-primary);
+}
+
+.magicfeedback-max-diff-row:has(input:checked) .magicfeedback-max-diff-item {
+    font-weight: var(--mf-font-weight-extrabold);
+}
+
+.magicfeedback-max-diff-cell {
+    padding: 0;
+}
+
+/* the whole cell is the click target */
+.magicfeedback-max-diff-pick {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 64px;
+    cursor: pointer;
+}
+
+.magicfeedback-max-diff-input {
+    appearance: none;
+    -webkit-appearance: none;
+    flex-shrink: 0;
+    width: 26px;
+    height: 26px;
+    margin: 0;
+    border: 2px solid color-mix(in srgb, var(--mf-text-secondary) 80%, white);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-bg-secondary);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+@media (hover: hover) {
+    .magicfeedback-max-diff-pick:hover .magicfeedback-max-diff-input {
+        transform: scale(1.08);
+    }
+}
+
+.magicfeedback-max-diff-best:checked {
+    border-color: var(--mf-primary);
+    background: radial-gradient(circle, #FFFFFF 0 4px, var(--mf-primary) 4.5px);
+}
+
+.magicfeedback-max-diff-worst:checked {
+    border-color: var(--mf-max-diff-worst);
+    background: radial-gradient(circle, #FFFFFF 0 4px, var(--mf-max-diff-worst) 4.5px);
+}
+
+.magicfeedback-max-diff-input:focus-visible {
+    outline: 3px solid var(--mf-primary-border);
+    outline-offset: 3px;
+}
+
+/* narrow container: same table, slimmer pick columns and the header icon
+   stacked over its label */
+@container (max-width: 599px) {
+    .magicfeedback-max-diff-head {
+        width: 4.75rem;
+        padding-inline: 2px;
+        font-size: 0.6875rem;
+    }
+
+    .magicfeedback-max-diff-head-label {
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .magicfeedback-max-diff-item {
+        padding-inline: 4px;
+        font-size: var(--mf-font-size-base);
+    }
+
+    .magicfeedback-max-diff-pick {
+        min-height: 68px;
+    }
+
+    .magicfeedback-max-diff-input {
+        width: 28px;
+        height: 28px;
+    }
+}
+
 /* ========================================
    PRIORITY LIST
    ======================================== */
@@ -1580,9 +1895,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-priority-list-item:hover {
-    box-shadow: var(--mf-shadow-sm);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-priority-list-item:hover {
+        box-shadow: var(--mf-shadow-sm);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-priority-list-item-label {
@@ -1603,10 +1920,12 @@ div.magicfeedback-radio {
     user-select: none;
 }
 
-.magicfeedback-priority-list-arrow-up:hover,
-.magicfeedback-priority-list-arrow-down:hover {
-    color: var(--mf-primary);
-    transform: scale(1.2);
+@media (hover: hover) {
+    .magicfeedback-priority-list-arrow-up:hover,
+    .magicfeedback-priority-list-arrow-down:hover {
+        color: var(--mf-primary);
+        transform: scale(1.2);
+    }
 }
 
 /* ========================================
@@ -1713,10 +2032,12 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-submit:hover {
-    background-color: var(--mf-primary-hover);
-    box-shadow: var(--mf-shadow-lg);
-    transform: translateY(-2px);
+@media (hover: hover) {
+    .magicfeedback-submit:hover {
+        background-color: var(--mf-primary-hover);
+        box-shadow: var(--mf-shadow-lg);
+        transform: translateY(-2px);
+    }
 }
 
 .magicfeedback-submit:active {
@@ -1742,9 +2063,20 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-back:hover {
-    border-color: var(--mf-primary);
-    background-color: var(--mf-bg-hover);
+@media (hover: hover) {
+    .magicfeedback-back:hover {
+        border-color: var(--mf-primary);
+        background-color: var(--mf-bg-hover);
+    }
+}
+
+/* hidden on the first page; keep the submit button on the right */
+.magicfeedback-back[hidden] {
+    display: none;
+}
+
+.magicfeedback-action-container .magicfeedback-submit {
+    margin-left: auto;
 }
 
 /* ========================================
@@ -1764,8 +2096,10 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-skip-container:hover {
-    color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-skip-container:hover {
+        color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-skip-container input[type="checkbox"] {
@@ -1906,9 +2240,11 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-sm);
 }
 
-.magicfeedback-button:hover {
-    background: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-button:hover {
+        background: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-button:active {
@@ -1922,8 +2258,10 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-button-primary:hover {
-    background: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-button-primary:hover {
+        background: var(--mf-primary-hover);
+    }
 }
 
 .magicfeedback-button-primary:active {
@@ -1949,8 +2287,10 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-start-message-button:hover {
-    background: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-start-message-button:hover {
+        background: var(--mf-primary-hover);
+    }
 }
 
 /* ========================================
@@ -2086,12 +2426,18 @@ div.magicfeedback-radio {
     color: #666;
 }
 
-.magicfeedback-modal-close:hover,
 .magicfeedback-modal-close:focus {
     color: #000;
     outline: none;
 }
 
+@media (hover: hover) {
+    .magicfeedback-modal-close:hover {
+        color: #000;
+        outline: none;
+    }
+}
+
 /* ========================================
    FILE / IMAGE UPLOAD
    ======================================== */
@@ -2135,9 +2481,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition);
 }
 
-.magicfeedback-upload-dropzone:hover {
-    border-color: var(--mf-primary);
-    background-color: var(--mf-bg-hover);
+@media (hover: hover) {
+    .magicfeedback-upload-dropzone:hover {
+        border-color: var(--mf-primary);
+        background-color: var(--mf-bg-hover);
+    }
 }
 
 .magicfeedback-upload-dropzone:focus-within {
@@ -2275,13 +2623,20 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-upload-remove:hover,
 .magicfeedback-upload-remove:focus-visible {
     color: var(--mf-error);
     background-color: var(--mf-primary-light);
     outline: none;
 }
 
+@media (hover: hover) {
+    .magicfeedback-upload-remove:hover {
+        color: var(--mf-error);
+        background-color: var(--mf-primary-light);
+        outline: none;
+    }
+}
+
 .magicfeedback-upload-remove svg {
     width: 16px;
     height: 16px;
@@ -3028,10 +3383,14 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       // La pantalla final la pinta el popup: `renderSuccess` de @magicfeedback/native usa
       // textContent, así que el mensaje de la plataforma (HTML con imagen) no se vería, y
       // su fallback es un literal genérico que ignora `style.successMessage`.
-      addSuccessScreen: false
+      addSuccessScreen: false,
+      // Surveys multi-idioma: native pide a la API este idioma (el del init o el del
+      // dispositivo) y, si el survey no lo tiene, la API sirve el idioma por defecto.
+      lang: options?.language
     };
-    generateOptions.onLoadedEvent = ({ formData }) => {
-      const surveyLang = Array.isArray(formData?.lang) ? formData.lang.find((l) => typeof l === "string" && l.trim().length > 0) : void 0;
+    generateOptions.onLoadedEvent = ({ formData, lang }) => {
+      const shownLang = typeof lang === "string" && lang.trim().length > 0 ? lang : void 0;
+      const surveyLang = shownLang ?? (Array.isArray(formData?.lang) ? formData.lang.find((l) => typeof l === "string" && l.trim().length > 0) : void 0);
       if (surveyLang) applyLabels(surveyLang);
       try {
       } catch {
@@ -3407,7 +3766,7 @@ function trimmedOrNull(value) {
 }
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
-  const version = opts.version ?? "2.2.22";
+  const version = opts.version ?? "2.2.31";
   const cdn = `https://cdn.jsdelivr.net/npm/@magicfeedback/native@${version}/dist/magicfeedback-sdk.browser.js`;
   const sid = jsonForScript(opts.surveyId);
   const pid = jsonForScript(opts.productId);
@@ -3787,10 +4146,15 @@ ${REVEAL_JS}
         // textContent, as\xED que el mensaje de la plataforma (HTML con imagen) no se ver\xEDa, y su
         // fallback es un literal gen\xE9rico que ignora style.successMessage.
         addSuccessScreen:false,
+        // Surveys multi-idioma: native pide a la API este idioma (el del init o el del
+        // dispositivo); si el survey no lo tiene, la API sirve el idioma por defecto.
+        lang:${initLangJson}||undefined,
         onLoadedEvent:function(args){
-          // Idioma del survey: manda sobre el del init para que el chrome no se quede en
-          // ingl\xE9s delante de un survey traducido.
-          var langs=args && args.formData ? args.formData.lang : null;
+          // Idioma en el que native muestra el survey: manda sobre el del init para que el
+          // chrome no se quede en ingl\xE9s delante de un survey traducido. Native < 2.3 no lo
+          // env\xEDa: entonces el primero de formData.lang (el idioma por defecto).
+          var shown=args && typeof args.lang==='string' && args.lang.trim() ? args.lang : null;
+          var langs=shown ? [shown] : (args && args.formData ? args.formData.lang : null);
           if(langs && langs.length){
             for(var li=0;li<langs.length;li++){
               if(typeof langs[li]==='string' && langs[li].trim()){ ddApplyLabels(langs[li]); break; }
@@ -4376,8 +4740,10 @@ async function safeBodyText(res) {
 function createFeedbackSink(options) {
   let feedbackSessionId;
   let firstPostInFlight = null;
+  let generation = 0;
   const url = `${options.baseUrl}/sdk/feedback`;
   const post = async (body, final, sessionEnd = false) => {
+    const postGeneration = generation;
     const json = JSON.stringify(body);
     const small = json.length <= KEEPALIVE_MAX_BYTES;
     if (final) options.log?.("[DeepdotsAnalytics] final flush via fetch keepalive");
@@ -4407,9 +4773,25 @@ function createFeedbackSink(options) {
       );
       return;
     }
-    if (sessionEnd) return;
+    if (sessionEnd) {
+      let closedId = body.sessionId;
+      try {
+        const data = await res.json();
+        closedId = data?.sessionId ?? closedId;
+      } catch {
+      }
+      try {
+        if (closedId) options.onSessionClosed?.(closedId);
+      } catch {
+      }
+      return;
+    }
     try {
       const data = await res.json();
+      if (postGeneration !== generation) {
+        options.log?.("[DeepdotsAnalytics] sessionId of a closed session ignored:", data?.sessionId);
+        return;
+      }
       if (data?.sessionId && data.sessionId !== feedbackSessionId) {
         feedbackSessionId = data.sessionId;
         options.log?.("[DeepdotsAnalytics] feedbackSessionId cached:", feedbackSessionId);
@@ -4422,6 +4804,7 @@ function createFeedbackSink(options) {
     if (meta?.resetSession) {
       feedbackSessionId = void 0;
       firstPostInFlight = null;
+      generation++;
       options.onSessionReset?.();
       return;
     }
@@ -4436,6 +4819,7 @@ function createFeedbackSink(options) {
     if (sessionEnd) {
       feedbackSessionId = void 0;
       firstPostInFlight = null;
+      generation++;
       options.onSessionReset?.();
     } else if (!feedbackSessionId) {
       firstPostInFlight = sent.then(
@@ -5086,6 +5470,8 @@ var DeepdotsPopups = class {
     this.analytics = null;
     /** feedbackSessionId cacheado del canal de analytics (devuelto por POST /sdk/feedback). */
     this.analyticsFeedbackSessionId = void 0;
+    /** `init({ onFeedbackSession })`: avisa al host al abrir y cerrar cada registro. */
+    this.onFeedbackSession = void 0;
     /** Timer del flush periódico de analytics (cada ANALYTICS_FLUSH_INTERVAL_MS). */
     this.analyticsFlushTimer = void 0;
     /** Crash & error reporting (#14–17). Null hasta init(). */
@@ -5143,6 +5529,7 @@ var DeepdotsPopups = class {
     this.renderChrome = config.renderChrome ?? true;
     this.showProgressBar = config.showProgressBar;
     this.surveyCss = config.surveyCss;
+    this.onFeedbackSession = config.onFeedbackSession;
     this.config = {
       apiKey: config.apiKey || void 0,
       debug: config.debug || false,
@@ -5176,7 +5563,9 @@ var DeepdotsPopups = class {
       log: (...a) => this.log(...a),
       onSessionId: (id) => {
         this.analyticsFeedbackSessionId = id;
+        this.notifyFeedbackSession(id, "open");
       },
+      onSessionClosed: (id) => this.notifyFeedbackSession(id, "closed"),
       onSessionReset: () => {
         this.analyticsFeedbackSessionId = void 0;
       }
@@ -5251,6 +5640,23 @@ var DeepdotsPopups = class {
   getSessionId() {
     return this.tracking?.getSessionId() ?? null;
   }
+  /**
+   * Id del registro de analytics abierto: el `sessionId` que devolvió `POST /sdk/feedback`,
+   * que la API guarda como `sdkSessionId` en el Feedback en que se convierte la sesión. No es
+   * `getSessionId()`. Null hasta que el backend acepta el primer lote y de nuevo al cerrar la
+   * sesión: para saber también qué registro se cerró, usa `init({ onFeedbackSession })`.
+   */
+  getFeedbackSessionId() {
+    return this.analyticsFeedbackSessionId ?? null;
+  }
+  /** Avisa al host del registro abierto o cerrado; un fallo del host no corta el envío. */
+  notifyFeedbackSession(sessionId, status) {
+    try {
+      this.onFeedbackSession?.({ sessionId, status });
+    } catch (error) {
+      this.log("analytics \xB7 onFeedbackSession threw:", error);
+    }
+  }
   /** Activa/desactiva el tracking (identidad + sesión + analytics). Kill-switch del contrato §7bis. */
   setTrackingEnabled(enabled) {
     if (!enabled) this.closeSession("tracking_disabled");