lido-player 0.0.2-alpha-58-dev → 0.0.2-alpha-60-dev

package/dist/components/{p-73e3f0f4.js → p-37c86a94.js}

@@ -1,3 +1,5 @@
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, t as attachSpeakIcon, L as LIDO_COMMON_AUDIO_READY_EVENT, e as convertUrlToRelative, k as parseProp, h, j as Host, u as LIDO_COMMON_AUDIO_PATH } from './p-235091a1.js';
+
 const isString = obj => typeof obj === 'string';
 const defer = () => {
   let res;
@@ -2703,4 +2705,204 @@ instance
     },
 });
 
-export { instance as i };
+const lidoTextCss = ".lido-text{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)}}";
+const LidoTextStyle0 = lidoTextCss;
+
+const LidoText = /*@__PURE__*/ proxyCustomElement(class LidoText extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.showSpeakIcon = false;
+        this.id = '';
+        this.value = '';
+        this.string = '';
+        this.fontFamily = '';
+        this.fontSize = '20px';
+        this.fontColor = '';
+        this.highlightWhileSpeaking = false;
+        this.height = 'auto';
+        this.width = 'auto';
+        this.ariaLabel = '';
+        this.ariaHidden = '';
+        this.x = '0px';
+        this.y = '0px';
+        this.z = '0';
+        this.bgColor = '';
+        this.borderImage = '';
+        this.type = '';
+        this.tabIndex = 0;
+        this.visible = false;
+        this.audio = '';
+        this.onTouch = '';
+        this.onInCorrect = '';
+        this.onCorrect = '';
+        this.minDrops = 1;
+        this.maxDrops = 1;
+        this.onEntry = '';
+        this.margin = '';
+        this.padding = '';
+        this.borderRadius = '0px';
+        this.spanType = '';
+        this.style = {};
+        this.delayVisible = '';
+        this.disableSpeak = false;
+    }
+    /**
+     * Lifecycle hook that runs after the component is rendered in the DOM.
+     * It initializes custom events based on the `type` of the text component.
+     */
+    componentDidLoad() {
+        setVisibilityWithDelay(this.el, this.delayVisible);
+        initEventsForElement(this.el, this.type);
+        // only create span element if requested
+        if (this.spanType === 'words' || this.spanType === 'letters') {
+            this.addSpanToText();
+        }
+        if (this.showSpeakIcon) {
+            attachSpeakIcon(this.el);
+        }
+        if (!this.audio || this.audio.trim() === "") {
+            const applyAutoAudio = () => {
+                const autoAudio = this.resolveAutoAudio();
+                if (autoAudio) {
+                    this.audio = autoAudio;
+                    console.log("[LidoText] Auto audio applied:", autoAudio);
+                }
+            };
+            // If path is already available, apply immediately
+            if (window.__LIDO_COMMON_AUDIO_PATH__) {
+                applyAutoAudio();
+            }
+            else {
+                // Otherwise, wait for it
+                window.addEventListener(LIDO_COMMON_AUDIO_READY_EVENT, applyAutoAudio, { once: true });
+            }
+        }
+    }
+    resolveAutoAudio() {
+        const base = window[LIDO_COMMON_AUDIO_PATH];
+        if (!base || !this.string)
+            return null;
+        const fileName = this.string.toLowerCase().trim().replace(/\s+/g, "_").replace(/[^\w-]/g, "");
+        return `${base}/${fileName}.mp3`;
+    }
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
+    componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this));
+        window.addEventListener('load', this.updateStyles.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
+    }
+    updateStyles() {
+        const borderImg = this.borderImage ? convertUrlToRelative(this.borderImage) : '';
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: parseProp(this.height, orientation),
+            width: parseProp(this.width, orientation),
+            backgroundColor: parseProp(this.bgColor, orientation),
+            top: parseProp(this.y, orientation),
+            left: parseProp(this.x, orientation),
+            zIndex: this.z,
+            fontSize: parseProp(this.fontSize, orientation),
+            fontFamily: this.fontFamily,
+            color: parseProp(this.fontColor, orientation),
+            display: parseProp(`${this.visible}`, orientation) === "true" ? 'flex' : 'none', // Toggle visibility
+            borderImage: `url(${borderImg})`,
+            borderImageSlice: borderImg ? '0 fill' : '',
+            margin: parseProp(this.margin, orientation),
+            padding: parseProp(this.padding, orientation),
+            borderRadius: parseProp(this.borderRadius, orientation),
+        };
+    }
+    async addSpanToText() {
+        const content = this.el.querySelector('.lido-text-content');
+        if (!content)
+            return;
+        const text = content.textContent || '';
+        content.innerHTML = '';
+        // Wrap each letters in a span inside .lido-text-content
+        if (this.spanType === 'letters') {
+            text.split('').forEach((letter, idx) => {
+                // Skip spaces
+                if (letter.trim() === '')
+                    return;
+                // Create a span for each letter
+                const letterSpan = document.createElement('span');
+                letterSpan.textContent = letter;
+                letterSpan.className = 'text-letters';
+                content.appendChild(letterSpan);
+            });
+        }
+        // Wrap each words in a span inside .lido-text-content
+        if (this.spanType === 'words') {
+            text.split(' ').forEach((word, idx) => {
+                const wordSpan = document.createElement('span');
+                wordSpan.textContent = word;
+                wordSpan.className = 'text-words';
+                content.appendChild(wordSpan);
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '9635bba385679026c4f90aac9467612f06a21f1b', 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, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", instance.t(this.string)) : instance.t(this.string)));
+    }
+    get el() { return this; }
+    static get style() { return LidoTextStyle0; }
+}, [0, "lido-text", {
+        "showSpeakIcon": [4, "show-speak-icon"],
+        "id": [1],
+        "value": [1],
+        "string": [1],
+        "fontFamily": [1, "font-family"],
+        "fontSize": [1, "font-size"],
+        "fontColor": [1, "font-color"],
+        "highlightWhileSpeaking": [4, "highlight-while-speaking"],
+        "height": [1],
+        "width": [1],
+        "ariaLabel": [1, "aria-label"],
+        "ariaHidden": [1, "aria-hidden"],
+        "x": [1],
+        "y": [1],
+        "z": [1],
+        "bgColor": [1, "bg-color"],
+        "borderImage": [1, "border-image"],
+        "type": [1],
+        "tabIndex": [2, "tab-index"],
+        "visible": [8],
+        "audio": [1],
+        "onTouch": [1, "on-touch"],
+        "onInCorrect": [1, "on-in-correct"],
+        "onCorrect": [1, "on-correct"],
+        "minDrops": [2, "min-drops"],
+        "maxDrops": [2, "max-drops"],
+        "onEntry": [1, "on-entry"],
+        "margin": [1],
+        "padding": [1],
+        "borderRadius": [1, "border-radius"],
+        "spanType": [1, "span-type"],
+        "delayVisible": [1, "delay-visible"],
+        "disableSpeak": [4, "disable-speak"],
+        "style": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lido-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lido-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LidoText);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LidoText as L, defineCustomElement as d, instance as i };

package/dist/components/{p-53a7d4cb.js → p-3acada8c.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-235091a1.js';
 
 const lidoCellCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}.lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}.lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}.lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}.lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}.lido-col::-webkit-scrollbar,.lido-wrap::-webkit-scrollbar,.lido-flex::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.lido-col::-webkit-scrollbar-thumb,.lido-wrap::-webkit-scrollbar-thumb,.lido-flex::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:3px solid transparent;background-clip:content-box}.lido-col::-webkit-scrollbar-track,.lido-wrap::-webkit-scrollbar-track,.lido-flex::-webkit-scrollbar-track{background:#f1f1f1}";
 const LidoCellStyle0 = lidoCellCss;

package/dist/components/{p-984ef5d1.js → p-3acd9a2e.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-235091a1.js';
 
 const lidoRowCss = ".lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}";
 const LidoRowStyle0 = lidoRowCss;
@@ -77,7 +77,7 @@ const LidoRow = /*@__PURE__*/ proxyCustomElement(class LidoRow extends H {
         };
     }
     render() {
-        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' })));
+        return (h(Host, { key: 'ca01c603f76bc544d8660427d004c2ddb2de66ca', 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: '08ef314cd12489030c1e9d428c88cc0a76355d1d' })));
     }
     get el() { return this; }
     static get style() { return LidoRowStyle0; }

package/dist/components/{p-6f451328.js → p-4d01394c.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, p as proxyCustomElement, H, g as getAssetPath, d as setVisibilityWithDelay, i as initEventsForElement, e as convertUrlToRelative, h, j as Host, R as RiveService } from './p-6953efe0.js';
+import { c as commonjsGlobal, p as proxyCustomElement, H, g as getAssetPath, d as setVisibilityWithDelay, i as initEventsForElement, e as convertUrlToRelative, h, j as Host, R as RiveService } from './p-235091a1.js';
 
 var rive = {exports: {}};
 

package/dist/components/{p-c62da3ed.js → p-57400ebc.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-235091a1.js';
 
 const lidoColCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}";
 const LidoColStyle0 = lidoColCss;

package/dist/components/{p-cfde157c.js → p-5e7c6afa.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-235091a1.js';
 
 const lidoWrapCss = ".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}";
 const LidoWrapStyle0 = lidoWrapCss;
@@ -78,7 +78,7 @@ const LidoWrap = /*@__PURE__*/ proxyCustomElement(class LidoWrap extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'ba0767c8fb70d3c20dbcc0835794ec58d62078b3', 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: '359ff37390f0d20e650481cd8d531ad4da55b308' })));
+        return (h(Host, { key: '2ac7204f5d41605322ba9545ac3689bdd5f49bcd', 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: '06a0dcfa475467e094d93e986c63c4cfc9974ac8' })));
     }
     get el() { return this; }
     static get style() { return LidoWrapStyle0; }

