lido-player 0.0.2-beta-17 → 0.0.2-beta-18-dev

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

@@ -1,53 +1,53 @@
-.lido-text {
-  /* background-color: #fff; */
-  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
-  transition: background-color 0.3s ease;
-  user-select: none;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  border-radius: 24px;
-  color: #333;
-  cursor: pointer;
-  font-family: 'Baloo Bhai 2', serif;
-}
-
-.text-letters {
-  transition: color 0.3s, text-shadow 0.3s;
-  display: inline-block;
-  padding: 0 2px;  
-}
-
-.text-letters.letter-highlight {
-  color: #8e24aa;
-  background: none;
-  border-radius: 0;
-  text-shadow: 0 2px 8px #8e24aa88;
-  animation: text-letter-bounce 0.4s;
-}
-
-.text-words {
-  transition: color 0.3s, text-shadow 0.3s;
-  display: inline-block;
-  padding: 0 2px;  
-}
-
-.text-words.word-highlight {
-  color: #8e24aa;
-  background: none;
-  border-radius: 0;
-  text-shadow: 0 2px 8px #8e24aa88;
-  animation: text-word-bounce 0.4s;
-}
-
-@keyframes text-letter-bounce {
-  0% { transform: scale(1); }
-  60% { transform: scale(1.4); }
-  100% { transform: scale(1); }
-}
-
-@keyframes text-word-bounce {
-  0% { transform: scale(1); }
-  60% { transform: scale(1.3); }
-  100% { transform: scale(1); }
-}
+.lido-text {
+  /* background-color: #fff; */
+  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
+  transition: background-color 0.3s ease;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-radius: 24px;
+  color: #333;
+  cursor: pointer;
+  font-family: 'Baloo Bhai 2', serif;
+}
+
+.text-letters {
+  transition: color 0.3s, text-shadow 0.3s;
+  display: inline-block;
+  padding: 0 2px;  
+}
+
+.text-letters.letter-highlight {
+  color: #8e24aa;
+  background: none;
+  border-radius: 0;
+  text-shadow: 0 2px 8px #8e24aa88;
+  animation: text-letter-bounce 0.4s;
+}
+
+.text-words {
+  transition: color 0.3s, text-shadow 0.3s;
+  display: inline-block;
+  padding: 0 2px;  
+}
+
+.text-words.word-highlight {
+  color: #8e24aa;
+  background: none;
+  border-radius: 0;
+  text-shadow: 0 2px 8px #8e24aa88;
+  animation: text-word-bounce 0.4s;
+}
+
+@keyframes text-letter-bounce {
+  0% { transform: scale(1); }
+  60% { transform: scale(1.4); }
+  100% { transform: scale(1); }
+}
+
+@keyframes text-word-bounce {
+  0% { transform: scale(1); }
+  60% { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}

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

@@ -21,8 +21,13 @@ export class LidoText {
         this.id = '';
         /**
          * Value associated with the text element, typically used for internal logic or tracking.
-         */
+        */
         this.value = '';
+        /**
+         * Number of drag elements required for count-based drop interactions.
+         * Used by the Blender template to determine the correct and incorrect border state.
+         */
+        this.requiredDrops = '';
         /**
          * The string of text to be displayed in the component.
          */
@@ -261,7 +266,7 @@ export class LidoText {
     }
     render() {
         const displayText = i18next.t(this.string).replace(/_phonics?/gi, '');
-        return (h(Host, { key: 'ff07be0272e5b035a5378e5108bc86ea03ac49aa', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
+        return (h(Host, { key: '44bb34e461d90e1832066986454c5b0f8c392617', class: "lido-text", value: this.value, "required-drops": this.requiredDrops, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {
@@ -336,6 +341,26 @@ export class LidoText {
                 "attribute": "value",
                 "defaultValue": "''"
             },
+            "requiredDrops": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of drag elements required for count-based drop interactions.\nUsed by the Blender template to determine the correct and incorrect border state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required-drops",
+                "defaultValue": "''"
+            },
             "string": {
                 "type": "string",
                 "mutable": false,
@@ -848,7 +873,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -868,7 +893,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS padding value applied to each child element inside the container.\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS padding value applied to each child element inside the container.\r\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -888,7 +913,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply border radius to the image.\nExample: '10px' for  images."
+                    "text": "CSS filter to apply border radius to the image.\r\nExample: '10px' for  images."
                 },
                 "getter": false,
                 "setter": false,
@@ -908,7 +933,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether to wrap each letter or each word of the text in a span element.\nThis can be useful for animations or styling individual letters."
+                    "text": "Indicates whether to wrap each letter or each word of the text in a span element.\r\nThis can be useful for animations or styling individual letters."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/trace/assets/Tracing-hand.svg

@@ -1,8 +1,8 @@
-<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M39 16C42.314 16 45 18.686 45 22V44H48V14C48 10.686 50.686 8 54 8C57.314 8 60 10.686 60 14V44H63V20C63 16.686 65.686 14 69 14C72.314 14 75 16.686 75 20V50C75 62.703 64.703 73 52 73H40C31.163 73 24 65.837 24 57V40C24 36.686 26.686 34 30 34C33.314 34 36 36.686 36 40V22C36 18.686 38.686 16 42 16H39Z" fill="#F4C7A1"/>
-  <path d="M27 57C27 69.703 37.297 80 50 80H59C69.493 80 78 71.493 78 61V50" stroke="#C77E55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M30 43C30 39.686 32.686 37 36 37C39.314 37 42 39.686 42 43V55" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
-  <path d="M45 22C45 18.686 47.686 16 51 16C54.314 16 57 18.686 57 22V49" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
-  <path d="M60 14C60 10.686 62.686 8 66 8C69.314 8 72 10.686 72 14V48" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
-  <path d="M75 20C75 16.686 77.686 14 81 14C84.314 14 87 16.686 87 20V43" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
-</svg>
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M39 16C42.314 16 45 18.686 45 22V44H48V14C48 10.686 50.686 8 54 8C57.314 8 60 10.686 60 14V44H63V20C63 16.686 65.686 14 69 14C72.314 14 75 16.686 75 20V50C75 62.703 64.703 73 52 73H40C31.163 73 24 65.837 24 57V40C24 36.686 26.686 34 30 34C33.314 34 36 36.686 36 40V22C36 18.686 38.686 16 42 16H39Z" fill="#F4C7A1"/>
+  <path d="M27 57C27 69.703 37.297 80 50 80H59C69.493 80 78 71.493 78 61V50" stroke="#C77E55" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M30 43C30 39.686 32.686 37 36 37C39.314 37 42 39.686 42 43V55" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M45 22C45 18.686 47.686 16 51 16C54.314 16 57 18.686 57 22V49" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M60 14C60 10.686 62.686 8 66 8C69.314 8 72 10.686 72 14V48" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+  <path d="M75 20C75 16.686 77.686 14 81 14C84.314 14 87 16.686 87 20V43" stroke="#C77E55" stroke-width="4" stroke-linecap="round"/>
+</svg>

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

@@ -1,98 +1,98 @@
-:host {
-  display: block;
-  position: relative;
-}
-
-#lido-svgContainer {
-  /* position: absolute; */
-  /* top: 0; */
-  /* left: 0; */
-  /* right: 0; */
-  /* bottom: 50px; */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-.lido-trace-svg {
-  width: 100%;
-  height: 100%;
-  /* max-height: calc(100vh - 50px); */
-  /* border: 1px solid black; */
-  touch-action: none;
-}
-
-#lido-draggableCircle {
-  cursor: pointer;
-  fill: #CF1565;
-  transition: fill 0.2s, r 0.2s;
-}
-
-.lido-blindTracing {
-  stroke: none !important;
-}
-
-.lido-blindFreeTrace {
-  stroke: none !important;
-}
-
-.lido-hovered {
-  cursor: grab;
-  fill: darkred;
-}
-
-#lido-controls {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  padding: 10px;
-  background-color: #f0f0f0;
-  border-top: 1px solid #ccc;
-}
-
-button {
-  padding: 10px;
-  font-size: 16px;
-}
-
-@media (max-width: 600px) {
-  button {
-    padding: 8px;
-    font-size: 14px;
-  }
-}
-
-.lido-trace-path-green {
-  /* stroke: green !important; */
-}
-
-.lido-flow-indicator {
-  stroke: blue;
-  stroke-width: 2;
-  stroke-dasharray: 6, 6; /* Uniform dotted line */
-  fill: none;
-}
-
-.lido-trace {
-  height: 700px;
-  width: 700px;
-  z-index: 1;
-  /* position: absolute; */
-  justify-items: center;
-  /* align-items: center; */
-  align-content: center;
-}
-
-.trace-animate {
-  animation: trace-bounce 0.5s;
-}
-@keyframes trace-bounce {
-  0%   { transform: scale(1); }
-  30%  { transform: scale(1.05); }
-  60%  { transform: scale(0.95); }
-  100% { transform: scale(1); }
+:host {
+  display: block;
+  position: relative;
+}
+
+#lido-svgContainer {
+  /* position: absolute; */
+  /* top: 0; */
+  /* left: 0; */
+  /* right: 0; */
+  /* bottom: 50px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.lido-trace-svg {
+  width: 100%;
+  height: 100%;
+  /* max-height: calc(100vh - 50px); */
+  /* border: 1px solid black; */
+  touch-action: none;
+}
+
+#lido-draggableCircle {
+  cursor: pointer;
+  fill: #CF1565;
+  transition: fill 0.2s, r 0.2s;
+}
+
+.lido-blindTracing {
+  stroke: none !important;
+}
+
+.lido-blindFreeTrace {
+  stroke: none !important;
+}
+
+.lido-hovered {
+  cursor: grab;
+  fill: darkred;
+}
+
+#lido-controls {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #f0f0f0;
+  border-top: 1px solid #ccc;
+}
+
+button {
+  padding: 10px;
+  font-size: 16px;
+}
+
+@media (max-width: 600px) {
+  button {
+    padding: 8px;
+    font-size: 14px;
+  }
+}
+
+.lido-trace-path-green {
+  /* stroke: green !important; */
+}
+
+.lido-flow-indicator {
+  stroke: blue;
+  stroke-width: 2;
+  stroke-dasharray: 6, 6; /* Uniform dotted line */
+  fill: none;
+}
+
+.lido-trace {
+  height: 700px;
+  width: 700px;
+  z-index: 1;
+  /* position: absolute; */
+  justify-items: center;
+  /* align-items: center; */
+  align-content: center;
+}
+
+.trace-animate {
+  animation: trace-bounce 0.5s;
+}
+@keyframes trace-bounce {
+  0%   { transform: scale(1); }
+  30%  { transform: scale(1.05); }
+  60%  { transform: scale(0.95); }
+  100% { transform: scale(1); }
 }

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

@@ -112,6 +112,8 @@ export class LidoTrace {
         this.isDragging = false;
         this.activePointerId = null;
         // Counter for throttling free trace updates
+        // This is only an internal counter. Keeping it out of @State prevents a
+        // Stencil component re-render while the user is dragging.
         this.freeTraceUpdateCounter = 0;
         /** ───────────────────────────────────────────────────────────
          *  NEW: idle‑timer + finger‑hint state
@@ -144,6 +146,7 @@ export class LidoTrace {
             lastPointerPos: null,
             dragOffset: null,
             isCompletingPath: false,
+            touchProximityThreshold: null,
         };
         const url = this.svgUrls[this.currentSvgIndex];
         if (!url || url.trim() === '') {
@@ -363,6 +366,12 @@ export class LidoTrace {
     setupDrawingPath(state) {
         state.paths.forEach((path, index) => {
             const pathLength = path.getTotalLength();
+            // Geometry calls are expensive on slower SVG implementations. Cache
+            // the length once and reuse it during pointer movement.
+            path._lidoTraceLength = pathLength;
+            path._lidoTraceStart = path.getPointAtLength(0);
+            path._lidoTraceEnd = path.getPointAtLength(pathLength);
+            path._lidoTraceIsClosed = this.getDistanceSquared(path._lidoTraceStart, path._lidoTraceEnd) < 200;
             // /** give every path an id so <mpath> can follow it */
             path.setAttribute('id', 'lido-path-' + index); //  ← NEW
             // Create green path for tracing effect
@@ -484,7 +493,7 @@ export class LidoTrace {
     }
     // Modified handlePointerMove function
     async handlePointerMove(state) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         if (!state.isDragging)
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
@@ -584,19 +593,9 @@ export class LidoTrace {
             // Move the draggable circle with the freehand trace
             state.circle.setAttribute('cx', pointerPos.x.toString());
             state.circle.setAttribute('cy', pointerPos.y.toString());
-            // Only re-append if not already children list
-            const childNodes = (_b = state.svg) === null || _b === void 0 ? void 0 : _b.childNodes;
-            let circleFound = false;
-            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
-                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
-                if (child && child.tagName === 'circle') {
-                    circleFound = true;
-                    break; // No need to continue once found
-                }
-            }
-            // If not found, append the circle
-            if (!circleFound && state.circle) {
-                (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle);
+            // Keep the original safety check without scanning every SVG child.
+            if (state.circle.parentNode !== state.svg) {
+                (_b = state.svg) === null || _b === void 0 ? void 0 : _b.appendChild(state.circle);
             }
             // Update the last pointer position
             state.lastPointerPos = pointerPos;
@@ -640,27 +639,15 @@ export class LidoTrace {
                 state.circle.setAttribute('cx', guidedClosestPoint.x.toString());
                 state.circle.setAttribute('cy', guidedClosestPoint.y.toString());
             }
-            // Only re-append if not already children list
-            const childNodes = (_d = state.svg) === null || _d === void 0 ? void 0 : _d.childNodes;
-            let circleFound = false;
-            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
-                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
-                if (child && child.tagName === 'circle') {
-                    circleFound = true;
-                    break; // No need to continue once found
-                }
-            }
-            // If not found, append the circle
-            if (!circleFound && state.circle) {
-                (_e = state.svg) === null || _e === void 0 ? void 0 : _e.appendChild(state.circle);
+            // Keep the original safety check without scanning every SVG child.
+            if (state.circle.parentNode !== state.svg) {
+                (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle);
             }
-            (_f = currentPath.greenPath) === null || _f === void 0 ? void 0 : _f.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
+            (_d = currentPath.greenPath) === null || _d === void 0 ? void 0 : _d.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
             // Completion logic for closed paths: only allow completion if almost all points are traced
             const COMPLETION_THRESHOLD = 0.95; // 95% of the path must be traced
             let percentComplete = state.lastLength / state.totalPathLength;
-            let startPoint = currentPath.getPointAtLength(0);
-            let endPoint = currentPath.getPointAtLength(currentPath.getTotalLength());
-            let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
+            const pathIsClosed = (_e = currentPath._lidoTraceIsClosed) !== null && _e !== void 0 ? _e : false;
             if (pathIsClosed && state.totalPathLength > 50) {
                 if (percentComplete >= COMPLETION_THRESHOLD) {
                     if (state.isCompletingPath)
@@ -854,7 +841,8 @@ export class LidoTrace {
     }
     // Find the closest point on the given path to the specified point using two-pass sampling (optimized)
     getClosestPointOnPath(pathNode, point, lastLength) {
-        const pathLength = pathNode.getTotalLength();
+        var _a;
+        const pathLength = (_a = pathNode._lidoTraceLength) !== null && _a !== void 0 ? _a : pathNode.getTotalLength();
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
         const coarseStep = 40;
@@ -1047,7 +1035,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '0877050db2c93ff5ca0795ea8a209e2bb2c3e1b3', 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: 'c0fa2b7c825a4bbbb3b0a95cc700a6f01b873943', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '4955636a199ba56ca7f6d73144aca42ab4e3f411', 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: 'b732946e97fefb0d4cb192e5c9b6863568ff64be', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -1335,7 +1323,7 @@ export class LidoTrace {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
+                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\r\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
                 },
                 "getter": false,
                 "setter": false,
@@ -1493,7 +1481,6 @@ export class LidoTrace {
             "fileIndex": {},
             "isDragging": {},
             "activePointerId": {},
-            "freeTraceUpdateCounter": {},
             "idleTimer": {},
             "fingerImg": {}
         };

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

@@ -1,18 +1,18 @@
-.lido-wrap {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
-}
-
-.lido-wrap > * {
-  padding: 10px;
-  background-color: var(--child-bg-color, #f0f0f0);
-  box-sizing: border-box;
-}
-
-.lido-flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 10px;
-}
+.lido-wrap {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
+}
+
+.lido-wrap > * {
+  padding: 10px;
+  background-color: var(--child-bg-color, #f0f0f0);
+  box-sizing: border-box;
+}
+
+.lido-flex {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 10px;
+}

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

@@ -75,7 +75,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: '1b5a62590f56ae5623770a4333fe84fdffd5617f', 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: '081252d2c1074c0e1635b583f697d7d44aec1333' })));
+        return (h(Host, { key: '58b1e37a1787349d3ccd2bc6952d94a7d945e234', 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: '44389fcc3d2e86faf291b74bfe50b55d467a7278' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {
@@ -464,7 +464,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -483,7 +483,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum number of child elements that must be displayed inside the row.\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
+                    "text": "The minimum number of child elements that must be displayed inside the row.\r\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
                 },
                 "getter": false,
                 "setter": false,
@@ -502,7 +502,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of child elements that can be displayed inside the row.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "text": "The maximum number of child elements that can be displayed inside the row.\r\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
                 },
                 "getter": false,
                 "setter": false,
@@ -521,7 +521,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enables flex layout mode for the container.\nIf set to `\"true\"`, the component will use a flex layout (`display: flex`) instead of the default grid layout (`display: grid`).\nAdditionally, the `lido-wrap` class will be replaced with `lido-flex` to allow custom flex-specific styling."
+                    "text": "Enables flex layout mode for the container.\r\nIf set to `\"true\"`, the component will use a flex layout (`display: flex`) instead of the default grid layout (`display: grid`).\r\nAdditionally, the `lido-wrap` class will be replaced with `lido-flex` to allow custom flex-specific styling."
                 },
                 "getter": false,
                 "setter": false,
@@ -580,7 +580,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,