ldrs - npm Package Compare versions

Comparing version 0.0.22 to 0.0.23

dist/elements/bouncy.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.6);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:flex-end;display:flex;height:calc(var(--uib-size)*.6);justify-content:space-between;padding-bottom:20%;width:var(--uib-size)}.cube{animation:jump var(--uib-speed) ease-in-out infinite;flex-shrink:0;height:calc(var(--uib-size)*.2);width:calc(var(--uib-size)*.2)}.cube__inner{animation:morph var(--uib-speed) ease-in-out infinite;background-color:var(--uib-color);border-radius:25%;display:block;height:100%;transform-origin:center bottom;transition:background-color .3s ease;width:100%}.cube:nth-child(2),.cube:nth-child(2) .cube__inner{animation-delay:calc(var(--uib-speed)*-.36)}.cube:nth-child(3),.cube:nth-child(3) .cube__inner{animation-delay:calc(var(--uib-speed)*-.2)}@keyframes jump{0%{transform:translateY(0)}30%{animation-timing-function:ease-out;transform:translateY(0)}50%{animation-timing-function:ease-in;transform:translateY(-200%)}75%{animation-timing-function:ease-in;transform:translateY(0)}}@keyframes morph{0%{transform:scaleY(1)}10%{transform:scaleY(1)}20%,25%{animation-timing-function:ease-in-out;transform:scaleY(.6) scaleX(1.3)}30%{animation-timing-function:ease-in-out;transform:scaleY(1.15) scaleX(.9)}40%{transform:scaleY(1)}70%,85%,to{transform:scaleY(1)}75%{transform:scaleY(.8) scaleX(1.2)}}";class t extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div class="container">\n        <div class="cube"><div class="cube__inner"></div></div>\n        <div class="cube"><div class="cube__inner"></div></div>\n        <div class="cube"><div class="cube__inner"></div></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${i}\n    `)}}var n={register:(e="l-bouncy")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{n as default};
+import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.6);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:flex-end;display:flex;height:calc(var(--uib-size)*.6);justify-content:space-between;padding-bottom:20%;width:var(--uib-size)}.cube{animation:jump var(--uib-speed) ease-in-out infinite;flex-shrink:0;height:calc(var(--uib-size)*.2);width:calc(var(--uib-size)*.2)}.cube__inner{animation:morph var(--uib-speed) ease-in-out infinite;background-color:var(--uib-color);border-radius:25%;display:block;height:100%;transform-origin:center bottom;transition:background-color .3s ease;width:100%}.cube:nth-child(2),.cube:nth-child(2) .cube__inner{animation-delay:calc(var(--uib-speed)*-.36)}.cube:nth-child(3),.cube:nth-child(3) .cube__inner{animation-delay:calc(var(--uib-speed)*-.2)}@keyframes jump{0%{transform:translateY(0)}28%{animation-timing-function:ease-out;transform:translateY(0)}50%{animation-timing-function:ease-in;transform:translateY(-200%)}74%{animation-timing-function:ease-in;transform:translateY(0)}}@keyframes morph{0%{transform:scaleY(1)}10%{transform:scaleY(1)}20%,25%{animation-timing-function:ease-in-out;transform:scaleY(.6) scaleX(1.3)}30%{animation-timing-function:ease-in-out;transform:scaleY(1.15) scaleX(.9)}40%{transform:scaleY(1)}72%,87%,to{transform:scaleY(1)}77%{transform:scaleY(.8) scaleX(1.2)}}";class t extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div class="container">\n        <div class="cube"><div class="cube__inner"></div></div>\n        <div class="cube"><div class="cube__inner"></div></div>\n        <div class="cube"><div class="cube__inner"></div></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${i}\n    `)}}var n={register:(e="l-bouncy")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{n as default};
 //# sourceMappingURL=bouncy.js.map

dist/elements/bouncyArc.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.51);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-cube-size:calc(var(--uib-size)/5.5);--uib-arc-1:-80deg;--uib-arc-2:80deg;align-items:flex-start;display:flex;height:100%;justify-content:center;width:100%}.cube{animation:metronome var(--uib-speed) linear infinite;height:calc(var(--uib-size)*.5);transform:rotate(var(var(--uib-arc-1)));transform-origin:center bottom}.cube,.cube:after{width:var(--uib-cube-size)}.cube:after{animation:morph var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:25%;content:"";display:block;height:var(--uib-cube-size);transition:background-color .3s ease}@keyframes metronome{0%{transform:rotate(var(--uib-arc-1))}5%{animation-timing-function:ease-out;transform:rotate(var(--uib-arc-1))}50%{transform:rotate(var(--uib-arc-2))}55%{animation-timing-function:ease-out;transform:rotate(var(--uib-arc-2))}to{transform:rotate(var(--uib-arc-1))}}@keyframes morph{0%,5%{transform:scaleX(.75) scaleY(1.25);transform-origin:center left}12.5%{transform:scaleX(1.5);transform-origin:center left}27.5%{transform:scaleX(1);transform-origin:center left}27.5001%,42.5%{transform:scaleX(1);transform-origin:center right}50%,52.5%{animation-timing-function:ease-in;transform:scaleX(.75) scaleY(1.25);transform-origin:center right}65%{transform:scaleX(1.5);transform-origin:center right}77.5%{transform:scaleX(1);transform-origin:center right}77.5001%,95%{transform:scaleX(1);transform-origin:center left}to{transform:scaleX(.75) scaleY(1.25);transform-origin:center left}}';class r extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:70,color:"black",speed:1.65}),this.template.innerHTML=`\n      <div class="container"><div class="cube"></div></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-bouncy-arc")=>{customElements.get(e)||customElements.define(e,class extends r{})},element:r};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.51);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-cube-size:calc(var(--uib-size)/5.5);--uib-arc-1:-80deg;--uib-arc-2:80deg;align-items:flex-start;display:flex;height:100%;justify-content:center;width:100%}.cube{animation:metronome var(--uib-speed) linear infinite;height:calc(var(--uib-size)*.5);transform:rotate(var(var(--uib-arc-1)));transform-origin:center bottom}.cube,.cube:after{width:var(--uib-cube-size)}.cube:after{animation:morph var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:25%;content:"";display:block;height:var(--uib-cube-size);transition:background-color .3s ease}@keyframes metronome{0%{transform:rotate(var(--uib-arc-1))}10%{animation-timing-function:ease-out;transform:rotate(var(--uib-arc-1))}50%{transform:rotate(var(--uib-arc-2))}63%{animation-timing-function:ease-out;transform:rotate(var(--uib-arc-2))}to{transform:rotate(var(--uib-arc-1))}}@keyframes morph{0%,5%{transform:scaleX(.75) scaleY(1.25);transform-origin:center left}12.5%{transform:scaleX(1.5);transform-origin:center left}27.5%{transform:scaleX(1);transform-origin:center left}27.5001%,42.5%{transform:scaleX(1);transform-origin:center right}50%,52.5%{animation-timing-function:ease-in;transform:scaleX(.75) scaleY(1.25);transform-origin:center right}65%{transform:scaleX(1.5);transform-origin:center right}77.5%{transform:scaleX(1);transform-origin:center right}77.5001%,95%{transform:scaleX(1);transform-origin:center left}to{transform:scaleX(.75) scaleY(1.25);transform-origin:center left}}';class r extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:70,color:"black",speed:1.65}),this.template.innerHTML=`\n      <div class="container"><div class="cube"></div></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-bouncy-arc")=>{customElements.get(e)||customElements.define(e,class extends r{})},element:r};export{i as default};
 //# sourceMappingURL=bouncyArc.js.map

dist/elements/cardio.js

@@ -1,2 +0,2 @@
-import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.625);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:calc(var(--uib-size)*.625);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{stroke:var(--uib-color);stroke-dasharray:100;stroke-dashoffset:0;animation:travel var(--uib-speed) ease-in-out infinite,fade var(--uib-speed) ease-out infinite;transition:stroke .5s ease;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{stroke-linecap:round;stroke-linejoin:round}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:100}75%{stroke-dashoffset:0}}@keyframes fade{0%{opacity:0}20%,55%{opacity:1}to{opacity:0}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M0.5,17.2h8.2l3-4.7l5.9,12l7.8-24l5.9,16.7v0h8.2"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:50,color:"black",speed:1.5,stroke:4,"bg-opacity":.1});const e=parseInt(this.size),i=t(e/40,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${.625*e}"\n        height="${.625*e}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path \n          class="track"\n          stroke-width="${this.stroke}" \n          fill="none" \n          pathlength="100"\n          d="${i}"\n        />\n        <path \n          class="car"\n          stroke-width="${this.stroke}" \n          fill="none" \n          pathlength="100"\n          d="${i}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=parseInt(this.size),i=this.shadow.querySelector("style"),r=this.shadow.querySelector("svg"),o=this.shadow.querySelectorAll("path");i&&(r.setAttribute("height",String(.625*e)),r.setAttribute("width",this.size),r.setAttribute("viewBox",`0 0 ${this.size} ${.625*e}`),o.forEach((s=>{s.setAttribute("stroke-width",this.stroke),s.setAttribute("d",t(e/40,this.d))})),i.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-cardio")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
+import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.625);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:calc(var(--uib-size)*.625);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{stroke:var(--uib-color);stroke-dasharray:100;stroke-dashoffset:0;animation:travel var(--uib-speed) ease-in-out infinite,fade var(--uib-speed) ease-out infinite;transition:stroke .5s ease;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{stroke-linecap:round;stroke-linejoin:round}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:100}75%{stroke-dashoffset:0}}@keyframes fade{0%{opacity:0}20%,55%{opacity:1}to{opacity:0}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M0.5,17.2h8.2l3-4.7l5.9,12l7.8-24l5.9,16.7v0h8.2"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:50,color:"black",speed:1.5,stroke:4,"bg-opacity":.1});const e=parseInt(this.size),i=t(e/40,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${.625*e}"\n        height="${.625*e}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path \n          class="track"\n          stroke-width="${this.stroke}" \n          fill="none" \n          pathlength="100"\n          d="${i}"\n        />\n        <path \n          class="car"\n          stroke-width="${this.stroke}" \n          fill="none" \n          pathlength="100"\n          d="${i}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=parseInt(this.size),i=this.shadow.querySelector("style"),r=this.shadow.querySelector("svg"),o=this.shadow.querySelectorAll("path");i&&(r.setAttribute("height",String(.625*e)),r.setAttribute("width",this.size),r.setAttribute("viewBox",`0 0 ${this.size} ${.625*e}`),o.forEach((s=>{s.setAttribute("stroke-width",this.stroke),s.setAttribute("d",t(e/40,this.d))})),i.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-cardio")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
 //# sourceMappingURL=cardio.js.map

dist/elements/chaoticOrbit.js

@@ -1,2 +0,2 @@
-import a from"../lib/LdrsBaseElement.js";var e=':host{--uib-dot-size:calc(var(--uib-size)*0.4);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;animation:rotate calc(var(--uib-speed)*1.667) infinite linear;display:flex;height:var(--uib-size);justify-content:center;position:relative;width:var(--uib-size)}.container:after,.container:before{background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:var(--uib-dot-size);position:absolute;transition:background-color .3s ease;width:var(--uib-dot-size)}.container:before{animation:orbit var(--uib-speed) linear infinite}.container:after{animation:orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes orbit{0%{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}5%{opacity:.58;transform:translateX(calc(var(--uib-size)*.235)) scale(.684208)}10%{opacity:.51;transform:translateX(calc(var(--uib-size)*.182)) scale(.631576)}15%{opacity:.44;transform:translateX(calc(var(--uib-size)*.129)) scale(.578944)}20%{opacity:.37;transform:translateX(calc(var(--uib-size)*.076)) scale(.526312)}25%{opacity:.3;transform:translateX(0) scale(.47368)}30%{opacity:.37;transform:translateX(calc(var(--uib-size)*-.076)) scale(.526312)}35%{opacity:.44;transform:translateX(calc(var(--uib-size)*-.129)) scale(.578944)}40%{opacity:.51;transform:translateX(calc(var(--uib-size)*-.182)) scale(.631576)}45%{opacity:.58;transform:translateX(calc(var(--uib-size)*-.235)) scale(.684208)}50%{opacity:.65;transform:translateX(calc(var(--uib-size)*-.25)) scale(.73684)}55%{opacity:.72;transform:translateX(calc(var(--uib-size)*-.235)) scale(.789472)}60%{opacity:.79;transform:translateX(calc(var(--uib-size)*-.182)) scale(.842104)}65%{opacity:.86;transform:translateX(calc(var(--uib-size)*-.129)) scale(.894736)}70%{opacity:.93;transform:translateX(calc(var(--uib-size)*-.076)) scale(.947368)}75%{opacity:1;transform:translateX(0) scale(1)}80%{opacity:.93;transform:translateX(calc(var(--uib-size)*.076)) scale(.947368)}85%{opacity:.86;transform:translateX(calc(var(--uib-size)*.129)) scale(.894736)}90%{opacity:.79;transform:translateX(calc(var(--uib-size)*.182)) scale(.842104)}95%{opacity:.72;transform:translateX(calc(var(--uib-size)*.235)) scale(.789472)}to{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}}';class t extends a{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:1.5}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const a=this.shadow.querySelector("style");a&&(a.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var s={register:(a="l-chaotic-orbit")=>{customElements.get(a)||customElements.define(a,class extends t{})},element:t};export{s as default};
+import a from"../lib/LdrsBaseElement.js";var e=':host{--uib-dot-size:calc(var(--uib-size)*0.4);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;animation:rotate calc(var(--uib-speed)*1.667) infinite linear;display:flex;height:var(--uib-size);justify-content:center;position:relative;width:var(--uib-size)}.container:after,.container:before{background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:var(--uib-dot-size);position:absolute;transition:background-color .3s ease;width:var(--uib-dot-size)}.container:before{animation:orbit var(--uib-speed) linear infinite}.container:after{animation:orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes orbit{0%{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}5%{opacity:.58;transform:translateX(calc(var(--uib-size)*.235)) scale(.684208)}10%{opacity:.51;transform:translateX(calc(var(--uib-size)*.182)) scale(.631576)}15%{opacity:.44;transform:translateX(calc(var(--uib-size)*.129)) scale(.578944)}20%{opacity:.37;transform:translateX(calc(var(--uib-size)*.076)) scale(.526312)}25%{opacity:.3;transform:translateX(0) scale(.47368)}30%{opacity:.37;transform:translateX(calc(var(--uib-size)*-.076)) scale(.526312)}35%{opacity:.44;transform:translateX(calc(var(--uib-size)*-.129)) scale(.578944)}40%{opacity:.51;transform:translateX(calc(var(--uib-size)*-.182)) scale(.631576)}45%{opacity:.58;transform:translateX(calc(var(--uib-size)*-.235)) scale(.684208)}50%{opacity:.65;transform:translateX(calc(var(--uib-size)*-.25)) scale(.73684)}55%{opacity:.72;transform:translateX(calc(var(--uib-size)*-.235)) scale(.789472)}60%{opacity:.79;transform:translateX(calc(var(--uib-size)*-.182)) scale(.842104)}65%{opacity:.86;transform:translateX(calc(var(--uib-size)*-.129)) scale(.894736)}70%{opacity:.93;transform:translateX(calc(var(--uib-size)*-.076)) scale(.947368)}75%{opacity:1;transform:translateX(0) scale(1)}80%{opacity:.93;transform:translateX(calc(var(--uib-size)*.076)) scale(.947368)}85%{opacity:.86;transform:translateX(calc(var(--uib-size)*.129)) scale(.894736)}90%{opacity:.79;transform:translateX(calc(var(--uib-size)*.182)) scale(.842104)}95%{opacity:.72;transform:translateX(calc(var(--uib-size)*.235)) scale(.789472)}to{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}}';class t extends a{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:1.5}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const a=this.shadow.querySelector("style");a&&(a.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var s={register:(a="l-chaotic-orbit")=>{customElements.get(a)||customElements.define(a,class extends t{})},element:t};export{s as default};
 //# sourceMappingURL=chaoticOrbit.js.map

dist/elements/dotPulse.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{--uib-dot-size:calc(var(--uib-size)*0.24);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-dot-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:100%;justify-content:space-between;position:relative;width:100%}.container:after,.container:before,.dot{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:var(--uib-dot-size);transform:scale(0);transition:background-color .3s ease;width:var(--uib-dot-size)}.container:before{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.375) infinite}.dot{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.25) infinite both}.container:after{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.125) infinite}@keyframes pulse{0%,to{transform:scale(0)}50%{transform:scale(1)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:43,color:"black",speed:1.3}),this.template.innerHTML=`\n      <div class="container"><div class="dot" /></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-dot-pulse")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{--uib-dot-size:calc(var(--uib-size)*0.24);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-dot-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:100%;justify-content:space-between;position:relative;width:100%}.container:after,.container:before,.dot{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:var(--uib-dot-size);transform:scale(0);transition:background-color .3s ease;width:var(--uib-dot-size)}.container:before{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.375) infinite}.dot{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.25) infinite both}.container:after{animation:pulse var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.125) infinite}@keyframes pulse{0%,to{transform:scale(0)}50%{transform:scale(1)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:43,color:"black",speed:1.3}),this.template.innerHTML=`\n      <div class="container"><div class="dot" /></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-dot-pulse")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=dotPulse.js.map

