loading-state-zoo 0.1.2 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +111 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -3
- package/dist/index.d.ts +15 -3
- package/dist/index.js +111 -30
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +111 -30
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +59 -1
- package/dist/react.d.ts +59 -1
- package/dist/react.js +111 -30
- package/dist/react.js.map +1 -1
- package/dist/theme.css +142 -0
- package/docs/components.json +119 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var Ae=i=>{throw TypeError(i)};var Te=(i,a,r)=>a.has(i)||Ae("Cannot "+r);var we=(i,a,r)=>(Te(i,a,"read from private field"),r?r.call(i):a.get(i)),ye=(i,a,r)=>a.has(i)?Ae("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(i):a.set(i,r),ke=(i,a,r,s)=>(Te(i,a,"write to private field"),s?s.call(i,r):a.set(i,r),r);var Ee=`
|
|
2
2
|
@keyframes lz-spin { to { transform: rotate(360deg); } }
|
|
3
3
|
@keyframes lz-spin-reverse { to { transform: rotate(-360deg); } }
|
|
4
4
|
@keyframes lz-dot-bounce {
|
|
@@ -59,7 +59,12 @@ var ce=t=>{throw TypeError(t)};var pe=(t,s,r)=>s.has(t)||ce("Cannot "+r);var fe=
|
|
|
59
59
|
50% { transform: scale(1); opacity: 1; }
|
|
60
60
|
100% { transform: scale(var(--lz-grid-min, 0.3)); opacity: var(--lz-grid-fade, 0.15); }
|
|
61
61
|
}
|
|
62
|
-
|
|
62
|
+
@keyframes lz-ellipsis-dot {
|
|
63
|
+
0%, 20% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }
|
|
64
|
+
40%, 80% { opacity: 1; transform: scale(1); }
|
|
65
|
+
100% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }
|
|
66
|
+
}
|
|
67
|
+
`,J=`
|
|
63
68
|
:host {
|
|
64
69
|
display: inline-flex;
|
|
65
70
|
font-size: var(--lz-size, 44px);
|
|
@@ -68,9 +73,9 @@ var ce=t=>{throw TypeError(t)};var pe=(t,s,r)=>s.has(t)||ce("Cannot "+r);var fe=
|
|
|
68
73
|
.lz-root {
|
|
69
74
|
display: contents;
|
|
70
75
|
}
|
|
71
|
-
${
|
|
72
|
-
`;var
|
|
73
|
-
${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".lz-root"),
|
|
76
|
+
${Ee}
|
|
77
|
+
`;var Re=typeof HTMLElement<"u",Ge=Re?HTMLElement:class{},d,e=class extends Ge{constructor(){super(...arguments);ye(this,d,!1)}connectedCallback(){let r=this.shadowRoot??this.attachShadow({mode:"open"});r.innerHTML=`<style>${J}
|
|
78
|
+
${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".lz-root"),ke(this,d,!0),this.paint()}attributeChangedCallback(){we(this,d)&&this.paint()}paint(){this.sync();let r=this._rootEl;r&&(r.innerHTML=this.template())}num(r,s){let l=this.getAttribute(r);if(l===null||l==="")return s;let o=Number(l);return Number.isFinite(o)?o:s}varPx(r,s,l){let o=this.getAttribute(s);o!==null&&o!==""&&Number.isFinite(Number(o))?this.style.setProperty(r,`${Number(o)}px`):this.style.removeProperty(r)}varNum(r,s,l){let o=this.getAttribute(s);o!==null&&o!==""&&Number.isFinite(Number(o))?this.style.setProperty(r,String(Number(o))):this.style.removeProperty(r)}varRaw(r,s,l){let o=this.getAttribute(s);o!==null&&o!==""?this.style.setProperty(r,o):this.style.removeProperty(r)}};d=new WeakMap,e.observedAttributes=[];function t(i,a){typeof customElements>"u"||customElements.get(i)||customElements.define(i,a)}var ee="lz-bouncing-dots",c=class extends e{constructor(){super(...arguments);this.css=`
|
|
74
79
|
:host { font-size: var(--lz-size, 8px); }
|
|
75
80
|
.lz-dots { display: flex; gap: 0.7em; }
|
|
76
81
|
.lz-dot {
|
|
@@ -80,7 +85,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
80
85
|
}
|
|
81
86
|
.lz-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
82
87
|
.lz-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
83
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
88
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};c.observedAttributes=["size","color","speed"];function p(){t(ee,c)}var te="lz-typing-dots",f=class extends e{constructor(){super(...arguments);this.css=`
|
|
84
89
|
:host { font-size: var(--lz-size, 8px); }
|
|
85
90
|
.lz-dots { display: flex; gap: 0.8em; }
|
|
86
91
|
.lz-dot {
|
|
@@ -90,7 +95,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
90
95
|
}
|
|
91
96
|
.lz-dot:nth-child(2) { animation-delay: -0.18s; }
|
|
92
97
|
.lz-dot:nth-child(3) { animation-delay: -0.36s; }
|
|
93
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
98
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};f.observedAttributes=["size","color","speed"];function z(){t(te,f)}var re="lz-wave-dots",m=class extends e{constructor(){super(...arguments);this.css=`
|
|
94
99
|
:host { font-size: var(--lz-size, 8px); }
|
|
95
100
|
.lz-dots { display: flex; gap: 0.6em; }
|
|
96
101
|
.lz-dot {
|
|
@@ -101,7 +106,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
101
106
|
.lz-dot:nth-child(2) { animation-delay: -0.1s; }
|
|
102
107
|
.lz-dot:nth-child(3) { animation-delay: -0.2s; }
|
|
103
108
|
.lz-dot:nth-child(4) { animation-delay: -0.3s; }
|
|
104
|
-
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
109
|
+
`}template(){return'<div class="lz-dots" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};m.observedAttributes=["size","color","speed"];function h(){t(re,m)}var ie="lz-helix-dots",Pe=1.4,v=class extends e{constructor(){super(...arguments);this.css=`
|
|
105
110
|
:host { font-size: var(--lz-size, 6px); }
|
|
106
111
|
.lz-dots { display: flex; gap: 0.9em; }
|
|
107
112
|
.lz-dot {
|
|
@@ -109,7 +114,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
109
114
|
background: var(--lz-color, #f5f5f7);
|
|
110
115
|
animation: lz-helix-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
111
116
|
}
|
|
112
|
-
`}template(){let r=Math.max(1,this.num("count",10)),
|
|
117
|
+
`}template(){let r=Math.max(1,this.num("count",10)),s='<div class="lz-dots" role="status" aria-label="Loading">';for(let l=0;l<r;l++)s+=`<span class="lz-dot" style="animation-delay:-${(Pe/r*l).toFixed(3)}s"></span>`;return`${s}</div>`}sync(){this.varPx("--lz-size","size",6),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};v.observedAttributes=["size","count","color","speed"];function u(){t(ie,v)}var ae="lz-dot-grid-wave",g=class extends e{constructor(){super(...arguments);this.css=`
|
|
113
118
|
:host { font-size: var(--lz-size, 6px); }
|
|
114
119
|
.lz-grid {
|
|
115
120
|
display: grid;
|
|
@@ -121,10 +126,10 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
121
126
|
background: var(--lz-color, #f5f5f7);
|
|
122
127
|
animation: lz-grid-dot-wave calc(1.2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
123
128
|
}
|
|
124
|
-
`}template(){let r=Math.max(1,this.num("rows",4)),
|
|
129
|
+
`}template(){let r=Math.max(1,this.num("rows",4)),s=Math.max(1,this.num("cols",5)),l='<div class="lz-grid" role="status" aria-label="Loading">';for(let o=0;o<r;o++)for(let n=0;n<s;n++)l+=`<span class="lz-dot" style="animation-delay:-${((o+n)*.08).toFixed(3)}s"></span>`;return`${l}</div>`}sync(){this.varPx("--lz-size","size",6),this.varNum("--lz-cols","cols",5),this.varPx("--lz-grid-gap","gap",12),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};g.observedAttributes=["rows","cols","size","gap","color","speed"];function b(){t(ae,g)}var se="lz-arc-spinner",Le=`
|
|
125
130
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
126
131
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
127
|
-
`,
|
|
132
|
+
`,x=class extends e{constructor(){super(...arguments);this.css=`
|
|
128
133
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; }
|
|
129
134
|
.lz-ring {
|
|
130
135
|
width: 100%; height: 100%; border-radius: 50%;
|
|
@@ -134,28 +139,28 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
134
139
|
var(--lz-color, #f5f5f7) 110deg,
|
|
135
140
|
transparent 111deg
|
|
136
141
|
);
|
|
137
|
-
${
|
|
142
|
+
${Le}
|
|
138
143
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
139
144
|
}
|
|
140
|
-
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
145
|
+
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};x.observedAttributes=["size","stroke-width","color","speed"];function _(){t(se,x)}var oe="lz-material-double-arc",Ne=`
|
|
141
146
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
142
147
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
143
|
-
`,
|
|
148
|
+
`,A="var(--lz-color-weak, color-mix(in srgb, var(--lz-color, #f5f5f7) 95%, transparent))",T=class extends e{constructor(){super(...arguments);this.css=`
|
|
144
149
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
145
150
|
.lz-arc {
|
|
146
151
|
position: absolute; inset: 0; border-radius: 50%;
|
|
147
|
-
${
|
|
152
|
+
${Ne}
|
|
148
153
|
}
|
|
149
154
|
.lz-arc-a {
|
|
150
|
-
background: conic-gradient(from 0deg, ${
|
|
155
|
+
background: conic-gradient(from 0deg, ${A} 0deg, ${A} 135deg, transparent 136deg);
|
|
151
156
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
152
157
|
}
|
|
153
158
|
.lz-arc-b {
|
|
154
159
|
opacity: 0.6;
|
|
155
|
-
background: conic-gradient(from 200deg, ${
|
|
160
|
+
background: conic-gradient(from 200deg, ${A} 0deg, ${A} 90deg, transparent 91deg);
|
|
156
161
|
animation: lz-spin-reverse calc(2.4s * var(--lz-speed, 1)) linear infinite;
|
|
157
162
|
}
|
|
158
|
-
`}template(){return'<div class="lz-arc lz-arc-a" role="status" aria-label="Loading"></div><div class="lz-arc lz-arc-b"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};
|
|
163
|
+
`}template(){return'<div class="lz-arc lz-arc-a" role="status" aria-label="Loading"></div><div class="lz-arc lz-arc-b"></div>'}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};T.observedAttributes=["size","stroke-width","color","speed"];function w(){t(oe,T)}var le="lz-scan-sweep",y=class extends e{constructor(){super(...arguments);this.css=`
|
|
159
164
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
160
165
|
.lz-ring {
|
|
161
166
|
position: absolute; inset: 0; border-radius: 50%;
|
|
@@ -182,7 +187,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
182
187
|
mask: radial-gradient(closest-side, #000 100%);
|
|
183
188
|
animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
|
|
184
189
|
}
|
|
185
|
-
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div><div class="lz-ring-inner"></div><div class="lz-core"></div><div class="lz-sweep"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varRaw("--lz-color-sweep","color-sweep"),this.varNum("--lz-speed","speed",1)}};y.observedAttributes=["size","color","speed"];function
|
|
190
|
+
`}template(){return'<div class="lz-ring" role="status" aria-label="Loading"></div><div class="lz-ring-inner"></div><div class="lz-core"></div><div class="lz-sweep"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varRaw("--lz-color-sweep","color-sweep"),this.varNum("--lz-speed","speed",1)}};y.observedAttributes=["size","color","speed"];function k(){t(le,y)}var ne="lz-orbit-dots",E=class extends e{constructor(){super(...arguments);this.css=`
|
|
186
191
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
187
192
|
.lz-orbit {
|
|
188
193
|
position: absolute; inset: 0;
|
|
@@ -197,7 +202,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
197
202
|
.lz-dot:nth-child(1) { transform: rotate(0deg) translateY(-0.36em); }
|
|
198
203
|
.lz-dot:nth-child(2) { transform: rotate(120deg) translateY(-0.36em); }
|
|
199
204
|
.lz-dot:nth-child(3) { transform: rotate(240deg) translateY(-0.36em); }
|
|
200
|
-
`}template(){return'<div class="lz-orbit" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};E.observedAttributes=["size","color","speed"];function
|
|
205
|
+
`}template(){return'<div class="lz-orbit" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-color-weak","color-weak"),this.varNum("--lz-speed","speed",1)}};E.observedAttributes=["size","color","speed"];function S(){t(ne,E)}var de="lz-orbit-ring-dots",Se=8,R=class extends e{constructor(){super(...arguments);this.css=`
|
|
201
206
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
202
207
|
.lz-orbit { position: absolute; inset: 0; }
|
|
203
208
|
.lz-dot {
|
|
@@ -208,7 +213,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
208
213
|
background: var(--lz-color, #f5f5f7);
|
|
209
214
|
animation: lz-orbit-ring-dot calc(1.2s * var(--lz-speed, 1)) linear infinite;
|
|
210
215
|
}
|
|
211
|
-
`}template(){let r='<div class="lz-orbit" role="status" aria-label="Loading">';for(let
|
|
216
|
+
`}template(){let r='<div class="lz-orbit" role="status" aria-label="Loading">';for(let s=0;s<Se;s++){let l=360/Se*s;r+=`<span class="lz-dot" style="transform:rotate(${l}deg) translateY(calc(-0.5em + (var(--lz-dot-size, 0.18em) / 2)));animation-delay:-${(s*.15).toFixed(2)}s"></span>`}return`${r}</div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-dot-size","dot-size",7.92),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};R.observedAttributes=["size","dot-size","color","speed"];function G(){t(de,R)}var ce="lz-eyes",P=class extends e{constructor(){super(...arguments);this.css=`
|
|
212
217
|
:host { font-size: var(--lz-size, 44px); }
|
|
213
218
|
.lz-eyes { display: flex; gap: 0.24em; }
|
|
214
219
|
.lz-eye {
|
|
@@ -222,7 +227,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
222
227
|
background: var(--lz-pupil, rgba(0, 0, 0, 0.85));
|
|
223
228
|
animation: lz-eye-gaze calc(1.6s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
224
229
|
}
|
|
225
|
-
`}template(){return'<div class="lz-eyes" role="status" aria-label="Loading"><div class="lz-eye"><span class="lz-pupil"></span></div><div class="lz-eye"><span class="lz-pupil"></span></div></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-pupil","pupil"),this.varNum("--lz-speed","speed",1)}};
|
|
230
|
+
`}template(){return'<div class="lz-eyes" role="status" aria-label="Loading"><div class="lz-eye"><span class="lz-pupil"></span></div><div class="lz-eye"><span class="lz-pupil"></span></div></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-pupil","pupil"),this.varNum("--lz-speed","speed",1)}};P.observedAttributes=["size","color","speed"];function L(){t(ce,P)}var pe="lz-morphing-square",N=class extends e{constructor(){super(...arguments);this.css=`
|
|
226
231
|
:host {
|
|
227
232
|
font-size: var(--lz-size, 44px);
|
|
228
233
|
width: 1em; height: 1em;
|
|
@@ -230,14 +235,14 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
230
235
|
box-shadow: 0 0 calc(0.41 * var(--lz-size, 44px)) var(--lz-glow, color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent));
|
|
231
236
|
animation: lz-shape-morph calc(2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
232
237
|
}
|
|
233
|
-
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-glow","glow"),this.varNum("--lz-speed","speed",1)}};N.observedAttributes=["size","accent","speed"];function I(){
|
|
238
|
+
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-glow","glow"),this.varNum("--lz-speed","speed",1)}};N.observedAttributes=["size","accent","speed"];function I(){t(pe,N)}var fe="lz-breathing-pulse",O=class extends e{constructor(){super(...arguments);this.css=`
|
|
234
239
|
:host {
|
|
235
240
|
font-size: var(--lz-size, 36px);
|
|
236
241
|
width: 1em; height: 1em; border-radius: 50%;
|
|
237
242
|
background: var(--lz-color, #f5f5f7);
|
|
238
243
|
animation: lz-pulse-breath calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
239
244
|
}
|
|
240
|
-
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",36),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};O.observedAttributes=["size","color","speed"];function D(){
|
|
245
|
+
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",36),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};O.observedAttributes=["size","color","speed"];function D(){t(fe,O)}var ze="lz-equalizer",M=class extends e{constructor(){super(...arguments);this.css=`
|
|
241
246
|
:host { font-size: var(--lz-size, 22px); }
|
|
242
247
|
.lz-eq { display: flex; align-items: flex-end; gap: var(--lz-gap, 3px); }
|
|
243
248
|
.lz-bar {
|
|
@@ -250,12 +255,12 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
250
255
|
.lz-bar:nth-child(2) { animation-delay: 0.12s; }
|
|
251
256
|
.lz-bar:nth-child(3) { animation-delay: 0.24s; }
|
|
252
257
|
.lz-bar:nth-child(4) { animation-delay: 0.36s; }
|
|
253
|
-
`}template(){return'<div class="lz-eq" role="status" aria-label="Loading"><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span></div>'}sync(){this.varPx("--lz-size","size",22),this.varPx("--lz-bar-width","bar-width",3),this.varPx("--lz-gap","gap",3),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};
|
|
258
|
+
`}template(){return'<div class="lz-eq" role="status" aria-label="Loading"><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span><span class="lz-bar"></span></div>'}sync(){this.varPx("--lz-size","size",22),this.varPx("--lz-bar-width","bar-width",3),this.varPx("--lz-gap","gap",3),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};M.observedAttributes=["size","bar-width","gap","color","speed"];function B(){t(ze,M)}var me="lz-progress-ring",Ie=`
|
|
254
259
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
255
260
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
256
|
-
`,
|
|
261
|
+
`,C=class extends e{constructor(){super(...arguments);this.css=`
|
|
257
262
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
258
|
-
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${
|
|
263
|
+
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${Ie} }
|
|
259
264
|
.lz-track {
|
|
260
265
|
background: conic-gradient(var(--lz-track, rgba(255, 255, 255, 0.15)) 0deg, var(--lz-track, rgba(255, 255, 255, 0.15)) 360deg);
|
|
261
266
|
}
|
|
@@ -263,7 +268,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
263
268
|
background: conic-gradient(var(--lz-color, #f5f5f7) calc(var(--lz-percent, 0) * 3.6deg), transparent 0deg);
|
|
264
269
|
transition: background 0.2s ease;
|
|
265
270
|
}
|
|
266
|
-
`}template(){return`<div class="lz-ring lz-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.max(0,Math.min(100,this.num("percent",0)))}"></div><div class="lz-ring lz-fill"></div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color"),this.varNum("--lz-speed","speed",1),this.varNum("--lz-percent","percent",0)}};
|
|
271
|
+
`}template(){return`<div class="lz-ring lz-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.max(0,Math.min(100,this.num("percent",0)))}"></div><div class="lz-ring lz-fill"></div>`}sync(){this.varPx("--lz-size","size",44),this.varPx("--lz-stroke","stroke-width",4),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color"),this.varNum("--lz-speed","speed",1),this.varNum("--lz-percent","percent",0)}};C.observedAttributes=["size","stroke-width","percent","color","track-color","speed"];function H(){t(me,C)}var he="lz-indeterminate-progress-bar",Y=class extends e{constructor(){super(...arguments);this.css=`
|
|
267
272
|
:host {
|
|
268
273
|
position: relative; display: inline-block;
|
|
269
274
|
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
@@ -276,7 +281,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
276
281
|
background: var(--lz-accent, #0a84ff);
|
|
277
282
|
animation: lz-indeterminate-slide calc(1.6s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
278
283
|
}
|
|
279
|
-
`}template(){return'<div class="lz-bar" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};
|
|
284
|
+
`}template(){return'<div class="lz-bar" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};Y.observedAttributes=["width","height","accent","track-color","speed"];function Z(){t(he,Y)}var ve="lz-skeleton-shimmer",$=class extends e{constructor(){super(...arguments);this.css=`
|
|
280
285
|
:host {
|
|
281
286
|
position: relative; display: inline-block;
|
|
282
287
|
width: var(--lz-width, 120px); height: var(--lz-height, 28px);
|
|
@@ -288,5 +293,81 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
288
293
|
background: linear-gradient(to right, transparent, var(--lz-sheen, rgba(255, 255, 255, 0.1)), transparent);
|
|
289
294
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
290
295
|
}
|
|
291
|
-
`}template(){return'<div class="lz-sheen" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",120),this.varPx("--lz-height","height",28),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varRaw("--lz-sheen","sheen"),this.varNum("--lz-speed","speed",1)}}
|
|
296
|
+
`}template(){return'<div class="lz-sheen" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-width","width",120),this.varPx("--lz-height","height",28),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varRaw("--lz-sheen","sheen"),this.varNum("--lz-speed","speed",1)}};$.observedAttributes=["width","height","track-color","speed"];function U(){t(ve,$)}var ue="lz-ellipsis",W=class extends e{constructor(){super(...arguments);this.css=`
|
|
297
|
+
:host {
|
|
298
|
+
display: inline-flex; gap: 0.2em; align-items: center;
|
|
299
|
+
font-size: var(--lz-size, 8px); line-height: 1;
|
|
300
|
+
}
|
|
301
|
+
.lz-dot {
|
|
302
|
+
width: 1em; height: 1em; border-radius: 50%;
|
|
303
|
+
background: var(--lz-color, #f5f5f7);
|
|
304
|
+
animation: lz-ellipsis-dot calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
305
|
+
}
|
|
306
|
+
.lz-dot:nth-child(2) { animation-delay: -0.45s; }
|
|
307
|
+
.lz-dot:nth-child(3) { animation-delay: -0.9s; }
|
|
308
|
+
`}template(){return'<span class="lz-dot" role="status" aria-label="Loading"></span><span class="lz-dot"></span><span class="lz-dot"></span>'}sync(){this.varPx("--lz-size","size",8),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};W.observedAttributes=["size","color","speed"];function K(){t(ue,W)}var ge="lz-progress-bar",q=class extends e{constructor(){super(...arguments);this.css=`
|
|
309
|
+
:host {
|
|
310
|
+
display: inline-block; position: relative;
|
|
311
|
+
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
312
|
+
border-radius: calc(var(--lz-height, 6px) / 2);
|
|
313
|
+
overflow: hidden;
|
|
314
|
+
background: var(--lz-track, rgba(255,255,255,0.15));
|
|
315
|
+
}
|
|
316
|
+
.lz-fill {
|
|
317
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
|
|
318
|
+
transform-origin: left;
|
|
319
|
+
background: var(--lz-color, #f5f5f7);
|
|
320
|
+
border-radius: inherit;
|
|
321
|
+
}
|
|
322
|
+
`}template(){return'<div class="lz-fill"></div>'}sync(){this.varPx("--lz-width","width",160),this.varPx("--lz-height","height",6),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-track","track-color","rgba(255,255,255,0.15)"),this.varNum("--lz-speed","speed",1);let r=Math.max(0,Math.min(100,this.num("percent",0)));this.style.setProperty("--lz-percent",`${r}`);let s=this.shadowRoot?.querySelector(".lz-fill");s&&(s.style.transform=`scaleX(${r/100})`),this.setAttribute("aria-valuenow",String(r))}};q.observedAttributes=["width","height","percent","color","track-color","speed"];function X(){t(ge,q)}var be="lz-skeleton-card",F=class extends e{constructor(){super(...arguments);this.css=`
|
|
323
|
+
:host {
|
|
324
|
+
position: relative; display: inline-block;
|
|
325
|
+
width: var(--lz-width, 200px); height: var(--lz-height, 64px);
|
|
326
|
+
border-radius: var(--lz-radius, 10px); overflow: hidden;
|
|
327
|
+
background: var(--lz-surface, #1c1c1e);
|
|
328
|
+
}
|
|
329
|
+
.lz-card-row {
|
|
330
|
+
display: flex; gap: 10px; padding: 12px;
|
|
331
|
+
}
|
|
332
|
+
.lz-avatar {
|
|
333
|
+
width: 40px; height: 40px; border-radius: 50%;
|
|
334
|
+
background: rgba(255,255,255,0.08); flex-shrink: 0;
|
|
335
|
+
}
|
|
336
|
+
.lz-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
|
|
337
|
+
.lz-line {
|
|
338
|
+
height: 8px; border-radius: 4px;
|
|
339
|
+
background: rgba(255,255,255,0.08);
|
|
340
|
+
}
|
|
341
|
+
.lz-line-short { width: 60%; }
|
|
342
|
+
.lz-sheen {
|
|
343
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
|
|
344
|
+
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
345
|
+
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
346
|
+
}
|
|
347
|
+
`}template(){return'<div class="lz-card-row" role="status" aria-label="Loading"><div class="lz-avatar"></div><div class="lz-lines"><div class="lz-line"></div><div class="lz-line lz-line-short"></div><div class="lz-line" style="width:80%"></div></div></div><div class="lz-sheen"></div>'}sync(){this.varPx("--lz-width","width",200),this.varPx("--lz-height","height",64),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};F.observedAttributes=["width","height","track-color","speed"];function Q(){t(be,F)}var xe="lz-skeleton-list",V=class extends e{constructor(){super(...arguments);this.css=`
|
|
348
|
+
:host {
|
|
349
|
+
position: relative; display: block;
|
|
350
|
+
width: var(--lz-width, 180px);
|
|
351
|
+
border-radius: var(--lz-radius, 10px); overflow: hidden;
|
|
352
|
+
background: var(--lz-surface, #1c1c1e);
|
|
353
|
+
}
|
|
354
|
+
.lz-list-row {
|
|
355
|
+
display: flex; align-items: center; gap: 8px;
|
|
356
|
+
padding: 8px 12px;
|
|
357
|
+
}
|
|
358
|
+
.lz-list-avatar {
|
|
359
|
+
width: 28px; height: 28px; border-radius: 50%;
|
|
360
|
+
background: rgba(255,255,255,0.08); flex-shrink: 0;
|
|
361
|
+
}
|
|
362
|
+
.lz-list-line {
|
|
363
|
+
height: 8px; border-radius: 4px;
|
|
364
|
+
background: rgba(255,255,255,0.08); flex: 1;
|
|
365
|
+
}
|
|
366
|
+
.lz-list-line-fixed { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); }
|
|
367
|
+
.lz-sheen {
|
|
368
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
|
|
369
|
+
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
370
|
+
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
371
|
+
}
|
|
372
|
+
`}template(){let r=Math.max(1,Math.min(8,this.num("rows",4))),s=["100%","85%","92%","68%","95%","78%","88%","72%"],l='<div role="status" aria-label="Loading">';for(let o=0;o<r;o++){let n=s[o%s.length];l+=`<div class="lz-list-row"><div class="lz-list-avatar"></div><div class="lz-list-line" style="width:${n}"></div></div>`}return`${l}</div><div class="lz-sheen"></div>`}sync(){this.varPx("--lz-width","width",180),this.varRaw("--lz-surface","track-color","#1c1c1e"),this.varNum("--lz-speed","speed",1)}};V.observedAttributes=["width","rows","track-color","speed"];function j(){t(xe,V)}function _e(){p(),z(),h(),u(),b(),_(),w(),k(),S(),G(),L(),I(),D(),B(),H(),Z(),U(),K(),X(),Q(),j()}_e();export{se as ARC_SPINNER_TAG,ee as BOUNCING_DOTS_TAG,fe as BREATHING_PULSE_TAG,ae as DOT_GRID_WAVE_TAG,ue as ELLIPSIS_TAG,ze as EQUALIZER_TAG,ce as EYES_TAG,ie as HELIX_DOTS_TAG,he as INDETERMINATE_PROGRESS_BAR_TAG,Ee as KEYFRAMES,e as LZPattern,oe as MATERIAL_DOUBLE_ARC_TAG,pe as MORPHING_SQUARE_TAG,ne as ORBIT_DOTS_TAG,de as ORBIT_RING_DOTS_TAG,ge as PROGRESS_BAR_TAG,me as PROGRESS_RING_TAG,le as SCAN_SWEEP_TAG,J as SCOPED_CSS,be as SKELETON_CARD_TAG,xe as SKELETON_LIST_TAG,ve as SKELETON_SHIMMER_TAG,te as TYPING_DOTS_TAG,re as WAVE_DOTS_TAG,t as define,_e as defineAll,_ as defineArcSpinner,p as defineBouncingDots,D as defineBreathingPulse,b as defineDotGridWave,K as defineEllipsis,B as defineEqualizer,L as defineEyes,u as defineHelixDots,Z as defineIndeterminateProgressBar,w as defineMaterialDoubleArc,I as defineMorphingSquare,S as defineOrbitDots,G as defineOrbitRingDots,X as defineProgressBar,H as defineProgressRing,k as defineScanSweep,Q as defineSkeletonCard,j as defineSkeletonList,U as defineSkeletonShimmer,z as defineTypingDots,h as defineWaveDots};
|
|
292
373
|
//# sourceMappingURL=index.js.map
|