package/dist/components/{p-f36d02e9.js → p-74c270d2.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, S as SelectedValuesKey, J as LidoContainer, o as executeActions, O as triggerNextContainer, w as handleFloatElementPosition, n as storingEachActivityScore, W as DropAction, k as parseProp, h, j as Host } from './p-6953efe0.js';
-import { d as defineCustomElement$1 } from './p-0e645e5b.js';
+import { p as proxyCustomElement, H, S as SelectedValuesKey, K as LidoContainer, o as executeActions, Q as triggerNextContainer, x as handleFloatElementPosition, n as storingEachActivityScore, Y as DropAction, k as parseProp, h, j as Host } from './p-235091a1.js';
+import { d as defineCustomElement$1 } from './p-37c86a94.js';
 
 const lidoKeyboardCss = ".lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type=\"text\"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}";
 const LidoKeyboardStyle0 = lidoKeyboardCss;
@@ -118,10 +118,10 @@ const LidoKeyboard = /*@__PURE__*/ proxyCustomElement(class LidoKeyboard extends
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(Host, { key: '030937c20c1e5652a528e9f5e3335faafe18fff1', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '4c928db14ba00f8aa20dcdb9e220f0486949e861', class: "input-area" }, h("input", { key: 'f8db5e6f76aba08fb5893fd3fff7e6739dd5f854', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '58156eabbdd1fe9d06fa0ff3e192ab0f434fcd9e', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (h(Host, { key: 'd57a587171b8525147e31228779e8503f5b7e854', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: 'bc4242fca443e2fe0821b6b5e3559bfdf231ab30', class: "input-area" }, h("input", { key: '046989156e5f4c61d52d187c74570a95d8ebe6ab', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '72ab0afbebb9789c5cde9ed7624ef22bae5d2901', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), h("lido-text", { key: '79538fe14d2645dc7ae62f4e24da2300a680b1cc', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: '0d09084f44fe8a69e19006daccd1029e291b43e5', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '9b2686af38ffed8e792f93f8302f01d59dbd2748', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: 'b6028375fb0e56b3c32821894f199e2c96726261', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: 'f9b109fe36a6e0fcef459bdaf69ccbad6f827fc9', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '1a3047db0048f49429bd344625a15d3c94b173d4', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',

package/dist/components/{p-9eb8593c.js → p-8a32f7cb.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, h, j as Host } from './p-235091a1.js';
 
 const lidoShapeCss = ".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezoid{width:var(--trapezoidWidth);height:var(--trapezoidHeight);background-color:var(--bgColor);clip-path:polygon(\r\n    20% 0%,   \r\n    80% 0%,   \r\n    100% 100%,\r\n    0% 100%  \r\n  )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon(\r\n    25% 0%,   \r\n    75% 0%,   \r\n    100% 50%, \r\n    75% 100%, \r\n    25% 100%, \r\n    0% 50%   \r\n  )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon(\r\n    \r\n    15% 10%,\r\n    25% 4%,\r\n    35% 1%,\r\n    50% 0%,\r\n    65% 1%,\r\n    75% 4%,\r\n    85% 10%,\r\n\r\n    \r\n    50% 100%\r\n  )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY(  0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),\r\n    radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),\r\n    red}";
 const LidoShapeStyle0 = lidoShapeCss;
@@ -78,8 +78,8 @@ const LidoShape = /*@__PURE__*/ proxyCustomElement(class LidoShape extends H {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: 'fde795dbc7c3a295a84bb1e5e74ff57cf3fe103a', 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 }, this.shapeType === "lido-cube" &&
-            h("div", { key: '620b82948d6eea342a2e00fab780696fcd2d6794', class: "cube" }, h("div", { key: 'b505a156896edd12c8d686966945168c5eb056d7', class: "face top" }), h("div", { key: '806b4d6aec720340d7a207854b20f910bb845829', class: "face bottom" }), h("div", { key: 'd2619804cabb2761e624139e33d759992d632468', class: "face left" }), h("div", { key: '3874ba7bcbe3eebc133b107a4bfefb38638eeb0f', class: "face right" }), h("div", { key: '0e19cfb0feba399b9a98336b0f6c349ff22e29ed', class: "face front" }), h("div", { key: '9b1d9d75d8897756f32bc023533eb1dc025d8e2f', class: "face back" }))));
+        return (h(Host, { key: '687d13d8361df73e2757dce2865ee1835804e645', 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 }, this.shapeType === "lido-cube" &&
+            h("div", { key: 'bd9958c2095029a03eb76aef2f721e5883649dca', class: "cube" }, h("div", { key: 'bd8f4c9a4af6663dc6d642a80e3c0ebbb60471c9', class: "face top" }), h("div", { key: '0bbd21bab7efb5e91ab4067f22d9febe670748f6', class: "face bottom" }), h("div", { key: 'a3ca4f53a93994bef257b5637c2e603abc89c13e', class: "face left" }), h("div", { key: '0122526c9001632c412bbf27ac92a73f1a3bf000', class: "face right" }), h("div", { key: '5d3521dd261e79c9f3170539642be0c31e78e0b3', class: "face front" }), h("div", { key: '026145187bd4c68b8a73646c7e948ab81f75a16f', class: "face back" }))));
     }
     get el() { return this; }
     static get style() { return LidoShapeStyle0; }

package/dist/components/{p-0fa0ada9.js → p-8c0667eb.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, t as attachSpeakIcon, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, t as attachSpeakIcon, h, j as Host } from './p-235091a1.js';
 
 const lidoRandomCss = ".lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}";
 const LidoRandomStyle0 = lidoRandomCss;
@@ -76,7 +76,7 @@ const LidoRandom = /*@__PURE__*/ proxyCustomElement(class LidoRandom extends H {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        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' })));
+        return (h(Host, { key: 'e6978f97eaac048e12c50e048a8392c1125282f9', 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: '2f513356dac9d0f6df3ab695b9fa1bcf82c379de' })));
     }
     get el() { return this; }
     static get style() { return LidoRandomStyle0; }

package/dist/components/{p-9c7f08c4.js → p-8f082c62.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, k as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, k as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-235091a1.js';
 
 const lidoFlashCardCss = ".card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}";
 const LidoFlashCardStyle0 = lidoFlashCardCss;
@@ -67,6 +67,15 @@ const LidoFlash = /*@__PURE__*/ proxyCustomElement(class LidoFlash extends H {
     }
     componentDidLoad() {
         setVisibilityWithDelay(this.el, this.delayVisible);
+        const card = this.el.querySelector('.card');
+        if (card) {
+            setTimeout(() => {
+                card.classList.add('flipped');
+                setTimeout(() => {
+                    card.classList.remove('flipped');
+                }, 500);
+            }, 500);
+        }
         initEventsForElement(this.el, this.type);
         // handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, 'inline-block');
     }
@@ -76,7 +85,7 @@ const LidoFlash = /*@__PURE__*/ proxyCustomElement(class LidoFlash extends H {
     }
     /* ---------- Render ---------- */
     render() {
-        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" })))));
+        return (h(Host, { key: 'feb4183de8377349b990563bf7f2e6a999d8a1c5', 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: 'e1a8a03fb07fba6f7d44f207a1ef7081bb188bcf', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'fc8df309a9e6bf2b44198ca6c41c0e1a3ee6dcf9', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: 'e707168ae9e3fc8518b635c8e10b83305f569f5c', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-8c526c86.js → p-93acfbb2.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, e as convertUrlToRelative, k as parseProp, X as validateObjectiveStatus, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, e as convertUrlToRelative, k as parseProp, Z as validateObjectiveStatus, h, j as Host } from './p-235091a1.js';
 
 const lidoMathMatrixCss = ".math-matrix{width:100%;height:100%;display:flex;justify-content:center}.slot{width:100%;height:100%;text-align:center;align-content:center;font-size:42px;font-weight:800;font-family:'Baloo Bhai 2';box-sizing:content-box}.slot:hover{opacity:0.7}.slot-parent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.slot-active{background-color:var(--active-bg-color);background-image:var(--bg-image);background-size:contain;background-position:center;background-repeat:no-repeat}.slot-inactive{background-color:var(--deactive-bg-color);background-size:cover;background-position:center;background-repeat:no-repeat}.topIndex,.leftIndex,.bottomIndex{height:100%;width:100%;text-align:center;align-content:center;font-size:30px;font-weight:600;font-family:'Baloo Bhai 2'}";
 const LidoMathMatrixStyle0 = lidoMathMatrixCss;
@@ -192,7 +192,7 @@ const LidoMathMatrix = /*@__PURE__*/ proxyCustomElement(class LidoMathMatrix ext
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: 'bbd76954f0a4b67cd89dd10e3c26ce4f7e7712bd', class: "math-matrix", style: {
+        return (h(Host, { key: '3da93fe1224f166febc7da07a7ef301a66d88997', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,

package/dist/components/{p-97ddbda4.js → p-a182c9a2.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, Y as fraction, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, _ as fraction, h, j as Host } from './p-235091a1.js';
 
 const lidoSlideFillCss = ".svg-element,svg{width:100%;height:100%}";
 const LidoSlideFillStyle0 = lidoSlideFillCss;
@@ -194,7 +194,7 @@ const LidoSlideFill = /*@__PURE__*/ proxyCustomElement(class LidoSlideFill exten
         }
     }
     render() {
-        return (h(Host, { key: '12b0ded699dde182bca178f2a58e5dea40536f18', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '623f23b8b00bd4d83e99eb264dbb810aaf990ddd', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '9addda03d3a509cb0b23e88c59ad22c64dcd0044', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: 'e0d62ba6795bf0ac28e9e6b7dee5df04c2015ed5', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-348f95ba.js → p-b151457d.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, v as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-6953efe0.js';
-import { i as instance } from './p-73e3f0f4.js';
+import { p as proxyCustomElement, H, T as TemplateID, v as calculateScale, e as convertUrlToRelative, i as initEventsForElement, w as highlightElement, h, j as Host } from './p-235091a1.js';
+import { d as defineCustomElement$1, i as instance } from './p-37c86a94.js';
 
 const lidoContainerCss = ".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}";
 const LidoContainerStyle0 = lidoContainerCss;
@@ -46,6 +46,9 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
         this.showNextButton = 'false';
         this.delayVisible = '';
         this.disableSpeak = false;
+        this.templateId = '';
+        this.instructName = '';
+        this.speakFlag = false;
     }
     languageChanged(newLang) {
         const langToApply = newLang || this.resolveLanguage();
@@ -54,6 +57,25 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
     componentWillLoad() {
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
+        this.resolveInstructionAudio();
+    }
+    resolveInstructionAudio() {
+        var _a;
+        this.instructName =
+            (_a = {
+                flashcard: "Review the flashcards to reinforce your learning." /* templateAudio.flashcards */,
+                mcq: "Select the correct answer from the options provided." /* templateAudio.mcq */,
+                tracing: "Trace the shape by following the outline carefully." /* templateAudio.tracing */,
+                dragAndDrop: "Match the items by dragging and dropping them into the correct places." /* templateAudio.dragAndDrop */,
+            }[this.templateId]) !== null && _a !== void 0 ? _a : '';
+        const home = document.querySelector('lido-home');
+        if (!home)
+            return;
+        const existing = home.getAttribute(TemplateID) || '';
+        this.speakFlag = existing.includes(this.templateId);
+        if (!this.speakFlag) {
+            home.setAttribute(TemplateID, [existing, this.templateId].filter(Boolean).join(','));
+        }
     }
     resolveLanguage() {
         var _a, _b;
@@ -159,7 +181,15 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
         // Re-scale the container on window resize or load events
         window.addEventListener('resize', () => this.scaleContainer(this.el));
         window.addEventListener('load', () => this.scaleContainer(this.el));
-        initEventsForElement(this.el, this.type);
+        if (this.templateId) {
+            setTimeout(() => {
+                this.el.setAttribute("onEntry", `${this.templateId}.speak='${!this.speakFlag}'; ` + this.el.getAttribute("onEntry"));
+                initEventsForElement(this.el, this.type);
+            }, 100);
+        }
+        else {
+            initEventsForElement(this.el, this.type);
+        }
         if (this.customStyle) {
             const styleElement = document.createElement('style');
             styleElement.innerHTML = this.customStyle;
@@ -167,6 +197,9 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
         }
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
+        setTimeout(() => {
+            highlightElement();
+        }, 100);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
@@ -186,7 +219,7 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '338ef0be8cc9d052764785ce9314254be7c8a7f8', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak }, h("slot", { key: '59d66b47f4749a99ece4da48dbaebaf720cb0b2b' })));
+        return (h(Host, { key: 'bdae7c7d24046fc0f726668b9b1bbb84f3ddd3dd', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak, "template-id": this.templateId, audio: this.audio }, h("lido-text", { key: 'aa5d73493b429f0d99c5737aed89488c565e1699', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'd251b1fed4468aabd66a6f6c14b3de234329ab64' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -231,7 +264,10 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
         "showPrevButton": [1, "show-prev-button"],
         "showNextButton": [1, "show-next-button"],
         "delayVisible": [1, "delay-visible"],
-        "disableSpeak": [4, "disable-speak"]
+        "disableSpeak": [4, "disable-speak"],
+        "templateId": [1, "template-id"],
+        "instructName": [32],
+        "speakFlag": [32]
     }, undefined, {
         "locale": ["languageChanged"]
     }]);
@@ -239,13 +275,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["lido-container"];
+    const components = ["lido-container", "lido-text"];
     components.forEach(tagName => { switch (tagName) {
         case "lido-container":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LidoContainer);
             }
             break;
+        case "lido-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/components/{p-d0c4d5a7.js → p-b867548e.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, w as handleFloatElementPosition, x as handleElementClick, k as parseProp, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, x as handleFloatElementPosition, y as handleElementClick, k as parseProp, h, j as Host } from './p-235091a1.js';
 
 const lidoFloatCss = ".lido-float{position:relative}.lido-float>*{position:absolute;cursor:pointer}@keyframes float-up{from{top:var(--el-top)}to{top:-500px}}#removeShadow{box-shadow:unset !important}@keyframes float-lr{from{right:var(--el-left)}to{right:-500px}}";
 const LidoFloatStyle0 = lidoFloatCss;
@@ -60,7 +60,7 @@ const LidoFloat = /*@__PURE__*/ proxyCustomElement(class LidoFloat extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'e8bc37c1220b708872748bd49c2d7fc448bdd01c', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '991afa719c6fc35f489fae30f77bad81cf2b4c3e' })));
+        return (h(Host, { key: 'd12c96be36eb27c4b46cb2b494f1de3352634feb', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '5c2b330b5fb5c27ead76a0a9514750d4dd3ef820' })));
     }
     get el() { return this; }
     static get style() { return LidoFloatStyle0; }

package/dist/components/{p-6f91a337.js → p-c90d92db.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-235091a1.js';
 
 const lidoPosCss = ".lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}";
 const LidoPosStyle0 = lidoPosCss;
@@ -64,7 +64,7 @@ const LidoPos = /*@__PURE__*/ proxyCustomElement(class LidoPos extends H {
         };
     }
     render() {
-        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' })));
+        return (h(Host, { key: '0ab10d21eccd24db07fb6b87d21f75be32801013', 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: '11a3f2fc1b08007601879c9cae2f2736dd511499' })));
     }
     get el() { return this; }
     static get style() { return LidoPosStyle0; }

package/dist/components/{p-67d97edc.js → p-db2a05f5.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, l as createEvent, m as equationCheck, n as storingEachActivityScore, o as executeActions, q as calculateScore, N as NextContainerKey, h, j as Host } from './p-6953efe0.js';
-import { d as defineCustomElement$2 } from './p-53a7d4cb.js';
-import { d as defineCustomElement$1 } from './p-0e645e5b.js';
+import { p as proxyCustomElement, H, l as createEvent, m as equationCheck, n as storingEachActivityScore, o as executeActions, q as calculateScore, N as NextContainerKey, h, j as Host } from './p-235091a1.js';
+import { d as defineCustomElement$2 } from './p-3acada8c.js';
+import { d as defineCustomElement$1 } from './p-37c86a94.js';
 
 const lidoCalculatorCss = "#lidoCalculator{border-radius:19px;border:5px solid #029A9A;position:relative;display:flex;flex-direction:column;padding:2%;box-sizing:border-box}.lido-calculator-btn-special{background-color:#014D4D !important;--btn-shadow-color:#0a2f2f !important}.lido-calculator-btn-default{background-color:#029A9A !important;color:#000;--btn-shadow-color:#0f4242 !important}#lido-calculator-penIcon{--btn-bg-color:#FB7038 !important;--btn-shadow-px:0 8px 0 !important;--btn-shadow-color:#D74B12 !important;border-radius:5px !important}.lido-calculator-displayParent{width:89%;height:107px;background-color:rgb(68, 186, 186);border-radius:5px;margin:14px auto 17px auto;overflow:hidden;display:flex;align-items:end}.lido-calculator-display{width:97%;height:94px;background:#029A9A;color:#fff;text-align:right;display:flex;justify-content:flex-end;align-items:center;font-size:72px;font-weight:700;font-family:'Baloo Bhai 2', serif;border-radius:5px 0px 0px 5px;box-sizing:border-box;margin:0 0px -6px auto}.lido-calculator-buttons{flex:1;display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;gap:0%;width:100%;justify-items:center;align-items:center;position:relative;top:-1%}.lido-calculator-buttons lido-text{display:flex !important;justify-content:center;align-items:center;width:96px !important;height:80px !important;font-size:72px !important;font-weight:700 !important;color:#fff;border-radius:5px !important;cursor:pointer;text-align:center;line-height:1;box-sizing:border-box;transition:transform 0.1s}.lido-calculator-buttons lido-text:active{transform:scale(0.95)}";
 const LidoCalculatorStyle0 = lidoCalculatorCss;