dist/elements/dotSpinner.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container,.dot{align-items:center;display:flex;justify-content:flex-start}.dot{height:100%;left:0;position:absolute;top:0;width:100%}.dot:before{animation:pulse calc(var(--uib-speed)*1.111) ease-in-out infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:20%;opacity:.5;transform:scale(0);transition:background-color .3s ease;width:20%}.dot:nth-child(2){transform:rotate(45deg)}.dot:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.875)}.dot:nth-child(3){transform:rotate(90deg)}.dot:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.75)}.dot:nth-child(4){transform:rotate(135deg)}.dot:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.625)}.dot:nth-child(5){transform:rotate(180deg)}.dot:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.5)}.dot:nth-child(6){transform:rotate(225deg)}.dot:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.375)}.dot:nth-child(7){transform:rotate(270deg)}.dot:nth-child(7):before{animation-delay:calc(var(--uib-speed)*-.25)}.dot:nth-child(8){transform:rotate(315deg)}.dot:nth-child(8):before{animation-delay:calc(var(--uib-speed)*-.125)}@keyframes pulse{0%,to{opacity:.5;transform:scale(0)}50%{opacity:1;transform:scale(1)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:.9}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-dot-spinner")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container,.dot{align-items:center;display:flex;justify-content:flex-start}.dot{height:100%;left:0;position:absolute;top:0;width:100%}.dot:before{animation:pulse calc(var(--uib-speed)*1.111) ease-in-out infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:20%;opacity:.5;transform:scale(0);transition:background-color .3s ease;width:20%}.dot:nth-child(2){transform:rotate(45deg)}.dot:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.875)}.dot:nth-child(3){transform:rotate(90deg)}.dot:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.75)}.dot:nth-child(4){transform:rotate(135deg)}.dot:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.625)}.dot:nth-child(5){transform:rotate(180deg)}.dot:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.5)}.dot:nth-child(6){transform:rotate(225deg)}.dot:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.375)}.dot:nth-child(7){transform:rotate(270deg)}.dot:nth-child(7):before{animation-delay:calc(var(--uib-speed)*-.25)}.dot:nth-child(8){transform:rotate(315deg)}.dot:nth-child(8):before{animation-delay:calc(var(--uib-speed)*-.125)}@keyframes pulse{0%,to{opacity:.5;transform:scale(0)}50%{opacity:1;transform:scale(1)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:.9}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-dot-spinner")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=dotSpinner.js.map

dist/elements/dotStream.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.18);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-dot-size:calc(var(--uib-size)*0.18);align-items:center;display:flex;justify-content:space-between;position:relative;width:var(--uib-size)}.container,.dot{height:var(--uib-dot-size)}.dot{animation:stream var(--uib-speed) linear infinite both;background-color:var(--uib-color);border-radius:50%;display:block;left:calc(0px - var(--uib-dot-size)/2);position:absolute;top:calc(50% - var(--uib-dot-size)/2);transition:background-color .3s ease;width:var(--uib-dot-size)}.dot:nth-child(2){animation-delay:calc(var(--uib-speed)*-.2)}.dot:nth-child(3){animation-delay:calc(var(--uib-speed)*-.4)}.dot:nth-child(4){animation-delay:calc(var(--uib-speed)*-.6)}.dot:nth-child(5){animation-delay:calc(var(--uib-speed)*-.8)}@keyframes stream{0%,to{transform:translateX(0) scale(0)}50%{transform:translateX(calc(var(--uib-size)*.5)) scale(1)}99.999%{transform:translateX(calc(var(--uib-size))) scale(0)}}";class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:60,color:"black",speed:2.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-dot-stream")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.18);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-dot-size:calc(var(--uib-size)*0.18);align-items:center;display:flex;justify-content:space-between;position:relative;width:var(--uib-size)}.container,.dot{height:var(--uib-dot-size)}.dot{animation:stream var(--uib-speed) linear infinite both;background-color:var(--uib-color);border-radius:50%;display:block;left:calc(0px - var(--uib-dot-size)/2);position:absolute;top:calc(50% - var(--uib-dot-size)/2);transition:background-color .3s ease;width:var(--uib-dot-size)}.dot:nth-child(2){animation-delay:calc(var(--uib-speed)*-.2)}.dot:nth-child(3){animation-delay:calc(var(--uib-speed)*-.4)}.dot:nth-child(4){animation-delay:calc(var(--uib-speed)*-.6)}.dot:nth-child(5){animation-delay:calc(var(--uib-speed)*-.8)}@keyframes stream{0%,to{transform:translateX(0) scale(0)}50%{transform:translateX(calc(var(--uib-size)*.5)) scale(1)}99.999%{transform:translateX(calc(var(--uib-size))) scale(0)}}";class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:60,color:"black",speed:2.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-dot-stream")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=dotStream.js.map

dist/elements/dotWave.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.5);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:flex-end;display:flex;height:100%;justify-content:space-between;width:100%}.dot{background-color:var(--uib-color);border-radius:50%;flex-shrink:0;height:calc(var(--uib-size)*.17);transition:background-color .3s ease;width:calc(var(--uib-size)*.17)}.dot:first-child{animation:jump var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.45) infinite}.dot:nth-child(2){animation:jump var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.3) infinite}.dot:nth-child(3){animation:jump var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.15) infinite}.dot:nth-child(4){animation:jump var(--uib-speed) ease-in-out infinite}@keyframes jump{0%,to{transform:translateY(0)}50%{transform:translateY(-200%)}}";class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:47,color:"black",speed:1}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-dot-wave")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.5);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:flex-end;display:flex;height:100%;justify-content:space-between;width:100%}.dot{background-color:var(--uib-color);border-radius:50%;flex-shrink:0;height:calc(var(--uib-size)*.17);transition:background-color .3s ease;width:calc(var(--uib-size)*.17)}.dot:first-child{animation:jump var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.45) infinite}.dot:nth-child(2){animation:jump var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.3) infinite}.dot:nth-child(3){animation:jump var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.15) infinite}.dot:nth-child(4){animation:jump var(--uib-speed) ease-in-out infinite}@keyframes jump{0%,to{transform:translateY(0)}50%{transform:translateY(-200%)}}";class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:47,color:"black",speed:1}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-dot-wave")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=dotWave.js.map

dist/elements/grid.js

@@ -1,2 +0,2 @@
-import i from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.8);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-dot-size:calc(var(--uib-size)*0.1);height:calc(var(--uib-size)*.64);position:relative;width:calc(var(--uib-size)*.64)}.container,.dot{align-items:center;display:flex;justify-content:flex-start}.dot{--uib-d1:-0.48;--uib-d2:-0.4;--uib-d3:-0.32;--uib-d4:-0.24;--uib-d5:-0.16;--uib-d6:-0.08;--uib-d7:-0;animation:jump var(--uib-speed) ease-in-out infinite;backface-visibility:hidden;bottom:calc(var(--uib-bottom) + var(--uib-dot-size)/2);height:var(--uib-dot-size);opacity:var(--uib-scale);position:absolute;right:calc(var(--uib-right) + var(--uib-dot-size)/2);width:var(--uib-dot-size);will-change:transform}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";height:100%;transform:scale(var(--uib-scale));transition:background-color .3s ease;width:100%}.dot:first-child{--uib-bottom:24%;--uib-right:-35%;animation-delay:calc(var(--uib-speed)*var(--uib-d1))}.dot:nth-child(2){--uib-bottom:16%;--uib-right:-6%;animation-delay:calc(var(--uib-speed)*var(--uib-d2))}.dot:nth-child(3){--uib-bottom:8%;--uib-right:23%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.dot:nth-child(4){--uib-bottom:-1%;--uib-right:51%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.dot:nth-child(5){--uib-bottom:38%;--uib-right:-17.5%;animation-delay:calc(var(--uib-speed)*var(--uib-d2))}.dot:nth-child(6){--uib-bottom:30%;--uib-right:10%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.dot:nth-child(7){--uib-bottom:22%;--uib-right:39%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.dot:nth-child(8){--uib-bottom:14%;--uib-right:67%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.dot:nth-child(9){--uib-bottom:53%;--uib-right:-0.8%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.dot:nth-child(10){--uib-bottom:44.5%;--uib-right:27%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.dot:nth-child(11){--uib-bottom:36%;--uib-right:55.7%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.dot:nth-child(12){--uib-bottom:28.7%;--uib-right:84.3%;animation-delay:calc(var(--uib-speed)*var(--uib-d6))}.dot:nth-child(13){--uib-bottom:66.8%;--uib-right:15%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.dot:nth-child(14){--uib-bottom:58.8%;--uib-right:43%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.dot:nth-child(15){--uib-bottom:50%;--uib-right:72%;animation-delay:calc(var(--uib-speed)*var(--uib-d6))}.dot:nth-child(16){--uib-bottom:42%;--uib-right:100%;animation-delay:calc(var(--uib-speed)*var(--uib-d7))}.dot:nth-child(3){--uib-scale:0.98}.dot:nth-child(2),.dot:nth-child(8){--uib-scale:0.96}.dot:first-child,.dot:nth-child(7){--uib-scale:0.94}.dot:nth-child(12),.dot:nth-child(6){--uib-scale:0.92}.dot:nth-child(11),.dot:nth-child(5){--uib-scale:0.9}.dot:nth-child(10),.dot:nth-child(16){--uib-scale:0.88}.dot:nth-child(15),.dot:nth-child(9){--uib-scale:0.86}.dot:nth-child(14){--uib-scale:0.84}.dot:nth-child(13){--uib-scale:0.82}@keyframes jump{0%,to{transform:translateY(120%)}50%{transform:translateY(-120%)}}';class d extends i{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:60,color:"black",speed:1.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const i=this.shadow.querySelector("style");i&&(i.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var a={register:(i="l-grid")=>{customElements.get(i)||customElements.define(i,class extends d{})},element:d};export{a as default};
+import i from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.8);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-dot-size:calc(var(--uib-size)*0.1);height:calc(var(--uib-size)*.64);position:relative;width:calc(var(--uib-size)*.64)}.container,.dot{align-items:center;display:flex;justify-content:flex-start}.dot{--uib-d1:-0.48;--uib-d2:-0.4;--uib-d3:-0.32;--uib-d4:-0.24;--uib-d5:-0.16;--uib-d6:-0.08;--uib-d7:-0;animation:jump var(--uib-speed) ease-in-out infinite;backface-visibility:hidden;bottom:calc(var(--uib-bottom) + var(--uib-dot-size)/2);height:var(--uib-dot-size);opacity:var(--uib-scale);position:absolute;right:calc(var(--uib-right) + var(--uib-dot-size)/2);width:var(--uib-dot-size);will-change:transform}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";height:100%;transform:scale(var(--uib-scale));transition:background-color .3s ease;width:100%}.dot:first-child{--uib-bottom:24%;--uib-right:-35%;animation-delay:calc(var(--uib-speed)*var(--uib-d1))}.dot:nth-child(2){--uib-bottom:16%;--uib-right:-6%;animation-delay:calc(var(--uib-speed)*var(--uib-d2))}.dot:nth-child(3){--uib-bottom:8%;--uib-right:23%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.dot:nth-child(4){--uib-bottom:-1%;--uib-right:51%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.dot:nth-child(5){--uib-bottom:38%;--uib-right:-17.5%;animation-delay:calc(var(--uib-speed)*var(--uib-d2))}.dot:nth-child(6){--uib-bottom:30%;--uib-right:10%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.dot:nth-child(7){--uib-bottom:22%;--uib-right:39%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.dot:nth-child(8){--uib-bottom:14%;--uib-right:67%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.dot:nth-child(9){--uib-bottom:53%;--uib-right:-0.8%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.dot:nth-child(10){--uib-bottom:44.5%;--uib-right:27%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.dot:nth-child(11){--uib-bottom:36%;--uib-right:55.7%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.dot:nth-child(12){--uib-bottom:28.7%;--uib-right:84.3%;animation-delay:calc(var(--uib-speed)*var(--uib-d6))}.dot:nth-child(13){--uib-bottom:66.8%;--uib-right:15%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.dot:nth-child(14){--uib-bottom:58.8%;--uib-right:43%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.dot:nth-child(15){--uib-bottom:50%;--uib-right:72%;animation-delay:calc(var(--uib-speed)*var(--uib-d6))}.dot:nth-child(16){--uib-bottom:42%;--uib-right:100%;animation-delay:calc(var(--uib-speed)*var(--uib-d7))}.dot:nth-child(3){--uib-scale:0.98}.dot:nth-child(2),.dot:nth-child(8){--uib-scale:0.96}.dot:first-child,.dot:nth-child(7){--uib-scale:0.94}.dot:nth-child(12),.dot:nth-child(6){--uib-scale:0.92}.dot:nth-child(11),.dot:nth-child(5){--uib-scale:0.9}.dot:nth-child(10),.dot:nth-child(16){--uib-scale:0.88}.dot:nth-child(15),.dot:nth-child(9){--uib-scale:0.86}.dot:nth-child(14){--uib-scale:0.84}.dot:nth-child(13){--uib-scale:0.82}@keyframes jump{0%,to{transform:translateY(120%)}50%{transform:translateY(-120%)}}';class d extends i{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:60,color:"black",speed:1.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const i=this.shadow.querySelector("style");i&&(i.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var a={register:(i="l-grid")=>{customElements.get(i)||customElements.define(i,class extends d{})},element:d};export{a as default};
 //# sourceMappingURL=grid.js.map

dist/elements/hatch.js

@@ -1,2 +0,2 @@
-import t from"../lib/LdrsBaseElement.js";var e=':host{--uib-mult:calc(var(--uib-size)/var(--uib-stroke));--uib-stroke-px:calc(var(--uib-stroke)*1px);--uib-size-px:calc(var(--uib-size)*1px);align-items:flex-start;display:inline-flex;flex-shrink:0;height:var(--uib-size-px);justify-content:flex-start;position:relative;width:var(--uib-size-px)}:host([hidden]){display:none}.container{height:100%;position:relative;width:100%}.line{animation:center-line var(--uib-speed) ease infinite;left:calc(50% - var(--uib-stroke-px)/2);top:calc(50% - var(--uib-stroke-px)/2)}.container:after,.container:before,.line{background-color:var(--uib-color);height:var(--uib-stroke-px);position:absolute;transition:background-color .3s ease;width:var(--uib-stroke-px)}.container:after,.container:before{animation:explore var(--uib-speed) ease infinite;content:""}.container:after{animation-delay:calc(var(--uib-speed)*-.5)}@keyframes center-line{0%,25%,50%,75%,to{transform:scaleX(1) scaleY(1)}12.5%,62.5%{transform:scaleX(var(--uib-mult)) scaleY(1)}37.5%,87.5%{transform:scaleX(1) scaleY(var(--uib-mult))}}@keyframes explore{0%,to{left:0;top:0;transform:scaleX(1) scaleY(1) translate(0);transform-origin:top left}12.5%{left:0;top:0;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:top left}12.50001%{left:auto;right:0;top:0;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:top right}25%{left:auto;right:0;top:0;transform:scaleX(1) scaleY(1) translate(0);transform-origin:top right}37.5%{left:auto;right:0;top:0;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:top right}37.5001%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:bottom right}50%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(1) scaleY(1) translate(0);transform-origin:bottom right}62.5%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:bottom right}62.5001%{bottom:0;left:0;top:auto;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:bottom left}75%{bottom:0;left:0;top:auto;transform:scaleX(1) scaleY(1) translate(0);transform-origin:bottom left}87.5%{bottom:0;left:0;top:auto;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:bottom left}87.5001%{left:0;top:0;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:top left}}';class r extends t{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:28,color:"black",speed:3.5,stroke:4}),this.template.innerHTML=`\n      <div class="container"><div class="line"></div></div>\n      <style>\n        :host{\n          --uib-size: ${this.size};\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size};\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke};\n      }\n      ${e}\n    `)}}var s={register:(t="l-hatch")=>{customElements.get(t)||customElements.define(t,class extends r{})},element:r};export{s as default};
+import t from"../lib/LdrsBaseElement.js";var e=':host{--uib-mult:calc(var(--uib-size)/var(--uib-stroke));--uib-stroke-px:calc(var(--uib-stroke)*1px);--uib-size-px:calc(var(--uib-size)*1px);align-items:flex-start;display:inline-flex;flex-shrink:0;height:var(--uib-size-px);justify-content:flex-start;position:relative;width:var(--uib-size-px)}:host([hidden]){display:none}.container{height:100%;position:relative;width:100%}.line{animation:center-line var(--uib-speed) ease infinite;left:calc(50% - var(--uib-stroke-px)/2);top:calc(50% - var(--uib-stroke-px)/2)}.container:after,.container:before,.line{background-color:var(--uib-color);height:var(--uib-stroke-px);position:absolute;transition:background-color .3s ease;width:var(--uib-stroke-px)}.container:after,.container:before{animation:explore var(--uib-speed) ease infinite;content:""}.container:after{animation-delay:calc(var(--uib-speed)*-.5)}@keyframes center-line{0%,25%,50%,75%,to{transform:scaleX(1) scaleY(1)}12.5%,62.5%{transform:scaleX(var(--uib-mult)) scaleY(1)}37.5%,87.5%{transform:scaleX(1) scaleY(var(--uib-mult))}}@keyframes explore{0%,to{left:0;top:0;transform:scaleX(1) scaleY(1) translate(0);transform-origin:top left}12.5%{left:0;top:0;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:top left}12.50001%{left:auto;right:0;top:0;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:top right}25%{left:auto;right:0;top:0;transform:scaleX(1) scaleY(1) translate(0);transform-origin:top right}37.5%{left:auto;right:0;top:0;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:top right}37.5001%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:bottom right}50%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(1) scaleY(1) translate(0);transform-origin:bottom right}62.5%{bottom:0;left:auto;right:0;top:auto;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:bottom right}62.5001%{bottom:0;left:0;top:auto;transform:scaleX(var(--uib-mult)) scaleY(1) translate(0);transform-origin:bottom left}75%{bottom:0;left:0;top:auto;transform:scaleX(1) scaleY(1) translate(0);transform-origin:bottom left}87.5%{bottom:0;left:0;top:auto;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:bottom left}87.5001%{left:0;top:0;transform:scaleX(1) scaleY(var(--uib-mult)) translate(0);transform-origin:top left}}';class r extends t{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:28,color:"black",speed:3.5,stroke:4}),this.template.innerHTML=`\n      <div class="container"><div class="line"></div></div>\n      <style>\n        :host{\n          --uib-size: ${this.size};\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size};\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke};\n      }\n      ${e}\n    `)}}var s={register:(t="l-hatch")=>{customElements.get(t)||customElements.define(t,class extends r{})},element:r};export{s as default};
 //# sourceMappingURL=hatch.js.map

