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

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

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

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

@@ -712,7 +712,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '6be6d97477a80afc0275eef5b17718a5f43ce358', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '4e650d7142c61549aec021fd2a8da4e592eaf94e', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: 'b562e07d98a06f422ce5b8ca1d08f9c4307a313c', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'fc2cb8355a26e5b483c24c59641bd20fa37e853b', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -974,7 +974,7 @@ export class LidoTrace {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
+                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\r\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
                 },
                 "attribute": "mode",
                 "reflect": false,

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

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

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

@@ -80,7 +80,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: '7e2bb4af31b5aff0f063a9f6c3cab96cdd25f31f', 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: '03179b28e45692e61aff0bf3634ef0a72bab0726' })));
+        return (h(Host, { key: '12959a9a9c3b2df63ab977c39dceca4f1c771bf6', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'f19b29798a33592a1e5e15851f7f18266dbe35aa' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {
@@ -431,7 +431,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "attribute": "child-elements-length",
                 "reflect": false
@@ -448,7 +448,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum number of child elements that must be displayed inside the row.\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
+                    "text": "The minimum number of child elements that must be displayed inside the row.\r\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
                 },
                 "attribute": "min-length",
                 "reflect": false
@@ -465,7 +465,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of child elements that can be displayed inside the row.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "text": "The maximum number of child elements that can be displayed inside the row.\r\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
                 },
                 "attribute": "max-length",
                 "reflect": false
@@ -482,7 +482,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enables flex layout mode for the container.\nIf set to `\"true\"`, the component will use a flex layout (`display: flex`) instead of the default grid layout (`display: grid`).\nAdditionally, the `lido-wrap` class will be replaced with `lido-flex` to allow custom flex-specific styling."
+                    "text": "Enables flex layout mode for the container.\r\nIf set to `\"true\"`, the component will use a flex layout (`display: flex`) instead of the default grid layout (`display: grid`).\r\nAdditionally, the `lido-wrap` class will be replaced with `lido-flex` to allow custom flex-specific styling."
                 },
                 "attribute": "flex",
                 "reflect": false
@@ -535,7 +535,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "attribute": "margin",
                 "reflect": false,