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

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

@@ -75,7 +75,7 @@ export class LidoWrap {
         };
     }
     render() {
-        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' })));
+        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' })));
     }
     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.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\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.\r\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.\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.\r\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "text": "The maximum number of child elements that can be displayed inside the row.\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.\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."
+                    "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."
                 },
                 "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.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/css/animation.css

@@ -1,212 +1,212 @@
-/* animations */
-
-@keyframes rightToPlace {
-  from {
-    transform: translateX(2000px);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes topToPlace {
-  from {
-    transform: translateY(-1000px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes bottomToPlace {
-  from {
-    transform: translateY(1000px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes placeToLeft {
-  from {
-  }
-  to {
-    transform: translateX(-2000px);
-  }
-}
-@keyframes placeToRight {
-  from {
-  }
-  to {
-    transform: translateX(2000px);
-  }
-}
-
-@keyframes leftToPlace {
-  from {
-    transform: translateX(-2000px);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-  10% {
-    transform: translateX(-5px);
-  }
-  20% {
-    transform: translateX(5px);
-  }
-  30% {
-    transform: translateX(-5px);
-  }
-  40% {
-    transform: translateX(5px);
-  }
-  50% {
-    transform: translateX(-5px);
-  }
-  60% {
-    transform: translateX(5px);
-  }
-  70% {
-    transform: translateX(-5px);
-  }
-  80% {
-    transform: translateX(5px);
-  }
-  90% {
-    transform: translateX(-5px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-@keyframes fallAndBounce {
-  0% {
-    transform: translateY(-1000px);
-  }
-  25% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-200px);
-  }
-  75% {
-    transform: translateY(0);
-  }
-  90% {
-    transform: translateY(-100px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-@keyframes placeToDown {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(1000px);
-  }
-}
-
-@keyframes strongShake {
-  0% { transform: translateX(0); }
-  20% { transform: translateX(-8px); }
-  40% { transform: translateX(8px); }
-  60% { transform: translateX(-6px); }
-  80% { transform: translateX(6px); }
-  100% { transform: translateX(0); }
-}
-
-@keyframes scaledShake {
-  0% { transform: scale(1) translateX(0); box-shadow: 0 0 0 transparent; }
-  20% { transform: scale(1.10) translateX(-12px); box-shadow: 0 0 10px red; }
-  40% { transform: scale(1.10) translateX(12px); box-shadow: 0 0 12px red; }
-  60% { transform: scale(1.10) translateX(-8px); box-shadow: 0 0 10px red; }
-  80% { transform: scale(1.10) translateX(8px); box-shadow: 0 0 12px red; }
-  100% { transform: scale(1) translateX(0); box-shadow: none; }
-}
-
-@keyframes horizontalShake {
-  0% {
-    transform: scale(1) translateX(0);
-    background-color: transparent;
-  }
-  20% {
-    transform: translateX(-20px);
-    background-color: rgba(255, 0, 0, 0.2);
-  }
-  40% {
-    transform: translateX(20px);
-    background-color: rgba(255, 0, 0, 0.4);
-  }
-  60% {
-    transform: translateX(-10px);
-    background-color: rgba(255, 0, 0, 0.3);
-  }
-  80% {
-    transform: translateX(10px);
-    background-color: rgba(255, 0, 0, 0.2);
-  }
-  100% {
-    transform: translateX(0);
-    background-color: transparent;
-  }
-}
-
-@keyframes verticalShake {
-  0%   { transform: translateY(0); background-color: transparent; }
-  20%  { transform: translateY(-20px); background-color: rgba(255, 0, 0, 0.2); }
-  40%  { transform: translateY(0); background-color: rgba(255, 0, 0, 0.4); }
-  60%  { transform: translateY(20px); background-color: rgba(255, 0, 0, 0.2); }
-  80%  { transform: translateY(0); background-color: rgba(255, 0, 0, 0.1); }
-  100% { transform: translateY(0); background-color: transparent; }
-}
-
-
-@keyframes diagonalShake {
-  0%   { transform: translate(0, 0); background-color: transparent; }
-  25%  { transform: translate(20px, -20px); background-color: rgba(255, 0, 0, 0.2); }
-  50%  { transform: translate(-20px, 20px); background-color: rgba(255, 0, 0, 0.3); }
-  75%  { transform: translate(10px, -10px); background-color: rgba(255, 0, 0, 0.2); }
-  100% { transform: translate(0, 0); background-color: transparent; }
-}
-
-@keyframes glowPulse {
-  0% {
-    filter: drop-shadow(0 0 5px yellow)
-            drop-shadow(0 0 10px yellow)
-            drop-shadow(0 0 20px yellow)
-            drop-shadow(0 0 30px orange);
-  }
-  50% {
-    filter: drop-shadow(0 0 10px yellow)
-            drop-shadow(0 0 20px yellow)
-            drop-shadow(0 0 40px yellow)
-            drop-shadow(0 0 50px orange);
-  }
-  100% {
-    filter: drop-shadow(0 0 5px yellow)
-            drop-shadow(0 0 10px yellow)
-            drop-shadow(0 0 20px yellow)
-            drop-shadow(0 0 30px orange);
-  }
-}
-
-@keyframes trace-animation {
-  0% {
-    
-  }
-  100% {
-    width: var(--trace-width, 100px);
-    height: var(--trace-height, 100px);
-  }
+/* animations */
+
+@keyframes rightToPlace {
+  from {
+    transform: translateX(2000px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes topToPlace {
+  from {
+    transform: translateY(-1000px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes bottomToPlace {
+  from {
+    transform: translateY(1000px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes placeToLeft {
+  from {
+  }
+  to {
+    transform: translateX(-2000px);
+  }
+}
+@keyframes placeToRight {
+  from {
+  }
+  to {
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes leftToPlace {
+  from {
+    transform: translateX(-2000px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(-5px);
+  }
+  20% {
+    transform: translateX(5px);
+  }
+  30% {
+    transform: translateX(-5px);
+  }
+  40% {
+    transform: translateX(5px);
+  }
+  50% {
+    transform: translateX(-5px);
+  }
+  60% {
+    transform: translateX(5px);
+  }
+  70% {
+    transform: translateX(-5px);
+  }
+  80% {
+    transform: translateX(5px);
+  }
+  90% {
+    transform: translateX(-5px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fallAndBounce {
+  0% {
+    transform: translateY(-1000px);
+  }
+  25% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-200px);
+  }
+  75% {
+    transform: translateY(0);
+  }
+  90% {
+    transform: translateY(-100px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes placeToDown {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(1000px);
+  }
+}
+
+@keyframes strongShake {
+  0% { transform: translateX(0); }
+  20% { transform: translateX(-8px); }
+  40% { transform: translateX(8px); }
+  60% { transform: translateX(-6px); }
+  80% { transform: translateX(6px); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes scaledShake {
+  0% { transform: scale(1) translateX(0); box-shadow: 0 0 0 transparent; }
+  20% { transform: scale(1.10) translateX(-12px); box-shadow: 0 0 10px red; }
+  40% { transform: scale(1.10) translateX(12px); box-shadow: 0 0 12px red; }
+  60% { transform: scale(1.10) translateX(-8px); box-shadow: 0 0 10px red; }
+  80% { transform: scale(1.10) translateX(8px); box-shadow: 0 0 12px red; }
+  100% { transform: scale(1) translateX(0); box-shadow: none; }
+}
+
+@keyframes horizontalShake {
+  0% {
+    transform: scale(1) translateX(0);
+    background-color: transparent;
+  }
+  20% {
+    transform: translateX(-20px);
+    background-color: rgba(255, 0, 0, 0.2);
+  }
+  40% {
+    transform: translateX(20px);
+    background-color: rgba(255, 0, 0, 0.4);
+  }
+  60% {
+    transform: translateX(-10px);
+    background-color: rgba(255, 0, 0, 0.3);
+  }
+  80% {
+    transform: translateX(10px);
+    background-color: rgba(255, 0, 0, 0.2);
+  }
+  100% {
+    transform: translateX(0);
+    background-color: transparent;
+  }
+}
+
+@keyframes verticalShake {
+  0%   { transform: translateY(0); background-color: transparent; }
+  20%  { transform: translateY(-20px); background-color: rgba(255, 0, 0, 0.2); }
+  40%  { transform: translateY(0); background-color: rgba(255, 0, 0, 0.4); }
+  60%  { transform: translateY(20px); background-color: rgba(255, 0, 0, 0.2); }
+  80%  { transform: translateY(0); background-color: rgba(255, 0, 0, 0.1); }
+  100% { transform: translateY(0); background-color: transparent; }
+}
+
+
+@keyframes diagonalShake {
+  0%   { transform: translate(0, 0); background-color: transparent; }
+  25%  { transform: translate(20px, -20px); background-color: rgba(255, 0, 0, 0.2); }
+  50%  { transform: translate(-20px, 20px); background-color: rgba(255, 0, 0, 0.3); }
+  75%  { transform: translate(10px, -10px); background-color: rgba(255, 0, 0, 0.2); }
+  100% { transform: translate(0, 0); background-color: transparent; }
+}
+
+@keyframes glowPulse {
+  0% {
+    filter: drop-shadow(0 0 5px yellow)
+            drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 30px orange);
+  }
+  50% {
+    filter: drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 40px yellow)
+            drop-shadow(0 0 50px orange);
+  }
+  100% {
+    filter: drop-shadow(0 0 5px yellow)
+            drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 30px orange);
+  }
+}
+
+@keyframes trace-animation {
+  0% {
+    
+  }
+  100% {
+    width: var(--trace-width, 100px);
+    height: var(--trace-height, 100px);
+  }
 }