dist/elements/helix.js

@@ -1,2 +0,2 @@
-import a from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.slice{height:calc(var(--uib-size)/6);position:relative;width:100%}.slice:after,.slice:before{--uib-a:calc(var(--uib-speed)/-2);--uib-b:calc(var(--uib-speed)/-6);animation:orbit var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:100%;left:calc(50% - var(--uib-size)/12);position:absolute;top:0;transition:background-color .3s ease;width:16.6666666667%}.slice:first-child:after{animation-delay:var(--uib-a)}.slice:nth-child(2):before{animation-delay:var(--uib-b)}.slice:nth-child(2):after{animation-delay:calc(var(--uib-a) + var(--uib-b))}.slice:nth-child(3):before{animation-delay:calc(var(--uib-b)*2)}.slice:nth-child(3):after{animation-delay:calc(var(--uib-a) + var(--uib-b)*2)}.slice:nth-child(4):before{animation-delay:calc(var(--uib-b)*3)}.slice:nth-child(4):after{animation-delay:calc(var(--uib-a) + var(--uib-b)*3)}.slice:nth-child(5):before{animation-delay:calc(var(--uib-b)*4)}.slice:nth-child(5):after{animation-delay:calc(var(--uib-a) + var(--uib-b)*4)}.slice:nth-child(6):before{animation-delay:calc(var(--uib-b)*5)}.slice:nth-child(6):after{animation-delay:calc(var(--uib-a) + var(--uib-b)*5)}@keyframes orbit{0%{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}5%{opacity:.58;transform:translateX(calc(var(--uib-size)*.235)) scale(.684208)}10%{opacity:.51;transform:translateX(calc(var(--uib-size)*.182)) scale(.631576)}15%{opacity:.44;transform:translateX(calc(var(--uib-size)*.129)) scale(.578944)}20%{opacity:.37;transform:translateX(calc(var(--uib-size)*.076)) scale(.526312)}25%{opacity:.3;transform:translateX(0) scale(.47368)}30%{opacity:.37;transform:translateX(calc(var(--uib-size)*-.076)) scale(.526312)}35%{opacity:.44;transform:translateX(calc(var(--uib-size)*-.129)) scale(.578944)}40%{opacity:.51;transform:translateX(calc(var(--uib-size)*-.182)) scale(.631576)}45%{opacity:.58;transform:translateX(calc(var(--uib-size)*-.235)) scale(.684208)}50%{opacity:.65;transform:translateX(calc(var(--uib-size)*-.25)) scale(.73684)}55%{opacity:.72;transform:translateX(calc(var(--uib-size)*-.235)) scale(.789472)}60%{opacity:.79;transform:translateX(calc(var(--uib-size)*-.182)) scale(.842104)}65%{opacity:.86;transform:translateX(calc(var(--uib-size)*-.129)) scale(.894736)}70%{opacity:.93;transform:translateX(calc(var(--uib-size)*-.076)) scale(.947368)}75%{opacity:1;transform:translateX(0) scale(1)}80%{opacity:.93;transform:translateX(calc(var(--uib-size)*.076)) scale(.947368)}85%{opacity:.86;transform:translateX(calc(var(--uib-size)*.129)) scale(.894736)}90%{opacity:.79;transform:translateX(calc(var(--uib-size)*.182)) scale(.842104)}95%{opacity:.72;transform:translateX(calc(var(--uib-size)*.235)) scale(.789472)}to{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}}';class i extends a{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:2.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="slice"></div>\n        <div class="slice"></div>\n        <div class="slice"></div>\n        <div class="slice"></div>\n        <div class="slice"></div>\n        <div class="slice"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const a=this.shadow.querySelector(".container"),i=this.shadow.querySelector("style");a&&(a.className="container",i.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var t={register:(a="l-helix")=>{customElements.get(a)||customElements.define(a,class extends i{})},element:i};export{t as default};
+import a from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.slice{height:calc(var(--uib-size)/6);position:relative;width:100%}.slice:after,.slice:before{--uib-a:calc(var(--uib-speed)/-2);--uib-b:calc(var(--uib-speed)/-6);animation:orbit var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:100%;left:calc(50% - var(--uib-size)/12);position:absolute;top:0;transition:background-color .3s ease;width:16.6666666667%}.slice:first-child:after{animation-delay:var(--uib-a)}.slice:nth-child(2):before{animation-delay:var(--uib-b)}.slice:nth-child(2):after{animation-delay:calc(var(--uib-a) + var(--uib-b))}.slice:nth-child(3):before{animation-delay:calc(var(--uib-b)*2)}.slice:nth-child(3):after{animation-delay:calc(var(--uib-a) + var(--uib-b)*2)}.slice:nth-child(4):before{animation-delay:calc(var(--uib-b)*3)}.slice:nth-child(4):after{animation-delay:calc(var(--uib-a) + var(--uib-b)*3)}.slice:nth-child(5):before{animation-delay:calc(var(--uib-b)*4)}.slice:nth-child(5):after{animation-delay:calc(var(--uib-a) + var(--uib-b)*4)}.slice:nth-child(6):before{animation-delay:calc(var(--uib-b)*5)}.slice:nth-child(6):after{animation-delay:calc(var(--uib-a) + var(--uib-b)*5)}@keyframes orbit{0%{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}5%{opacity:.58;transform:translateX(calc(var(--uib-size)*.235)) scale(.684208)}10%{opacity:.51;transform:translateX(calc(var(--uib-size)*.182)) scale(.631576)}15%{opacity:.44;transform:translateX(calc(var(--uib-size)*.129)) scale(.578944)}20%{opacity:.37;transform:translateX(calc(var(--uib-size)*.076)) scale(.526312)}25%{opacity:.3;transform:translateX(0) scale(.47368)}30%{opacity:.37;transform:translateX(calc(var(--uib-size)*-.076)) scale(.526312)}35%{opacity:.44;transform:translateX(calc(var(--uib-size)*-.129)) scale(.578944)}40%{opacity:.51;transform:translateX(calc(var(--uib-size)*-.182)) scale(.631576)}45%{opacity:.58;transform:translateX(calc(var(--uib-size)*-.235)) scale(.684208)}50%{opacity:.65;transform:translateX(calc(var(--uib-size)*-.25)) scale(.73684)}55%{opacity:.72;transform:translateX(calc(var(--uib-size)*-.235)) scale(.789472)}60%{opacity:.79;transform:translateX(calc(var(--uib-size)*-.182)) scale(.842104)}65%{opacity:.86;transform:translateX(calc(var(--uib-size)*-.129)) scale(.894736)}70%{opacity:.93;transform:translateX(calc(var(--uib-size)*-.076)) scale(.947368)}75%{opacity:1;transform:translateX(0) scale(1)}80%{opacity:.93;transform:translateX(calc(var(--uib-size)*.076)) scale(.947368)}85%{opacity:.86;transform:translateX(calc(var(--uib-size)*.129)) scale(.894736)}90%{opacity:.79;transform:translateX(calc(var(--uib-size)*.182)) scale(.842104)}95%{opacity:.72;transform:translateX(calc(var(--uib-size)*.235)) scale(.789472)}to{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}}';class i extends a{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:2.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="slice"></div>\n        <div class="slice"></div>\n        <div class="slice"></div>\n        <div class="slice"></div>\n        <div class="slice"></div>\n        <div class="slice"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const a=this.shadow.querySelector(".container"),i=this.shadow.querySelector("style");a&&(a.className="container",i.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var t={register:(a="l-helix")=>{customElements.get(a)||customElements.define(a,class extends i{})},element:i};export{t as default};
 //# sourceMappingURL=helix.js.map

dist/elements/hourglass.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate calc(var(--uib-speed)*2) ease-in-out infinite;display:flex;flex-direction:column;height:100%;position:relative;transform:rotate(45deg);width:100%}.half{--uib-half-size:calc(var(--uib-size)*0.435);align-items:center;display:flex;height:var(--uib-half-size);isolation:isolate;justify-content:center;overflow:hidden;position:absolute;width:var(--uib-half-size)}.half:first-child{left:8.25%;top:8.25%}.half:first-child,.half:last-child{border-radius:50% 50% calc(var(--uib-size)/15)}.half:last-child{align-self:flex-end;bottom:8.25%;right:8.25%;transform:rotate(180deg)}.half:last-child:after{animation-delay:calc(var(--uib-speed)*-1)}.half:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.half:after,.half:before{background-color:var(--uib-color);content:"";height:100%;transition:background-color .3s ease;width:100%}.half:after{animation:flow calc(var(--uib-speed)*2) linear infinite both;border-radius:0 0 calc(var(--uib-size)/20) 0;display:block;position:relative;transform:rotate(45deg) translate(-3%,50%) scaleX(1.2);transform-origin:bottom right;z-index:1}@keyframes flow{0%{transform:rotate(45deg) translate(-3%,50%) scaleX(1.2)}30%{transform:rotate(45deg) translate(115%,50%) scaleX(1.2)}30.001%,50%{transform:rotate(0deg) translate(-85%,-85%) scaleX(1)}80%,to{transform:rotate(0deg) translate(0) scaleX(1)}}@keyframes rotate{0%,30%{transform:rotate(45deg)}50%,80%{transform:rotate(225deg)}to{transform:rotate(405deg)}}';class i extends e{_attributes=["size","color","speed","bg-opacity"];size;color;speed;"bg-opacity";static get observedAttributes(){return["size","color","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.75,"bg-opacity":.1}),this.template.innerHTML=`\n      <div class="container">\n        <div class="half"></div>\n        <div class="half"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${t}\n    `)}}var a={register:(e="l-hourglass")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{a as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate calc(var(--uib-speed)*2) ease-in-out infinite;display:flex;flex-direction:column;height:100%;position:relative;transform:rotate(45deg);width:100%}.half{--uib-half-size:calc(var(--uib-size)*0.435);align-items:center;display:flex;height:var(--uib-half-size);isolation:isolate;justify-content:center;overflow:hidden;position:absolute;width:var(--uib-half-size)}.half:first-child{left:8.25%;top:8.25%}.half:first-child,.half:last-child{border-radius:50% 50% calc(var(--uib-size)/15)}.half:last-child{align-self:flex-end;bottom:8.25%;right:8.25%;transform:rotate(180deg)}.half:last-child:after{animation-delay:calc(var(--uib-speed)*-1)}.half:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.half:after,.half:before{background-color:var(--uib-color);content:"";height:100%;transition:background-color .3s ease;width:100%}.half:after{animation:flow calc(var(--uib-speed)*2) linear infinite both;border-radius:0 0 calc(var(--uib-size)/20) 0;display:block;position:relative;transform:rotate(45deg) translate(-3%,50%) scaleX(1.2);transform-origin:bottom right;z-index:1}@keyframes flow{0%{transform:rotate(45deg) translate(-3%,50%) scaleX(1.2)}30%{transform:rotate(45deg) translate(115%,50%) scaleX(1.2)}30.001%,50%{transform:rotate(0deg) translate(-85%,-85%) scaleX(1)}80%,to{transform:rotate(0deg) translate(0) scaleX(1)}}@keyframes rotate{0%,30%{transform:rotate(45deg)}50%,80%{transform:rotate(225deg)}to{transform:rotate(405deg)}}';class i extends e{_attributes=["size","color","speed","bg-opacity"];size;color;speed;"bg-opacity";static get observedAttributes(){return["size","color","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.75,"bg-opacity":.1}),this.template.innerHTML=`\n      <div class="container">\n        <div class="half"></div>\n        <div class="half"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${t}\n    `)}}var a={register:(e="l-hourglass")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{a as default};
 //# sourceMappingURL=hourglass.js.map

dist/elements/infinity.js

@@ -1,2 +0,2 @@
-import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.42);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:calc(var(--uib-size)*.42);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15,85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;transition:stroke .5s ease;will-change:stroke-dasharray,stroke-dashoffset}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:100}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:55,color:"black",speed:1.3,stroke:4,"bg-opacity":.1});const e=parseInt(this.size),i=t(e/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${e*(2.1/5)}"\n        height="${e*(2.1/5)}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${i}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${i}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path"),n=parseInt(this.size);e&&(i.setAttribute("height",String(n*(2.1/5))),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${n*(2.1/5)}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(n/50,this.d))})),e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-infinity")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
+import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.42);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:calc(var(--uib-size)*.42);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15,85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;transition:stroke .5s ease;will-change:stroke-dasharray,stroke-dashoffset}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:100}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:55,color:"black",speed:1.3,stroke:4,"bg-opacity":.1});const e=parseInt(this.size),i=t(e/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${e*(2.1/5)}"\n        height="${e*(2.1/5)}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${i}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${i}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path"),n=parseInt(this.size);e&&(i.setAttribute("height",String(n*(2.1/5))),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${n*(2.1/5)}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(n/50,this.d))})),e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-infinity")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
 //# sourceMappingURL=infinity.js.map

