lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-52-dev

package/dist/cjs/{utils-dc02d753.js → utils-ce99b0d0.js}

@@ -456,7 +456,9 @@ function enableDraggingWithScaling(element) {
                 mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
             }
             else {
-                mostOverlappedElement.style.opacity = '0.3';
+                if (!document.getElementById('unitsDrop') || !document.getElementById('tensDrop') || !document.getElementById('hundredsDrop')) {
+                    mostOverlappedElement.style.opacity = '0.3';
+                }
             }
         }
     };
@@ -511,6 +513,7 @@ function enableDraggingWithScaling(element) {
         // Check for overlaps and log the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement$1(element, 'drop');
         onElementDropComplete(element, mostOverlappedElement);
+        executeActions("this.updateCountBlender='true'", container);
         if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
             if (mostOverlappedElement) {
                 if (element) {
@@ -712,10 +715,10 @@ async function onElementDropComplete(dragElement, dropElement) {
     let dropHasDrag = buildDropHasDragFromDOM();
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
-        return;
     }
     const dropTabIndex = dropElement.getAttribute('tab-index');
-    if ((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) {
+    const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'false';
+    if (((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) && !isAllowOnlyOneDrop) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
@@ -851,7 +854,8 @@ async function onElementDropComplete(dragElement, dropElement) {
         }
         if (!(((_f = dropElement.getAttribute('dropAttr')) === null || _f === void 0 ? void 0 : _f.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
             const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
-            if (isisFull) {
+            const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true';
+            if (isAllowOnlyOneDrop && isisFull) {
                 isisFull.isFull = true;
                 dropElement.setAttribute('is-full', 'true');
             }
@@ -886,8 +890,8 @@ async function onElementDropComplete(dragElement, dropElement) {
             // Check for overlaps and highlight only the most overlapping element
             if (dropElement && !((_g = dropHasDrag[dropTabIndex]) === null || _g === void 0 ? void 0 : _g.isFull)) {
                 let mostOverlappedElement = findMostoverlappedElement$1(dragElement, 'drag');
-                const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true' || '';
-                if (mostOverlappedElement && isAllowOnlyOneDrop) {
+                const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true';
+                if (isAllowOnlyOneDrop && mostOverlappedElement) {
                     dragElement.style.transform = 'translate(0,0)';
                     dragElement.style.transition = 'transform 0.5s ease';
                     const allElements = document.querySelectorAll("[type='drop']");
@@ -68774,8 +68778,51 @@ const executeActions = async (actionsString, thisElement, element) => {
                     }
                     break;
                 }
-                case 'updatedAnswer': {
-                    updatedAnswer();
+                case 'disableType': {
+                    const dragEle = document.querySelector('[type="drag"]');
+                    dragEle.removeAttribute('type');
+                    dragEle.style.pointerEvents = 'none';
+                    break;
+                }
+                case 'updateCountBlender': {
+                    const allDrags = document.querySelectorAll('[type="drag"]');
+                    let units = 0;
+                    let tens = 0;
+                    let hundreds = 0;
+                    allDrags.forEach(el => {
+                        const dropTo = el.getAttribute("drop-to");
+                        if (dropTo === "unitsDrop")
+                            units++;
+                        if (dropTo === "tensDrop")
+                            tens++;
+                        if (dropTo === "hundredsDrop")
+                            hundreds++;
+                    });
+                    const unitsValue = units * 1;
+                    const tensValue = tens * 10;
+                    const hundredsValue = hundreds * 100;
+                    const totalValue = unitsValue + tensValue + hundredsValue;
+                    // ✅ Update Lido Text Boxes
+                    const unitsBox = document.getElementById("units");
+                    const tensBox = document.getElementById("tens");
+                    const hundredsBox = document.getElementById("hundreds");
+                    if (unitsBox) {
+                        unitsBox.setAttribute("string", unitsValue.toString());
+                    }
+                    if (tensBox) {
+                        tensBox.setAttribute("string", tensValue.toString());
+                    }
+                    if (hundredsBox) {
+                        hundredsBox.setAttribute("string", hundredsValue.toString());
+                    }
+                    console.log(`Units = ${units} → ${unitsValue}`);
+                    console.log(`Tens = ${tens} → ${tensValue}`);
+                    console.log(`Hundreds = ${hundreds} → ${hundredsValue}`);
+                    console.log(`✅ Total Value = ${totalValue}`);
+                    break;
+                }
+                case 'updateCalculatorAnswer': {
+                    updateCalculatorAnswer();
                     break;
                 }
                 default: {
@@ -68794,6 +68841,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     const isInfinite = container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop;
     if (isAppend || isInfinite) {
         setTimeout(() => {
+            var _a, _b;
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.transition = '';
             let dummyElement = document.createElement('div');
@@ -68827,6 +68875,14 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                     dummyElement.style.margin = '0px';
                 });
             }
+            const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+            const rowAttr = dropElement.getAttribute('dropAttr');
+            const dropAttr = parseProp(rowAttr, orientation); // will return stackcascade or verticalstack
+            if (((_a = (dropAttr)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "stackcascade" || ((_b = (dropAttr)) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "verticalstack") {
+                dropElement.append(dragElement);
+                placeElementInDropZone(dropElement, dragElement, orientation, dropAttr);
+                return;
+            }
             dropElement.parentElement.append(element);
             dragElement.style.position = 'absolute';
             dragElement.style.zIndex = '1';
@@ -68839,16 +68895,41 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
             const scaledTop = (dropCenterY - dragCenterY) / containerScale;
             dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
-        }, 500);
+        }, 100);
     }
 };
+// function cloneElementWithComputedStyles(originalEl: HTMLElement): HTMLElement {
+//   let clone = document.createElement('div') as HTMLElement;
+//   clone.innerHTML = originalEl.outerHTML;
+//   clone = clone.firstChild as HTMLElement;
+//   clone.setAttribute('height', originalEl.style.height);
+//   clone.setAttribute('width', originalEl.style.width);
+//   clone.setAttribute('visible', 'true');
+//   return clone;
+// }
 function cloneElementWithComputedStyles(originalEl) {
-    let clone = document.createElement('div');
-    clone.innerHTML = originalEl.outerHTML;
-    clone = clone.firstChild;
-    clone.setAttribute('height', originalEl.style.height);
-    clone.setAttribute('width', originalEl.style.width);
-    clone.setAttribute('visible', 'true');
+    const tag = originalEl.tagName.toLowerCase();
+    if (tag === "lido-text") {
+        let clone = document.createElement('div');
+        clone.innerHTML = originalEl.outerHTML;
+        clone = clone.firstChild;
+        clone.setAttribute('height', originalEl.style.height);
+        clone.setAttribute('width', originalEl.style.width);
+        clone.setAttribute('visible', 'true');
+        return clone;
+    }
+    // ✅ For ALL other types (INCLUDING lido-image & matrix) use your simple logic
+    const clone = originalEl.cloneNode(false);
+    clone.style.width = originalEl.style.width;
+    clone.style.height = originalEl.style.height;
+    clone.style.margin = originalEl.style.margin;
+    clone.style.opacity = originalEl.style.opacity;
+    clone.style.transform = originalEl.style.transform;
+    clone.setAttribute("visible", "true");
+    clone.setAttribute("data-dummy", "true");
+    if (tag === "lido-math-matrix") {
+        clone.setAttribute('clickable', "false");
+    }
     return clone;
 }
 // Function to parse actions string
@@ -69731,16 +69812,66 @@ const SumTogetherAnimation = async (element, value) => {
         elementAppearance(false);
     }
 };
-const updatedAnswer = () => {
+function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr) {
+    const dropRect = dropElement.getBoundingClientRect();
+    const dragRect = dragElement.getBoundingClientRect();
+    const scale = typeof calculateScale === "function" ? calculateScale() : 1;
+    if (!dropElement.dataset.dropCount)
+        dropElement.dataset.dropCount = "0";
+    let dropCount = parseInt(dropElement.dataset.dropCount, 10);
+    // === READ DROP ZONE SIZE ===
+    const dropWidth = dropRect.width;
+    const dropHeight = dropRect.height;
+    let targetX, targetY;
+    // ---------------- LANDSCAPE WATERFALL ----------------
+    if (orientation === "landscape" && dropAttr.toLowerCase() === "stackcascade") {
+        console.log("🌄 Landscape waterfall");
+        const shiftX = dropWidth * 0.02; // proportional (5% of width)
+        const shiftY = dropHeight * 0.02; // proportional (5% of height)
+        const startX = dropRect.left + dropWidth * 0.36; // 10% inside
+        const startY = dropRect.top + dropHeight * -0.09; // slightly above
+        targetX = startX + (dropCount * shiftX);
+        targetY = startY + (dropCount * shiftY);
+    }
+    // ---------------- PORTRAIT VERTICAL ----------------
+    else {
+        console.log("📱 Portrait vertical stack");
+        let startX;
+        const stepY = dropHeight * 0.05; // 8% vertical step
+        if (dropElement.id === "unitsDrop") {
+            startX = dropRect.left + dropWidth * 0.4; // special spacing
+        }
+        else if (dropElement.id === "tensDrop") {
+            startX = dropRect.left + dropWidth * 0.25;
+        }
+        else {
+            startX = dropRect.left + dropWidth * 0.16; // normal spacing
+        }
+        const startY = dropRect.top - dropHeight * 0.25; // above start
+        targetX = startX;
+        targetY = startY + (dropCount * stepY);
+    }
+    // ------------ APPLY TRANSFORM SMOOTHLY --------------
+    const dx = (targetX - dragRect.left) / scale;
+    const dy = (targetY - dragRect.top) / scale;
+    dragElement.style.transition = "transform .2s ease-out";
+    dragElement.style.transform = `translate(${dx}px, ${dy}px)`;
+    dropElement.dataset.dropCount = String(dropCount + 1);
+    // reset size
+    dragElement.style.width = "auto";
+    dragElement.style.height = "auto";
+}
+const updateCalculatorAnswer = () => {
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
-    const answerText = container.querySelector('#answer');
-    if (!answerText)
+    const calci = document.querySelector('#lidoCalculator');
+    if (!calci)
         return;
-    const equationAttr = container.getAttribute('equationCheck') || '';
-    const calculatedValue = equationCheck(equationAttr);
-    answerText.setAttribute('string', String(calculatedValue));
+    const answerText = container.querySelector('#answer');
+    const value = calci.getAttribute('value');
+    console.log("😀😀😀😀😀😀😀", value);
+    answerText.setAttribute('string', value);
 };
 
 exports.ActivityScoreKey = ActivityScoreKey;

package/dist/collection/components/avatar/lido-avatar.js

@@ -78,7 +78,7 @@ export class LidoAvatar {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (h(Host, { key: 'dc25762d0edf77a71e93ca1cc3ea160a1778858e', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '70c803f3b58d3cd4a4f94f66eab40a7af656ef36', class: "lido-canvas" })));
+        return (h(Host, { key: '8a31ce98213ff51bf7cfc776690b6770bbeae604', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '922568310a3be177e3185f86c54df95d16a0e42b', class: "lido-canvas" })));
     }
     static get is() { return "lido-avatar"; }
     static get originalStyleUrls() {

package/dist/collection/components/canvas/lido-canvas.css

@@ -4,7 +4,7 @@
   align-items: center;
 }
 
-.lido-pad {
+.lido-canvas {
   
   background:red;
   border: 2px solid #ccc;
@@ -14,7 +14,7 @@
   overflow: hidden;
   position: relative;
 }
-button {
+#lido-exit-button {
   padding: 6px 14px;
   border: none;
   background:transparent;
@@ -23,14 +23,11 @@ button {
   cursor: pointer;
   font-size: 14px;
   position: relative;
-   top: -44%;   
-  left: 16%;   
+   top: -43%;   
+  left: 18%;   
   z-index: 10;
 }
-#lido-img1{
-  height:50px;
-  width: 60px;
-}
+
 canvas {
   /* flex: 1; */
   touch-action: none;

package/dist/collection/components/canvas/lido-canvas.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { parseProp } from "../../utils/utils";
-export class WritingPad {
+export class LidoCanvas {
     constructor() {
         // Flag to track drawing state
         this.drawing = false;
@@ -86,7 +86,7 @@ export class WritingPad {
         this.loadBackground();
     }
     render() {
-        return (h(Host, { key: '546c916c460a7581d5ecb9c1c5c07d7630cb64c1', id: "lido-canvas", class: "lido-pad", style: this.style }, h("button", { key: 'f0693ce43a33908dcdd833b48b7a849b73b37cc2', onClick: () => this.clearCanvas() }, h("img", { key: 'e3c029b206565ced465a5f1e352b98a11d54d71f', id: "lido-img1", src: "https://cdn-icons-png.flaticon.com/256/458/458595.png", alt: "Clear" })), h("canvas", { key: '1c07d610b7840cdc3f4359539a6d721f50130462', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
+        return (h(Host, { key: '6768ff870d132528267f2e824fdc6edf5a5fa2be', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'ba3d5456edfa4618b6c3f57b97fa18cef45f7ae9', id: "lido-exit-button", onClick: () => this.clearCanvas() }, h("lido-text", { key: '3484c9005819e3d08adf8d36b247d3c45610d0b5', visible: "true", height: "92px", width: "43px", id: "lido-exit-icon", "font-color": "white", onEntry: "this.font-weight='900';", "font-size": "96px", string: 'X' })), h("canvas", { key: 'cd4167cefde8d4cf159779c46283cafbc3b0afcc', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
     }
     static get is() { return "lido-canvas"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cell/lido-cell.js

@@ -131,7 +131,7 @@ export class LidoCell {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: 'eaf89c6fa3df6df4438063d4e2c2ca59cbf8aa25', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '9efb1d5e7de65783cab4de3e5479260c85ffc3b1' })));
+        return (h(Host, { key: '0f7d35324da319917dec546cbb1f25065897bb02', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '2a337b5fae7641bbe78c5f1aa1c96e12c1281f4a' })));
     }
     static get is() { return "lido-cell"; }
     static get originalStyleUrls() {

package/dist/collection/components/column/lido-col.js

@@ -84,7 +84,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: 'fe37cc1654101a3d347e2cef52872467ae078139', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'b27f20f62c30398c343d7aa472a0a211af5eed0e' })));
+        return (h(Host, { key: '7845d3364dd13cb42959f67610254ee892119c39', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '09a68a30534c5ea83d7166acd720b4b8f23f494e' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {

package/dist/collection/components/flashCard/lido-flash-card.js

@@ -76,7 +76,7 @@ export class LidoFlash {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: '0db825b0f188f46db6699e3d470296d7302a72fc', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: '78432618dca6729d9a5fa75f9ee162178ec6b8e2', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'c06cab1f3d256a2fcfd44fbeb9e04c47bbe6ba63', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '804ffc2d68292dc9dcb800bcc49a0698092cea43', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'b8f000d4e9d04d9954f81dc7e05b109dc16cb223', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'cea63b67d1b6a925ab0520eaa7c5166288bcd71e', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '3517e09bb91ac4c6fb2c066539f2d4f51436938f', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '5a14a4ab70898852046f1128c99e5a285c1c37f7', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/mathMatrix/lido-math-matrix.js

@@ -185,7 +185,7 @@ export class LidoMathMatrix {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '23ae408830e71329f11ee18e3aa3700e7a86e969', class: "math-matrix", style: {
+        return (h(Host, { key: '8232965fc3fb0b298233d21d7f50412508dc2256', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -252,7 +252,7 @@ export class LidoMathMatrix {
             },
             "defualtFill": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -265,7 +265,7 @@ export class LidoMathMatrix {
                     "text": "Number of slots to pre-fill as active by default"
                 },
                 "attribute": "defualt-fill",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "leftIndex": {
@@ -377,7 +377,7 @@ export class LidoMathMatrix {
             },
             "activeBgColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -390,12 +390,12 @@ export class LidoMathMatrix {
                     "text": "Background color for active slots"
                 },
                 "attribute": "active-bg-color",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'transparent'"
             },
             "deactiveBgColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -405,15 +405,15 @@ export class LidoMathMatrix {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Background color for inactive slots"
+                    "text": ""
                 },
                 "attribute": "deactive-bg-color",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'transparent'"
             },
             "border": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -426,12 +426,12 @@ export class LidoMathMatrix {
                     "text": "Border style applied to each slot"
                 },
                 "attribute": "border",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'2px solid green'"
             },
             "height": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -444,12 +444,12 @@ export class LidoMathMatrix {
                     "text": "Height of the slot container"
                 },
                 "attribute": "height",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'100%'"
             },
             "width": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -462,7 +462,7 @@ export class LidoMathMatrix {
                     "text": "Width of the slot container"
                 },
                 "attribute": "width",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'100%'"
             },
             "borderRadius": {

package/dist/collection/components/position/lido-pos.js

@@ -66,7 +66,7 @@ export class LidoPos {
         };
     }
     render() {
-        return (h(Host, { key: 'd456c09ab61fd1674f001f939f2b27a089806f44', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ca5a14fcc51d2b6a1756772b358e4654d8aee761' })));
+        return (h(Host, { key: '0eea8147ee3845668e83bed01164dce740aae785', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ca9378dc185eeb4d495ab3045d6b17424de908dc' })));
     }
     static get is() { return "lido-pos"; }
     static get originalStyleUrls() {

package/dist/collection/components/random/lido-random.js

@@ -78,7 +78,7 @@ export class LidoRandom {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: 'a85f168b0399fe5745439ad9d16d77965d1f7a39', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '69dd6da05d9855b18ba475cee27e523c4c2e6291' })));
+        return (h(Host, { key: 'cc8bb9d31ff6c36201d266f5579288c92c05bf82', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'd91a2403fa78320cbae40456dc0c86b44493bb5a' })));
     }
     static get is() { return "lido-random"; }
     static get originalStyleUrls() {

package/dist/collection/components/row/lido-row.js

@@ -78,7 +78,7 @@ export class LidoRow {
         };
     }
     render() {
-        return (h(Host, { key: '0c2548741cde2b82c2add3e1a60cbd68905ffede', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'bc2c6f95f984e82bdb905f850d4ad23c11183697' })));
+        return (h(Host, { key: '2d2f701dda922276d2485e91f15c8912c90d7b8d', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'b00002ecc9d5de422094beffc33ae5137b958fa3' })));
     }
     static get is() { return "lido-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/shape/lido-shape.js

@@ -54,7 +54,7 @@ export class LidoShape {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: 'de698fc2f34f63c9bbdf1e308772cf47ebc80d9c', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }));
+        return (h(Host, { key: '7a626d9f00854cf190c08524153086d0e9f139af', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }));
     }
     static get is() { return "lido-shape"; }
     static get originalStyleUrls() {

package/dist/collection/components/trace/lido-trace.js

@@ -712,7 +712,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: 'b562e07d98a06f422ce5b8ca1d08f9c4307a313c', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'fc2cb8355a26e5b483c24c59641bd20fa37e853b', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '204d2999e3d6f0c36c991566e19608870e287d7a', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '9c97878119641e2efc26fa7d711c7639276417ac', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

package/dist/collection/components/wrap/lido-wrap.js

@@ -80,7 +80,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: '12959a9a9c3b2df63ab977c39dceca4f1c771bf6', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'f19b29798a33592a1e5e15851f7f18266dbe35aa' })));
+        return (h(Host, { key: '50bc5770105477d0ef7cb080957c8d00198c8b09', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'fcd1f5801e34171d1925e39f6c543f229a5d42bd' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {