lido-player 0.0.2-beta-14 → 0.0.2-beta-15-dev

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

@@ -257,7 +257,7 @@ export class LidoCell {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: '53d510e92a72d1f855e6d0cb0c0564c2f4351b64', 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: '1af7a1f78e12bb1babcd91266eaf209b9d7530dc' })));
+        return (h(Host, { key: '73bdf9dd33fdd8322c35465de011697da112193a', 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: '6e9d4507b36716f04853d39ef66015441782aa88' })));
     }
     static get is() { return "lido-cell"; }
     static get originalStyleUrls() {
@@ -304,7 +304,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the width of the scrollbar within the cell (e.g., '14px').\nDefaults to '0px' if not specified, effectively hiding the scrollbar."
+                    "text": "Defines the width of the scrollbar within the cell (e.g., '14px').\r\nDefaults to '0px' if not specified, effectively hiding the scrollbar."
                 },
                 "getter": false,
                 "setter": false,
@@ -504,7 +504,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The gap between child elements inside the column (CSS value, e.g., '10px', '5px 10px').\nThis is applicable when the layout is set to `wrap` or `flex`."
+                    "text": "The gap between child elements inside the column (CSS value, e.g., '10px', '5px 10px').\r\nThis is applicable when the layout is set to `wrap` or `flex`."
                 },
                 "getter": false,
                 "setter": false,