dist/elements/jelly.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate calc(var(--uib-speed)*2) linear infinite;filter:url(#uib-jelly-ooze);height:calc(var(--uib-size)/2);position:relative;width:var(--uib-size);will-change:transform}.container:after,.container:before{background-color:var(--uib-color);border-radius:100%;content:"";height:100%;left:25%;position:absolute;top:0;transition:background-color .3s ease;width:50%;will-change:transform}.container:before{animation:shift-left var(--uib-speed) ease infinite}.container:after{animation:shift-right var(--uib-speed) ease infinite}.svg{height:0;position:absolute;width:0}@keyframes rotate{0%,49.999%,to{transform:none}50%,99.999%{transform:rotate(90deg)}}@keyframes shift-left{0%,to{transform:translateX(0)}50%{transform:scale(.65) translateX(-75%)}}@keyframes shift-right{0%,to{transform:translateX(0)}50%{transform:scale(.65) translateX(75%)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:.9}),this.template.innerHTML=`\n      <div\n        class="container"\n      ></div>\n      <svg width="0" height="0" class="svg">\n        <defs>\n          <filter id="uib-jelly-ooze">\n            <feGaussianBlur\n              in="SourceGraphic"\n              stdDeviation=${parseInt(this.size)/8}\n              result="blur"\n            />\n            <feColorMatrix\n              in="blur"\n              mode="matrix"\n              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"\n              result="ooze"\n            />\n            <feBlend in="SourceGraphic" in2="ooze" />\n          </filter>\n        </defs>\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-jelly")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate calc(var(--uib-speed)*2) linear infinite;filter:url(#uib-jelly-ooze);height:calc(var(--uib-size)/2);position:relative;width:var(--uib-size);will-change:transform}.container:after,.container:before{background-color:var(--uib-color);border-radius:100%;content:"";height:100%;left:25%;position:absolute;top:0;transition:background-color .3s ease;width:50%;will-change:transform}.container:before{animation:shift-left var(--uib-speed) ease infinite}.container:after{animation:shift-right var(--uib-speed) ease infinite}.svg{height:0;position:absolute;width:0}@keyframes rotate{0%,49.999%,to{transform:none}50%,99.999%{transform:rotate(90deg)}}@keyframes shift-left{0%,to{transform:translateX(0)}50%{transform:scale(.65) translateX(-75%)}}@keyframes shift-right{0%,to{transform:translateX(0)}50%{transform:scale(.65) translateX(75%)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:.9}),this.template.innerHTML=`\n      <div\n        class="container"\n      ></div>\n      <svg width="0" height="0" class="svg">\n        <defs>\n          <filter id="uib-jelly-ooze">\n            <feGaussianBlur\n              in="SourceGraphic"\n              stdDeviation=${parseInt(this.size)/8}\n              result="blur"\n            />\n            <feColorMatrix\n              in="blur"\n              mode="matrix"\n              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"\n              result="ooze"\n            />\n            <feBlend in="SourceGraphic" in2="ooze" />\n          </filter>\n        </defs>\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-jelly")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=jelly.js.map

dist/elements/jellyTriangle.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{filter:url(#uib-jelly-triangle-ooze);height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before,.dot{background-color:var(--uib-color);border-radius:100%;content:"";height:33%;position:absolute;transition:background-color .3s ease;width:33%;will-change:transform}.dot{animation:grow var(--uib-speed) ease infinite;left:30%;top:6%}.container:before{animation:grow var(--uib-speed) ease calc(var(--uib-speed)*-.666) infinite;bottom:6%;right:0}.container:after{animation:grow var(--uib-speed) ease calc(var(--uib-speed)*-.333) infinite;bottom:6%;left:0}.traveler{animation:triangulate var(--uib-speed) ease infinite;background-color:var(--uib-color);border-radius:100%;height:33%;left:30%;top:6%;transition:background-color .3s ease;width:33%}.svg,.traveler{position:absolute}.svg{height:0;width:0}@keyframes triangulate{0%,to{transform:none}33.333%{transform:translate(120%,175%)}66.666%{transform:translate(-95%,175%)}}@keyframes grow{0%,85%,to{transform:scale(1.5)}50%,60%{transform:scale(0)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:30,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div\n        class="container"\n      >\n      <div class="dot"></div>\n      <div class="traveler"></div>\n      </div>\n      <svg width="0" height="0" class="svg">\n        <defs>\n          <filter id="uib-jelly-triangle-ooze">\n            <feGaussianBlur\n              in="SourceGraphic"\n              stdDeviation=${parseInt(this.size)/9}\n              result="blur"\n            />\n            <feColorMatrix\n              in="blur"\n              mode="matrix"\n              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"\n              result="ooze"\n            />\n            <feBlend in="SourceGraphic" in2="ooze" />\n          </filter>\n        </defs>\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-jelly-triangle")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{filter:url(#uib-jelly-triangle-ooze);height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before,.dot{background-color:var(--uib-color);border-radius:100%;content:"";height:33%;position:absolute;transition:background-color .3s ease;width:33%;will-change:transform}.dot{animation:grow var(--uib-speed) ease infinite;left:30%;top:6%}.container:before{animation:grow var(--uib-speed) ease calc(var(--uib-speed)*-.666) infinite;bottom:6%;right:0}.container:after{animation:grow var(--uib-speed) ease calc(var(--uib-speed)*-.333) infinite;bottom:6%;left:0}.traveler{animation:triangulate var(--uib-speed) ease infinite;background-color:var(--uib-color);border-radius:100%;height:33%;left:30%;top:6%;transition:background-color .3s ease;width:33%}.svg,.traveler{position:absolute}.svg{height:0;width:0}@keyframes triangulate{0%,to{transform:none}33.333%{transform:translate(120%,175%)}66.666%{transform:translate(-95%,175%)}}@keyframes grow{0%,85%,to{transform:scale(1.5)}50%,60%{transform:scale(0)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:30,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div\n        class="container"\n      >\n      <div class="dot"></div>\n      <div class="traveler"></div>\n      </div>\n      <svg width="0" height="0" class="svg">\n        <defs>\n          <filter id="uib-jelly-triangle-ooze">\n            <feGaussianBlur\n              in="SourceGraphic"\n              stdDeviation=${parseInt(this.size)/9}\n              result="blur"\n            />\n            <feColorMatrix\n              in="blur"\n              mode="matrix"\n              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"\n              result="ooze"\n            />\n            <feBlend in="SourceGraphic" in2="ooze" />\n          </filter>\n        </defs>\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-jelly-triangle")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=jellyTriangle.js.map

dist/elements/leapfrog.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.62);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);justify-content:space-between;position:relative;top:15%;width:var(--uib-size)}.container,.dot{align-items:center;display:flex;left:0}.dot{height:100%;justify-content:flex-start;position:absolute;top:0;width:100%}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:calc(var(--uib-size)*.22);transition:background-color .3s ease;width:calc(var(--uib-size)*.22)}.dot:first-child{animation:leapFrog var(--uib-speed) ease infinite}.dot:nth-child(2){animation:leapFrog var(--uib-speed) ease calc(var(--uib-speed)/-1.5) infinite;transform:translateX(calc(var(--uib-size)*.4))}.dot:nth-child(3){animation:leapFrog var(--uib-speed) ease calc(var(--uib-speed)/-3) infinite;transform:translateX(calc(var(--uib-size)*.8)) rotate(0deg)}@keyframes leapFrog{0%{transform:translateX(0) rotate(0deg)}33.333%{transform:translateX(0) rotate(180deg)}66.666%{transform:translateX(calc(var(--uib-size)*-.38)) rotate(180deg)}99.999%{transform:translateX(calc(var(--uib-size)*-.78)) rotate(180deg)}to{transform:translateX(0) rotate(0deg)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:2.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-leapfrog")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.62);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);justify-content:space-between;position:relative;top:15%;width:var(--uib-size)}.container,.dot{align-items:center;display:flex;left:0}.dot{height:100%;justify-content:flex-start;position:absolute;top:0;width:100%}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:calc(var(--uib-size)*.22);transition:background-color .3s ease;width:calc(var(--uib-size)*.22)}.dot:first-child{animation:leapFrog var(--uib-speed) ease infinite}.dot:nth-child(2){animation:leapFrog var(--uib-speed) ease calc(var(--uib-speed)/-1.5) infinite;transform:translateX(calc(var(--uib-size)*.4))}.dot:nth-child(3){animation:leapFrog var(--uib-speed) ease calc(var(--uib-speed)/-3) infinite;transform:translateX(calc(var(--uib-size)*.8)) rotate(0deg)}@keyframes leapFrog{0%{transform:translateX(0) rotate(0deg)}33.333%{transform:translateX(0) rotate(180deg)}66.666%{transform:translateX(calc(var(--uib-size)*-.38)) rotate(180deg)}99.999%{transform:translateX(calc(var(--uib-size)*-.78)) rotate(180deg)}to{transform:translateX(0) rotate(0deg)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:2.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-leapfrog")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=leapfrog.js.map

dist/elements/lineSpinner.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var i=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:var(--uib-size);justify-content:flex-start;position:relative;width:var(--uib-size)}.line{align-items:flex-start;display:flex;height:100%;left:calc(50% - var(--uib-stroke)/2);position:absolute;top:0;width:var(--uib-stroke)}.line:before{animation:pulse calc(var(--uib-speed)) ease-in-out infinite;background-color:var(--uib-color);border-radius:calc(var(--uib-stroke)/2);content:"";height:22%;transform-origin:center bottom;transition:background-color .3s ease;width:100%}.line:first-child{transform:rotate(-30deg)}.line:first-child:before{animation-delay:calc(var(--uib-speed)/-12*1)}.line:nth-child(2){transform:rotate(-60deg)}.line:nth-child(2):before{animation-delay:calc(var(--uib-speed)/-12*2)}.line:nth-child(3){transform:rotate(-90deg)}.line:nth-child(3):before{animation-delay:calc(var(--uib-speed)/-12*3)}.line:nth-child(4){transform:rotate(-120deg)}.line:nth-child(4):before{animation-delay:calc(var(--uib-speed)/-12*4)}.line:nth-child(5){transform:rotate(-150deg)}.line:nth-child(5):before{animation-delay:calc(var(--uib-speed)/-12*5)}.line:nth-child(6){transform:rotate(-180deg)}.line:nth-child(6):before{animation-delay:calc(var(--uib-speed)/-12*6)}.line:nth-child(7){transform:rotate(-210deg)}.line:nth-child(7):before{animation-delay:calc(var(--uib-speed)/-12*7)}.line:nth-child(8){transform:rotate(-240deg)}.line:nth-child(8):before{animation-delay:calc(var(--uib-speed)/-12*8)}.line:nth-child(9){transform:rotate(-270deg)}.line:nth-child(9):before{animation-delay:calc(var(--uib-speed)/-12*9)}.line:nth-child(10){transform:rotate(-300deg)}.line:nth-child(10):before{animation-delay:calc(var(--uib-speed)/-12*10)}.line:nth-child(11){transform:rotate(-330deg)}.line:nth-child(11):before{animation-delay:calc(var(--uib-speed)/-12*11)}@keyframes pulse{0%,80%,to{opacity:0;transform:scaleY(.75)}20%{opacity:1;transform:scaleY(1)}}';class t extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1,stroke:3}),this.template.innerHTML=`\n      <div class="container">\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      <div class="line"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var n={register:(e="l-line-spinner")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{n as default};
+import e from"../lib/LdrsBaseElement.js";var i=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:var(--uib-size);justify-content:flex-start;position:relative;width:var(--uib-size)}.line{align-items:flex-start;display:flex;height:100%;left:calc(50% - var(--uib-stroke)/2);position:absolute;top:0;width:var(--uib-stroke)}.line:before{animation:pulse calc(var(--uib-speed)) ease-in-out infinite;background-color:var(--uib-color);border-radius:calc(var(--uib-stroke)/2);content:"";height:22%;transform-origin:center bottom;transition:background-color .3s ease;width:100%}.line:first-child{transform:rotate(-30deg)}.line:first-child:before{animation-delay:calc(var(--uib-speed)/-12*1)}.line:nth-child(2){transform:rotate(-60deg)}.line:nth-child(2):before{animation-delay:calc(var(--uib-speed)/-12*2)}.line:nth-child(3){transform:rotate(-90deg)}.line:nth-child(3):before{animation-delay:calc(var(--uib-speed)/-12*3)}.line:nth-child(4){transform:rotate(-120deg)}.line:nth-child(4):before{animation-delay:calc(var(--uib-speed)/-12*4)}.line:nth-child(5){transform:rotate(-150deg)}.line:nth-child(5):before{animation-delay:calc(var(--uib-speed)/-12*5)}.line:nth-child(6){transform:rotate(-180deg)}.line:nth-child(6):before{animation-delay:calc(var(--uib-speed)/-12*6)}.line:nth-child(7){transform:rotate(-210deg)}.line:nth-child(7):before{animation-delay:calc(var(--uib-speed)/-12*7)}.line:nth-child(8){transform:rotate(-240deg)}.line:nth-child(8):before{animation-delay:calc(var(--uib-speed)/-12*8)}.line:nth-child(9){transform:rotate(-270deg)}.line:nth-child(9):before{animation-delay:calc(var(--uib-speed)/-12*9)}.line:nth-child(10){transform:rotate(-300deg)}.line:nth-child(10):before{animation-delay:calc(var(--uib-speed)/-12*10)}.line:nth-child(11){transform:rotate(-330deg)}.line:nth-child(11):before{animation-delay:calc(var(--uib-speed)/-12*11)}@keyframes pulse{0%,80%,to{opacity:0;transform:scaleY(.75)}20%{opacity:1;transform:scaleY(1)}}';class t extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1,stroke:3}),this.template.innerHTML=`\n      <div class="container">\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var n={register:(e="l-line-spinner")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{n as default};
 //# sourceMappingURL=lineSpinner.js.map

dist/elements/lineWobble.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-stroke);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;border-radius:calc(var(--uib-stroke)/2);display:flex;height:var(--uib-stroke);justify-content:center;overflow:hidden;position:relative;transform:translateZ(0);width:var(--uib-size)}.container:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.container:after,.container:before{background-color:var(--uib-color);content:"";height:100%;transition:background-color .3s ease;width:100%}.container:after{animation:wobble var(--uib-speed) ease-in-out infinite;border-radius:calc(var(--uib-stroke)/2);transform:translateX(-95%)}@keyframes wobble{0%,to{transform:translateX(-95%)}50%{transform:translateX(95%)}}';class s extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:80,color:"black",speed:1.75,stroke:5,"bg-opacity":.1}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${t}\n    `)}}var i={register:(e="l-line-wobble")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-stroke);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;border-radius:calc(var(--uib-stroke)/2);display:flex;height:var(--uib-stroke);justify-content:center;overflow:hidden;position:relative;transform:translateZ(0);width:var(--uib-size)}.container:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.container:after,.container:before{background-color:var(--uib-color);content:"";height:100%;transition:background-color .3s ease;width:100%}.container:after{animation:wobble var(--uib-speed) ease-in-out infinite;border-radius:calc(var(--uib-stroke)/2);transform:translateX(-95%)}@keyframes wobble{0%,to{transform:translateX(-95%)}50%{transform:translateX(95%)}}';class s extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:80,color:"black",speed:1.75,stroke:5,"bg-opacity":.1}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${t}\n    `)}}var i={register:(e="l-line-wobble")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=lineWobble.js.map

dist/elements/metronome.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.63);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;top:8%;width:var(--uib-size)}.container,.dot{align-items:center;display:flex;justify-content:flex-start}.dot{animation:swing var(--uib-speed) linear infinite;height:100%;left:0;position:absolute;top:13.5%;width:100%}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";height:25%;transition:background-color .3s ease;width:25%}.dot:first-child{animation-delay:calc(var(--uib-speed)*-.36)}.dot:nth-child(2){animation-delay:calc(var(--uib-speed)*-.27);opacity:.8}.dot:nth-child(2):before{transform:scale(.9)}.dot:nth-child(3){animation-delay:calc(var(--uib-speed)*-.18);opacity:.6}.dot:nth-child(3):before{transform:scale(.8)}.dot:nth-child(4){animation-delay:calc(var(--uib-speed)*-.09);opacity:.4}.dot:nth-child(4):before{transform:scale(.7)}@keyframes swing{0%{transform:rotate(0deg)}15%{transform:rotate(0deg)}50%{transform:rotate(180deg)}65%{transform:rotate(180deg)}to{transform:rotate(0deg)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.6}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-metronome")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.63);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;top:8%;width:var(--uib-size)}.container,.dot{align-items:center;display:flex;justify-content:flex-start}.dot{animation:swing var(--uib-speed) linear infinite;height:100%;left:0;position:absolute;top:13.5%;width:100%}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";height:25%;transition:background-color .3s ease;width:25%}.dot:first-child{animation-delay:calc(var(--uib-speed)*-.36)}.dot:nth-child(2){animation-delay:calc(var(--uib-speed)*-.27);opacity:.8}.dot:nth-child(2):before{transform:scale(.9)}.dot:nth-child(3){animation-delay:calc(var(--uib-speed)*-.18);opacity:.6}.dot:nth-child(3):before{transform:scale(.8)}.dot:nth-child(4){animation-delay:calc(var(--uib-speed)*-.09);opacity:.4}.dot:nth-child(4):before{transform:scale(.7)}@keyframes swing{0%{transform:rotate(0deg)}15%{transform:rotate(0deg)}50%{transform:rotate(180deg)}65%{transform:rotate(180deg)}to{transform:rotate(0deg)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.6}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-metronome")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=metronome.js.map

dist/elements/mirage.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.23);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-dot-size:calc(var(--uib-size)*0.23);align-items:center;display:flex;filter:url(#uib-jelly-ooze);justify-content:space-between;position:relative;width:var(--uib-size)}.container,.dot{height:var(--uib-dot-size)}.dot{animation:stream var(--uib-speed) linear infinite both;background-color:var(--uib-color);border-radius:50%;display:block;left:calc(0px - var(--uib-dot-size)/2);position:absolute;top:calc(50% - var(--uib-dot-size)/2);transition:background-color .3s ease;width:var(--uib-dot-size)}.dot:nth-child(2){animation-delay:calc(var(--uib-speed)*-.2)}.dot:nth-child(3){animation-delay:calc(var(--uib-speed)*-.4)}.dot:nth-child(4){animation-delay:calc(var(--uib-speed)*-.6)}.dot:nth-child(5){animation-delay:calc(var(--uib-speed)*-.8)}@keyframes stream{0%,to{transform:translateX(0) scale(0)}50%{transform:translateX(calc(var(--uib-size)*.5)) scale(1)}99.999%{transform:translateX(calc(var(--uib-size))) scale(0)}}";class t extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:60,color:"black",speed:2.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <svg width="0" height="0" class="svg">\n      <defs>\n        <filter id="uib-jelly-ooze">\n          <feGaussianBlur\n            in="SourceGraphic"\n            stdDeviation=${parseInt(this.size)/20}\n            result="blur"\n          />\n          <feColorMatrix\n            in="blur"\n            mode="matrix"\n            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"\n            result="ooze"\n          />\n          <feBlend in="SourceGraphic" in2="ooze" />\n        </filter>\n      </defs>\n    </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${i}\n    `)}}var s={register:(e="l-mirage")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var i=":host{--uib-dot-size:calc(var(--uib-size)*0.23);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-dot-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;filter:url(#uib-jelly-ooze);justify-content:space-between;position:relative;width:var(--uib-size)}.container,.dot{height:var(--uib-dot-size)}.dot{animation:stream var(--uib-speed) linear infinite both;background-color:var(--uib-color);border-radius:50%;display:block;left:calc(0px - var(--uib-dot-size)/2);position:absolute;top:calc(50% - var(--uib-dot-size)/2);transition:background-color .3s ease;width:var(--uib-dot-size)}.dot:nth-child(2){animation-delay:calc(var(--uib-speed)*-.2)}.dot:nth-child(3){animation-delay:calc(var(--uib-speed)*-.4)}.dot:nth-child(4){animation-delay:calc(var(--uib-speed)*-.6)}.dot:nth-child(5){animation-delay:calc(var(--uib-speed)*-.8)}@keyframes stream{0%,to{transform:translateX(0) scale(0)}50%{transform:translateX(calc(var(--uib-size)*.5)) scale(1)}99.999%{transform:translateX(calc(var(--uib-size))) scale(0)}}";class t extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:60,color:"black",speed:2.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <svg width="0" height="0" class="svg">\n        <defs>\n          <filter id="uib-jelly-ooze">\n            <feGaussianBlur\n              in="SourceGraphic"\n              stdDeviation=${parseInt(this.size)/20}\n              result="blur"\n            />\n            <feColorMatrix\n              in="blur"\n              mode="matrix"\n              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"\n              result="ooze"\n            />\n            <feBlend in="SourceGraphic" in2="ooze" />\n          </filter>\n        </defs>\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${i}\n    `)}}var s={register:(e="l-mirage")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{s as default};
 //# sourceMappingURL=mirage.js.map

dist/elements/miyagi.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:var(--uib-size);justify-content:center;position:relative;width:var(--uib-size)}.line{animation:rotate var(--uib-speed) ease-in-out infinite alternate;background-color:var(--uib-color);border-radius:calc(var(--uib-stroke)/2);height:var(--uib-stroke);left:0;position:absolute;top:calc(50% - var(--uib-stroke)/2);transition:background-color .3s ease;width:100%}.line:first-child,.line:nth-child(2){animation-delay:calc(var(--uib-speed)*-.375)}.line:nth-child(2){opacity:.8}.line:nth-child(3){animation-delay:calc(var(--uib-speed)*-.3);opacity:.6}.line:nth-child(4){animation-delay:calc(var(--uib-speed)*-.225);opacity:.4}.line:nth-child(5){animation-delay:calc(var(--uib-speed)*-.15);opacity:.2}.line:nth-child(6){animation-delay:calc(var(--uib-speed)*-.075);opacity:.1}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(180deg)}}";class t extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:.9,stroke:3.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var s={register:(e="l-miyagi")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:var(--uib-size);justify-content:center;position:relative;width:var(--uib-size)}.line{animation:rotate var(--uib-speed) ease-in-out infinite alternate;background-color:var(--uib-color);border-radius:calc(var(--uib-stroke)/2);height:var(--uib-stroke);left:0;position:absolute;top:calc(50% - var(--uib-stroke)/2);transition:background-color .3s ease;width:100%}.line:first-child,.line:nth-child(2){animation-delay:calc(var(--uib-speed)*-.375)}.line:nth-child(2){opacity:.8}.line:nth-child(3){animation-delay:calc(var(--uib-speed)*-.3);opacity:.6}.line:nth-child(4){animation-delay:calc(var(--uib-speed)*-.225);opacity:.4}.line:nth-child(5){animation-delay:calc(var(--uib-speed)*-.15);opacity:.2}.line:nth-child(6){animation-delay:calc(var(--uib-speed)*-.075);opacity:.1}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(180deg)}}";class t extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:.9,stroke:3.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var s={register:(e="l-miyagi")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{s as default};
 //# sourceMappingURL=miyagi.js.map

dist/elements/momentum.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;animation:rotate var(--uib-speed) linear infinite;display:flex;height:var(--uib-size);justify-content:center;position:relative;width:var(--uib-size)}.container:after,.container:before{background-color:var(--uib-color);border-radius:50%;content:"";height:25%;transition:background-color .3s ease;width:25%}.container:before{animation:wobble2 calc(var(--uib-speed)*1.25) ease-in-out infinite}.container:after{animation:wobble calc(var(--uib-speed)*1.25) ease-in-out infinite}.container:before{margin-right:10%}@keyframes wobble{0%,to{transform:translateX(0)}50%{transform:translateX(calc(var(--uib-size)*.2)) scale(1.1)}}@keyframes wobble2{0%,to{transform:translateX(0)}50%{transform:translateX(calc(var(--uib-size)*-.2)) scale(1.1)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.1}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-momentum")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;animation:rotate var(--uib-speed) linear infinite;display:flex;height:var(--uib-size);justify-content:center;position:relative;width:var(--uib-size)}.container:after,.container:before{background-color:var(--uib-color);border-radius:50%;content:"";height:25%;transition:background-color .3s ease;width:25%}.container:before{animation:wobble2 calc(var(--uib-speed)*1.25) ease-in-out infinite}.container:after{animation:wobble calc(var(--uib-speed)*1.25) ease-in-out infinite}.container:before{margin-right:10%}@keyframes wobble{0%,to{transform:translateX(0)}50%{transform:translateX(calc(var(--uib-size)*.2)) scale(1.1)}}@keyframes wobble2{0%,to{transform:translateX(0)}50%{transform:translateX(calc(var(--uib-size)*-.2)) scale(1.1)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.1}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-momentum")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=momentum.js.map

