loading-state-zoo 0.3.0 → 0.4.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 +38 -71
- package/dist/index.cjs +233 -172
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -17
- package/dist/index.d.ts +11 -17
- package/dist/index.js +230 -169
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +230 -169
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +38 -48
- package/dist/react.d.ts +38 -48
- package/dist/react.js +230 -169
- package/dist/react.js.map +1 -1
- package/dist/theme.css +323 -226
- package/docs/AI.md +12 -10
- package/docs/components.json +69 -108
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Qe=Object.defineProperty;var mt=Object.getOwnPropertyDescriptor;var ht=Object.getOwnPropertyNames;var vt=Object.prototype.hasOwnProperty;var tt=a=>{throw TypeError(a)};var gt=(a,i)=>{for(var t in i)Qe(a,t,{get:i[t],enumerable:!0})},bt=(a,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of ht(i))!vt.call(a,l)&&l!==t&&Qe(a,l,{get:()=>i[l],enumerable:!(s=mt(i,l))||s.enumerable});return a};var ut=a=>bt(Qe({},"__esModule",{value:!0}),a);var rt=(a,i,t)=>i.has(a)||tt("Cannot "+t);var at=(a,i,t)=>(rt(a,i,"read from private field"),t?t.call(a):i.get(a)),it=(a,i,t)=>i.has(a)?tt("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(a):i.set(a,t),st=(a,i,t,s)=>(rt(a,i,"write to private field"),s?s.call(a,t):i.set(a,t),t);var St={};gt(St,{ACTIVITY_RINGS_TAG:()=>Fe,AI_NEURAL_TAG:()=>Be,AI_ORB_TAG:()=>Le,AI_THINKING_TAG:()=>Me,ARC_SPINNER_TAG:()=>J,BOUNCING_DOTS_TAG:()=>H,BREATHING_PULSE_TAG:()=>me,DOT_GRID_WAVE_TAG:()=>Q,ELLIPSIS_TAG:()=>ye,EQUALIZER_TAG:()=>ve,EYES_TAG:()=>ce,HELIX_DOTS_TAG:()=>q,INDETERMINATE_PROGRESS_BAR_TAG:()=>xe,IOS27_ORB_TAG:()=>Ie,KEYFRAMES:()=>je,LZPattern:()=>e,MATERIAL_DOUBLE_ARC_TAG:()=>re,MORPHING_SQUARE_TAG:()=>pe,MUSIC_NOTE_TAG:()=>Ve,ORBIT_DOTS_TAG:()=>oe,ORBIT_RING_DOTS_TAG:()=>ne,PROGRESS_BAR_TAG:()=>Te,PROGRESS_RING_TAG:()=>be,SCAN_SWEEP_TAG:()=>ie,SCOPED_CSS:()=>Y,SKELETON_CARD_TAG:()=>Ge,SKELETON_LIST_TAG:()=>Ee,SKELETON_SHIMMER_TAG:()=>we,SONAR_TAG:()=>Ue,TYPING_DOTS_TAG:()=>W,VINYL_TAG:()=>Ze,WAVEFORM_TAG:()=>Ce,WAVE_DOTS_TAG:()=>K,define:()=>r,defineActivityRings:()=>C,defineAiNeural:()=>O,defineAiOrb:()=>P,defineAiThinking:()=>L,defineAll:()=>qe,defineArcSpinner:()=>v,defineBouncingDots:()=>f,defineBreathingPulse:()=>_,defineDotGridWave:()=>h,defineEllipsis:()=>G,defineEqualizer:()=>y,defineEyes:()=>A,defineHelixDots:()=>m,defineIndeterminateProgressBar:()=>T,defineIos27Orb:()=>I,defineMaterialDoubleArc:()=>g,defineMorphingSquare:()=>w,defineMusicNote:()=>$,defineOrbitDots:()=>u,defineOrbitRingDots:()=>x,defineProgressBar:()=>S,defineProgressRing:()=>k,defineScanSweep:()=>b,defineSkeletonCard:()=>E,defineSkeletonList:()=>N,defineSkeletonShimmer:()=>R,defineSonar:()=>B,defineTypingDots:()=>p,defineVinyl:()=>D,defineWaveDots:()=>z,defineWaveform:()=>M});module.exports=ut(St);var je=`
|
|
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 {
|
|
@@ -68,20 +68,15 @@
|
|
|
68
68
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
69
69
|
50% { transform: scale(var(--lz-orb-scale, 1.16)); opacity: var(--lz-orb-fade, 0.88); }
|
|
70
70
|
}
|
|
71
|
-
@keyframes lz-
|
|
72
|
-
0% {
|
|
73
|
-
|
|
74
|
-
50% {
|
|
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); }
|
|
71
|
+
@keyframes lz-ios-glow {
|
|
72
|
+
0%, 100% { opacity: var(--lz-ios-fade, 0.2); transform: scale(var(--lz-ios-min, 0.5)); }
|
|
73
|
+
35% { opacity: 1; transform: scale(var(--lz-ios-peak, 1.25)); }
|
|
74
|
+
50% { opacity: 1; transform: scale(var(--lz-ios-peak, 1.25)); }
|
|
77
75
|
}
|
|
78
|
-
@keyframes lz-
|
|
79
|
-
0% { transform:
|
|
80
|
-
|
|
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); }
|
|
76
|
+
@keyframes lz-ai-sparkle {
|
|
77
|
+
0%, 100% { opacity: 0; transform: scale(0.1) rotate(0deg); }
|
|
78
|
+
20% { opacity: 1; transform: scale(1) rotate(8deg); }
|
|
79
|
+
45% { opacity: 0; transform: scale(1.35) rotate(14deg); }
|
|
85
80
|
}
|
|
86
81
|
@keyframes lz-waveform {
|
|
87
82
|
0%, 100% { transform: scaleY(var(--lz-wf-min, 0.22)); }
|
|
@@ -98,10 +93,10 @@
|
|
|
98
93
|
75% { transform: rotate(-4deg) translateY(var(--lz-note-bob, 0.35em)); }
|
|
99
94
|
}
|
|
100
95
|
@keyframes lz-needle-bob {
|
|
101
|
-
0%, 100% { transform: rotate(
|
|
102
|
-
50% { transform: rotate(
|
|
96
|
+
0%, 100% { transform: rotate(22deg); }
|
|
97
|
+
50% { transform: rotate(27deg); }
|
|
103
98
|
}
|
|
104
|
-
`,
|
|
99
|
+
`,Y=`
|
|
105
100
|
:host {
|
|
106
101
|
display: inline-flex;
|
|
107
102
|
font-size: var(--lz-size, 44px);
|
|
@@ -110,9 +105,9 @@
|
|
|
110
105
|
.lz-root {
|
|
111
106
|
display: contents;
|
|
112
107
|
}
|
|
113
|
-
${
|
|
114
|
-
`;var
|
|
115
|
-
${this.css}</style><div class="lz-root"></div>`,this._rootEl=
|
|
108
|
+
${je}
|
|
109
|
+
`;var xt=typeof HTMLElement<"u",At=xt?HTMLElement:class{},c,e=class extends At{constructor(){super(...arguments);it(this,c,!1)}connectedCallback(){let t=this.shadowRoot??this.attachShadow({mode:"open"});t.innerHTML=`<style>${Y}
|
|
110
|
+
${this.css}</style><div class="lz-root"></div>`,this._rootEl=t.querySelector(".lz-root"),st(this,c,!0),this.paint()}attributeChangedCallback(){at(this,c)&&this.paint()}paint(){this.sync();let t=this._rootEl;t&&(t.innerHTML=this.template())}num(t,s){let l=this.getAttribute(t);if(l===null||l==="")return s;let o=Number(l);return Number.isFinite(o)?o:s}varPx(t,s,l){let o=this.getAttribute(s);o!==null&&o!==""&&Number.isFinite(Number(o))?this.style.setProperty(t,`${Number(o)}px`):this.style.removeProperty(t)}varNum(t,s,l){let o=this.getAttribute(s);o!==null&&o!==""&&Number.isFinite(Number(o))?this.style.setProperty(t,String(Number(o))):this.style.removeProperty(t)}varRaw(t,s,l){let o=this.getAttribute(s);o!==null&&o!==""?this.style.setProperty(t,o):this.style.removeProperty(t)}};c=new WeakMap,e.observedAttributes=[];function r(a,i){typeof customElements>"u"||customElements.get(a)||customElements.define(a,i)}var H="lz-bouncing-dots",Z=class extends e{constructor(){super(...arguments);this.css=`
|
|
116
111
|
:host { font-size: var(--lz-size, 8px); }
|
|
117
112
|
.lz-dots { display: flex; gap: 0.7em; }
|
|
118
113
|
.lz-dot {
|
|
@@ -122,7 +117,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
122
117
|
}
|
|
123
118
|
.lz-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
124
119
|
.lz-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
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)}};
|
|
120
|
+
`}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)}};Z.observedAttributes=["size","color","speed"];function f(){r(H,Z)}var W="lz-typing-dots",U=class extends e{constructor(){super(...arguments);this.css=`
|
|
126
121
|
:host { font-size: var(--lz-size, 8px); }
|
|
127
122
|
.lz-dots { display: flex; gap: 0.8em; }
|
|
128
123
|
.lz-dot {
|
|
@@ -132,7 +127,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
132
127
|
}
|
|
133
128
|
.lz-dot:nth-child(2) { animation-delay: -0.18s; }
|
|
134
129
|
.lz-dot:nth-child(3) { animation-delay: -0.36s; }
|
|
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)}};
|
|
130
|
+
`}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)}};U.observedAttributes=["size","color","speed"];function p(){r(W,U)}var K="lz-wave-dots",V=class extends e{constructor(){super(...arguments);this.css=`
|
|
136
131
|
:host { font-size: var(--lz-size, 8px); }
|
|
137
132
|
.lz-dots { display: flex; gap: 0.6em; }
|
|
138
133
|
.lz-dot {
|
|
@@ -143,7 +138,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
143
138
|
.lz-dot:nth-child(2) { animation-delay: -0.1s; }
|
|
144
139
|
.lz-dot:nth-child(3) { animation-delay: -0.2s; }
|
|
145
140
|
.lz-dot:nth-child(4) { animation-delay: -0.3s; }
|
|
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)}};
|
|
141
|
+
`}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)}};V.observedAttributes=["size","color","speed"];function z(){r(K,V)}var q="lz-helix-dots",wt=1.4,F=class extends e{constructor(){super(...arguments);this.css=`
|
|
147
142
|
:host { font-size: var(--lz-size, 6px); }
|
|
148
143
|
.lz-dots { display: flex; gap: 0.9em; }
|
|
149
144
|
.lz-dot {
|
|
@@ -151,7 +146,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
151
146
|
background: var(--lz-color, #f5f5f7);
|
|
152
147
|
animation: lz-helix-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
153
148
|
}
|
|
154
|
-
`}template(){let
|
|
149
|
+
`}template(){let t=Math.max(1,this.num("count",10)),s='<div class="lz-dots" role="status" aria-label="Loading">';for(let l=0;l<t;l++)s+=`<span class="lz-dot" style="animation-delay:-${(wt/t*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)}};F.observedAttributes=["size","count","color","speed"];function m(){r(q,F)}var Q="lz-dot-grid-wave",X=class extends e{constructor(){super(...arguments);this.css=`
|
|
155
150
|
:host { font-size: var(--lz-size, 6px); }
|
|
156
151
|
.lz-grid {
|
|
157
152
|
display: grid;
|
|
@@ -163,10 +158,10 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
163
158
|
background: var(--lz-color, #f5f5f7);
|
|
164
159
|
animation: lz-grid-dot-wave calc(1.2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
165
160
|
}
|
|
166
|
-
`}template(){let
|
|
161
|
+
`}template(){let t=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<t;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)}};X.observedAttributes=["rows","cols","size","gap","color","speed"];function h(){r(Q,X)}var J="lz-arc-spinner",_t=`
|
|
167
162
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
168
163
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
169
|
-
`,
|
|
164
|
+
`,j=class extends e{constructor(){super(...arguments);this.css=`
|
|
170
165
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; }
|
|
171
166
|
.lz-ring {
|
|
172
167
|
width: 100%; height: 100%; border-radius: 50%;
|
|
@@ -176,55 +171,81 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
176
171
|
var(--lz-color, #f5f5f7) 110deg,
|
|
177
172
|
transparent 111deg
|
|
178
173
|
);
|
|
179
|
-
${
|
|
174
|
+
${_t}
|
|
180
175
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
181
176
|
}
|
|
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)}};
|
|
177
|
+
`}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)}};j.observedAttributes=["size","stroke-width","color","speed"];function v(){r(J,j)}var re="lz-material-double-arc",yt=`
|
|
183
178
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
184
179
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
185
|
-
`,
|
|
180
|
+
`,ee="var(--lz-color-weak, color-mix(in srgb, var(--lz-color, #f5f5f7) 95%, transparent))",te=class extends e{constructor(){super(...arguments);this.css=`
|
|
186
181
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
187
182
|
.lz-arc {
|
|
188
183
|
position: absolute; inset: 0; border-radius: 50%;
|
|
189
|
-
${
|
|
184
|
+
${yt}
|
|
190
185
|
}
|
|
191
186
|
.lz-arc-a {
|
|
192
|
-
background: conic-gradient(from 0deg, ${
|
|
187
|
+
background: conic-gradient(from 0deg, ${ee} 0deg, ${ee} 135deg, transparent 136deg);
|
|
193
188
|
animation: lz-spin calc(1s * var(--lz-speed, 1)) linear infinite;
|
|
194
189
|
}
|
|
195
190
|
.lz-arc-b {
|
|
196
191
|
opacity: 0.6;
|
|
197
|
-
background: conic-gradient(from 200deg, ${
|
|
192
|
+
background: conic-gradient(from 200deg, ${ee} 0deg, ${ee} 90deg, transparent 91deg);
|
|
198
193
|
animation: lz-spin-reverse calc(2.4s * var(--lz-speed, 1)) linear infinite;
|
|
199
194
|
}
|
|
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)}};
|
|
201
|
-
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
195
|
+
`}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)}};te.observedAttributes=["size","stroke-width","color","speed"];function g(){r(re,te)}var ie="lz-scan-sweep",kt=8,ae=class extends e{constructor(){super(...arguments);this.css=`
|
|
196
|
+
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; display: inline-block; line-height: 1; }
|
|
202
197
|
.lz-ring {
|
|
203
198
|
position: absolute; inset: 0; border-radius: 50%;
|
|
204
199
|
border: 1px solid var(--lz-track, rgba(255, 255, 255, 0.12));
|
|
205
200
|
}
|
|
201
|
+
.lz-dial {
|
|
202
|
+
position: absolute; inset: 0.075em; border-radius: 50%;
|
|
203
|
+
border: 1px dashed rgba(255, 255, 255, 0.1);
|
|
204
|
+
animation: lz-spin-reverse calc(10s * var(--lz-speed, 1)) linear infinite;
|
|
205
|
+
}
|
|
206
206
|
.lz-ring-inner {
|
|
207
|
-
position: absolute; inset: 0.
|
|
207
|
+
position: absolute; inset: 0.27em; border-radius: 50%;
|
|
208
|
+
border: 1px solid var(--lz-track-weak, rgba(255, 255, 255, 0.08));
|
|
209
|
+
}
|
|
210
|
+
.lz-tick-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
|
|
211
|
+
.lz-tick {
|
|
212
|
+
position: absolute; left: -0.025em; top: 0;
|
|
213
|
+
width: 0.05em; height: 0.14em; border-radius: 1px;
|
|
214
|
+
background: var(--lz-color-weak, color-mix(in srgb, var(--lz-color, #f5f5f7) 80%, transparent));
|
|
215
|
+
}
|
|
216
|
+
.lz-tick.short { height: 0.09em; }
|
|
217
|
+
.lz-core-ring {
|
|
218
|
+
position: absolute; left: 50%; top: 50%;
|
|
219
|
+
width: 0.26em; height: 0.26em; margin: -0.13em 0 0 -0.13em; border-radius: 50%;
|
|
208
220
|
border: 1px solid var(--lz-track-weak, rgba(255, 255, 255, 0.08));
|
|
209
221
|
}
|
|
210
222
|
.lz-core {
|
|
211
|
-
position: absolute; width: 0.
|
|
212
|
-
left: 0.
|
|
223
|
+
position: absolute; width: 0.1em; height: 0.1em;
|
|
224
|
+
left: 0.45em; top: 0.45em; border-radius: 50%;
|
|
213
225
|
background: var(--lz-color-weak, color-mix(in srgb, var(--lz-color, #f5f5f7) 80%, transparent));
|
|
226
|
+
box-shadow: 0 0 0.18em 0.03em color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, transparent);
|
|
214
227
|
}
|
|
215
228
|
.lz-sweep {
|
|
216
229
|
position: absolute; inset: 0; border-radius: 50%;
|
|
217
230
|
background: conic-gradient(
|
|
218
231
|
from 0deg,
|
|
219
232
|
var(--lz-color, #f5f5f7) 0deg,
|
|
220
|
-
var(--lz-color-sweep, color-mix(in srgb, var(--lz-color, #f5f5f7) 8%, transparent))
|
|
221
|
-
transparent
|
|
233
|
+
var(--lz-color-sweep, color-mix(in srgb, var(--lz-color, #f5f5f7) 8%, transparent)) 8deg,
|
|
234
|
+
color-mix(in srgb, var(--lz-color, #f5f5f7) 5%, transparent) 55deg,
|
|
235
|
+
transparent 95deg
|
|
222
236
|
);
|
|
223
237
|
-webkit-mask: radial-gradient(closest-side, #000 100%);
|
|
224
238
|
mask: radial-gradient(closest-side, #000 100%);
|
|
225
239
|
animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
|
|
226
240
|
}
|
|
227
|
-
|
|
241
|
+
.lz-sweep-edge {
|
|
242
|
+
position: absolute; inset: 0; border-radius: 50%;
|
|
243
|
+
background: conic-gradient(from 0deg, var(--lz-color, #f5f5f7) 0deg, transparent 5deg);
|
|
244
|
+
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.07em), #000 calc(100% - 0.07em));
|
|
245
|
+
mask: radial-gradient(farthest-side, transparent calc(100% - 0.07em), #000 calc(100% - 0.07em));
|
|
246
|
+
animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
|
|
247
|
+
}
|
|
248
|
+
`}template(){let t="";for(let s=0;s<kt;s++){let l=s%2===1;t+=`<span class="lz-tick-slot" style="transform:rotate(${s*45}deg) translateY(-0.5em)"><span class="lz-tick${l?" short":""}"></span></span>`}return'<div class="lz-ring" role="status" aria-label="Loading"></div><div class="lz-dial" aria-hidden="true"></div><div class="lz-ring-inner" aria-hidden="true"></div>'+t+'<div class="lz-core-ring" aria-hidden="true"></div><div class="lz-core" aria-hidden="true"></div><div class="lz-sweep" aria-hidden="true"></div><div class="lz-sweep-edge" aria-hidden="true"></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)}};ae.observedAttributes=["size","color","speed"];function b(){r(ie,ae)}var oe="lz-orbit-dots",se=class extends e{constructor(){super(...arguments);this.css=`
|
|
228
249
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
229
250
|
.lz-orbit {
|
|
230
251
|
position: absolute; inset: 0;
|
|
@@ -239,7 +260,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
239
260
|
.lz-dot:nth-child(1) { transform: rotate(0deg) translateY(-0.36em); }
|
|
240
261
|
.lz-dot:nth-child(2) { transform: rotate(120deg) translateY(-0.36em); }
|
|
241
262
|
.lz-dot:nth-child(3) { transform: rotate(240deg) translateY(-0.36em); }
|
|
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)}};
|
|
263
|
+
`}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)}};se.observedAttributes=["size","color","speed"];function u(){r(oe,se)}var ne="lz-orbit-ring-dots",ot=8,le=class extends e{constructor(){super(...arguments);this.css=`
|
|
243
264
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
244
265
|
.lz-orbit { position: absolute; inset: 0; }
|
|
245
266
|
.lz-dot {
|
|
@@ -250,7 +271,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
250
271
|
background: var(--lz-color, #f5f5f7);
|
|
251
272
|
animation: lz-orbit-ring-dot calc(1.2s * var(--lz-speed, 1)) linear infinite;
|
|
252
273
|
}
|
|
253
|
-
`}template(){let
|
|
274
|
+
`}template(){let t='<div class="lz-orbit" role="status" aria-label="Loading">';for(let s=0;s<ot;s++){let l=360/ot*s;t+=`<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`${t}</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)}};le.observedAttributes=["size","dot-size","color","speed"];function x(){r(ne,le)}var ce="lz-eyes",de=class extends e{constructor(){super(...arguments);this.css=`
|
|
254
275
|
:host { font-size: var(--lz-size, 44px); }
|
|
255
276
|
.lz-eyes { display: flex; gap: 0.24em; }
|
|
256
277
|
.lz-eye {
|
|
@@ -264,7 +285,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
264
285
|
background: var(--lz-pupil, rgba(0, 0, 0, 0.85));
|
|
265
286
|
animation: lz-eye-gaze calc(1.6s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
266
287
|
}
|
|
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)}};
|
|
288
|
+
`}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)}};de.observedAttributes=["size","color","speed"];function A(){r(ce,de)}var pe="lz-morphing-square",fe=class extends e{constructor(){super(...arguments);this.css=`
|
|
268
289
|
:host {
|
|
269
290
|
font-size: var(--lz-size, 44px);
|
|
270
291
|
width: 1em; height: 1em;
|
|
@@ -272,14 +293,14 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
272
293
|
box-shadow: 0 0 calc(0.41 * var(--lz-size, 44px)) var(--lz-glow, color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent));
|
|
273
294
|
animation: lz-shape-morph calc(2s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
274
295
|
}
|
|
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)}};
|
|
296
|
+
`}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)}};fe.observedAttributes=["size","accent","speed"];function w(){r(pe,fe)}var me="lz-breathing-pulse",ze=class extends e{constructor(){super(...arguments);this.css=`
|
|
276
297
|
:host {
|
|
277
298
|
font-size: var(--lz-size, 36px);
|
|
278
299
|
width: 1em; height: 1em; border-radius: 50%;
|
|
279
300
|
background: var(--lz-color, #f5f5f7);
|
|
280
301
|
animation: lz-pulse-breath calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
281
302
|
}
|
|
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)}};
|
|
303
|
+
`}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)}};ze.observedAttributes=["size","color","speed"];function _(){r(me,ze)}var ve="lz-equalizer",he=class extends e{constructor(){super(...arguments);this.css=`
|
|
283
304
|
:host { font-size: var(--lz-size, 22px); }
|
|
284
305
|
.lz-eq { display: flex; align-items: flex-end; gap: var(--lz-gap, 3px); }
|
|
285
306
|
.lz-bar {
|
|
@@ -292,12 +313,12 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
292
313
|
.lz-bar:nth-child(2) { animation-delay: 0.12s; }
|
|
293
314
|
.lz-bar:nth-child(3) { animation-delay: 0.24s; }
|
|
294
315
|
.lz-bar:nth-child(4) { animation-delay: 0.36s; }
|
|
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)}};
|
|
316
|
+
`}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)}};he.observedAttributes=["size","bar-width","gap","color","speed"];function y(){r(ve,he)}var be="lz-progress-ring",Tt=`
|
|
296
317
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
297
318
|
mask: radial-gradient(farthest-side, transparent calc(100% - var(--lz-stroke, 4px)), #000 calc(100% - var(--lz-stroke, 4px)));
|
|
298
319
|
`,ge=class extends e{constructor(){super(...arguments);this.css=`
|
|
299
320
|
:host { font-size: var(--lz-size, 44px); width: 1em; height: 1em; position: relative; }
|
|
300
|
-
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${
|
|
321
|
+
.lz-ring { position: absolute; inset: 0; border-radius: 50%; ${Tt} }
|
|
301
322
|
.lz-track {
|
|
302
323
|
background: conic-gradient(var(--lz-track, rgba(255, 255, 255, 0.15)) 0deg, var(--lz-track, rgba(255, 255, 255, 0.15)) 360deg);
|
|
303
324
|
}
|
|
@@ -305,7 +326,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
305
326
|
background: conic-gradient(var(--lz-color, #f5f5f7) calc(var(--lz-percent, 0) * 3.6deg), transparent 0deg);
|
|
306
327
|
transition: background 0.2s ease;
|
|
307
328
|
}
|
|
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)}};ge.observedAttributes=["size","stroke-width","percent","color","track-color","speed"];function
|
|
329
|
+
`}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)}};ge.observedAttributes=["size","stroke-width","percent","color","track-color","speed"];function k(){r(be,ge)}var xe="lz-indeterminate-progress-bar",ue=class extends e{constructor(){super(...arguments);this.css=`
|
|
309
330
|
:host {
|
|
310
331
|
position: relative; display: inline-block;
|
|
311
332
|
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
@@ -318,7 +339,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
318
339
|
background: var(--lz-accent, #0a84ff);
|
|
319
340
|
animation: lz-indeterminate-slide calc(1.6s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
320
341
|
}
|
|
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)}};
|
|
342
|
+
`}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)}};ue.observedAttributes=["width","height","accent","track-color","speed"];function T(){r(xe,ue)}var we="lz-skeleton-shimmer",Ae=class extends e{constructor(){super(...arguments);this.css=`
|
|
322
343
|
:host {
|
|
323
344
|
position: relative; display: inline-block;
|
|
324
345
|
width: var(--lz-width, 120px); height: var(--lz-height, 28px);
|
|
@@ -330,7 +351,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
330
351
|
background: linear-gradient(to right, transparent, var(--lz-sheen, rgba(255, 255, 255, 0.1)), transparent);
|
|
331
352
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
332
353
|
}
|
|
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)}};
|
|
354
|
+
`}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)}};Ae.observedAttributes=["width","height","track-color","speed"];function R(){r(we,Ae)}var ye="lz-ellipsis",_e=class extends e{constructor(){super(...arguments);this.css=`
|
|
334
355
|
:host {
|
|
335
356
|
display: inline-flex; gap: 0.2em; align-items: center;
|
|
336
357
|
font-size: var(--lz-size, 8px); line-height: 1;
|
|
@@ -342,7 +363,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
342
363
|
}
|
|
343
364
|
.lz-dot:nth-child(2) { animation-delay: -0.45s; }
|
|
344
365
|
.lz-dot:nth-child(3) { animation-delay: -0.9s; }
|
|
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)}};
|
|
366
|
+
`}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)}};_e.observedAttributes=["size","color","speed"];function G(){r(ye,_e)}var Te="lz-progress-bar",ke=class extends e{constructor(){super(...arguments);this.css=`
|
|
346
367
|
:host {
|
|
347
368
|
display: inline-block; position: relative;
|
|
348
369
|
width: var(--lz-width, 160px); height: var(--lz-height, 6px);
|
|
@@ -356,7 +377,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
356
377
|
background: var(--lz-color, #f5f5f7);
|
|
357
378
|
border-radius: inherit;
|
|
358
379
|
}
|
|
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
|
|
380
|
+
`}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 t=Math.max(0,Math.min(100,this.num("percent",0)));this.style.setProperty("--lz-percent",`${t}`);let s=this.shadowRoot?.querySelector(".lz-fill");s&&(s.style.transform=`scaleX(${t/100})`),this.setAttribute("aria-valuenow",String(t))}};ke.observedAttributes=["width","height","percent","color","track-color","speed"];function S(){r(Te,ke)}var Ge="lz-skeleton-card",Re=class extends e{constructor(){super(...arguments);this.css=`
|
|
360
381
|
:host {
|
|
361
382
|
position: relative; display: inline-block;
|
|
362
383
|
width: var(--lz-width, 200px); height: var(--lz-height, 64px);
|
|
@@ -381,7 +402,7 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
381
402
|
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
382
403
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
383
404
|
}
|
|
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)}};
|
|
405
|
+
`}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)}};Re.observedAttributes=["width","height","track-color","speed"];function E(){r(Ge,Re)}var Ee="lz-skeleton-list",Se=class extends e{constructor(){super(...arguments);this.css=`
|
|
385
406
|
:host {
|
|
386
407
|
position: relative; display: block;
|
|
387
408
|
width: var(--lz-width, 180px);
|
|
@@ -406,122 +427,104 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
406
427
|
background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
|
|
407
428
|
animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
|
|
408
429
|
}
|
|
409
|
-
`}template(){let
|
|
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)}};Oe.observedAttributes=["size","accent","speed"];function P(){t(Ne,Oe)}var Ie="lz-morphing-orb",Le=class extends e{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)}};Le.observedAttributes=["size","accent","speed"];function O(){t(Ie,Le)}var De="lz-siri-orb",Me=class extends e{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)}};Me.observedAttributes=["size","accent","speed"];function N(){t(De,Me)}var Ce="lz-dot-orb",Tt=-.32,Be=class extends e{constructor(){super(...arguments);this.css=`
|
|
430
|
+
`}template(){let t=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<t;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)}};Se.observedAttributes=["width","rows","track-color","speed"];function N(){r(Ee,Se)}var Ie="lz-ios-27-orb",Rt=[{count:14,radius:.34,dot:.13,offset:0},{count:8,radius:.215,dot:.105,offset:22.5},{count:4,radius:.1,dot:.08,offset:45}],Gt=27,lt=3.2,Ne=class extends e{constructor(){super(...arguments);this.css=`
|
|
459
431
|
:host {
|
|
460
432
|
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
461
433
|
display: inline-block; position: relative; line-height: 1;
|
|
462
434
|
}
|
|
463
|
-
.lz-slot {
|
|
464
|
-
position: absolute; left: 50%; top: 50%;
|
|
465
|
-
width: 0; height: 0;
|
|
466
|
-
}
|
|
435
|
+
.lz-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
|
|
467
436
|
.lz-dot {
|
|
468
|
-
position: absolute;
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
animation: lz-dot-orb calc(2s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
437
|
+
position: absolute; border-radius: 50%; background: currentColor;
|
|
438
|
+
box-shadow: 0 0 0.12em 0.05em currentColor;
|
|
439
|
+
animation: lz-ios-glow calc(${lt}s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
472
440
|
}
|
|
473
|
-
`}template(){let
|
|
441
|
+
`}template(){let t=0,s='<div role="status" aria-label="Loading">',l=(o,n,d,Xe=!1)=>{let dt=o*Math.PI/180,ct=Xe?98:50-48*Math.cos(dt),Je=`${d.toFixed(3)}em`,et=`-${(d/2).toFixed(3)}em`,ft=`color-mix(in srgb, var(--lz-color, #f5f5f7) ${ct.toFixed(0)}%, var(--lz-accent, #0a84ff))`,pt=`-${(t/Gt*lt).toFixed(3)}s`,zt=n===0?"":` transform:rotate(${o}deg) translateY(-${n.toFixed(3)}em);`;s+=`<span class="lz-slot" style="${zt}"><span class="lz-dot" style="width:${Je};height:${Je};left:${et};top:${et};color:${ft};animation-delay:${pt}"></span></span>`,t++};for(let o of Rt){let n=360/o.count;for(let d=0;d<o.count;d++)l(o.offset+n*d,o.radius,o.dot)}return l(0,0,.13,!0),`${s}</div>`}sync(){this.varPx("--lz-size","size",44),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-accent","accent","#0a84ff"),this.varNum("--lz-speed","speed",1)}};Ne.observedAttributes=["size","color","accent","speed"];function I(){r(Ie,Ne)}var Le="lz-ai-orb",Pe=class extends e{constructor(){super(...arguments);this.css=`
|
|
474
442
|
:host {
|
|
475
443
|
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
476
444
|
display: inline-block; position: relative; line-height: 1;
|
|
477
445
|
}
|
|
478
|
-
.lz-
|
|
479
|
-
position: absolute;
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
var(--lz-accent, #0a84ff)
|
|
484
|
-
|
|
485
|
-
box-shadow: 0 0
|
|
446
|
+
.lz-orb {
|
|
447
|
+
position: absolute; inset: 0.08em; border-radius: 50%;
|
|
448
|
+
background: radial-gradient(circle at 34% 32%,
|
|
449
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 18%, white) 0%,
|
|
450
|
+
var(--lz-accent, #0a84ff) 40%,
|
|
451
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 74%,
|
|
452
|
+
transparent 100%);
|
|
453
|
+
box-shadow: 0 0 0.5em color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent);
|
|
486
454
|
animation: lz-orb-breathe calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
487
455
|
}
|
|
488
456
|
.lz-orbit {
|
|
489
457
|
position: absolute; inset: 0;
|
|
490
|
-
animation: lz-spin calc(
|
|
458
|
+
animation: lz-spin calc(4.5s * var(--lz-speed, 1)) linear infinite;
|
|
491
459
|
}
|
|
492
|
-
.lz-
|
|
493
|
-
position: absolute; left: 50%; top: 50
|
|
494
|
-
width: 0.
|
|
460
|
+
.lz-light {
|
|
461
|
+
position: absolute; left: 50%; top: calc(50% - 0.46em);
|
|
462
|
+
width: 0.13em; height: 0.13em; margin-left: -0.065em; border-radius: 50%;
|
|
463
|
+
background: var(--lz-color, #f5f5f7);
|
|
464
|
+
box-shadow: 0 0 0.22em 0.05em color-mix(in srgb, var(--lz-color, #f5f5f7) 55%, transparent);
|
|
465
|
+
animation: lz-pulse-breath calc(1.1s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
466
|
+
}
|
|
467
|
+
.lz-sparkle {
|
|
468
|
+
position: absolute; width: 0.28em; height: 0.28em;
|
|
469
|
+
animation: lz-ai-sparkle calc(3s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
470
|
+
}
|
|
471
|
+
.lz-sparkle::before, .lz-sparkle::after {
|
|
472
|
+
content: ""; position: absolute; inset: 0;
|
|
495
473
|
background: var(--lz-color, #f5f5f7);
|
|
496
|
-
box-shadow: 0 0 calc(0.16em) color-mix(in srgb, var(--lz-color, #f5f5f7) 50%, transparent);
|
|
497
474
|
}
|
|
498
|
-
|
|
475
|
+
.lz-sparkle::before {
|
|
476
|
+
clip-path: polygon(50% 0, 58% 50%, 50% 100%, 42% 50%);
|
|
477
|
+
}
|
|
478
|
+
.lz-sparkle::after {
|
|
479
|
+
clip-path: polygon(50% 0, 58% 50%, 50% 100%, 42% 50%);
|
|
480
|
+
transform: rotate(90deg);
|
|
481
|
+
}
|
|
482
|
+
.lz-sparkle.a { right: 0.01em; top: -0.01em; }
|
|
483
|
+
.lz-sparkle.b { left: -0.01em; bottom: 0.02em; animation-delay: -1.5s; }
|
|
484
|
+
`}template(){return'<div class="lz-orb" role="status" aria-label="Loading"></div><div class="lz-orbit" aria-hidden="true"><span class="lz-light"></span></div><span class="lz-sparkle a" aria-hidden="true"></span><span class="lz-sparkle b" aria-hidden="true"></span>'}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)}};Pe.observedAttributes=["size","accent","color","speed"];function P(){r(Le,Pe)}var Me="lz-ai-thinking",Oe=class extends e{constructor(){super(...arguments);this.css=`
|
|
499
485
|
:host {
|
|
500
|
-
font-size: var(--lz-size,
|
|
486
|
+
font-size: var(--lz-size, 40px); width: 2.1em; height: 0.66em;
|
|
501
487
|
display: inline-block; position: relative; line-height: 1;
|
|
502
488
|
}
|
|
503
|
-
.lz-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
489
|
+
.lz-field {
|
|
490
|
+
position: absolute; inset: 0; display: flex; align-items: center;
|
|
491
|
+
justify-content: center; gap: 0.32em; border-radius: 999px;
|
|
492
|
+
background: var(--lz-surface, rgba(255,255,255,0.07));
|
|
493
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lz-color, #f5f5f7) 12%, transparent);
|
|
494
|
+
}
|
|
495
|
+
.lz-dot {
|
|
496
|
+
width: 0.16em; height: 0.16em; border-radius: 50%;
|
|
497
|
+
background: var(--lz-color, #f5f5f7);
|
|
498
|
+
animation: lz-typing-pulse calc(1s * var(--lz-speed, 1)) cubic-bezier(0.28, 0.1, 0.25, 1.15) infinite;
|
|
499
|
+
}
|
|
500
|
+
.lz-field .lz-dot:nth-child(2) { animation-delay: -0.2s; }
|
|
501
|
+
.lz-field .lz-dot:nth-child(3) { animation-delay: -0.4s; }
|
|
502
|
+
.lz-aura {
|
|
503
|
+
position: absolute; inset: -0.16em; border-radius: 999px;
|
|
504
|
+
border: 2px solid transparent;
|
|
505
|
+
background: conic-gradient(from 0deg,
|
|
506
|
+
transparent 0deg,
|
|
507
|
+
var(--lz-accent, #0a84ff) 8deg,
|
|
508
|
+
color-mix(in srgb, var(--lz-accent, #0a84ff) 30%, transparent) 34deg,
|
|
509
|
+
transparent 92deg) border-box;
|
|
510
|
+
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
511
|
+
-webkit-mask-composite: xor;
|
|
512
|
+
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
513
|
+
mask-composite: exclude;
|
|
514
|
+
animation: lz-spin calc(1.9s * var(--lz-speed, 1)) linear infinite;
|
|
515
|
+
}
|
|
516
|
+
`}template(){return'<div class="lz-field" role="status" aria-label="Loading"><span class="lz-dot"></span><span class="lz-dot"></span><span class="lz-dot"></span></div><div class="lz-aura" aria-hidden="true"></div>'}sync(){this.varPx("--lz-size","size",40),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-accent","accent","#0a84ff"),this.varNum("--lz-speed","speed",1)}};Oe.observedAttributes=["size","color","accent","speed"];function L(){r(Me,Oe)}var Be="lz-ai-neural",De=class extends e{constructor(){super(...arguments);this.css=`
|
|
517
|
+
:host { font-size: var(--lz-size, 6px); }
|
|
518
|
+
.lz-grid {
|
|
519
|
+
display: grid;
|
|
520
|
+
gap: var(--lz-grid-gap, 10px);
|
|
521
|
+
grid-template-columns: repeat(var(--lz-cols, 5), 1em);
|
|
522
|
+
}
|
|
523
|
+
.lz-dot {
|
|
524
|
+
width: 1em; height: 1em; border-radius: 50%;
|
|
525
|
+
animation: lz-grid-dot-wave calc(1.5s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
|
|
526
|
+
}
|
|
527
|
+
`}template(){let t=Math.max(1,this.num("rows",3)),s=Math.max(1,this.num("cols",5)),l='<div class="lz-grid" role="status" aria-label="Loading">';for(let o=0;o<t;o++)for(let n=0;n<s;n++){let d=(o+n)%2===0?"color-mix(in srgb, var(--lz-accent, #0a84ff) 78%, var(--lz-color, #f5f5f7))":"var(--lz-color, #f5f5f7)",Xe=((o+n)*.12).toFixed(3);l+=`<span class="lz-dot" style="background:${d};animation-delay:-${Xe}s"></span>`}return`${l}</div>`}sync(){this.varPx("--lz-size","size",6),this.varNum("--lz-cols","cols",5),this.varPx("--lz-grid-gap","gap",10),this.varRaw("--lz-color","color","#f5f5f7"),this.varRaw("--lz-accent","accent","#0a84ff"),this.varNum("--lz-speed","speed",1)}};De.observedAttributes=["rows","cols","size","gap","color","accent","speed"];function O(){r(Be,De)}var Ce="lz-waveform",$e=class extends e{constructor(){super(...arguments);this.css=`
|
|
525
528
|
:host { font-size: var(--lz-size, 32px); display: inline-flex; line-height: 1; }
|
|
526
529
|
.lz-wave {
|
|
527
530
|
display: flex; align-items: center; gap: var(--lz-gap, 4px);
|
|
@@ -534,33 +537,70 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
534
537
|
animation: lz-waveform calc(1.6s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
535
538
|
}
|
|
536
539
|
.lz-bar.accent { background: var(--lz-accent, #0a84ff); }
|
|
537
|
-
`}template(){let
|
|
540
|
+
`}template(){let t=Math.max(5,Math.min(21,this.num("count",11))),s=(t-1)/2,l="";for(let o=0;o<t;o++){let n=(o-s)*.12,d=o===Math.floor(s)||o===Math.floor(s/2)||o===t-1-Math.floor(s/2);l+=`<span class="lz-bar${d?" accent":""}" style="animation-delay: ${n.toFixed(2)}s;"></span>`}return`<div class="lz-wave" role="status" aria-label="Loading">${l}</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)}};$e.observedAttributes=["size","count","color","accent","speed"];function M(){r(Ce,$e)}var Ze="lz-vinyl",Ye=class extends e{constructor(){super(...arguments);this.css=`
|
|
538
541
|
:host {
|
|
539
542
|
font-size: var(--lz-size, 48px); width: 2.2em; height: 2.2em;
|
|
540
543
|
display: inline-block; position: relative; line-height: 1;
|
|
541
544
|
}
|
|
542
545
|
.lz-disc {
|
|
543
|
-
position: absolute; inset: 0; border-radius: 50%;
|
|
546
|
+
position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
|
|
544
547
|
background:
|
|
545
|
-
repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.
|
|
546
|
-
radial-gradient(circle at 50% 50%,
|
|
548
|
+
repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.055) 0 1px, transparent 1px 4px),
|
|
549
|
+
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0 17%, rgba(0,0,0,0.22) 17% 18%, transparent 18% 20%, rgba(255,255,255,0.045) 20% 21%, transparent 21% 100%),
|
|
550
|
+
radial-gradient(circle at 50% 50%, #141216 0 100%);
|
|
547
551
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
|
|
548
|
-
animation: lz-spin calc(3.
|
|
552
|
+
animation: lz-spin calc(3.2s * var(--lz-speed, 1)) linear infinite;
|
|
553
|
+
}
|
|
554
|
+
.lz-disc::before {
|
|
555
|
+
content: ""; position: absolute; inset: 0; border-radius: 50%;
|
|
556
|
+
background: linear-gradient(112deg, transparent 26%, rgba(255,255,255,0.17) 40%, rgba(255,255,255,0.04) 49%, transparent 62%);
|
|
549
557
|
}
|
|
550
|
-
.lz-
|
|
551
|
-
position: absolute;
|
|
552
|
-
width: 0.
|
|
553
|
-
background:
|
|
554
|
-
|
|
558
|
+
.lz-label {
|
|
559
|
+
position: absolute; left: 50%; top: 50%;
|
|
560
|
+
width: 0.5em; height: 0.5em; margin: -0.25em 0 0 -0.25em; border-radius: 50%;
|
|
561
|
+
background:
|
|
562
|
+
radial-gradient(circle at 36% 30%, rgba(255,255,255,0.35) 0 5%, transparent 6%),
|
|
563
|
+
radial-gradient(circle at 63% 68%, rgba(0,0,0,0.4) 0 7%, transparent 8%),
|
|
564
|
+
var(--lz-accent, #0a84ff);
|
|
565
|
+
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
|
|
566
|
+
}
|
|
567
|
+
.lz-spindle {
|
|
568
|
+
position: absolute; left: 50%; top: 50%;
|
|
569
|
+
width: 0.09em; height: 0.09em; margin: -0.045em 0 0 -0.045em; border-radius: 50%;
|
|
570
|
+
background: rgba(0,0,0,0.9);
|
|
571
|
+
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
|
|
572
|
+
}
|
|
573
|
+
.lz-arm {
|
|
574
|
+
position: absolute; top: 0.05em; right: 0.06em; width: 0.8em; height: 0.8em;
|
|
575
|
+
transform-origin: top right;
|
|
555
576
|
animation: lz-needle-bob calc(1.8s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
556
577
|
}
|
|
557
|
-
.lz-
|
|
558
|
-
|
|
559
|
-
width: 0.
|
|
560
|
-
|
|
561
|
-
|
|
578
|
+
.lz-post {
|
|
579
|
+
position: absolute; right: -0.01em; top: -0.01em;
|
|
580
|
+
width: 0.13em; height: 0.13em; border-radius: 50%;
|
|
581
|
+
background: radial-gradient(circle at 35% 30%, var(--lz-color, #f5f5f7) 0 42%, color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, transparent) 100%);
|
|
582
|
+
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
|
|
583
|
+
}
|
|
584
|
+
.lz-shaft {
|
|
585
|
+
position: absolute; right: 0.045em; top: 0.02em;
|
|
586
|
+
width: 0.06em; height: 0.48em; border-radius: 3px;
|
|
587
|
+
background: linear-gradient(var(--lz-color, #f5f5f7), color-mix(in srgb, var(--lz-color, #f5f5f7) 35%, transparent));
|
|
588
|
+
box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.25);
|
|
589
|
+
transform-origin: top center;
|
|
590
|
+
transform: rotate(24deg);
|
|
591
|
+
}
|
|
592
|
+
.lz-shaft::before {
|
|
593
|
+
content: ""; position: absolute; top: -0.035em; left: -0.04em;
|
|
594
|
+
width: 0.14em; height: 0.14em; border-radius: 50%;
|
|
595
|
+
background: var(--lz-color, #f5f5f7);
|
|
596
|
+
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
|
|
597
|
+
}
|
|
598
|
+
.lz-shaft::after {
|
|
599
|
+
content: ""; position: absolute; bottom: -0.05em; left: 0.005em;
|
|
600
|
+
width: 0.05em; height: 0.1em; border-radius: 0 0 3px 3px;
|
|
601
|
+
background: color-mix(in srgb, var(--lz-accent, #0a84ff) 75%, white);
|
|
562
602
|
}
|
|
563
|
-
`}template(){return'<div class="lz-disc" role="status" aria-label="Loading"></div><div class="lz-
|
|
603
|
+
`}template(){return'<div class="lz-disc" role="status" aria-label="Loading"><span class="lz-label"></span><span class="lz-spindle"></span></div><div class="lz-arm" aria-hidden="true"><span class="lz-post"></span><span class="lz-shaft"></span></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)}};Ye.observedAttributes=["size","accent","color","speed"];function D(){r(Ze,Ye)}var Ue="lz-sonar",nt=3.6,He=class extends e{constructor(){super(...arguments);this.css=`
|
|
564
604
|
:host {
|
|
565
605
|
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
566
606
|
display: inline-block; position: relative; line-height: 1;
|
|
@@ -574,20 +614,41 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
574
614
|
.lz-ring {
|
|
575
615
|
position: absolute; inset: 0.14em; border-radius: 50%;
|
|
576
616
|
border: 1px solid var(--lz-accent, #0a84ff);
|
|
577
|
-
animation: lz-sonar-ring calc(${
|
|
617
|
+
animation: lz-sonar-ring calc(${nt}s * var(--lz-speed, 1)) cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
|
|
578
618
|
}
|
|
579
|
-
`}template(){let
|
|
619
|
+
`}template(){let t=Math.max(1,Math.min(4,this.num("count",3))),s="";for(let l=0;l<t;l++)s+=`<span class="lz-ring" style="animation-delay: -${(l*nt/t).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)}};He.observedAttributes=["size","count","accent","color","speed"];function B(){r(Ue,He)}var Ve="lz-music-note",We=class extends e{constructor(){super(...arguments);this.css=`
|
|
580
620
|
:host { font-size: var(--lz-size, 32px); display: inline-flex; line-height: 1; }
|
|
581
|
-
.lz-notes { display: flex; align-items:
|
|
621
|
+
.lz-notes { display: flex; align-items: center; gap: 0.5em; }
|
|
582
622
|
.lz-note {
|
|
583
|
-
display: inline-block;
|
|
584
|
-
|
|
623
|
+
position: relative; display: inline-block;
|
|
624
|
+
width: 0.42em; height: 0.88em;
|
|
585
625
|
animation: lz-note-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
|
|
586
626
|
}
|
|
587
627
|
.lz-notes .lz-note:nth-child(2) { animation-delay: -0.5s; }
|
|
588
628
|
.lz-notes .lz-note:nth-child(3) { animation-delay: -0.9s; }
|
|
589
629
|
.lz-notes .lz-note:nth-child(4) { animation-delay: -0.3s; }
|
|
590
|
-
|
|
630
|
+
.lz-head {
|
|
631
|
+
position: absolute; left: 0; bottom: 0.06em;
|
|
632
|
+
width: 0.3em; height: 0.24em;
|
|
633
|
+
border-radius: 55% 45% 50% 50%;
|
|
634
|
+
background: var(--lz-color, #f5f5f7);
|
|
635
|
+
box-shadow: inset -0.045em -0.02em 0 color-mix(in srgb, var(--lz-color, #f5f5f7) 55%, #000);
|
|
636
|
+
transform: rotate(-18deg);
|
|
637
|
+
}
|
|
638
|
+
.lz-stem {
|
|
639
|
+
position: absolute; left: 0.175em; bottom: 0.13em;
|
|
640
|
+
width: 0.045em; height: 0.6em; border-radius: 2px;
|
|
641
|
+
background: var(--lz-color, #f5f5f7);
|
|
642
|
+
}
|
|
643
|
+
.lz-flag {
|
|
644
|
+
position: absolute; left: 0.22em; bottom: 0.61em;
|
|
645
|
+
width: 0.24em; height: 0.2em;
|
|
646
|
+
border: 0.045em solid var(--lz-color, #f5f5f7);
|
|
647
|
+
border-left: none; border-top: none;
|
|
648
|
+
border-radius: 0 0 0.14em 0.02em / 0 0 0.26em 0.02em;
|
|
649
|
+
}
|
|
650
|
+
.lz-note.second .lz-head { background: color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, var(--lz-accent, #0a84ff)); }
|
|
651
|
+
`}template(){let t=Math.max(1,Math.min(4,this.num("count",2))),s="";for(let l=0;l<t;l++)s+=`<span class="${l===1?"lz-note second":"lz-note"}"><span class="lz-head"></span><span class="lz-stem"></span><span class="lz-flag"></span></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)}};We.observedAttributes=["size","count","color","speed"];function $(){r(Ve,We)}var Fe="lz-activity-rings",Ke=class extends e{constructor(){super(...arguments);this.css=`
|
|
591
652
|
:host {
|
|
592
653
|
font-size: var(--lz-size, 44px); width: 1em; height: 1em;
|
|
593
654
|
display: inline-block; line-height: 1;
|
|
@@ -605,5 +666,5 @@ ${this.css}</style><div class="lz-root"></div>`,this._rootEl=r.querySelector(".l
|
|
|
605
666
|
<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
667
|
<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
668
|
<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)}};
|
|
669
|
+
</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)}};Ke.observedAttributes=["size","accent","color","color-weak","speed"];function C(){r(Fe,Ke)}function qe(){f(),p(),z(),m(),h(),v(),g(),b(),u(),x(),A(),w(),_(),y(),k(),T(),R(),G(),S(),E(),N(),I(),P(),L(),O(),M(),D(),B(),$(),C()}qe();0&&(module.exports={ACTIVITY_RINGS_TAG,AI_NEURAL_TAG,AI_ORB_TAG,AI_THINKING_TAG,ARC_SPINNER_TAG,BOUNCING_DOTS_TAG,BREATHING_PULSE_TAG,DOT_GRID_WAVE_TAG,ELLIPSIS_TAG,EQUALIZER_TAG,EYES_TAG,HELIX_DOTS_TAG,INDETERMINATE_PROGRESS_BAR_TAG,IOS27_ORB_TAG,KEYFRAMES,LZPattern,MATERIAL_DOUBLE_ARC_TAG,MORPHING_SQUARE_TAG,MUSIC_NOTE_TAG,ORBIT_DOTS_TAG,ORBIT_RING_DOTS_TAG,PROGRESS_BAR_TAG,PROGRESS_RING_TAG,SCAN_SWEEP_TAG,SCOPED_CSS,SKELETON_CARD_TAG,SKELETON_LIST_TAG,SKELETON_SHIMMER_TAG,SONAR_TAG,TYPING_DOTS_TAG,VINYL_TAG,WAVEFORM_TAG,WAVE_DOTS_TAG,define,defineActivityRings,defineAiNeural,defineAiOrb,defineAiThinking,defineAll,defineArcSpinner,defineBouncingDots,defineBreathingPulse,defineDotGridWave,defineEllipsis,defineEqualizer,defineEyes,defineHelixDots,defineIndeterminateProgressBar,defineIos27Orb,defineMaterialDoubleArc,defineMorphingSquare,defineMusicNote,defineOrbitDots,defineOrbitRingDots,defineProgressBar,defineProgressRing,defineScanSweep,defineSkeletonCard,defineSkeletonList,defineSkeletonShimmer,defineSonar,defineTypingDots,defineVinyl,defineWaveDots,defineWaveform});
|
|
609
670
|
//# sourceMappingURL=index.cjs.map
|