@@ -704,7 +704,7 @@ export class LidoCell {
                 "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,
@@ -724,7 +724,7 @@ export class LidoCell {
                 "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,
@@ -744,7 +744,7 @@ export class LidoCell {
                 "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,
@@ -764,7 +764,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the layout behavior of the component's children.\n\n- `wrap`: Applies a grid layout to the children, allowing them to wrap automatically in a grid format.\n- `flex`: Applies a flex layout with wrapping behavior (`flex-wrap`).\n- `col`: Arranges children in a single column using a vertical flex direction.\n- `row`: Arranges children in a single row using a horizontal flex direction.\n- `pos`: Applies absolute positioning to children, allowing manual placement using `x` and `y` values.\n- `random`: Positions child elements randomly within the container using absolute positioning.\n\nDefault: `'wrap'`"
+                    "text": "Determines the layout behavior of the component's children.\r\n\r\n- `wrap`: Applies a grid layout to the children, allowing them to wrap automatically in a grid format.\r\n- `flex`: Applies a flex layout with wrapping behavior (`flex-wrap`).\r\n- `col`: Arranges children in a single column using a vertical flex direction.\r\n- `row`: Arranges children in a single row using a horizontal flex direction.\r\n- `pos`: Applies absolute positioning to children, allowing manual placement using `x` and `y` values.\r\n- `random`: Positions child elements randomly within the container using absolute positioning.\r\n\r\nDefault: `'wrap'`"
                 },
                 "getter": false,
                 "setter": false,
@@ -824,7 +824,7 @@ export class LidoCell {
                 "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,
@@ -844,7 +844,7 @@ export class LidoCell {
                 "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,
@@ -864,7 +864,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS align-items property to control the alignment of flex items.\nExample: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'."
+                    "text": "CSS align-items property to control the alignment of flex items.\r\nExample: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'."
                 },
                 "getter": false,
                 "setter": false,
@@ -884,7 +884,7 @@ export class LidoCell {
                 "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,
@@ -904,7 +904,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS flex direction for the component, which can be used to control the layout of child elements.\nAccepts values like 'row', 'column', etc."
+                    "text": "CSS flex direction for the component, which can be used to control the layout of child elements.\r\nAccepts values like 'row', 'column', etc."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,19 +1,19 @@
-.lido-col {
-  /* position: absolute; */
-  top: var(--y, 0);
-  left: var(--x, 0);
-  height: var(--height, 100%);
-  width: var(--width, 100%);
-  background-color: var(--bgColor, #eeeeee);
-  /* position: relative; */
-  padding: 15px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  align-items: center;
-}
-
-.lido-col > * {
-  /* position: relative; */
-}
+.lido-col {
+  /* position: absolute; */
+  top: var(--y, 0);
+  left: var(--x, 0);
+  height: var(--height, 100%);
+  width: var(--width, 100%);
+  background-color: var(--bgColor, #eeeeee);
+  /* position: relative; */
+  padding: 15px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+}
+
+.lido-col > * {
+  /* position: relative; */
+}

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

@@ -78,7 +78,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: 'b2ecb19a78feed7275d9e996255db4144d5e0153', 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: '2d285d2c1557647e05abb470490da6c7c735a39d' })));
+        return (h(Host, { key: '334206d6054442fec787cfb479a68ae164404730', 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: '590cd219bc5a02e6b96eafe108fb8b310daf941d' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {
@@ -467,7 +467,7 @@ export class LidoCol {
                 "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,
@@ -486,7 +486,7 @@ export class LidoCol {
                 "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,
@@ -505,7 +505,7 @@ export class LidoCol {
                 "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,
@@ -562,7 +562,7 @@ export class LidoCol {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Applies a CSS box-shadow to the component.\nAccepts any valid CSS box-shadow value.\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
+                    "text": "Applies a CSS box-shadow to the component.\r\nAccepts any valid CSS box-shadow value.\r\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
                 },
                 "getter": false,
                 "setter": false,
@@ -621,7 +621,7 @@ export class LidoCol {
                 "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,

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

@@ -1,10 +1,10 @@
-.lido-container {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: var(--bgColor, transparent);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+.lido-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: var(--bgColor, transparent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -171,7 +171,7 @@ export class LidoContainer {
         this.handleWindowLoad = () => this.scaleContainer(this.el);
     }
     cleanupInteractionHandlers() {
-        this.el.querySelectorAll('[type="drag"], [type="slide"]').forEach(element => {
+        this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach(element => {
             element.dispatchEvent(new Event(LIDO_INTERACTION_CLEANUP_EVENT));
         });
     }
@@ -452,7 +452,7 @@ export class LidoContainer {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { key: 'd4e7e9d66565be9ca337f7ab432eef41f63551e1', id: "lido-container", Lang: this.Lang, "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, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '2fd366bcd46aa9f4065e3a7a3207e643dce1dd6d', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '6809b09d937605c0caa92bbad1ad4ffc4844b6cb' })));
+        return (h(Host, { key: '1862e30fedda58726edc107f81fae1f63e96d009', id: "lido-container", Lang: this.Lang, "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, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '86fd014a61ba9cba6d67e2d921b2d8a8a289dbc7', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'c3128ea2164892757b32cb076d717436947f9a4c' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -579,7 +579,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom CSS styles to be applied to the container.\nAllows for dynamic styling through inline styles or class names."
+                    "text": "Custom CSS styles to be applied to the container.\r\nAllows for dynamic styling through inline styles or class names."
                 },
                 "getter": false,
                 "setter": false,
@@ -1019,7 +1019,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the activity should proceed automatically only after a correct response.\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
+                    "text": "Determines if the activity should proceed automatically only after a correct response.\r\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -1059,7 +1059,7 @@ export class LidoContainer {
                 "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,
@@ -1079,7 +1079,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Exit button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Exit button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1098,7 +1098,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Previous button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Previous button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1117,7 +1117,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Next button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Next button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1136,7 +1136,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Speaker button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Speaker button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,28 +1,28 @@
-
-
-.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);
-}
+
+
+.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);
+}

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

@@ -148,7 +148,7 @@ export class LidoFlash {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: 'cd0d8539f24de1fd7805b271de839ee8efeb4287', 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: 'a97eaa100216652cc4deaf8b6f73e9ea07a125f2', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '7a6f94b89da76b2c7fc911c44d2aaa63a3d2164d', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '15936f96d44db217c042584cc225a42dc3f74e98', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'db8de4cdb5466700ca29fba17e2a5ffb01907559', 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: 'ec3aeff247e581f4aef061b7fea5b752a64804b3', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'cb7ffa64077c89157a0d75720964605eed639363', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '537e1b60c82be542b2a8a8426abc4b801865688e', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {
@@ -515,7 +515,7 @@ export class LidoFlash {
                 "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,
@@ -591,7 +591,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the card is flipped (back side visible).\n`mutable` lets the component toggle itself on click;\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
+                    "text": "Whether the card is flipped (back side visible).\r\n`mutable` lets the component toggle itself on click;\r\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
                 },
                 "getter": false,
                 "setter": false,
@@ -611,7 +611,7 @@ export class LidoFlash {
                 "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,

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

@@ -1,30 +1,30 @@
-.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;
-  }
-}
+.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;
+  }
+}

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

@@ -85,7 +85,7 @@ export class LidoFloat {
         };
     }
     render() {
-        return (h(Host, { key: '26ada4c2834a58fe1f45348a32f9d1dcecb79a14', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '6f4ca358f564e268390f221cc1f84af1f303761b' })));
+        return (h(Host, { key: 'c461f1142dd6addd9ceb41ade183b044b875681f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '240439bfda6a9e4e2d67e6ae2b5c878d99e632b3' })));
     }
     static get is() { return "lido-float"; }
     static get originalStyleUrls() {
@@ -328,7 +328,7 @@ export class LidoFloat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\nThis can be used to control the animation or positioning of the float elements."
+                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\r\nThis can be used to control the animation or positioning of the float elements."
                 },
                 "getter": false,
                 "setter": false,