dist/elements/newtonsCradle.js

@@ -1,2 +0,2 @@
-import t from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.3);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:calc(var(--uib-size)*.51);justify-content:center;top:28%;width:51%}.container,.dot{align-items:center;display:flex;position:relative}.dot{flex-shrink:0;height:100%;transform-origin:center top;width:25%}.dot:after{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:25%;transition:background-color .3s ease;width:100%}.dot:first-child{animation:swing var(--uib-speed) linear infinite}.dot:last-child{animation:swing2 var(--uib-speed) linear infinite}@keyframes swing{0%{animation-timing-function:ease-out;transform:rotate(0deg)}25%{animation-timing-function:ease-in;transform:rotate(70deg)}50%{animation-timing-function:linear;transform:rotate(0deg)}}@keyframes swing2{0%{animation-timing-function:linear;transform:rotate(0deg)}50%{animation-timing-function:ease-out;transform:rotate(0deg)}75%{animation-timing-function:ease-in;transform:rotate(-70deg)}}';class i extends t{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:78,color:"black",speed:1.4}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var n={register:(t="l-newtons-cradle")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{n as default};
+import t from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.3);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:calc(var(--uib-size)*.51);justify-content:center;top:28%;width:51%}.container,.dot{align-items:center;display:flex;position:relative}.dot{flex-shrink:0;height:100%;transform-origin:center top;width:25%}.dot:after{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:25%;transition:background-color .3s ease;width:100%}.dot:first-child{animation:swing var(--uib-speed) linear infinite}.dot:last-child{animation:swing2 var(--uib-speed) linear infinite}@keyframes swing{0%{animation-timing-function:ease-out;transform:rotate(0deg)}25%{animation-timing-function:ease-in;transform:rotate(70deg)}50%{animation-timing-function:linear;transform:rotate(0deg)}}@keyframes swing2{0%{animation-timing-function:linear;transform:rotate(0deg)}50%{animation-timing-function:ease-out;transform:rotate(0deg)}75%{animation-timing-function:ease-in;transform:rotate(-70deg)}}';class i extends t{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:78,color:"black",speed:1.4}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var n={register:(t="l-newtons-cradle")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{n as default};
 //# sourceMappingURL=newtonsCradle.js.map

dist/elements/orbit.js

@@ -1,2 +0,2 @@
-import a from"../lib/LdrsBaseElement.js";var e=':host{--uib-dot-size:calc(var(--uib-size)*0.4);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-dot-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.container:after,.container:before{background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:var(--uib-dot-size);position:absolute;transition:background-color .3s ease;width:var(--uib-dot-size)}.container:before{animation:orbit var(--uib-speed) linear infinite}.container:after{animation:orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite}@keyframes orbit{0%{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}5%{opacity:.58;transform:translateX(calc(var(--uib-size)*.235)) scale(.684208)}10%{opacity:.51;transform:translateX(calc(var(--uib-size)*.182)) scale(.631576)}15%{opacity:.44;transform:translateX(calc(var(--uib-size)*.129)) scale(.578944)}20%{opacity:.37;transform:translateX(calc(var(--uib-size)*.076)) scale(.526312)}25%{opacity:.3;transform:translateX(0) scale(.47368)}30%{opacity:.37;transform:translateX(calc(var(--uib-size)*-.076)) scale(.526312)}35%{opacity:.44;transform:translateX(calc(var(--uib-size)*-.129)) scale(.578944)}40%{opacity:.51;transform:translateX(calc(var(--uib-size)*-.182)) scale(.631576)}45%{opacity:.58;transform:translateX(calc(var(--uib-size)*-.235)) scale(.684208)}50%{opacity:.65;transform:translateX(calc(var(--uib-size)*-.25)) scale(.73684)}55%{opacity:.72;transform:translateX(calc(var(--uib-size)*-.235)) scale(.789472)}60%{opacity:.79;transform:translateX(calc(var(--uib-size)*-.182)) scale(.842104)}65%{opacity:.86;transform:translateX(calc(var(--uib-size)*-.129)) scale(.894736)}70%{opacity:.93;transform:translateX(calc(var(--uib-size)*-.076)) scale(.947368)}75%{opacity:1;transform:translateX(0) scale(1)}80%{opacity:.93;transform:translateX(calc(var(--uib-size)*.076)) scale(.947368)}85%{opacity:.86;transform:translateX(calc(var(--uib-size)*.129)) scale(.894736)}90%{opacity:.79;transform:translateX(calc(var(--uib-size)*.182)) scale(.842104)}95%{opacity:.72;transform:translateX(calc(var(--uib-size)*.235)) scale(.789472)}to{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}}';class t extends a{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:1.5}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const a=this.shadow.querySelector("style");a&&(a.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var s={register:(a="l-orbit")=>{customElements.get(a)||customElements.define(a,class extends t{})},element:t};export{s as default};
+import a from"../lib/LdrsBaseElement.js";var e=':host{--uib-dot-size:calc(var(--uib-size)*0.4);align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-dot-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.container:after,.container:before{background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:var(--uib-dot-size);position:absolute;transition:background-color .3s ease;width:var(--uib-dot-size)}.container:before{animation:orbit var(--uib-speed) linear infinite}.container:after{animation:orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite}@keyframes orbit{0%{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}5%{opacity:.58;transform:translateX(calc(var(--uib-size)*.235)) scale(.684208)}10%{opacity:.51;transform:translateX(calc(var(--uib-size)*.182)) scale(.631576)}15%{opacity:.44;transform:translateX(calc(var(--uib-size)*.129)) scale(.578944)}20%{opacity:.37;transform:translateX(calc(var(--uib-size)*.076)) scale(.526312)}25%{opacity:.3;transform:translateX(0) scale(.47368)}30%{opacity:.37;transform:translateX(calc(var(--uib-size)*-.076)) scale(.526312)}35%{opacity:.44;transform:translateX(calc(var(--uib-size)*-.129)) scale(.578944)}40%{opacity:.51;transform:translateX(calc(var(--uib-size)*-.182)) scale(.631576)}45%{opacity:.58;transform:translateX(calc(var(--uib-size)*-.235)) scale(.684208)}50%{opacity:.65;transform:translateX(calc(var(--uib-size)*-.25)) scale(.73684)}55%{opacity:.72;transform:translateX(calc(var(--uib-size)*-.235)) scale(.789472)}60%{opacity:.79;transform:translateX(calc(var(--uib-size)*-.182)) scale(.842104)}65%{opacity:.86;transform:translateX(calc(var(--uib-size)*-.129)) scale(.894736)}70%{opacity:.93;transform:translateX(calc(var(--uib-size)*-.076)) scale(.947368)}75%{opacity:1;transform:translateX(0) scale(1)}80%{opacity:.93;transform:translateX(calc(var(--uib-size)*.076)) scale(.947368)}85%{opacity:.86;transform:translateX(calc(var(--uib-size)*.129)) scale(.894736)}90%{opacity:.79;transform:translateX(calc(var(--uib-size)*.182)) scale(.842104)}95%{opacity:.72;transform:translateX(calc(var(--uib-size)*.235)) scale(.789472)}to{opacity:.65;transform:translateX(calc(var(--uib-size)*.25)) scale(.73684)}}';class t extends a{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:1.5}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const a=this.shadow.querySelector("style");a&&(a.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var s={register:(a="l-orbit")=>{customElements.get(a)||customElements.define(a,class extends t{})},element:t};export{s as default};
 //# sourceMappingURL=orbit.js.map

dist/elements/ping.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before{animation:pulse var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transform:scale(0);transition:background-color .3s ease;width:100%}.container:after{animation-delay:calc(var(--uib-speed)/-2)}@keyframes pulse{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(1)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:2}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-ping")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before{animation:pulse var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transform:scale(0);transition:background-color .3s ease;width:100%}.container:after{animation-delay:calc(var(--uib-speed)/-2)}@keyframes pulse{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(1)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:2}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-ping")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=ping.js.map

dist/elements/pinwheel.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:var(--uib-size);justify-content:center;position:relative;width:var(--uib-size)}.line{animation:rotate var(--uib-speed) ease-in-out infinite;background-color:var(--uib-color);border-radius:calc(var(--uib-stroke)/2);height:var(--uib-stroke);left:0;position:absolute;top:calc(50% - var(--uib-stroke)/2);transition:background-color .3s ease;width:100%}.line:first-child,.line:nth-child(2){animation-delay:calc(var(--uib-speed)*-.375)}.line:nth-child(2){opacity:.8}.line:nth-child(3){animation-delay:calc(var(--uib-speed)*-.3);opacity:.6}.line:nth-child(4){animation-delay:calc(var(--uib-speed)*-.225);opacity:.4}.line:nth-child(5){animation-delay:calc(var(--uib-speed)*-.15);opacity:.2}.line:nth-child(6){animation-delay:calc(var(--uib-speed)*-.075);opacity:.1}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(180deg)}}";class t extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:.9,stroke:3.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var s={register:(e="l-pinwheel")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:var(--uib-size);justify-content:center;position:relative;width:var(--uib-size)}.line{animation:rotate var(--uib-speed) ease-in-out infinite;background-color:var(--uib-color);border-radius:calc(var(--uib-stroke)/2);height:var(--uib-stroke);left:0;position:absolute;top:calc(50% - var(--uib-stroke)/2);transition:background-color .3s ease;width:100%}.line:first-child,.line:nth-child(2){animation-delay:calc(var(--uib-speed)*-.375)}.line:nth-child(2){opacity:.8}.line:nth-child(3){animation-delay:calc(var(--uib-speed)*-.3);opacity:.6}.line:nth-child(4){animation-delay:calc(var(--uib-speed)*-.225);opacity:.4}.line:nth-child(5){animation-delay:calc(var(--uib-speed)*-.15);opacity:.2}.line:nth-child(6){animation-delay:calc(var(--uib-speed)*-.075);opacity:.1}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(180deg)}}";class t extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:.9,stroke:3.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n        <div class="line"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var s={register:(e="l-pinwheel")=>{customElements.get(e)||customElements.define(e,class extends t{})},element:t};export{s as default};
 //# sourceMappingURL=pinwheel.js.map

