loading-state-zoo 0.2.0 → 0.3.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/README.md +276 -3
- package/dist/index.cjs +270 -34
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +36 -3
- package/dist/index.d.ts +36 -3
- package/dist/index.js +268 -32
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +267 -31
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +123 -1
- package/dist/react.d.ts +123 -1
- package/dist/react.js +267 -31
- package/dist/react.js.map +1 -1
- package/dist/theme.css +451 -0
- package/docs/AI.md +16 -8
- package/docs/components.json +297 -2
- package/package.json +2 -2
package/dist/react.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var K=t=>{throw TypeError(t)};var X=(t,r,e)=>r.has(t)||K("Cannot "+e);var F=(t,r,e)=>(X(t,r,"read from private field"),e?e.call(t):r.get(t)),Q=(t,r,e)=>r.has(t)?K("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(t):r.set(t,e),J=(t,r,e,s)=>(X(t,r,"write to private field"),s?s.call(t,e):r.set(t,e),e);var Ie=`
|
|
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 {
|
|
@@ -64,7 +64,44 @@ var D=e=>{throw TypeError(e)};var C=(e,r,t)=>r.has(e)||D("Cannot "+t);var Z=(e,r
|
|
|
64
64
|
40%, 80% { opacity: 1; transform: scale(1); }
|
|
65
65
|
100% { opacity: var(--lz-ellipsis-fade, 0.15); transform: scale(var(--lz-ellipsis-min, 0.8)); }
|
|
66
66
|
}
|
|
67
|
-
|
|
67
|
+
@keyframes lz-orb-breathe {
|
|
68
|
+
0%, 100% { transform: scale(1); opacity: 1; }
|
|
69
|
+
50% { transform: scale(var(--lz-orb-scale, 1.16)); opacity: var(--lz-orb-fade, 0.88); }
|
|
70
|
+
}
|
|
71
|
+
@keyframes lz-blob-morph {
|
|
72
|
+
0% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: rotate(0deg) scale(1); }
|
|
73
|
+
25% { border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%; transform: rotate(6deg) scale(1.06); }
|
|
74
|
+
50% { border-radius: 46% 54% 48% 52% / 48% 55% 45% 52%; transform: rotate(-5deg) scale(0.95); }
|
|
75
|
+
75% { border-radius: 55% 45% 52% 48% / 46% 52% 48% 55%; transform: rotate(3deg) scale(1.05); }
|
|
76
|
+
100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: rotate(0deg) scale(1); }
|
|
77
|
+
}
|
|
78
|
+
@keyframes lz-siri-sheen {
|
|
79
|
+
0% { transform: translate3d(-24%, -14%, 0) rotate(0deg); }
|
|
80
|
+
100% { transform: translate3d(24%, 14%, 0) rotate(360deg); }
|
|
81
|
+
}
|
|
82
|
+
@keyframes lz-dot-orb {
|
|
83
|
+
0%, 100% { opacity: var(--lz-orb-fade, 0.14); transform: scale(var(--lz-dot-min, 0.7)); }
|
|
84
|
+
50% { opacity: 1; transform: scale(1); }
|
|
85
|
+
}
|
|
86
|
+
@keyframes lz-waveform {
|
|
87
|
+
0%, 100% { transform: scaleY(var(--lz-wf-min, 0.22)); }
|
|
88
|
+
50% { transform: scaleY(1); }
|
|
89
|
+
}
|
|
90
|
+
@keyframes lz-sonar-ring {
|
|
91
|
+
0% { transform: scale(0.18); opacity: var(--lz-sonar-fade, 0.9); }
|
|
92
|
+
100% { transform: scale(1); opacity: 0; }
|
|
93
|
+
}
|
|
94
|
+
@keyframes lz-note-bob {
|
|
95
|
+
0%, 100% { transform: translateY(0); }
|
|
96
|
+
45% { transform: translateY(var(--lz-note-bob, 0.35em)); }
|
|
97
|
+
60% { transform: rotate(4deg) translateY(var(--lz-note-bob, 0.35em)); }
|
|
98
|
+
75% { transform: rotate(-4deg) translateY(var(--lz-note-bob, 0.35em)); }
|
|
99
|
+
}
|
|
100
|
+
@keyframes lz-needle-bob {
|
|
101
|
+
0%, 100% { transform: rotate(38deg); }
|
|
102
|
+
50% { transform: rotate(43deg); }
|
|
103
|
+
}
|
|
104
|
+
`,j=`
|
|
68
105
|
:host {
|
|
69
106
|
display: inline-flex;
|
|
70
107
|
font-size: var(--lz-size, 44px);
|
|
@@ -73,9 +110,9 @@ var D=e=>{throw TypeError(e)};var C=(e,r,t)=>r.has(e)||D("Cannot "+t);var Z=(e,r
|
|
|
73
110
|
.lz-root {
|
|
74
111
|
display: contents;
|
|
75
112
|
}
|
|
76
|
-
${
|
|
77
|
-
`;var
|
|
78
|
-
${this.css}</style><div class="lz-root"></div>`,this._rootEl=
|
|
113
|
+
${Ie}
|
|
114
|
+
`;var Me=typeof HTMLElement<"u",Ze=Me?HTMLElement:class{},z,o=class extends Ze{constructor(){super(...arguments);Q(this,z,!1)}connectedCallback(){let e=this.shadowRoot??this.attachShadow({mode:"open"});e.innerHTML=`<style>${j}
|
|
115
|
+
${this.css}</style><div class="lz-root"></div>`,this._rootEl=e.querySelector(".lz-root"),J(this,z,!0),this.paint()}attributeChangedCallback(){F(this,z)&&this.paint()}paint(){this.sync();let e=this._rootEl;e&&(e.innerHTML=this.template())}num(e,s){let i=this.getAttribute(e);if(i===null||i==="")return s;let a=Number(i);return Number.isFinite(a)?a:s}varPx(e,s,i){let a=this.getAttribute(s);a!==null&&a!==""&&Number.isFinite(Number(a))?this.style.setProperty(e,`${Number(a)}px`):this.style.removeProperty(e)}varNum(e,s,i){let a=this.getAttribute(s);a!==null&&a!==""&&Number.isFinite(Number(a))?this.style.setProperty(e,String(Number(a))):this.style.removeProperty(e)}varRaw(e,s,i){let a=this.getAttribute(s);a!==null&&a!==""?this.style.setProperty(e,a):this.style.removeProperty(e)}};z=new WeakMap,o.observedAttributes=[];function l(t,r){typeof customElements>"u"||customElements.get(t)||customElements.define(t,r)}var Ce="lz-bouncing-dots",f=class extends o{constructor(){super(...arguments);this.css=`
|
|
79
116
|
:host { font-size: var(--lz-size, 8px); }
|
|
80
117
|
.lz-dots { display: flex; gap: 0.7em; }
|
|
81
118
|
.lz-dot {
|
|
@@ -85,7 +122,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
85
122
|
}
|
|
86
123
|
.lz-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
87
124
|
.lz-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
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)}};f.observedAttributes=["size","color","speed"];function
|
|
125
|
+
`}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 ee(){l(Ce,f)}var De="lz-typing-dots",h=class extends o{constructor(){super(...arguments);this.css=`
|
|
89
126
|
:host { font-size: var(--lz-size, 8px); }
|
|
90
127
|
.lz-dots { display: flex; gap: 0.8em; }
|
|
91
128
|
.lz-dot {
|
|
@@ -95,7 +132,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
95
132
|
}
|
|
96
133
|
.lz-dot:nth-child(2) { animation-delay: -0.18s; }
|
|
97
134
|
.lz-dot:nth-child(3) { animation-delay: -0.36s; }
|
|
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)}};h.observedAttributes=["size","color","speed"];function
|
|
135
|
+
`}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)}};h.observedAttributes=["size","color","speed"];function te(){l(De,h)}var He="lz-wave-dots",u=class extends o{constructor(){super(...arguments);this.css=`
|
|
99
136
|
:host { font-size: var(--lz-size, 8px); }
|
|
100
137
|
.lz-dots { display: flex; gap: 0.6em; }
|
|
101
138
|
.lz-dot {
|
|
@@ -106,7 +143,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
106
143
|
.lz-dot:nth-child(2) { animation-delay: -0.1s; }
|
|
107
144
|
.lz-dot:nth-child(3) { animation-delay: -0.2s; }
|
|
108
145
|
.lz-dot:nth-child(4) { animation-delay: -0.3s; }
|
|
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)}};u.observedAttributes=["size","color","speed"];function
|
|
146
|
+
`}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)}};u.observedAttributes=["size","color","speed"];function re(){l(He,u)}var Be="lz-helix-dots",We=1.4,v=class extends o{constructor(){super(...arguments);this.css=`
|
|
110
147
|
:host { font-size: var(--lz-size, 6px); }
|
|
111
148
|
.lz-dots { display: flex; gap: 0.9em; }
|
|
112
149
|
.lz-dot {
|
|
@@ -114,7 +151,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
114
151
|
background: var(--lz-color, #f5f5f7);
|
|
115
152
|
animation: lz-helix-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
116
153
|
}
|
|
117
|
-
`}template(){let
|
|
154
|
+
`}template(){let e=Math.max(1,this.num("count",10)),s='<div class="lz-dots" role="status" aria-label="Loading">';for(let i=0;i<e;i++)s+=`<span class="lz-dot" style="animation-delay:-${(We/e*i).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 se(){l(Be,v)}var Ye="lz-dot-grid-wave",b=class extends o{constructor(){super(...arguments);this.css=`
|
|
118
155
|
:host { font-size: var(--lz-size, 6px); }
|
|
119
156
|
.lz-grid {
|
|
120
157
|
display: grid;
|
|
@@ -126,10 +163,10 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
126
163
|
background: var(--lz-color, #f5f5f7);
|
|
127
164
|
animation: lz-grid-dot-wave calc(1.2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
128
165
|
}
|
|
129
|
-
`}template(){let
|
|
166
|
+
`}template(){let e=Math.max(1,this.num("rows",4)),s=Math.max(1,this.num("cols",5)),i='<div class="lz-grid" role="status" aria-label="Loading">';for(let a=0;a<e;a++)for(let n=0;n<s;n++)i+=`<span class="lz-dot" style="animation-delay:-${((a+n)*.08).toFixed(3)}s"></span>`;return`${i}</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)}};b.observedAttributes=["rows","cols","size","gap","color","speed"];function ae(){l(Ye,b)}var $e="lz-arc-spinner",Ue=`
|
|
130
167
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
131
168
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
132
|
-
`,
|
|
169
|
+
`,g=class extends o{constructor(){super(...arguments);this.css=`
|
|
133
170
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; }
|
|
134
171
|
.lz-ring {
|
|
135
172
|
width: 100%; height: 100%; border-radius: 50%;
|
|
@@ -139,17 +176,17 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
139
176
|
var(--lz-color, #f5f5f7) 110deg,
|
|
140
177
|
transparent 111deg
|
|
141
178
|
);
|
|
142
|
-
${
|
|
179
|
+
${Ue}
|
|
143
180
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
144
181
|
}
|
|
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)}};
|
|
182
|
+
`}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)}};g.observedAttributes=["size","stroke-width","color","speed"];function ie(){l($e,g)}var Ve="lz-material-double-arc",qe=`
|
|
146
183
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
147
184
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
148
185
|
`,x="var(--lz-color-weak, color-mix(in srgb, var(--lz-color, #f5f5f7) 95%, transparent))",y=class extends o{constructor(){super(...arguments);this.css=`
|
|
149
186
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
150
187
|
.lz-arc {
|
|
151
188
|
position: absolute; inset: 0; border-radius: 50%;
|
|
152
|
-
${
|
|
189
|
+
${qe}
|
|
153
190
|
}
|
|
154
191
|
.lz-arc-a {
|
|
155
192
|
background: conic-gradient(from 0deg, ${x} 0deg, ${x} 135deg, transparent 136deg);
|
|
@@ -160,7 +197,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
160
197
|
background: conic-gradient(from 200deg, ${x} 0deg, ${x} 90deg, transparent 91deg);
|
|
161
198
|
animation: lz-spin-reverse calc(2.4s * var(--lz-speed, 1)) linear infinite;
|
|
162
199
|
}
|
|
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)}};y.observedAttributes=["size","stroke-width","color","speed"];function
|
|
200
|
+
`}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)}};y.observedAttributes=["size","stroke-width","color","speed"];function oe(){l(Ve,y)}var Ke="lz-scan-sweep",A=class extends o{constructor(){super(...arguments);this.css=`
|
|
164
201
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
165
202
|
.lz-ring {
|
|
166
203
|
position: absolute; inset: 0; border-radius: 50%;
|
|
@@ -187,7 +224,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
187
224
|
mask: radial-gradient(closest-side, #000 100%);
|
|
188
225
|
animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
|
|
189
226
|
}
|
|
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)}};A.observedAttributes=["size","color","speed"];function
|
|
227
|
+
`}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)}};A.observedAttributes=["size","color","speed"];function le(){l(Ke,A)}var Xe="lz-orbit-dots",T=class extends o{constructor(){super(...arguments);this.css=`
|
|
191
228
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
192
229
|
.lz-orbit {
|
|
193
230
|
position: absolute; inset: 0;
|
|
@@ -202,7 +239,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
202
239
|
.lz-dot:nth-child(1) { transform: rotate(0deg) translateY(-0.36em); }
|
|
203
240
|
.lz-dot:nth-child(2) { transform: rotate(120deg) translateY(-0.36em); }
|
|
204
241
|
.lz-dot:nth-child(3) { transform: rotate(240deg) translateY(-0.36em); }
|
|
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)}};
|
|
242
|
+
`}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)}};T.observedAttributes=["size","color","speed"];function ne(){l(Xe,T)}var Fe="lz-orbit-ring-dots",ce=8,w=class extends o{constructor(){super(...arguments);this.css=`
|
|
206
243
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
207
244
|
.lz-orbit { position: absolute; inset: 0; }
|
|
208
245
|
.lz-dot {
|
|
@@ -213,7 +250,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
213
250
|
background: var(--lz-color, #f5f5f7);
|
|
214
251
|
animation: lz-orbit-ring-dot calc(1.2s * var(--lz-speed, 1)) linear infinite;
|
|
215
252
|
}
|
|
216
|
-
`}template(){let
|
|
253
|
+
`}template(){let e='<div class="lz-orbit" role="status" aria-label="Loading">';for(let s=0;s<ce;s++){let i=360/ce*s;e+=`<span class="lz-dot" style="transform:rotate(${i}deg) translateY(calc(-0.5em + (var(--lz-dot-size, 0.18em) / 2)));animation-delay:-${(s*.15).toFixed(2)}s"></span>`}return`${e}</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)}};w.observedAttributes=["size","dot-size","color","speed"];function de(){l(Fe,w)}var Qe="lz-eyes",_=class extends o{constructor(){super(...arguments);this.css=`
|
|
217
254
|
:host { font-size: var(--lz-size, 44px); }
|
|
218
255
|
.lz-eyes { display: flex; gap: 0.24em; }
|
|
219
256
|
.lz-eye {
|
|
@@ -227,7 +264,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
227
264
|
background: var(--lz-pupil, rgba(0, 0, 0, 0.85));
|
|
228
265
|
animation: lz-eye-gaze calc(1.6s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
229
266
|
}
|
|
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)}};
|
|
267
|
+
`}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)}};_.observedAttributes=["size","color","speed"];function pe(){l(Qe,_)}var Je="lz-morphing-square",k=class extends o{constructor(){super(...arguments);this.css=`
|
|
231
268
|
:host {
|
|
232
269
|
font-size: var(--lz-size, 44px);
|
|
233
270
|
width: 1em; height: 1em;
|
|
@@ -235,14 +272,14 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
235
272
|
box-shadow: 0 0 calc(0.41 * var(--lz-size, 44px)) var(--lz-glow, color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent));
|
|
236
273
|
animation: lz-shape-morph calc(2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
237
274
|
}
|
|
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)}};
|
|
275
|
+
`}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)}};k.observedAttributes=["size","accent","speed"];function me(){l(Je,k)}var je="lz-breathing-pulse",N=class extends o{constructor(){super(...arguments);this.css=`
|
|
239
276
|
:host {
|
|
240
277
|
font-size: var(--lz-size, 36px);
|
|
241
278
|
width: 1em; height: 1em; border-radius: 50%;
|
|
242
279
|
background: var(--lz-color, #f5f5f7);
|
|
243
280
|
animation: lz-pulse-breath calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
244
281
|
}
|
|
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)}};
|
|
282
|
+
`}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)}};N.observedAttributes=["size","color","speed"];function ze(){l(je,N)}var et="lz-equalizer",P=class extends o{constructor(){super(...arguments);this.css=`
|
|
246
283
|
:host { font-size: var(--lz-size, 22px); }
|
|
247
284
|
.lz-eq { display: flex; align-items: flex-end; gap: var(--lz-gap, 3px); }
|
|
248
285
|
.lz-bar {
|
|
@@ -255,12 +292,12 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
255
292
|
.lz-bar:nth-child(2) { animation-delay: 0.12s; }
|
|
256
293
|
.lz-bar:nth-child(3) { animation-delay: 0.24s; }
|
|
257
294
|
.lz-bar:nth-child(4) { animation-delay: 0.36s; }
|
|
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)}};
|
|
295
|
+
`}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)}};P.observedAttributes=["size","bar-width","gap","color","speed"];function fe(){l(et,P)}var tt="lz-progress-ring",rt=`
|
|
259
296
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
260
297
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
261
|
-
`,
|
|
298
|
+
`,L=class extends o{constructor(){super(...arguments);this.css=`
|
|
262
299
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
263
|
-
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${
|
|
300
|
+
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${rt} }
|
|
264
301
|
.lz-track {
|
|
265
302
|
background: conic-gradient(var(--lz-track, rgba(255, 255, 255, 0.15)) 0deg, var(--lz-track, rgba(255, 255, 255, 0.15)) 360deg);
|
|
266
303
|
}
|
|
@@ -268,7 +305,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
268
305
|
background: conic-gradient(var(--lz-color, #f5f5f7) calc(var(--lz-percent, 0) * 3.6deg), transparent 0deg);
|
|
269
306
|
transition: background 0.2s ease;
|
|
270
307
|
}
|
|
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)}};
|
|
308
|
+
`}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)}};L.observedAttributes=["size","stroke-width","percent","color","track-color","speed"];function he(){l(tt,L)}var st="lz-indeterminate-progress-bar",E=class extends o{constructor(){super(...arguments);this.css=`
|
|
272
309
|
:host {
|
|
273
310
|
position: relative; display: inline-block;
|
|
274
311
|
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
@@ -281,7 +318,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
281
318
|
background: var(--lz-accent, #0a84ff);
|
|
282
319
|
animation: lz-indeterminate-slide calc(1.6s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
283
320
|
}
|
|
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)}};
|
|
321
|
+
`}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)}};E.observedAttributes=["width","height","accent","track-color","speed"];function ue(){l(st,E)}var at="lz-skeleton-shimmer",R=class extends o{constructor(){super(...arguments);this.css=`
|
|
285
322
|
:host {
|
|
286
323
|
position: relative; display: inline-block;
|
|
287
324
|
width: var(--lz-width, 120px); height: var(--lz-height, 28px);
|
|
@@ -293,7 +330,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
293
330
|
background: linear-gradient(to right, transparent, var(--lz-sheen, rgba(255, 255, 255, 0.1)), transparent);
|
|
294
331
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
295
332
|
}
|
|
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)}};
|
|
333
|
+
`}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)}};R.observedAttributes=["width","height","track-color","speed"];function ve(){l(at,R)}var it="lz-ellipsis",S=class extends o{constructor(){super(...arguments);this.css=`
|
|
297
334
|
:host {
|
|
298
335
|
display: inline-flex; gap: 0.2em; align-items: center;
|
|
299
336
|
font-size: var(--lz-size, 8px); line-height: 1;
|
|
@@ -305,7 +342,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
305
342
|
}
|
|
306
343
|
.lz-dot:nth-child(2) { animation-delay: -0.45s; }
|
|
307
344
|
.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)}};
|
|
345
|
+
`}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)}};S.observedAttributes=["size","color","speed"];function be(){l(it,S)}var ot="lz-progress-bar",G=class extends o{constructor(){super(...arguments);this.css=`
|
|
309
346
|
:host {
|
|
310
347
|
display: inline-block; position: relative;
|
|
311
348
|
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
@@ -319,7 +356,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
319
356
|
background: var(--lz-color, #f5f5f7);
|
|
320
357
|
border-radius: inherit;
|
|
321
358
|
}
|
|
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
|
|
359
|
+
`}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 e=Math.max(0,Math.min(100,this.num("percent",0)));this.style.setProperty("--lz-percent",`${e}`);let s=this.shadowRoot?.querySelector(".lz-fill");s&&(s.style.transform=`scaleX(${e/100})`),this.setAttribute("aria-valuenow",String(e))}};G.observedAttributes=["width","height","percent","color","track-color","speed"];function ge(){l(ot,G)}var lt="lz-skeleton-card",O=class extends o{constructor(){super(...arguments);this.css=`
|
|
323
360
|
:host {
|
|
324
361
|
position: relative; display: inline-block;
|
|
325
362
|
width: var(--lz-width, 200px); height: var(--lz-height, 64px);
|
|
@@ -344,7 +381,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
344
381
|
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
345
382
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
346
383
|
}
|
|
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)}};
|
|
384
|
+
`}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)}};O.observedAttributes=["width","height","track-color","speed"];function xe(){l(lt,O)}var nt="lz-skeleton-list",I=class extends o{constructor(){super(...arguments);this.css=`
|
|
348
385
|
:host {
|
|
349
386
|
position: relative; display: block;
|
|
350
387
|
width: var(--lz-width, 180px);
|
|
@@ -369,5 +406,204 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".l
|
|
|
369
406
|
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
370
407
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
371
408
|
}
|
|
372
|
-
`}template(){let
|
|
409
|
+
`}template(){let e=Math.max(1,Math.min(8,this.num("rows",4))),s=["100%","85%","92%","68%","95%","78%","88%","72%"],i='<div role="status" aria-label="Loading">';for(let a=0;a<e;a++){let n=s[a%s.length];i+=`<div class="lz-list-row"><div class="lz-list-avatar"></div><div class="lz-list-line" style="width:${n}"></div></div>`}return`${i}</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)}};I.observedAttributes=["width","rows","track-color","speed"];function ye(){l(nt,I)}var ct="lz-pulsing-orb",M=class extends o{constructor(){super(...arguments);this.css=`
|
|
410
|
+
:host {
|
|
411
|
+
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
412
|
+
display: inline-block; line-height: 1;
|
|
413
|
+
}
|
|
414
|
+
.lz-orb {
|
|
415
|
+
width: 100%; height: 100%; border-radius: 50%;
|
|
416
|
+
background: radial-gradient(circle at 35% 32%,
|
|
417
|
+
var(--lz-accent, #0a84ff) 0%,
|
|
418
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 55%,
|
|
419
|
+
transparent 72%);
|
|
420
|
+
box-shadow: 0 0 calc(0.5em) color-mix(in srgb, var(--lz-accent, #0a84ff) 40%, transparent);
|
|
421
|
+
animation: lz-orb-breathe calc(2.2s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
422
|
+
}
|
|
423
|
+
`}template(){return'<div class="lz-orb" role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varNum("--lz-speed","speed",1)}};M.observedAttributes=["size","accent","speed"];function Ae(){l(ct,M)}var dt="lz-morphing-orb",Z=class extends o{constructor(){super(...arguments);this.css=`
|
|
424
|
+
:host {
|
|
425
|
+
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
426
|
+
display: inline-block; line-height: 1;
|
|
427
|
+
background: radial-gradient(circle at 34% 30%,
|
|
428
|
+
var(--lz-accent, #0a84ff) 0%,
|
|
429
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 60%, transparent) 62%,
|
|
430
|
+
transparent 78%);
|
|
431
|
+
box-shadow: 0 0 calc(0.55em) color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent);
|
|
432
|
+
animation: lz-blob-morph calc(3.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
433
|
+
}
|
|
434
|
+
`}template(){return'<div role="status" aria-label="Loading"></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varNum("--lz-speed","speed",1)}};Z.observedAttributes=["size","accent","speed"];function Te(){l(dt,Z)}var pt="lz-siri-orb",C=class extends o{constructor(){super(...arguments);this.css=`
|
|
435
|
+
:host {
|
|
436
|
+
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
437
|
+
display: inline-block; line-height: 1;
|
|
438
|
+
position: relative; overflow: hidden; border-radius: 50%;
|
|
439
|
+
background: radial-gradient(circle at 30% 28%,
|
|
440
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 75%, white) 0%,
|
|
441
|
+
transparent 60%);
|
|
442
|
+
animation: lz-orb-breathe calc(2.6s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
443
|
+
}
|
|
444
|
+
.lz-sheen {
|
|
445
|
+
position: absolute; width: 2.4em; height: 2.4em;
|
|
446
|
+
left: 50%; top: 50%; margin: -1.2em 0 0 -1.2em;
|
|
447
|
+
background: conic-gradient(from 0deg at 50% 50%,
|
|
448
|
+
transparent 0deg,
|
|
449
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 55%, transparent) 40deg,
|
|
450
|
+
transparent 90deg,
|
|
451
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent) 150deg,
|
|
452
|
+
transparent 200deg,
|
|
453
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 50%, transparent) 270deg,
|
|
454
|
+
transparent 360deg);
|
|
455
|
+
animation: lz-siri-sheen calc(5s * var(--lz-speed, 1)) linear infinite;
|
|
456
|
+
opacity: 0.9;
|
|
457
|
+
}
|
|
458
|
+
`}template(){return'<span class="lz-sheen" role="status" aria-label="Loading"></span>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varNum("--lz-speed","speed",1)}};C.observedAttributes=["size","accent","speed"];function we(){l(pt,C)}var mt="lz-dot-orb",zt=-.32,D=class extends o{constructor(){super(...arguments);this.css=`
|
|
459
|
+
:host {
|
|
460
|
+
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
461
|
+
display: inline-block; position: relative; line-height: 1;
|
|
462
|
+
}
|
|
463
|
+
.lz-slot {
|
|
464
|
+
position: absolute; left: 50%; top: 50%;
|
|
465
|
+
width: 0; height: 0;
|
|
466
|
+
}
|
|
467
|
+
.lz-dot {
|
|
468
|
+
position: absolute; left: -0.08em; top: -0.08em;
|
|
469
|
+
width: 0.16em; height: 0.16em; border-radius: 50%;
|
|
470
|
+
background: var(--lz-color, #f5f5f7);
|
|
471
|
+
animation: lz-dot-orb calc(2s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
472
|
+
}
|
|
473
|
+
`}template(){let e=Math.max(4,Math.min(16,this.num("count",8))),s=e*.14,i="";for(let a=0;a<e;a++){let d=`transform: rotate(${360/e*a}deg) translateY(${zt}em);`,m=`animation-delay: -${a/e*s}s;`;i+=`<span class="lz-slot" style="${d}"><span class="lz-dot" style="${m}"></span></span>`}return`<div role="status" aria-label="Loading">${i}</div>`}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};D.observedAttributes=["size","count","color","speed"];function _e(){l(mt,D)}var ft="lz-planet-orb",ht=.36,H=class extends o{constructor(){super(...arguments);this.css=`
|
|
474
|
+
:host {
|
|
475
|
+
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
476
|
+
display: inline-block; position: relative; line-height: 1;
|
|
477
|
+
}
|
|
478
|
+
.lz-core {
|
|
479
|
+
position: absolute; left: 50%; top: 50%;
|
|
480
|
+
width: 0.42em; height: 0.42em; margin: -0.21em 0 0 -0.21em; border-radius: 50%;
|
|
481
|
+
background: radial-gradient(circle at 35% 30%,
|
|
482
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, white) 0%,
|
|
483
|
+
var(--lz-accent, #0a84ff) 50%,
|
|
484
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 40%, transparent) 100%);
|
|
485
|
+
box-shadow: 0 0 calc(0.3em) color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent);
|
|
486
|
+
animation: lz-orb-breathe calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
487
|
+
}
|
|
488
|
+
.lz-orbit {
|
|
489
|
+
position: absolute; inset: 0;
|
|
490
|
+
animation: lz-spin calc(2.2s * var(--lz-speed, 1)) linear infinite;
|
|
491
|
+
}
|
|
492
|
+
.lz-moon {
|
|
493
|
+
position: absolute; left: 50%; top: 50%;
|
|
494
|
+
width: 0.14em; height: 0.14em; margin: -0.07em 0 0 -0.07em; border-radius: 50%;
|
|
495
|
+
background: var(--lz-color, #f5f5f7);
|
|
496
|
+
box-shadow: 0 0 calc(0.16em) color-mix(in srgb, var(--lz-color, #f5f5f7) 50%, transparent);
|
|
497
|
+
}
|
|
498
|
+
`}template(){let e=Math.max(1,Math.min(5,this.num("count",2))),s="";for(let i=0;i<e;i++){let a=360/e*i;s+=`<span class="lz-moon" style="transform: rotate(${a}deg) translateX(${ht}em);"></span>`}return`<div class="lz-core"></div><div class="lz-orbit" role="status" aria-label="Loading">${s}</div>`}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};H.observedAttributes=["size","accent","color","count","speed"];function ke(){l(ft,H)}var ut="lz-aura-orb",B=class extends o{constructor(){super(...arguments);this.css=`
|
|
499
|
+
:host {
|
|
500
|
+
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
501
|
+
display: inline-block; position: relative; line-height: 1;
|
|
502
|
+
}
|
|
503
|
+
.lz-layer { position: absolute; inset: 0; animation: lz-spin calc(3s * var(--lz-speed, 1)) linear infinite; }
|
|
504
|
+
.lz-layer.a { animation-duration: calc(2.6s * var(--lz-speed, 1)); }
|
|
505
|
+
.lz-layer.b { animation-name: lz-spin-reverse; animation-duration: calc(3.4s * var(--lz-speed, 1)); }
|
|
506
|
+
.lz-orb {
|
|
507
|
+
position: absolute; left: 50%; top: 50%;
|
|
508
|
+
width: 0.78em; height: 0.78em; margin: -0.39em 0 0 -0.39em; border-radius: 50%;
|
|
509
|
+
transform: translateX(0.14em);
|
|
510
|
+
}
|
|
511
|
+
.lz-layer.a .lz-orb {
|
|
512
|
+
background: radial-gradient(circle at 35% 30%,
|
|
513
|
+
color-mix(in srgb, var(--lz-color, #f5f5f7) 90%, transparent) 0%,
|
|
514
|
+
color-mix(in srgb, var(--lz-color, #f5f5f7) 40%, transparent) 62%,
|
|
515
|
+
transparent 76%);
|
|
516
|
+
}
|
|
517
|
+
.lz-layer.b .lz-orb {
|
|
518
|
+
background: radial-gradient(circle at 35% 30%,
|
|
519
|
+
var(--lz-accent, #0a84ff) 0%,
|
|
520
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 62%,
|
|
521
|
+
transparent 76%);
|
|
522
|
+
opacity: 0.9;
|
|
523
|
+
}
|
|
524
|
+
`}template(){return'<div class="lz-layer a" role="status" aria-label="Loading"><span class="lz-orb"></span></div><div class="lz-layer b"><span class="lz-orb"></span></div>'}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};B.observedAttributes=["size","accent","color","speed"];function Ne(){l(ut,B)}var vt="lz-waveform",W=class extends o{constructor(){super(...arguments);this.css=`
|
|
525
|
+
:host { font-size: var(--lz-size, 32px); display: inline-flex; line-height: 1; }
|
|
526
|
+
.lz-wave {
|
|
527
|
+
display: flex; align-items: center; gap: var(--lz-gap, 4px);
|
|
528
|
+
height: 1em;
|
|
529
|
+
}
|
|
530
|
+
.lz-bar {
|
|
531
|
+
width: var(--lz-bar-width, 4px); height: 1em; border-radius: 2px;
|
|
532
|
+
transform-origin: center;
|
|
533
|
+
background: var(--lz-color, #f5f5f7);
|
|
534
|
+
animation: lz-waveform calc(1.6s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
535
|
+
}
|
|
536
|
+
.lz-bar.accent { background: var(--lz-accent, #0a84ff); }
|
|
537
|
+
`}template(){let e=Math.max(5,Math.min(21,this.num("count",11))),s=(e-1)/2,i="";for(let a=0;a<e;a++){let n=(a-s)*.12,d=a===Math.floor(s)||a===Math.floor(s/2)||a===e-1-Math.floor(s/2);i+=`<span class="lz-bar${d?" accent":""}" style="animation-delay: ${n.toFixed(2)}s;"></span>`}return`<div class="lz-wave" role="status" aria-label="Loading">${i}</div>`}sync(){this.varPx("--lz-size","size",32),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-accent","accent","#0a84ff"),this.varNum("--lz-speed","speed",1)}};W.observedAttributes=["size","count","color","accent","speed"];function Pe(){l(vt,W)}var bt="lz-vinyl",Y=class extends o{constructor(){super(...arguments);this.css=`
|
|
538
|
+
:host {
|
|
539
|
+
font-size: var(--lz-size, 48px); width: 2.2em; height: 2.2em;
|
|
540
|
+
display: inline-block; position: relative; line-height: 1;
|
|
541
|
+
}
|
|
542
|
+
.lz-disc {
|
|
543
|
+
position: absolute; inset: 0; border-radius: 50%;
|
|
544
|
+
background:
|
|
545
|
+
repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0 1px, transparent 1px 4px),
|
|
546
|
+
radial-gradient(circle at 50% 50%, var(--lz-accent, #0a84ff) 0 13%, rgba(0,0,0,0.88) 14% 100%);
|
|
547
|
+
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
|
|
548
|
+
animation: lz-spin calc(3.5s * var(--lz-speed, 1)) linear infinite;
|
|
549
|
+
}
|
|
550
|
+
.lz-needle {
|
|
551
|
+
position: absolute; top: 0.08em; right: 0.18em;
|
|
552
|
+
width: 0.06em; height: 0.7em; border-radius: 3px;
|
|
553
|
+
background: linear-gradient(var(--lz-color, #f5f5f7), color-mix(in srgb, var(--lz-color, #f5f5f7) 30%, transparent));
|
|
554
|
+
transform: rotate(38deg); transform-origin: top right;
|
|
555
|
+
animation: lz-needle-bob calc(1.8s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
556
|
+
}
|
|
557
|
+
.lz-needle::after {
|
|
558
|
+
content: ""; position: absolute; bottom: 0; left: 50%;
|
|
559
|
+
width: 0.1em; height: 0.1em; margin-left: -0.05em;
|
|
560
|
+
transform: translateY(0.1em); border-radius: 50%;
|
|
561
|
+
background: var(--lz-accent, #0a84ff);
|
|
562
|
+
}
|
|
563
|
+
`}template(){return'<div class="lz-disc" role="status" aria-label="Loading"></div><div class="lz-needle" aria-hidden="true"></div>'}sync(){this.varPx("--lz-size","size",48),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};Y.observedAttributes=["size","accent","color","speed"];function Le(){l(bt,Y)}var gt="lz-sonar",Ee=3.6,$=class extends o{constructor(){super(...arguments);this.css=`
|
|
564
|
+
:host {
|
|
565
|
+
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
566
|
+
display: inline-block; position: relative; line-height: 1;
|
|
567
|
+
}
|
|
568
|
+
.lz-core {
|
|
569
|
+
position: absolute; left: 50%; top: 50%;
|
|
570
|
+
width: 0.18em; height: 0.18em; margin: -0.09em 0 0 -0.09em; border-radius: 50%;
|
|
571
|
+
background: var(--lz-color, #f5f5f7);
|
|
572
|
+
box-shadow: 0 0 calc(0.2em) color-mix(in srgb, var(--lz-color, #f5f5f7) 50%, transparent);
|
|
573
|
+
}
|
|
574
|
+
.lz-ring {
|
|
575
|
+
position: absolute; inset: 0.14em; border-radius: 50%;
|
|
576
|
+
border: 1px solid var(--lz-accent, #0a84ff);
|
|
577
|
+
animation: lz-sonar-ring calc(${Ee}s * var(--lz-speed, 1)) cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
|
|
578
|
+
}
|
|
579
|
+
`}template(){let e=Math.max(1,Math.min(4,this.num("count",3))),s="";for(let i=0;i<e;i++)s+=`<span class="lz-ring" style="animation-delay: -${(i*Ee/e).toFixed(2)}s;"></span>`;return`<div class="lz-core" role="status" aria-label="Loading"></div>${s}`}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#0a84ff"),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};$.observedAttributes=["size","count","accent","color","speed"];function Re(){l(gt,$)}var xt="lz-music-note",U=class extends o{constructor(){super(...arguments);this.css=`
|
|
580
|
+
:host { font-size: var(--lz-size, 32px); display: inline-flex; line-height: 1; }
|
|
581
|
+
.lz-notes { display: flex; align-items: baseline; gap: 0.45em; }
|
|
582
|
+
.lz-note {
|
|
583
|
+
display: inline-block; line-height: 1;
|
|
584
|
+
color: var(--lz-color, #f5f5f7);
|
|
585
|
+
animation: lz-note-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
586
|
+
}
|
|
587
|
+
.lz-notes .lz-note:nth-child(2) { animation-delay: -0.5s; }
|
|
588
|
+
.lz-notes .lz-note:nth-child(3) { animation-delay: -0.9s; }
|
|
589
|
+
.lz-notes .lz-note:nth-child(4) { animation-delay: -0.3s; }
|
|
590
|
+
`}template(){let e=Math.max(1,Math.min(4,this.num("count",2))),s="";for(let i=0;i<e;i++)s+='<span class="lz-note">♫</span>';return`<div class="lz-notes" role="status" aria-label="Loading">${s}</div>`}sync(){this.varPx("--lz-size","size",32),this.varRaw("--lz-color","color","#f5f5f7"),this.varNum("--lz-speed","speed",1)}};U.observedAttributes=["size","count","color","speed"];function Se(){l(xt,U)}var yt="lz-activity-rings",V=class extends o{constructor(){super(...arguments);this.css=`
|
|
591
|
+
:host {
|
|
592
|
+
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
593
|
+
display: inline-block; line-height: 1;
|
|
594
|
+
}
|
|
595
|
+
.lz-svg { width: 1em; height: 1em; display: block; }
|
|
596
|
+
.lz-g { animation: lz-spin calc(2.8s * var(--lz-speed, 1)) linear infinite; transform-origin: center; }
|
|
597
|
+
.lz-g.mid { animation-duration: calc(3.6s * var(--lz-speed, 1)); animation-direction: reverse; }
|
|
598
|
+
.lz-g.inner { animation-duration: calc(2.1s * var(--lz-speed, 1)); }
|
|
599
|
+
.lz-track { fill: none; stroke: var(--lz-track, rgba(255,255,255,0.08)); stroke-width: 5; }
|
|
600
|
+
.lz-ring { fill: none; stroke-linecap: round; stroke-width: 5; }
|
|
601
|
+
.lz-outer { stroke: var(--lz-accent, #fa114f); stroke-dasharray: 209 58; }
|
|
602
|
+
.lz-mid { stroke: var(--lz-color, #30d158); stroke-dasharray: 169 48; }
|
|
603
|
+
.lz-inner { stroke: var(--lz-color-weak, #32d7ff); stroke-dasharray: 128 39; }
|
|
604
|
+
`}template(){return`<svg class="lz-svg" viewBox="0 0 100 100" role="img" aria-label="Loading">
|
|
605
|
+
<g class="lz-g"><circle class="lz-track" cx="50" cy="50" r="42.5" /><circle class="lz-ring lz-outer" cx="50" cy="50" r="42.5" transform="rotate(-90 50 50)" /></g>
|
|
606
|
+
<g class="lz-g mid"><circle class="lz-ring lz-mid" cx="50" cy="50" r="34.5" transform="rotate(-90 50 50)" /></g>
|
|
607
|
+
<g class="lz-g inner"><circle class="lz-ring lz-inner" cx="50" cy="50" r="26.5" transform="rotate(-90 50 50)" /></g>
|
|
608
|
+
</svg>`}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-accent","accent","#fa114f"),this.varRaw("--lz-color","color","#30d158"),this.varRaw("--lz-color-weak","color-weak","#32d7ff"),this.varNum("--lz-speed","speed",1)}};V.observedAttributes=["size","accent","color","color-weak","speed"];function Ge(){l(yt,V)}function q(){ee(),te(),re(),se(),ae(),ie(),oe(),le(),ne(),de(),pe(),me(),ze(),fe(),he(),ue(),ve(),be(),ge(),xe(),ye(),Ae(),Te(),we(),_e(),ke(),Ne(),Pe(),Le(),Re(),Se(),Ge()}import{jsx as c}from"react/jsx-runtime";q();var p=(t,r)=>r===void 0?{}:{[t]:String(r)};function At(t){let{size:r,color:e,speed:s,className:i,style:a}=t;return c("lz-bouncing-dots",{size:r,color:e,speed:s,className:i,style:a})}At.displayName="BouncingDots";function Tt(t){let{size:r,color:e,speed:s,className:i,style:a}=t;return c("lz-typing-dots",{size:r,color:e,speed:s,className:i,style:a})}Tt.displayName="TypingDots";function wt(t){let{size:r,color:e,speed:s,className:i,style:a}=t;return c("lz-wave-dots",{size:r,color:e,speed:s,className:i,style:a})}wt.displayName="WaveDots";function _t(t){let{size:r,color:e,speed:s,count:i,className:a,style:n}=t;return c("lz-helix-dots",{size:r,color:e,speed:s,count:i,className:a,style:n})}_t.displayName="HelixDots";function kt(t){let{rows:r,cols:e,gap:s,size:i,color:a,speed:n,className:d,style:m}=t;return c("lz-dot-grid-wave",{rows:r,cols:e,gap:s,size:i,color:a,speed:n,className:d,style:m})}kt.displayName="DotGridWave";function Nt(t){let{size:r,color:e,speed:s,strokeWidth:i,className:a,style:n}=t;return c("lz-arc-spinner",{size:r,color:e,speed:s,className:a,style:n,...p("stroke-width",i)})}Nt.displayName="ArcSpinner";function Pt(t){let{size:r,color:e,colorWeak:s,speed:i,strokeWidth:a,className:n,style:d}=t;return c("lz-material-double-arc",{size:r,color:e,speed:i,className:n,style:d,...p("stroke-width",a),...p("color-weak",s)})}Pt.displayName="MaterialDoubleArc";function Lt(t){let{size:r,color:e,colorWeak:s,colorSweep:i,speed:a,className:n,style:d}=t;return c("lz-scan-sweep",{size:r,color:e,speed:a,className:n,style:d,...p("color-weak",s),...p("color-sweep",i)})}Lt.displayName="ScanSweep";function Et(t){let{size:r,color:e,speed:s,className:i,style:a}=t;return c("lz-orbit-dots",{size:r,color:e,speed:s,className:i,style:a})}Et.displayName="OrbitDots";function Rt(t){let{size:r,color:e,speed:s,dotSize:i,className:a,style:n}=t;return c("lz-orbit-ring-dots",{size:r,color:e,speed:s,className:a,style:n,...p("dot-size",i)})}Rt.displayName="OrbitRingDots";function St(t){let{size:r,color:e,speed:s,className:i,style:a}=t;return c("lz-eyes",{size:r,color:e,speed:s,className:i,style:a})}St.displayName="Eyes";function Gt(t){let{size:r,accent:e,speed:s,className:i,style:a}=t;return c("lz-morphing-square",{size:r,accent:e,speed:s,className:i,style:a})}Gt.displayName="MorphingSquare";function Ot(t){let{size:r,color:e,speed:s,className:i,style:a}=t;return c("lz-breathing-pulse",{size:r,color:e,speed:s,className:i,style:a})}Ot.displayName="BreathingPulse";function It(t){let{size:r,color:e,speed:s,barWidth:i,gap:a,className:n,style:d}=t;return c("lz-equalizer",{size:r,color:e,speed:s,className:n,style:d,...p("bar-width",i),...p("gap",a)})}It.displayName="Equalizer";function Mt(t){let{size:r,color:e,trackColor:s,speed:i,strokeWidth:a,percent:n,className:d,style:m}=t;return c("lz-progress-ring",{size:r,color:e,speed:i,percent:n,className:d,style:m,...p("stroke-width",a),...p("track-color",s)})}Mt.displayName="ProgressRing";function Zt(t){let{width:r,height:e,accent:s,trackColor:i,speed:a,className:n,style:d}=t;return c("lz-indeterminate-progress-bar",{width:r,height:e,accent:s,speed:a,className:n,style:d,...p("track-color",i)})}Zt.displayName="IndeterminateProgressBar";function Ct(t){let{width:r,height:e,trackColor:s,speed:i,className:a,style:n}=t;return c("lz-skeleton-shimmer",{width:r,height:e,speed:i,className:a,style:n,...p("track-color",s)})}Ct.displayName="SkeletonShimmer";function Dt(t){let{size:r,color:e,speed:s,className:i,style:a}=t;return c("lz-ellipsis",{size:r,color:e,speed:s,className:i,style:a})}Dt.displayName="Ellipsis";function Ht(t){let{width:r,height:e,percent:s,color:i,speed:a,trackColor:n,className:d,style:m}=t;return c("lz-progress-bar",{width:r,height:e,percent:s,color:i,speed:a,className:d,style:m,...p("track-color",n)})}Ht.displayName="ProgressBar";function Bt(t){let{width:r,height:e,trackColor:s,speed:i,className:a,style:n}=t;return c("lz-skeleton-card",{width:r,height:e,speed:i,className:a,style:n,...p("track-color",s)})}Bt.displayName="SkeletonCard";function Wt(t){let{width:r,rows:e,trackColor:s,speed:i,className:a,style:n}=t;return c("lz-skeleton-list",{width:r,rows:e,speed:i,className:a,style:n,...p("track-color",s)})}Wt.displayName="SkeletonList";function Yt(t){let{size:r,accent:e,speed:s,className:i,style:a}=t;return c("lz-pulsing-orb",{size:r,accent:e,speed:s,className:i,style:a})}Yt.displayName="PulsingOrb";function $t(t){let{size:r,accent:e,speed:s,className:i,style:a}=t;return c("lz-morphing-orb",{size:r,accent:e,speed:s,className:i,style:a})}$t.displayName="MorphingOrb";function Ut(t){let{size:r,accent:e,speed:s,className:i,style:a}=t;return c("lz-siri-orb",{size:r,accent:e,speed:s,className:i,style:a})}Ut.displayName="SiriOrb";function Vt(t){let{size:r,color:e,speed:s,count:i,className:a,style:n}=t;return c("lz-dot-orb",{size:r,color:e,speed:s,count:i,className:a,style:n})}Vt.displayName="DotOrb";function qt(t){let{size:r,color:e,accent:s,speed:i,count:a,className:n,style:d}=t;return c("lz-planet-orb",{size:r,color:e,accent:s,speed:i,count:a,className:n,style:d})}qt.displayName="PlanetOrb";function Kt(t){let{size:r,color:e,accent:s,speed:i,className:a,style:n}=t;return c("lz-aura-orb",{size:r,color:e,accent:s,speed:i,className:a,style:n})}Kt.displayName="AuraOrb";function Xt(t){let{size:r,color:e,accent:s,speed:i,count:a,barWidth:n,gap:d,className:m,style:Oe}=t;return c("lz-waveform",{size:r,color:e,accent:s,speed:i,count:a,className:m,style:Oe,...p("bar-width",n),...p("gap",d)})}Xt.displayName="Waveform";function Ft(t){let{size:r,color:e,accent:s,speed:i,className:a,style:n}=t;return c("lz-vinyl",{size:r,color:e,accent:s,speed:i,className:a,style:n})}Ft.displayName="Vinyl";function Qt(t){let{size:r,color:e,accent:s,speed:i,count:a,className:n,style:d}=t;return c("lz-sonar",{size:r,color:e,accent:s,speed:i,count:a,className:n,style:d})}Qt.displayName="Sonar";function Jt(t){let{size:r,color:e,speed:s,count:i,className:a,style:n}=t;return c("lz-music-note",{size:r,color:e,speed:s,count:i,className:a,style:n})}Jt.displayName="MusicNote";function jt(t){let{size:r,color:e,accent:s,colorWeak:i,speed:a,className:n,style:d}=t;return c("lz-activity-rings",{size:r,color:e,accent:s,speed:a,className:n,style:d,...p("color-weak",i)})}jt.displayName="ActivityRings";export{jt as ActivityRings,Nt as ArcSpinner,Kt as AuraOrb,At as BouncingDots,Ot as BreathingPulse,kt as DotGridWave,Vt as DotOrb,Dt as Ellipsis,It as Equalizer,St as Eyes,_t as HelixDots,Zt as IndeterminateProgressBar,Pt as MaterialDoubleArc,$t as MorphingOrb,Gt as MorphingSquare,Jt as MusicNote,Et as OrbitDots,Rt as OrbitRingDots,qt as PlanetOrb,Ht as ProgressBar,Mt as ProgressRing,Yt as PulsingOrb,Lt as ScanSweep,Ut as SiriOrb,Bt as SkeletonCard,Wt as SkeletonList,Ct as SkeletonShimmer,Qt as Sonar,Tt as TypingDots,Ft as Vinyl,wt as WaveDots,Xt as Waveform,q as defineAll};
|
|
373
609
|
//# sourceMappingURL=react.js.map
|