dist/elements/pulsar.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before{animation:pulse var(--uib-speed) ease-in-out infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:background-color .3s ease;width:100%}.container:after{animation-delay:calc(var(--uib-speed)/-2)}@keyframes pulse{0%,to{opacity:1;transform:scale(0)}50%{opacity:.25;transform:scale(1)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-pulsar")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before{animation:pulse var(--uib-speed) ease-in-out infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:background-color .3s ease;width:100%}.container:after{animation-delay:calc(var(--uib-speed)/-2)}@keyframes pulse{0%,to{opacity:1;transform:scale(0)}50%{opacity:.25;transform:scale(1)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-pulsar")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=pulsar.js.map

dist/elements/quantum.js

@@ -1,2 +0,2 @@
-import a from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate calc(var(--uib-speed)*4) linear infinite;height:var(--uib-size);position:relative;width:var(--uib-size)}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.particle{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.particle:first-child{--uib-delay:0;transform:rotate(8deg)}.particle:nth-child(2){--uib-delay:-0.4;transform:rotate(36deg)}.particle:nth-child(3){--uib-delay:-0.9;transform:rotate(72deg)}.particle:nth-child(4){--uib-delay:-0.5;transform:rotate(90deg)}.particle:nth-child(5){--uib-delay:-0.3;transform:rotate(144deg)}.particle:nth-child(6){--uib-delay:-0.2;transform:rotate(180deg)}.particle:nth-child(7){--uib-delay:-0.6;transform:rotate(216deg)}.particle:nth-child(8){--uib-delay:-0.7;transform:rotate(252deg)}.particle:nth-child(9){--uib-delay:-0.1;transform:rotate(300deg)}.particle:nth-child(10){--uib-delay:-0.8;transform:rotate(324deg)}.particle:nth-child(11){--uib-delay:-1.2;transform:rotate(335deg)}.particle:nth-child(12){--uib-delay:-0.5;transform:rotate(290deg)}.particle:nth-child(13){--uib-delay:-0.2;transform:rotate(240deg)}.particle:before{--uib-d:calc(var(--uib-delay)*var(--uib-speed));animation:orbit var(--uib-speed) linear var(--uib-d) infinite;background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:17.5%;position:absolute;transition:background-color .3s ease;width:17.5%}@keyframes orbit{0%{opacity:.65;transform:translate(calc(var(--uib-size)*.5)) scale(.73684)}5%{opacity:.58;transform:translate(calc(var(--uib-size)*.4)) scale(.684208)}10%{opacity:.51;transform:translate(calc(var(--uib-size)*.3)) scale(.631576)}15%{opacity:.44;transform:translate(calc(var(--uib-size)*.2)) scale(.578944)}20%{opacity:.37;transform:translate(calc(var(--uib-size)*.1)) scale(.526312)}25%{opacity:.3;transform:translate(0) scale(.47368)}30%{opacity:.37;transform:translate(calc(var(--uib-size)*-.1)) scale(.526312)}35%{opacity:.44;transform:translate(calc(var(--uib-size)*-.2)) scale(.578944)}40%{opacity:.51;transform:translate(calc(var(--uib-size)*-.3)) scale(.631576)}45%{opacity:.58;transform:translate(calc(var(--uib-size)*-.4)) scale(.684208)}50%{opacity:.65;transform:translate(calc(var(--uib-size)*-.5)) scale(.73684)}55%{opacity:.72;transform:translate(calc(var(--uib-size)*-.4)) scale(.789472)}60%{opacity:.79;transform:translate(calc(var(--uib-size)*-.3)) scale(.842104)}65%{opacity:.86;transform:translate(calc(var(--uib-size)*-.2)) scale(.894736)}70%{opacity:.93;transform:translate(calc(var(--uib-size)*-.1)) scale(.947368)}75%{opacity:1;transform:translate(0) scale(1)}80%{opacity:.93;transform:translate(calc(var(--uib-size)*.1)) scale(.947368)}85%{opacity:.86;transform:translate(calc(var(--uib-size)*.2)) scale(.894736)}90%{opacity:.79;transform:translate(calc(var(--uib-size)*.3)) scale(.842104)}95%{opacity:.72;transform:translate(calc(var(--uib-size)*.4)) scale(.789472)}to{opacity:.65;transform:translate(calc(var(--uib-size)*.5)) scale(.73684)}}';class e extends a{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div class="container">\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      <div class="particle"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const a=this.shadow.querySelector("style");a&&(a.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(a="l-quantum")=>{customElements.get(a)||customElements.define(a,class extends e{})},element:e};export{i as default};
+import a from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate calc(var(--uib-speed)*4) linear infinite;height:var(--uib-size);position:relative;width:var(--uib-size)}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.particle{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.particle:first-child{--uib-delay:0;transform:rotate(8deg)}.particle:nth-child(2){--uib-delay:-0.4;transform:rotate(36deg)}.particle:nth-child(3){--uib-delay:-0.9;transform:rotate(72deg)}.particle:nth-child(4){--uib-delay:-0.5;transform:rotate(90deg)}.particle:nth-child(5){--uib-delay:-0.3;transform:rotate(144deg)}.particle:nth-child(6){--uib-delay:-0.2;transform:rotate(180deg)}.particle:nth-child(7){--uib-delay:-0.6;transform:rotate(216deg)}.particle:nth-child(8){--uib-delay:-0.7;transform:rotate(252deg)}.particle:nth-child(9){--uib-delay:-0.1;transform:rotate(300deg)}.particle:nth-child(10){--uib-delay:-0.8;transform:rotate(324deg)}.particle:nth-child(11){--uib-delay:-1.2;transform:rotate(335deg)}.particle:nth-child(12){--uib-delay:-0.5;transform:rotate(290deg)}.particle:nth-child(13){--uib-delay:-0.2;transform:rotate(240deg)}.particle:before{--uib-d:calc(var(--uib-delay)*var(--uib-speed));animation:orbit var(--uib-speed) linear var(--uib-d) infinite;background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:17.5%;position:absolute;transition:background-color .3s ease;width:17.5%}@keyframes orbit{0%{opacity:.65;transform:translate(calc(var(--uib-size)*.5)) scale(.73684)}5%{opacity:.58;transform:translate(calc(var(--uib-size)*.4)) scale(.684208)}10%{opacity:.51;transform:translate(calc(var(--uib-size)*.3)) scale(.631576)}15%{opacity:.44;transform:translate(calc(var(--uib-size)*.2)) scale(.578944)}20%{opacity:.37;transform:translate(calc(var(--uib-size)*.1)) scale(.526312)}25%{opacity:.3;transform:translate(0) scale(.47368)}30%{opacity:.37;transform:translate(calc(var(--uib-size)*-.1)) scale(.526312)}35%{opacity:.44;transform:translate(calc(var(--uib-size)*-.2)) scale(.578944)}40%{opacity:.51;transform:translate(calc(var(--uib-size)*-.3)) scale(.631576)}45%{opacity:.58;transform:translate(calc(var(--uib-size)*-.4)) scale(.684208)}50%{opacity:.65;transform:translate(calc(var(--uib-size)*-.5)) scale(.73684)}55%{opacity:.72;transform:translate(calc(var(--uib-size)*-.4)) scale(.789472)}60%{opacity:.79;transform:translate(calc(var(--uib-size)*-.3)) scale(.842104)}65%{opacity:.86;transform:translate(calc(var(--uib-size)*-.2)) scale(.894736)}70%{opacity:.93;transform:translate(calc(var(--uib-size)*-.1)) scale(.947368)}75%{opacity:1;transform:translate(0) scale(1)}80%{opacity:.93;transform:translate(calc(var(--uib-size)*.1)) scale(.947368)}85%{opacity:.86;transform:translate(calc(var(--uib-size)*.2)) scale(.894736)}90%{opacity:.79;transform:translate(calc(var(--uib-size)*.3)) scale(.842104)}95%{opacity:.72;transform:translate(calc(var(--uib-size)*.4)) scale(.789472)}to{opacity:.65;transform:translate(calc(var(--uib-size)*.5)) scale(.73684)}}';class e extends a{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:1.75}),this.template.innerHTML=`\n      <div class="container">\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n        <div class="particle"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const a=this.shadow.querySelector("style");a&&(a.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(a="l-quantum")=>{customElements.get(a)||customElements.define(a,class extends e{})},element:e};export{i as default};
 //# sourceMappingURL=quantum.js.map

dist/elements/reuleaux.js

@@ -1,2 +0,2 @@
-import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15,85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:100}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M49.5,42.9c0-18.1-9.9-34-24.5-42.4C10.4,9,0.5,24.8,0.5,42.9c7.2,4.2,15.6,6.6,24.5,6.6S42.3,47.1,49.5,42.9z"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:37,color:"black",stroke:5,speed:.9,"bg-opacity":.1});const e=t(parseInt(this.size)/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path");e&&(i.setAttribute("height",this.size),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(parseInt(this.size)/50,this.d))})),e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-reuleaux")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
+import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15,85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:100}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M49.5,42.9c0-18.1-9.9-34-24.5-42.4C10.4,9,0.5,24.8,0.5,42.9c7.2,4.2,15.6,6.6,24.5,6.6S42.3,47.1,49.5,42.9z"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:37,color:"black",stroke:5,speed:.9,"bg-opacity":.1});const e=t(parseInt(this.size)/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path");e&&(i.setAttribute("height",this.size),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(parseInt(this.size)/50,this.d))})),e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-reuleaux")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
 //# sourceMappingURL=reuleaux.js.map

dist/elements/ring.js

@@ -1,2 +0,2 @@
-import t from"../lib/LdrsBaseElement.js";var e=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate var(--uib-speed) linear infinite;height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size);will-change:transform}.car{stroke:var(--uib-color);stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:stretch calc(var(--uib-speed)*.75) ease-in-out infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{fill:none;transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes stretch{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:75,150;stroke-dashoffset:-25}to{stroke-dashoffset:-100}}";class s extends t{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","stroke","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:5,speed:2,"bg-opacity":0});const t=parseInt(this.size),s=parseInt(this.stroke);this.template.innerHTML=`\n      <svg\n        class="container"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n      >\n        <circle \n          class="track"\n          cx="${t/2}" \n          cy="${t/2}" \n          r="${t/2-s/2}" \n          pathlength="100" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n        <circle \n          class="car"\n          cx="${t/2}" \n          cy="${t/2}" \n          r="${t/2-s/2}" \n          pathlength="100" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const t=this.shadow.querySelector("style"),s=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("circle");if(!t)return;const r=parseInt(this.size),n=parseInt(this.stroke);s.setAttribute("height",this.stroke),s.setAttribute("width",this.stroke),s.setAttribute("viewBox",`0 0 ${r} ${r}`),i.forEach((t=>{t.setAttribute("cx",String(r/2)),t.setAttribute("cy",String(r/2)),t.setAttribute("r",String(r/2-n/2)),t.setAttribute("stroke-width",this.stroke)})),t.innerHTML=`\n      :host{\n        --uib-size: ${r}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${e}\n    `}}var i={register:(t="l-ring")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
+import t from"../lib/LdrsBaseElement.js";var e=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate var(--uib-speed) linear infinite;height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size);will-change:transform}.car{stroke:var(--uib-color);stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:stretch calc(var(--uib-speed)*.75) ease-in-out infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{fill:none;transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes stretch{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:75,150;stroke-dashoffset:-25}to{stroke-dashoffset:-100}}";class s extends t{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","stroke","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:5,speed:2,"bg-opacity":0});const t=parseInt(this.size),s=parseInt(this.stroke),i=t/2,r=Math.max(0,t/2-s/2);this.template.innerHTML=`\n      <svg\n        class="container"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n      >\n        <circle \n          class="track"\n          cx="${i}" \n          cy="${i}" \n          r="${r}" \n          pathlength="100" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n        <circle \n          class="car"\n          cx="${i}" \n          cy="${i}" \n          r="${r}" \n          pathlength="100" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style"),s=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("circle");if(!t)return;const r=parseInt(this.size),o=parseInt(this.stroke),n=String(r/2),a=String(Math.max(0,r/2-o/2));s.setAttribute("height",this.stroke),s.setAttribute("width",this.stroke),s.setAttribute("viewBox",`0 0 ${r} ${r}`),i.forEach((t=>{t.setAttribute("cx",n),t.setAttribute("cy",n),t.setAttribute("r",a),t.setAttribute("stroke-width",this.stroke)})),t.innerHTML=`\n      :host{\n        --uib-size: ${r}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${e}\n    `}}var i={register:(t="l-ring")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=ring.js.map

dist/elements/ring2.js

@@ -1,2 +0,2 @@
-import t from"../lib/LdrsBaseElement.js";var e=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate var(--uib-speed) linear infinite;height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size);will-change:transform}.car{stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round}.car,.track{fill:none;transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes rotate{to{transform:rotate(1turn)}}";class s extends t{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","stroke","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:5,speed:.8,"bg-opacity":.1});const t=parseInt(this.size),s=parseInt(this.stroke);this.template.innerHTML=`\n      <svg\n        class="container"\n        viewBox="${t/2} ${t/2} ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n      >\n        <circle \n          class="track"\n          cx="${this.size}" \n          cy="${this.size}" \n          r="${t/2-s/2}" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n        <circle \n          class="car"\n          cx="${this.size}" \n          cy="${this.size}" \n          r="${t/2-s/2}" \n          pathlength="100" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const t=this.shadow.querySelector("style"),s=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("circle");if(!t)return;const r=parseInt(this.size),n=parseInt(this.stroke);s.setAttribute("height",this.size),s.setAttribute("width",this.size),s.setAttribute("viewBox",`${r/2} ${r/2} ${this.size} ${this.size}`),i.forEach((t=>{t.setAttribute("cx",this.size),t.setAttribute("cy",this.size),t.setAttribute("r",String(r/2-n/2)),t.setAttribute("stroke-width",this.stroke)})),t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${e}\n    `}}var i={register:(t="l-ring-2")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
+import t from"../lib/LdrsBaseElement.js";var e=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{animation:rotate var(--uib-speed) linear infinite;height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size);will-change:transform}.car{stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round}.car,.track{fill:none;transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes rotate{to{transform:rotate(1turn)}}";class s extends t{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","stroke","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:5,speed:.8,"bg-opacity":.1});const t=parseInt(this.size),s=parseInt(this.stroke),i=t/2,r=Math.max(0,t/2-s/2);this.template.innerHTML=`\n      <svg\n        class="container"\n        viewBox="${i} ${i} ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n      >\n        <circle \n          class="track"\n          cx="${this.size}" \n          cy="${this.size}" \n          r="${r}" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n        <circle \n          class="car"\n          cx="${this.size}" \n          cy="${this.size}" \n          r="${r}" \n          pathlength="100" \n          stroke-width="${this.stroke}px" \n          fill="none" \n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style"),s=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("circle");if(!t)return;const r=parseInt(this.size),n=parseInt(this.stroke),o=r/2,a=String(Math.max(0,r/2-n/2));s.setAttribute("height",this.size),s.setAttribute("width",this.size),s.setAttribute("viewBox",`${o} ${o} ${this.size} ${this.size}`),i.forEach((t=>{t.setAttribute("cx",this.size),t.setAttribute("cy",this.size),t.setAttribute("r",a),t.setAttribute("stroke-width",this.stroke)})),t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${e}\n    `}}var i={register:(t="l-ring-2")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=ring2.js.map

dist/elements/ripples.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before,.dot:after,.dot:before{animation:pulse var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transform:scale(0);transition:background-color .3s ease;width:100%}.container:after{animation-delay:calc(var(--uib-speed)/-4)}.dot:before{animation-delay:calc(var(--uib-speed)*-.5)}.dot:after{animation-delay:calc(var(--uib-speed)*-.75)}@keyframes pulse{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(1)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:2}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-ripples")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container:after,.container:before,.dot:after,.dot:before{animation:pulse var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transform:scale(0);transition:background-color .3s ease;width:100%}.container:after{animation-delay:calc(var(--uib-speed)/-4)}.dot:before{animation-delay:calc(var(--uib-speed)*-.5)}.dot:after{animation-delay:calc(var(--uib-speed)*-.75)}@keyframes pulse{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(1)}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:2}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-ripples")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=ripples.js.map

dist/elements/spiral.js

@@ -1,2 +0,2 @@
-import t from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-center:calc(var(--uib-size)/2 - var(--uib-size)/5/2);animation:rotate calc(var(--uib-speed)*3) linear infinite;height:var(--uib-size);position:relative;width:var(--uib-size)}.container,.dot{align-items:center;display:flex;justify-content:flex-start}.dot{height:100%;left:0;position:absolute;top:0;width:100%}.dot:before{animation:oscillate var(--uib-speed) ease-in-out infinite alternate;background-color:var(--uib-color);border-radius:50%;content:"";height:20%;transition:background-color .3s ease;width:20%}.dot:first-child:before{transform:translateX(var(--uib-center))}.dot:nth-child(2){transform:rotate(45deg)}.dot:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.125);transform:translateX(var(--uib-center))}.dot:nth-child(3){transform:rotate(90deg)}.dot:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.25);transform:translateX(var(--uib-center))}.dot:nth-child(4){transform:rotate(135deg)}.dot:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.375);transform:translateX(var(--uib-center))}.dot:nth-child(5){transform:rotate(180deg)}.dot:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.5);transform:translateX(var(--uib-center))}.dot:nth-child(6){transform:rotate(225deg)}.dot:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.625);transform:translateX(var(--uib-center))}.dot:nth-child(7){transform:rotate(270deg)}.dot:nth-child(7):before{animation-delay:calc(var(--uib-speed)*-.75);transform:translateX(var(--uib-center))}.dot:nth-child(8){transform:rotate(315deg)}.dot:nth-child(8):before{animation-delay:calc(var(--uib-speed)*-.875);transform:translateX(var(--uib-center))}@keyframes oscillate{0%{opacity:.25;transform:translateX(var(--uib-center)) scale(0)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}';class a extends t{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:.9}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var i={register:(t="l-spiral")=>{customElements.get(t)||customElements.define(t,class extends a{})},element:a};export{i as default};
+import t from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-center:calc(var(--uib-size)/2 - var(--uib-size)/5/2);animation:rotate calc(var(--uib-speed)*3) linear infinite;height:var(--uib-size);position:relative;width:var(--uib-size)}.container,.dot{align-items:center;display:flex;justify-content:flex-start}.dot{height:100%;left:0;position:absolute;top:0;width:100%}.dot:before{animation:oscillate var(--uib-speed) ease-in-out infinite alternate;background-color:var(--uib-color);border-radius:50%;content:"";height:20%;transition:background-color .3s ease;width:20%}.dot:first-child:before{transform:translateX(var(--uib-center))}.dot:nth-child(2){transform:rotate(45deg)}.dot:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.125);transform:translateX(var(--uib-center))}.dot:nth-child(3){transform:rotate(90deg)}.dot:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.25);transform:translateX(var(--uib-center))}.dot:nth-child(4){transform:rotate(135deg)}.dot:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.375);transform:translateX(var(--uib-center))}.dot:nth-child(5){transform:rotate(180deg)}.dot:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.5);transform:translateX(var(--uib-center))}.dot:nth-child(6){transform:rotate(225deg)}.dot:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.625);transform:translateX(var(--uib-center))}.dot:nth-child(7){transform:rotate(270deg)}.dot:nth-child(7):before{animation-delay:calc(var(--uib-speed)*-.75);transform:translateX(var(--uib-center))}.dot:nth-child(8){transform:rotate(315deg)}.dot:nth-child(8):before{animation-delay:calc(var(--uib-speed)*-.875);transform:translateX(var(--uib-center))}@keyframes oscillate{0%{opacity:.25;transform:translateX(var(--uib-center)) scale(0)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}';class a extends t{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:.9}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var i={register:(t="l-spiral")=>{customElements.get(t)||customElements.define(t,class extends a{})},element:a};export{i as default};
 //# sourceMappingURL=spiral.js.map

dist/elements/square.js

@@ -1,2 +0,2 @@
-import t from"../lib/LdrsBaseElement.js";var e=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size);will-change:transform}.car{stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{fill:none;transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}";class s extends t{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","stroke","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",stroke:5,speed:1.2,"bg-opacity":.1});const t=parseInt(this.size),s=parseInt(this.stroke);this.template.innerHTML=`\n      <svg\n        class="container"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n      >\n        <rect \n          class="track"\n          x="${s/2}" \n          y="${s/2}" \n          fill="none" \n          stroke-width="${this.stroke}px" \n          width="${t-s/2}" \n          height="${t-s/2}"\n        />\n        <rect \n          class="car"\n          x="${s/2}" \n          y="${s/2}" \n          fill="none" \n          stroke-width="${this.stroke}px" \n          width="${t-s/2}" \n          height="${t-s/2}"\n          pathlength="100"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const t=this.shadow.querySelector("style"),s=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("rect");if(!t)return;const r=parseInt(this.size),n=parseInt(this.stroke);s.setAttribute("height",this.size),s.setAttribute("width",this.size),s.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),i.forEach((t=>{t.setAttribute("stroke-width",this.stroke),t.setAttribute("width",String(r-n/2)),t.setAttribute("height",String(r-n/2)),t.setAttribute("x",String(n/2)),t.setAttribute("y",String(n/2))})),t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${e}\n    `}}var i={register:(t="l-square")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
+import t from"../lib/LdrsBaseElement.js";var e=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size);will-change:transform}.car{stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{fill:none;transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}";class s extends t{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","stroke","speed","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",stroke:5,speed:1.2,"bg-opacity":.1});const t=parseInt(this.size),s=parseInt(this.stroke),i=s/2,r=Math.max(t-s/2,0);this.template.innerHTML=`\n      <svg\n        class="container"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n      >\n        <rect \n          class="track"\n          x="${i}" \n          y="${i}" \n          fill="none" \n          stroke-width="${this.stroke}px" \n          width="${r}" \n          height="${r}"\n        />\n        <rect \n          class="car"\n          x="${i}" \n          y="${i}" \n          fill="none" \n          stroke-width="${this.stroke}px" \n          width="${r}" \n          height="${r}"\n          pathlength="100"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style"),s=this.shadow.querySelector("svg"),i=this.shadow.querySelectorAll("rect");if(!t)return;const r=parseInt(this.size),n=parseInt(this.stroke),o=String(n/2),a=String(Math.max(r-n/2,0));s.setAttribute("height",this.size),s.setAttribute("width",this.size),s.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),i.forEach((t=>{t.setAttribute("stroke-width",this.stroke),t.setAttribute("width",a),t.setAttribute("height",a),t.setAttribute("x",o),t.setAttribute("y",o)})),t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${e}\n    `}}var i={register:(t="l-square")=>{customElements.get(t)||customElements.define(t,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=square.js.map

dist/elements/squircle.js

@@ -1,2 +0,2 @@
-import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15,85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M0.5,25C0.5,7.8,7.8,0.5,25,0.5S49.5,7.8,49.5,25S42.2,49.5,25,49.5S0.5,42.2,0.5,25"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:37,color:"black",stroke:5,speed:.9,"bg-opacity":.1});const e=t(parseInt(this.size)/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path");e&&(i.setAttribute("height",this.size),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(parseInt(this.size)/50,this.d))})),e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-squircle")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
+import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15,85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M0.5,25C0.5,7.8,7.8,0.5,25,0.5S49.5,7.8,49.5,25S42.2,49.5,25,49.5S0.5,42.2,0.5,25"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:37,color:"black",stroke:5,speed:.9,"bg-opacity":.1});const e=t(parseInt(this.size)/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path");e&&(i.setAttribute("height",this.size),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(parseInt(this.size)/50,this.d))})),e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-squircle")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
 //# sourceMappingURL=squircle.js.map

dist/elements/superballs.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container,.electron{align-items:center;display:flex;justify-content:center}.electron{height:100%;left:0;position:absolute;top:0;width:100%}.electron:before{background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:35%;transition:background-color .3s ease;width:35%}.electron:first-child{transform:rotate(45deg)}.electron:first-child:before{animation:orbit var(--uib-speed) linear calc(var(--uib-speed)*-.143) infinite}.electron:nth-child(2){transform:rotate(-45deg)}.electron:nth-child(2):before{animation:orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite}@keyframes orbit{0%{opacity:.65;transform:translate(calc(var(--uib-size)*.5)) scale(.73684)}5%{opacity:.58;transform:translate(calc(var(--uib-size)*.4)) scale(.684208)}10%{opacity:.51;transform:translate(calc(var(--uib-size)*.3)) scale(.631576)}15%{opacity:.44;transform:translate(calc(var(--uib-size)*.2)) scale(.578944)}20%{opacity:.37;transform:translate(calc(var(--uib-size)*.1)) scale(.526312)}25%{opacity:.3;transform:translate(0) scale(.47368)}30%{opacity:.37;transform:translate(calc(var(--uib-size)*-.1)) scale(.526312)}35%{opacity:.44;transform:translate(calc(var(--uib-size)*-.2)) scale(.578944)}40%{opacity:.51;transform:translate(calc(var(--uib-size)*-.3)) scale(.631576)}45%{opacity:.58;transform:translate(calc(var(--uib-size)*-.4)) scale(.684208)}50%{opacity:.65;transform:translate(calc(var(--uib-size)*-.5)) scale(.73684)}55%{opacity:.72;transform:translate(calc(var(--uib-size)*-.4)) scale(.789472)}60%{opacity:.79;transform:translate(calc(var(--uib-size)*-.3)) scale(.842104)}65%{opacity:.86;transform:translate(calc(var(--uib-size)*-.2)) scale(.894736)}70%{opacity:.93;transform:translate(calc(var(--uib-size)*-.1)) scale(.947368)}75%{opacity:1;transform:translate(0) scale(1)}80%{opacity:.93;transform:translate(calc(var(--uib-size)*.1)) scale(.947368)}85%{opacity:.86;transform:translate(calc(var(--uib-size)*.2)) scale(.894736)}90%{opacity:.79;transform:translate(calc(var(--uib-size)*.3)) scale(.842104)}95%{opacity:.72;transform:translate(calc(var(--uib-size)*.4)) scale(.789472)}to{opacity:.65;transform:translate(calc(var(--uib-size)*.5)) scale(.73684)}}';class a extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.4}),this.template.innerHTML=`\n      <div class="container">\n        <div class="electron"></div>\n        <div class="electron"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-superballs")=>{customElements.get(e)||customElements.define(e,class extends a{})},element:a};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);position:relative;width:var(--uib-size)}.container,.electron{align-items:center;display:flex;justify-content:center}.electron{height:100%;left:0;position:absolute;top:0;width:100%}.electron:before{background-color:var(--uib-color);border-radius:50%;content:"";flex-shrink:0;height:35%;transition:background-color .3s ease;width:35%}.electron:first-child{transform:rotate(45deg)}.electron:first-child:before{animation:orbit var(--uib-speed) linear calc(var(--uib-speed)*-.143) infinite}.electron:nth-child(2){transform:rotate(-45deg)}.electron:nth-child(2):before{animation:orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite}@keyframes orbit{0%{opacity:.65;transform:translate(calc(var(--uib-size)*.5)) scale(.73684)}5%{opacity:.58;transform:translate(calc(var(--uib-size)*.4)) scale(.684208)}10%{opacity:.51;transform:translate(calc(var(--uib-size)*.3)) scale(.631576)}15%{opacity:.44;transform:translate(calc(var(--uib-size)*.2)) scale(.578944)}20%{opacity:.37;transform:translate(calc(var(--uib-size)*.1)) scale(.526312)}25%{opacity:.3;transform:translate(0) scale(.47368)}30%{opacity:.37;transform:translate(calc(var(--uib-size)*-.1)) scale(.526312)}35%{opacity:.44;transform:translate(calc(var(--uib-size)*-.2)) scale(.578944)}40%{opacity:.51;transform:translate(calc(var(--uib-size)*-.3)) scale(.631576)}45%{opacity:.58;transform:translate(calc(var(--uib-size)*-.4)) scale(.684208)}50%{opacity:.65;transform:translate(calc(var(--uib-size)*-.5)) scale(.73684)}55%{opacity:.72;transform:translate(calc(var(--uib-size)*-.4)) scale(.789472)}60%{opacity:.79;transform:translate(calc(var(--uib-size)*-.3)) scale(.842104)}65%{opacity:.86;transform:translate(calc(var(--uib-size)*-.2)) scale(.894736)}70%{opacity:.93;transform:translate(calc(var(--uib-size)*-.1)) scale(.947368)}75%{opacity:1;transform:translate(0) scale(1)}80%{opacity:.93;transform:translate(calc(var(--uib-size)*.1)) scale(.947368)}85%{opacity:.86;transform:translate(calc(var(--uib-size)*.2)) scale(.894736)}90%{opacity:.79;transform:translate(calc(var(--uib-size)*.3)) scale(.842104)}95%{opacity:.72;transform:translate(calc(var(--uib-size)*.4)) scale(.789472)}to{opacity:.65;transform:translate(calc(var(--uib-size)*.5)) scale(.73684)}}';class a extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.4}),this.template.innerHTML=`\n      <div class="container">\n        <div class="electron"></div>\n        <div class="electron"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-superballs")=>{customElements.get(e)||customElements.define(e,class extends a{})},element:a};export{s as default};
 //# sourceMappingURL=superballs.js.map

dist/elements/tailChase.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--dot-size:calc(var(--uib-size)*0.17);align-items:center;animation:smoothRotate calc(var(--uib-speed)*1.8) linear infinite;display:flex;height:var(--uib-size);justify-content:flex-start;position:relative;width:var(--uib-size)}.dot{align-items:flex-start;animation:rotate var(--uib-speed) ease-in-out infinite;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";height:var(--dot-size);transition:background-color .3s ease;width:var(--dot-size)}.dot:nth-child(2),.dot:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.835*.5)}.dot:nth-child(3),.dot:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.668*.5)}.dot:nth-child(4),.dot:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.501*.5)}.dot:nth-child(5),.dot:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.334*.5)}.dot:nth-child(6),.dot:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.167*.5)}@keyframes rotate{0%{transform:rotate(0deg)}65%,to{transform:rotate(1turn)}}@keyframes smoothRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-tail-chase")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--dot-size:calc(var(--uib-size)*0.17);align-items:center;animation:smoothRotate calc(var(--uib-speed)*1.8) linear infinite;display:flex;height:var(--uib-size);justify-content:flex-start;position:relative;width:var(--uib-size)}.dot{align-items:flex-start;animation:rotate var(--uib-speed) ease-in-out infinite;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.dot:before{background-color:var(--uib-color);border-radius:50%;content:"";height:var(--dot-size);transition:background-color .3s ease;width:var(--dot-size)}.dot:nth-child(2),.dot:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.835*.5)}.dot:nth-child(3),.dot:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.668*.5)}.dot:nth-child(4),.dot:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.501*.5)}.dot:nth-child(5),.dot:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.334*.5)}.dot:nth-child(6),.dot:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.167*.5)}@keyframes rotate{0%{transform:rotate(0deg)}65%,to{transform:rotate(1turn)}}@keyframes smoothRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var s={register:(e="l-tail-chase")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=tailChase.js.map

dist/elements/tailspin.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--mask-size:calc(var(--uib-size)/2 - var(--uib-stroke));align-items:center;animation:spin calc(var(--uib-speed)) linear infinite;background-image:conic-gradient(transparent 25%,var(--uib-color));border-radius:50%;display:flex;height:var(--uib-size);justify-content:flex-start;-webkit-mask:radial-gradient(circle var(--mask-size),transparent 99%,#000 100%);mask:radial-gradient(circle var(--mask-size),transparent 99%,#000 100%);position:relative;width:var(--uib-size)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";class s extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:.9,stroke:5}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${t}\n    `)}}var i={register:(e="l-tailspin")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--mask-size:calc(var(--uib-size)/2 - var(--uib-stroke));align-items:center;animation:spin calc(var(--uib-speed)) linear infinite;background-image:conic-gradient(transparent 25%,var(--uib-color));border-radius:50%;display:flex;height:var(--uib-size);justify-content:flex-start;-webkit-mask:radial-gradient(circle var(--mask-size),transparent 99%,#000 100%);mask:radial-gradient(circle var(--mask-size),transparent 99%,#000 100%);position:relative;width:var(--uib-size)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";class s extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:.9,stroke:5}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${t}\n    `)}}var i={register:(e="l-tailspin")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=tailspin.js.map

dist/elements/treadmill.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.59);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-cube-size:calc(var(--uib-size)*0.2);--uib-arc-1:-90deg;--uib-arc-2:90deg;align-items:flex-end;display:flex;height:calc(100% - var(--uib-cube-size)/2);justify-content:center;padding-bottom:calc(var(--uib-cube-size)/2);width:100%}.cube{--cube-container-height:calc(var(--uib-size)*0.8);align-items:center;animation:metronome var(--uib-speed) linear infinite;display:flex;height:var(--cube-container-height);transform:rotate(var(var(--uib-arc-1)));transform-origin:center bottom}.cube,.cube:after{width:var(--uib-cube-size)}.cube:after{animation:morph var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:25%;content:"";display:block;height:var(--uib-cube-size);transform-origin:center left;transition:background-color .3s ease}@keyframes metronome{0%{transform:rotate(var(--uib-arc-1))}50%{transform:rotate(var(--uib-arc-2))}50.001%{transform:translateX(var(--cube-container-height)) rotate(var(--uib-arc-1))}to{transform:rotate(var(--uib-arc-1))}}@keyframes morph{0%{transform:scaleX(.65) scaleY(1.3)}15%{transform:scaleX(1.5)}30%,50.001%{transform:scaleX(1)}55%{animation-timing-function:ease-in;transform:scaleX(.8) scaleY(1.2)}65%,80%{transform:scaleX(1)}90%,to{transform:scaleX(.65) scaleY(1.3)}}';class i extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:70,color:"black",speed:1.25}),this.template.innerHTML=`\n    <div class="container"><div class="cube"></div></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var r={register:(e="l-treadmill")=>{customElements.get(e)||customElements.define(e,class extends i{})},element:i};export{r as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.59);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-cube-size:calc(var(--uib-size)*0.2);--uib-arc-1:-90deg;--uib-arc-2:90deg;align-items:flex-end;display:flex;height:calc(100% - var(--uib-cube-size)/2);justify-content:center;padding-bottom:calc(var(--uib-cube-size)/2);width:100%}.cube{--cube-container-height:calc(var(--uib-size)*0.8);align-items:center;animation:metronome var(--uib-speed) linear infinite;display:flex;height:var(--cube-container-height);transform:rotate(var(var(--uib-arc-1)));transform-origin:center bottom}.cube,.cube:after{width:var(--uib-cube-size)}.cube:after{animation:morph var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:25%;content:"";display:block;height:var(--uib-cube-size);transform-origin:center left;transition:background-color .3s ease}@keyframes metronome{0%{transform:rotate(var(--uib-arc-1))}50%{transform:rotate(var(--uib-arc-2))}50.001%{transform:translateX(var(--cube-container-height)) rotate(var(--uib-arc-1))}to{transform:rotate(var(--uib-arc-1))}}@keyframes morph{15%{transform:scaleX(1.2) scaleY(.8)}30%,50%{transform:scaleX(1)}55%{transform:scaleX(.8) scaleY(1.2)}65%,80%{transform:scaleX(1)}90%,95%{transform:scaleX(.65) scaleY(1.3)}}';class r extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:70,color:"black",speed:1.25}),this.template.innerHTML=`\n    <div class="container"><div class="cube"></div></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-treadmill")=>{customElements.get(e)||customElements.define(e,class extends r{})},element:r};export{i as default};
 //# sourceMappingURL=treadmill.js.map

dist/elements/trefoil.js

@@ -1,2 +0,2 @@
-import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15,85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M37.2,23.4c0,9.1-4.9,17-12.3,21.2c-3.6,2.1-7.8,3.3-12.3,3.3c-4.5,0-8.6-1.2-12.2-3.3c0-9.1,4.9-16.9,12.3-21.2c3.6-2.1,7.8-3.3,12.2-3.3S33.6,21.3,37.2,23.4c7.3,4.2,12.2,12.1,12.3,21.2c-3.6,2.1-7.8,3.3-12.2,3.3c-4.5,0-8.6-1.2-12.3-3.3c-7.3-4.2-12.2-12.1-12.2-21.2c0-9.1,4.9-17,12.2-21.2C32.3,6.4,37.2,14.3,37.2,23.4z"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:4,speed:1.4,"bg-opacity":.1});const e=t(parseInt(this.size)/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path");e&&(i.setAttribute("height",this.size),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(parseInt(this.size)/50,this.d))})),e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-trefoil")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
+import t from"../lib/scaleD.js";import e from"../lib/LdrsBaseElement.js";var s=":host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{height:var(--uib-size);overflow:visible;transform-origin:center;width:var(--uib-size)}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15,85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray,stroke-dashoffset}.car,.track{transition:stroke .5s ease}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity)}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}";class i extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";d;static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes),this.d="M37.2,23.4c0,9.1-4.9,17-12.3,21.2c-3.6,2.1-7.8,3.3-12.3,3.3c-4.5,0-8.6-1.2-12.2-3.3c0-9.1,4.9-16.9,12.3-21.2c3.6-2.1,7.8-3.3,12.2-3.3S33.6,21.3,37.2,23.4c7.3,4.2,12.2,12.1,12.3,21.2c-3.6,2.1-7.8,3.3-12.2,3.3c-4.5,0-8.6-1.2-12.3-3.3c-7.3-4.2-12.2-12.1-12.2-21.2c0-9.1,4.9-17,12.2-21.2C32.3,6.4,37.2,14.3,37.2,23.4z"}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",stroke:4,speed:1.4,"bg-opacity":.1});const e=t(parseInt(this.size)/50,this.d);this.template.innerHTML=`\n      <svg\n        class="container" \n        x="0px" \n        y="0px"\n        viewBox="0 0 ${this.size} ${this.size}"\n        height="${this.size}"\n        width="${this.size}"\n        preserveAspectRatio='xMidYMid meet'\n      >\n        <path\n          class="track" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n\n        <path\n          class="car" \n          fill="none" \n          stroke-width="${this.stroke}" \n          pathlength="100"\n          d="${e}"\n        />\n      </svg>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${s}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style"),i=this.shadow.querySelector("svg"),r=this.shadow.querySelectorAll("path");e&&(i.setAttribute("height",this.size),i.setAttribute("width",this.size),i.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`),r.forEach((e=>{e.setAttribute("stroke-width",this.stroke),e.setAttribute("d",t(parseInt(this.size)/50,this.d))})),e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${s}\n    `)}}var r={register:(t="l-trefoil")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{r as default};
 //# sourceMappingURL=trefoil.js.map

dist/elements/trio.js

@@ -1,2 +0,2 @@
-import t from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-dot-size:25%;animation:spin var(--uib-speed) infinite linear;display:inline-block;height:var(--uib-size);position:relative;width:var(--uib-size)}.dot{height:100%;left:calc(50% - var(--uib-dot-size)/2);width:var(--uib-dot-size)}.dot,.dot:after{position:absolute}.dot:after{background-color:var(--uib-color);border-radius:50%;content:"";height:0;left:0;padding-bottom:100%;top:0;transition:background-color .3s ease;width:100%}.dot:first-child{transform:rotate(120deg)}.dot:first-child:after{animation:wobble var(--uib-speed) infinite ease-in-out}.dot:nth-child(2){transform:rotate(-120deg)}.dot:nth-child(2):after,.dot:nth-child(3):after{animation:wobble var(--uib-speed) infinite ease-in-out}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes wobble{0%,to{transform:translateY(0)}50%{transform:translateY(65%)}}';class i extends t{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.3}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var s={register:(t="l-trio")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{s as default};
+import t from"../lib/LdrsBaseElement.js";var e=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{--uib-dot-size:25%;animation:spin var(--uib-speed) infinite linear;display:inline-block;height:var(--uib-size);position:relative;width:var(--uib-size)}.dot{height:100%;left:calc(50% - var(--uib-dot-size)/2);width:var(--uib-dot-size)}.dot,.dot:after{position:absolute}.dot:after{background-color:var(--uib-color);border-radius:50%;content:"";height:0;left:0;padding-bottom:100%;top:0;transition:background-color .3s ease;width:100%}.dot:first-child{transform:rotate(120deg)}.dot:first-child:after{animation:wobble var(--uib-speed) infinite ease-in-out}.dot:nth-child(2){transform:rotate(-120deg)}.dot:nth-child(2):after,.dot:nth-child(3):after{animation:wobble var(--uib-speed) infinite ease-in-out}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes wobble{0%,to{transform:translateY(0)}50%{transform:translateY(65%)}}';class i extends t{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:40,color:"black",speed:1.3}),this.template.innerHTML=`\n      <div class="container">\n        <div class="dot"></div>\n        <div class="dot"></div>\n        <div class="dot"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${e}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const t=this.shadow.querySelector("style");t&&(t.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${e}\n    `)}}var s={register:(t="l-trio")=>{customElements.get(t)||customElements.define(t,class extends i{})},element:i};export{s as default};
 //# sourceMappingURL=trio.js.map

dist/elements/waveform.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.9);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:calc(var(--uib-size)*.9);justify-content:space-between;width:var(--uib-size)}.bar{background-color:var(--uib-color);height:100%;transition:background-color .3s ease;width:var(--uib-stroke)}.bar:first-child{animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.45) infinite}.bar:nth-child(2){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.3) infinite}.bar:nth-child(3){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.15) infinite}.bar:nth-child(4){animation:grow var(--uib-speed) ease-in-out infinite}@keyframes grow{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}";class s extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:1,stroke:3.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="bar"></div>\n        <div class="bar"></div>\n        <div class="bar"></div>\n        <div class="bar"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var t={register:(e="l-waveform")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{t as default};
+import e from"../lib/LdrsBaseElement.js";var i=":host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.9);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:calc(var(--uib-size)*.9);justify-content:space-between;width:var(--uib-size)}.bar{background-color:var(--uib-color);height:100%;transition:background-color .3s ease;width:var(--uib-stroke)}.bar:first-child{animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.45) infinite}.bar:nth-child(2){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.3) infinite}.bar:nth-child(3){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.15) infinite}.bar:nth-child(4){animation:grow var(--uib-speed) ease-in-out infinite}@keyframes grow{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}";class s extends e{_attributes=["size","color","speed","stroke"];size;color;speed;stroke;static get observedAttributes(){return["size","color","speed","stroke"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:35,color:"black",speed:1,stroke:3.5}),this.template.innerHTML=`\n      <div class="container">\n        <div class="bar"></div>\n        <div class="bar"></div>\n        <div class="bar"></div>\n        <div class="bar"></div>\n      </div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n        }\n        ${i}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n      }\n      ${i}\n    `)}}var t={register:(e="l-waveform")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{t as default};
 //# sourceMappingURL=waveform.js.map

dist/elements/wobble.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.25);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:100%;justify-content:flex-start;position:relative;width:100%}.container:before{animation:wobble var(--uib-speed) calc(var(--uib-speed)*-.1) ease-in-out infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:calc(var(--uib-size)*.25);transform:translateY(calc(var(--uib-size)*-.4));transition:background-color .3s ease;width:25%}@keyframes wobble{0%,to{transform:translateX(0)}50%{transform:translateX(calc(var(--uib-size)*.75))}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:.9}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-wobble")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.25);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;display:flex;height:100%;justify-content:flex-start;position:relative;width:100%}.container:before{animation:wobble var(--uib-speed) calc(var(--uib-speed)*-.1) ease-in-out infinite;background-color:var(--uib-color);border-radius:50%;content:"";height:calc(var(--uib-size)*.25);transform:translateY(calc(var(--uib-size)*-.4));transition:background-color .3s ease;width:25%}@keyframes wobble{0%,to{transform:translateX(0)}50%{transform:translateX(calc(var(--uib-size)*.75))}}';class s extends e{_attributes=["size","color","speed"];size;color;speed;static get observedAttributes(){return["size","color","speed"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:45,color:"black",speed:.9}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n      }\n      ${t}\n    `)}}var i={register:(e="l-wobble")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=wobble.js.map

dist/elements/zoomies.js

@@ -1,2 +0,2 @@
-import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-stroke);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;border-radius:calc(var(--uib-stroke)/2);display:flex;height:var(--uib-stroke);justify-content:center;overflow:hidden;position:relative;transform:translateZ(0);width:var(--uib-size)}.container:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.container:after,.container:before{background-color:var(--uib-color);content:"";height:100%;transition:background-color .3s ease;width:100%}.container:after{animation:zoom var(--uib-speed) ease-in-out infinite;border-radius:calc(var(--uib-stroke)/2);transform:translateX(-100%)}@keyframes zoom{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}';class s extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:80,color:"black",speed:1.4,stroke:5,"bg-opacity":.1}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0)),this.dispatchEvent(new Event("ready"))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${t}\n    `)}}var i={register:(e="l-zoomies")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
+import e from"../lib/LdrsBaseElement.js";var t=':host{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-stroke);justify-content:center;width:var(--uib-size)}:host([hidden]){display:none}.container{align-items:center;border-radius:calc(var(--uib-stroke)/2);display:flex;height:var(--uib-stroke);justify-content:center;overflow:hidden;position:relative;transform:translateZ(0);width:var(--uib-size)}.container:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.container:after,.container:before{background-color:var(--uib-color);content:"";height:100%;transition:background-color .3s ease;width:100%}.container:after{animation:zoom var(--uib-speed) ease-in-out infinite;border-radius:calc(var(--uib-stroke)/2);transform:translateX(-100%)}@keyframes zoom{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}';class s extends e{_attributes=["size","color","speed","stroke","bg-opacity"];size;color;speed;stroke;"bg-opacity";static get observedAttributes(){return["size","color","speed","stroke","bg-opacity"]}constructor(){super(),this.storePropsToUpgrade(this._attributes),this.reflect(this._attributes)}connectedCallback(){this.upgradeStoredProps(),this.applyDefaultProps({size:80,color:"black",speed:1.4,stroke:5,"bg-opacity":.1}),this.template.innerHTML=`\n      <div class="container"></div>\n      <style>\n        :host{\n          --uib-size: ${this.size}px;\n          --uib-color: ${this.color};\n          --uib-speed: ${this.speed}s;\n          --uib-stroke: ${this.stroke}px;\n          --uib-bg-opacity: ${this["bg-opacity"]};\n        }\n        ${t}\n      </style>\n    `,this.shadow.replaceChildren(this.template.content.cloneNode(!0))}attributeChangedCallback(){const e=this.shadow.querySelector("style");e&&(e.innerHTML=`\n      :host{\n        --uib-size: ${this.size}px;\n        --uib-color: ${this.color};\n        --uib-speed: ${this.speed}s;\n        --uib-stroke: ${this.stroke}px;\n        --uib-bg-opacity: ${this["bg-opacity"]};\n      }\n      ${t}\n    `)}}var i={register:(e="l-zoomies")=>{customElements.get(e)||customElements.define(e,class extends s{})},element:s};export{i as default};
 //# sourceMappingURL=zoomies.js.map

dist/lib/LdrsBaseElement.d.ts

@@ -6,2 +6,3 @@ export default class LdrsBaseElement extends HTMLElement {
     defaultProps: object;
+    isAttached: boolean;
     constructor();
@@ -8,0 +9,0 @@ storePropsToUpgrade(props: string[]): void;

dist/lib/LdrsBaseElement.js

@@ -1,2 +0,2 @@
-class t extends HTMLElement{_propsToUpgrade={};shadow;template;defaultProps;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.template=document.createElement("template")}storePropsToUpgrade(t){t.forEach((t=>{this.hasOwnProperty(t)&&void 0!==this[t]&&(this._propsToUpgrade[t]=this[t],delete this[t])}))}upgradeStoredProps(){Object.entries(this._propsToUpgrade).forEach((([t,e])=>{this.setAttribute(t,e)}))}reflect(t){t.forEach((t=>{Object.defineProperty(this,t,{set(e){"string,number".includes(typeof e)?this.setAttribute(t,e.toString()):this.removeAttribute(t)},get(){return this.getAttribute(t)}})}))}applyDefaultProps(t){this.defaultProps=t,Object.entries(t).forEach((([t,e])=>{this[t]=this[t]||e.toString()}))}}export{t as default};
+class t extends HTMLElement{_propsToUpgrade={};shadow;template;defaultProps;isAttached=!1;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.template=document.createElement("template")}storePropsToUpgrade(t){t.forEach((t=>{this.hasOwnProperty(t)&&void 0!==this[t]&&(this._propsToUpgrade[t]=this[t],delete this[t])}))}upgradeStoredProps(){Object.entries(this._propsToUpgrade).forEach((([t,e])=>{this.setAttribute(t,e)}))}reflect(t){t.forEach((t=>{Object.defineProperty(this,t,{set(e){"string,number".includes(typeof e)?this.setAttribute(t,e.toString()):this.removeAttribute(t)},get(){return this.getAttribute(t)}})}))}applyDefaultProps(t){this.defaultProps=t,Object.entries(t).forEach((([t,e])=>{this[t]=this[t]||e.toString()}))}}export{t as default};
 //# sourceMappingURL=LdrsBaseElement.js.map

package.json

 {
   "name": "ldrs",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "author": "Griffin Johnston",
@@ -53,3 +53,2 @@ "license": "MIT",
     "@rollup/plugin-terser": "^0.4.4",
-    "change-case": "^5.0.2",
     "cpy": "^10.1.0",
@@ -59,4 +58,2 @@ "eslint": "^8.51.0",
     "http-server": "^14.1.1",
-    "jsdom": "^22.1.0",
-    "npx": "^10.2.2",
     "postcss": "^8.4.31",
@@ -63,0 +60,0 @@ "prettier": "3.0.3",

readme.md

 <div align="center">
-  <a href="https://uiball.com/ldrs"><img src="thumbnail.png" alt="U-I Ball LDRS" 
-  width="100%"
-  height="auto"></a>
+  <a href="https://uiball.com/ldrs">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="thumbnail-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="thumbnail-light.png">
+      <img src="thumbnail-dark.png" alt="U-I Ball LDRS" 
+      width="100%"
+      height="auto">
+    </picture>
+  </a>
 </div>
@@ -9,3 +15,3 @@
 
-Lightweight loaders & spinners for your next web project. The successor to @uiball/loaders. Rebuilt from the ground up with Typescript and Web Components. Plus 20 new loaders for good measure.
+Lightweight loaders & spinners for your next web project. The successor to @uiball/loaders. Rebuilt from the ground up using Typescript and web components, with 20 new loaders added for good measure.
 
@@ -16,3 +22,4 @@ - **44 types 🎨** : Unique enough to be interesting; simple enough to use in real-world projects
 - **Tiny 🐭** : No frameworks. No bloat. Dues-paying member of the iddy biddy bundle committee
-- **Typed 🇹** : No one likes a red underline
+- **Vanilla 🍦** : Just want the HTML & CSS? No worries. Just select a loader on [the website](https://uiball.com/ldrs) and go to `Source` -> `Raw`
+- **Typed 🇹** : No one likes a squiggly red underline
 - **No gifs 🎥** : Built with HTML, CSS and some lightweight SVG
@@ -41,4 +48,28 @@ - **Zero dependencies 🔗** : Zero worries
 
+LDRS is built using web components ([here's why](/why-web-components.md)). Web components need to be registered or "defined" to work. Until registration they're just empty HTML elements that don't do anything. For convenience, LDRS come in two varieties: auto-defining and manually defined. Auto-defining elements are released as individual .js files that register themselves on import. Manually defined elements are named exports that come with a `register()` method.
+
+```js
+// Auto-defining
+import 'ldrs/ring'
+
+// Manually defined
+import { ring } from 'ldrs'
+ring.register()
+```
+
+You can rename your loader by passing a string to the `register()` method. Note that custom element names must contain a dash `-`.
+
+```js
+import { ring } from 'ldrs'
+ring.register('my-precious')
+```
+
+```html
+<my-precious color="black"></my-precious>
+```
+
+Here's a very simple example of using an auto-defining loader in a client-rendered React SPA:
+
 ```jsx
-import { waveform } from 'ldrs'
+import 'ldrs/helix'
 
@@ -48,3 +79,3 @@ export default function PageSection({ isLoading }) {
     <div aria-live="polite" aria-busy={isLoading}>
-      {isLoading && <l-waveform></l-waveform>}
+      {isLoading && <l-helix></l-helix>}
     </div>
@@ -55,20 +86,15 @@ )
 
-## SSR
+## Frameworks
 
-Currently the one big drawback of web components is that they generally aren't compatible with server-side rendering (yet). That's why I think they are best used for "leaf" components at the moment. These loaders are a perfect example - they are a small, discrete bit of UI that contain no descendents. All this means is that you don't want to call .register() import the auto-registering version
+LDRS can only be run in a client-side environment, so they need to be excluded from SSR and SSG.
 
-## Platform Support
+[📖 Next.js guide →](/framework-guides.md#nextjs)  
+[📖 Astro guide →](/framework-guides.md#astro)  
+[📖 Remix guide →](/framework-guides.md#remix)  
+[📖 Gatsby guide →](/framework-guides.md#gatsby)
 
-This is a pure ESM library, so no `require()`-ing from CommonJS. It makes use of CSS custom properties (CSS variables) and keyframe animations, which work great in all modern browsers. Internet Explorer is not supported, however.
+## Where are the old React Components?
 
-**Next.js** versions less than 12 don't transpile ESM modules by default and will throw an error. If you are using Next v11.1, you can add support with an [experimental flag](https://nextjs.org/blog/next-11-1#es-modules-support). Otherwise you can add support with this package: https://www.npmjs.com/package/next-transpile-modules.
+They will continue to live on [npm](npmjs.com/package/@uiball/loaders), but are no longer maintained. That being said, switching to LDRS is pretty darn easy, and many of the loaders themselves have been improved. Give it a go, I dare you. I double dog dare you.
 
-**Remix** requires an additional step to import pure ESM packages. See https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages.
-
-TL;DR — add the following code to remix.config.js:
-
-```
-module.exports = { serverDependenciesToBundle: ["ldrs"] };
-```
-
 ## Options
@@ -75,0 +101,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

14

decreased by-17.65%

Number of lines in readme file

142

increased by22.41%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

341580

decreased by-1.37%

Lines of code

1955

decreased by-0.2%

No dependency changes