use-scroll-animate 2.0.1 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/README.md +31 -1
- package/README_ja.md +18 -0
- package/README_zh.md +31 -0
- package/dist/chunks/base-BiTc85p_.cjs +232 -0
- package/dist/chunks/base-BiTc85p_.cjs.map +1 -0
- package/dist/chunks/base-CFtnmfli.js +219 -0
- package/dist/chunks/base-CFtnmfli.js.map +1 -0
- package/dist/components/background.cjs +395 -0
- package/dist/components/background.cjs.map +1 -0
- package/dist/components/background.css +7 -0
- package/dist/components/background.d.cts +132 -0
- package/dist/components/background.d.ts +132 -0
- package/dist/components/background.js +387 -0
- package/dist/components/background.js.map +1 -0
- package/dist/components/feedback.cjs +444 -0
- package/dist/components/feedback.cjs.map +1 -0
- package/dist/components/feedback.css +7 -0
- package/dist/components/feedback.d.cts +170 -0
- package/dist/components/feedback.d.ts +170 -0
- package/dist/components/feedback.js +434 -0
- package/dist/components/feedback.js.map +1 -0
- package/dist/components/interaction.cjs +426 -0
- package/dist/components/interaction.cjs.map +1 -0
- package/dist/components/interaction.css +8 -0
- package/dist/components/interaction.d.cts +142 -0
- package/dist/components/interaction.d.ts +142 -0
- package/dist/components/interaction.js +417 -0
- package/dist/components/interaction.js.map +1 -0
- package/dist/components/reveal.cjs +360 -0
- package/dist/components/reveal.cjs.map +1 -0
- package/dist/components/reveal.css +5 -0
- package/dist/components/reveal.d.cts +132 -0
- package/dist/components/reveal.d.ts +132 -0
- package/dist/components/reveal.js +350 -0
- package/dist/components/reveal.js.map +1 -0
- package/dist/components/text.cjs +528 -0
- package/dist/components/text.cjs.map +1 -0
- package/dist/components/text.css +7 -0
- package/dist/components/text.d.cts +164 -0
- package/dist/components/text.d.ts +164 -0
- package/dist/components/text.js +517 -0
- package/dist/components/text.js.map +1 -0
- package/dist/components/transitions.cjs +546 -0
- package/dist/components/transitions.cjs.map +1 -0
- package/dist/components/transitions.css +6 -0
- package/dist/components/transitions.d.cts +180 -0
- package/dist/components/transitions.d.ts +180 -0
- package/dist/components/transitions.js +536 -0
- package/dist/components/transitions.js.map +1 -0
- package/dist/components.cjs +106 -0
- package/dist/components.cjs.map +1 -0
- package/dist/components.css +30 -0
- package/dist/components.d.cts +741 -0
- package/dist/components.d.ts +741 -0
- package/dist/components.js +61 -0
- package/dist/components.js.map +1 -0
- package/dist/components.umd.js +22 -0
- package/dist/components.umd.js.map +1 -0
- package/docs/API.md +2 -0
- package/docs/components.md +155 -0
- package/docs/images/showcase-detail.png +0 -0
- package/docs/images/showcase-grid.png +0 -0
- package/docs/images/showcase-mobile.png +0 -0
- package/docs/windows-apps.md +108 -0
- package/package.json +93 -5
|
@@ -0,0 +1,417 @@
|
|
|
1
|
+
import { d as defineElement, E as EASE_OUT, r as raf, b as caf, a as clamp, e as EASE_SPRING } from '../chunks/base-CFtnmfli.js';
|
|
2
|
+
export { c as configureComponents, p as prefersReducedMotion } from '../chunks/base-CFtnmfli.js';
|
|
3
|
+
|
|
4
|
+
var css$5 = "usa-ripple{position:relative;display:inline-block;overflow:hidden;isolation:isolate;border-radius:inherit;-webkit-tap-highlight-color:transparent}usa-ripple[block]{display:block}usa-ripple .usa-ripple-wave{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);z-index:-1;will-change:transform,opacity}";
|
|
5
|
+
|
|
6
|
+
function defineRipple(tag = 'usa-ripple') {
|
|
7
|
+
return defineElement(tag, (Base) => class UsaRipple extends Base {
|
|
8
|
+
static get observedAttributes() {
|
|
9
|
+
return [];
|
|
10
|
+
}
|
|
11
|
+
mount() {
|
|
12
|
+
this.listen(this, 'pointerdown', (e) => {
|
|
13
|
+
if (e.button !== 0 && e.pointerType === 'mouse')
|
|
14
|
+
return;
|
|
15
|
+
this.ripple(e.clientX, e.clientY);
|
|
16
|
+
});
|
|
17
|
+
this.listen(this, 'keydown', (e) => {
|
|
18
|
+
if ((e.key === 'Enter' || e.key === ' ') && !e.repeat)
|
|
19
|
+
this.ripple();
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
ripple(x, y) {
|
|
23
|
+
if (this.flag('disabled'))
|
|
24
|
+
return;
|
|
25
|
+
const r = this.getBoundingClientRect();
|
|
26
|
+
const centered = this.flag('centered') || x === undefined || y === undefined;
|
|
27
|
+
const cx = centered ? r.width / 2 : x - r.left;
|
|
28
|
+
const cy = centered ? r.height / 2 : y - r.top;
|
|
29
|
+
const radius = Math.hypot(Math.max(cx, r.width - cx), Math.max(cy, r.height - cy));
|
|
30
|
+
const wave = document.createElement('span');
|
|
31
|
+
wave.className = 'usa-ripple-wave';
|
|
32
|
+
wave.setAttribute('aria-hidden', 'true');
|
|
33
|
+
const size = radius * 2;
|
|
34
|
+
wave.style.cssText = `width:${size}px;height:${size}px;left:${cx - radius}px;top:${cy - radius}px;background:${this.str('color', 'currentColor')}`;
|
|
35
|
+
this.append(wave);
|
|
36
|
+
const opacity = this.num('opacity', 0.22);
|
|
37
|
+
const duration = this.num('duration', 550);
|
|
38
|
+
const frames = this.reduced
|
|
39
|
+
? [{ opacity }, { opacity: 0 }]
|
|
40
|
+
: [
|
|
41
|
+
{ transform: 'scale(0)', opacity },
|
|
42
|
+
{ transform: 'scale(1)', opacity, offset: 0.7 },
|
|
43
|
+
{ transform: 'scale(1)', opacity: 0 },
|
|
44
|
+
];
|
|
45
|
+
const a = this.motion(wave, frames, { duration: this.reduced ? 300 : duration, easing: EASE_OUT, fill: 'forwards' });
|
|
46
|
+
if (a)
|
|
47
|
+
a.onfinish = () => wave.remove();
|
|
48
|
+
else
|
|
49
|
+
setTimeout(() => wave.remove(), 0);
|
|
50
|
+
}
|
|
51
|
+
}, { id: 'ripple', text: css$5 });
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
var css$4 = "usa-magnetic{display:inline-block}usa-magnetic>*{transform:translate3d(var(--usa-mx,0px),var(--usa-my,0px),0);transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1)}usa-magnetic[data-active]>*{transition-duration:0.15s;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){usa-magnetic>*,usa-tilt,usa-toggle .usa-toggle-knob{transition:none}}";
|
|
55
|
+
|
|
56
|
+
function defineMagnetic(tag = 'usa-magnetic') {
|
|
57
|
+
return defineElement(tag, (Base) => class UsaMagnetic extends Base {
|
|
58
|
+
constructor() {
|
|
59
|
+
super(...arguments);
|
|
60
|
+
this._frame = 0;
|
|
61
|
+
}
|
|
62
|
+
static get observedAttributes() {
|
|
63
|
+
return ['strength', 'radius', 'disabled'];
|
|
64
|
+
}
|
|
65
|
+
mount() {
|
|
66
|
+
if (this.reduced || this.flag('disabled'))
|
|
67
|
+
return;
|
|
68
|
+
if (typeof matchMedia === 'function' && !matchMedia('(hover: hover) and (pointer: fine)').matches)
|
|
69
|
+
return;
|
|
70
|
+
const strength = this.num('strength', 0.35);
|
|
71
|
+
const radius = this.num('radius', 60);
|
|
72
|
+
let x = 0;
|
|
73
|
+
let y = 0;
|
|
74
|
+
let active = false;
|
|
75
|
+
const apply = () => {
|
|
76
|
+
this._frame = 0;
|
|
77
|
+
const r = this.getBoundingClientRect();
|
|
78
|
+
const dx = x - (r.left + r.width / 2);
|
|
79
|
+
const dy = y - (r.top + r.height / 2);
|
|
80
|
+
const near = Math.abs(dx) < r.width / 2 + radius && Math.abs(dy) < r.height / 2 + radius;
|
|
81
|
+
if (near) {
|
|
82
|
+
active = true;
|
|
83
|
+
this.setAttribute('data-active', '');
|
|
84
|
+
this.style.setProperty('--usa-mx', `${(dx * strength).toFixed(2)}px`);
|
|
85
|
+
this.style.setProperty('--usa-my', `${(dy * strength).toFixed(2)}px`);
|
|
86
|
+
}
|
|
87
|
+
else if (active)
|
|
88
|
+
this.release();
|
|
89
|
+
};
|
|
90
|
+
this.listen(document, 'pointermove', (e) => {
|
|
91
|
+
if (e.pointerType !== 'mouse' && e.pointerType !== 'pen')
|
|
92
|
+
return;
|
|
93
|
+
x = e.clientX;
|
|
94
|
+
y = e.clientY;
|
|
95
|
+
if (!this._frame)
|
|
96
|
+
this._frame = raf(apply);
|
|
97
|
+
}, { passive: true });
|
|
98
|
+
this.listen(document, 'pointerleave', () => this.release());
|
|
99
|
+
this.listen(window, 'blur', () => this.release());
|
|
100
|
+
}
|
|
101
|
+
release() {
|
|
102
|
+
this.removeAttribute('data-active');
|
|
103
|
+
this.style.removeProperty('--usa-mx');
|
|
104
|
+
this.style.removeProperty('--usa-my');
|
|
105
|
+
}
|
|
106
|
+
unmount() {
|
|
107
|
+
caf(this._frame);
|
|
108
|
+
this._frame = 0;
|
|
109
|
+
this.release();
|
|
110
|
+
}
|
|
111
|
+
}, { id: 'magnetic', text: css$4 });
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
var css$3 = "usa-tilt{display:block;position:relative;transform-style:preserve-3d;transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);will-change:transform}usa-tilt[data-active]{transition-duration:0.12s}usa-tilt .usa-tilt-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 0.3s ease;background:radial-gradient(circle at var(--usa-glare-x,50%) var(--usa-glare-y,50%),rgb(255 255 255 / 0.35),transparent 55%);mix-blend-mode:soft-light}usa-tilt[data-active] .usa-tilt-glare{opacity:1}";
|
|
115
|
+
|
|
116
|
+
function defineTilt(tag = 'usa-tilt') {
|
|
117
|
+
return defineElement(tag, (Base) => class UsaTilt extends Base {
|
|
118
|
+
constructor() {
|
|
119
|
+
super(...arguments);
|
|
120
|
+
this._frame = 0;
|
|
121
|
+
this._glare = null;
|
|
122
|
+
}
|
|
123
|
+
static get observedAttributes() {
|
|
124
|
+
return ['max', 'scale', 'perspective', 'glare', 'reverse', 'disabled'];
|
|
125
|
+
}
|
|
126
|
+
mount() {
|
|
127
|
+
if (this.flag('glare') && !this._glare) {
|
|
128
|
+
this._glare = document.createElement('span');
|
|
129
|
+
this._glare.className = 'usa-tilt-glare';
|
|
130
|
+
this._glare.setAttribute('aria-hidden', 'true');
|
|
131
|
+
this.append(this._glare);
|
|
132
|
+
}
|
|
133
|
+
else if (!this.flag('glare') && this._glare) {
|
|
134
|
+
this._glare.remove();
|
|
135
|
+
this._glare = null;
|
|
136
|
+
}
|
|
137
|
+
if (this.reduced || this.flag('disabled'))
|
|
138
|
+
return;
|
|
139
|
+
const max = this.num('max', 10) * (this.flag('reverse') ? -1 : 1);
|
|
140
|
+
const scale = this.num('scale', 1.03);
|
|
141
|
+
const persp = this.num('perspective', 900);
|
|
142
|
+
let px = 0.5;
|
|
143
|
+
let py = 0.5;
|
|
144
|
+
let rect = null;
|
|
145
|
+
const apply = () => {
|
|
146
|
+
this._frame = 0;
|
|
147
|
+
const nx = clamp(px * 2 - 1, -1, 1);
|
|
148
|
+
const ny = clamp(py * 2 - 1, -1, 1);
|
|
149
|
+
this.style.transform = `perspective(${persp}px) rotateX(${(-ny * max).toFixed(2)}deg) rotateY(${(nx * max).toFixed(2)}deg) scale(${scale})`;
|
|
150
|
+
this.style.setProperty('--usa-tilt-x', nx.toFixed(3));
|
|
151
|
+
this.style.setProperty('--usa-tilt-y', ny.toFixed(3));
|
|
152
|
+
this.style.setProperty('--usa-glare-x', `${(px * 100).toFixed(1)}%`);
|
|
153
|
+
this.style.setProperty('--usa-glare-y', `${(py * 100).toFixed(1)}%`);
|
|
154
|
+
};
|
|
155
|
+
this.listen(this, 'pointerenter', (e) => {
|
|
156
|
+
if (e.pointerType === 'touch')
|
|
157
|
+
return;
|
|
158
|
+
rect = this.getBoundingClientRect();
|
|
159
|
+
this.setAttribute('data-active', '');
|
|
160
|
+
});
|
|
161
|
+
this.listen(this, 'pointermove', (e) => {
|
|
162
|
+
if (e.pointerType === 'touch')
|
|
163
|
+
return;
|
|
164
|
+
rect = rect || this.getBoundingClientRect();
|
|
165
|
+
px = (e.clientX - rect.left) / (rect.width || 1);
|
|
166
|
+
py = (e.clientY - rect.top) / (rect.height || 1);
|
|
167
|
+
if (!this._frame)
|
|
168
|
+
this._frame = raf(apply);
|
|
169
|
+
});
|
|
170
|
+
this.listen(this, 'pointerleave', () => this.reset());
|
|
171
|
+
}
|
|
172
|
+
reset() {
|
|
173
|
+
caf(this._frame);
|
|
174
|
+
this._frame = 0;
|
|
175
|
+
this.removeAttribute('data-active');
|
|
176
|
+
this.style.transform = '';
|
|
177
|
+
this.style.setProperty('--usa-tilt-x', '0');
|
|
178
|
+
this.style.setProperty('--usa-tilt-y', '0');
|
|
179
|
+
}
|
|
180
|
+
unmount() {
|
|
181
|
+
this.reset();
|
|
182
|
+
}
|
|
183
|
+
}, { id: 'tilt', text: css$3 });
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
var css$2 = "usa-spotlight{display:block;--usa-spot-size:160px;--usa-spot-color:rgb(255 255 255 / 0.55);--usa-spot-border:1px}usa-spotlight .usa-spotlight-item{position:relative;isolation:isolate}usa-spotlight .usa-spotlight-item::before,usa-spotlight .usa-spotlight-item::after{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 0.25s ease}usa-spotlight .usa-spotlight-item::before{padding:var(--usa-spot-border);background:radial-gradient(var(--usa-spot-size) circle at var(--usa-spot-x,-999px) var(--usa-spot-y,-999px),var(--usa-spot-color),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}usa-spotlight .usa-spotlight-item::after{z-index:-1;background:radial-gradient(calc(var(--usa-spot-size) * 0.9) circle at var(--usa-spot-x,-999px) var(--usa-spot-y,-999px),color-mix(in srgb,var(--usa-spot-color) 30%,transparent),transparent 70%)}usa-spotlight[data-lit] .usa-spotlight-item::before{opacity:1}usa-spotlight[data-lit] .usa-spotlight-item:hover::after{opacity:1}usa-spotlight[no-fill] .usa-spotlight-item::after{display:none}";
|
|
187
|
+
|
|
188
|
+
function defineSpotlight(tag = 'usa-spotlight') {
|
|
189
|
+
return defineElement(tag, (Base) => class UsaSpotlight extends Base {
|
|
190
|
+
constructor() {
|
|
191
|
+
super(...arguments);
|
|
192
|
+
this._frame = 0;
|
|
193
|
+
}
|
|
194
|
+
static get observedAttributes() {
|
|
195
|
+
return ['size', 'color', 'border'];
|
|
196
|
+
}
|
|
197
|
+
items() {
|
|
198
|
+
const marked = Array.from(this.querySelectorAll('[data-spotlight]'));
|
|
199
|
+
const items = marked.length ? marked : Array.from(this.children);
|
|
200
|
+
items.forEach((el) => el.classList.add('usa-spotlight-item'));
|
|
201
|
+
return items;
|
|
202
|
+
}
|
|
203
|
+
mount() {
|
|
204
|
+
const size = this.getAttribute('size');
|
|
205
|
+
if (size)
|
|
206
|
+
this.style.setProperty('--usa-spot-size', `${Number(size)}px`);
|
|
207
|
+
const color = this.getAttribute('color');
|
|
208
|
+
if (color)
|
|
209
|
+
this.style.setProperty('--usa-spot-color', color);
|
|
210
|
+
const border = this.getAttribute('border');
|
|
211
|
+
if (border)
|
|
212
|
+
this.style.setProperty('--usa-spot-border', `${Number(border)}px`);
|
|
213
|
+
let items = this.items();
|
|
214
|
+
let x = 0;
|
|
215
|
+
let y = 0;
|
|
216
|
+
const apply = () => {
|
|
217
|
+
this._frame = 0;
|
|
218
|
+
// All reads, then all writes
|
|
219
|
+
const rects = items.map((el) => el.getBoundingClientRect());
|
|
220
|
+
rects.forEach((r, i) => {
|
|
221
|
+
items[i].style.setProperty('--usa-spot-x', `${(x - r.left).toFixed(1)}px`);
|
|
222
|
+
items[i].style.setProperty('--usa-spot-y', `${(y - r.top).toFixed(1)}px`);
|
|
223
|
+
});
|
|
224
|
+
};
|
|
225
|
+
this.listen(this, 'pointerenter', (e) => {
|
|
226
|
+
if (e.pointerType === 'touch')
|
|
227
|
+
return;
|
|
228
|
+
items = this.items();
|
|
229
|
+
this.setAttribute('data-lit', '');
|
|
230
|
+
});
|
|
231
|
+
this.listen(this, 'pointermove', (e) => {
|
|
232
|
+
if (e.pointerType === 'touch')
|
|
233
|
+
return;
|
|
234
|
+
x = e.clientX;
|
|
235
|
+
y = e.clientY;
|
|
236
|
+
if (!this.hasAttribute('data-lit'))
|
|
237
|
+
this.setAttribute('data-lit', '');
|
|
238
|
+
if (!this._frame)
|
|
239
|
+
this._frame = raf(apply);
|
|
240
|
+
});
|
|
241
|
+
this.listen(this, 'pointerleave', () => this.removeAttribute('data-lit'));
|
|
242
|
+
}
|
|
243
|
+
unmount() {
|
|
244
|
+
caf(this._frame);
|
|
245
|
+
this._frame = 0;
|
|
246
|
+
this.removeAttribute('data-lit');
|
|
247
|
+
}
|
|
248
|
+
}, { id: 'spotlight', text: css$2 });
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
var css$1 = "usa-press{display:inline-block;touch-action:manipulation;-webkit-tap-highlight-color:transparent}usa-press[block]{display:block}";
|
|
252
|
+
|
|
253
|
+
function definePress(tag = 'usa-press') {
|
|
254
|
+
return defineElement(tag, (Base) => class UsaPress extends Base {
|
|
255
|
+
constructor() {
|
|
256
|
+
super(...arguments);
|
|
257
|
+
this._anim = null;
|
|
258
|
+
this._down = false;
|
|
259
|
+
}
|
|
260
|
+
static get observedAttributes() {
|
|
261
|
+
return ['disabled'];
|
|
262
|
+
}
|
|
263
|
+
get pressed() {
|
|
264
|
+
return this._down;
|
|
265
|
+
}
|
|
266
|
+
frame(down) {
|
|
267
|
+
if (this.reduced)
|
|
268
|
+
return { opacity: down ? 0.7 : 1 };
|
|
269
|
+
return { transform: down ? `scale(${this.num('scale', 0.95)})` : 'scale(1)' };
|
|
270
|
+
}
|
|
271
|
+
down() {
|
|
272
|
+
if (this._down || this.flag('disabled'))
|
|
273
|
+
return;
|
|
274
|
+
this._down = true;
|
|
275
|
+
this.setAttribute('data-pressed', '');
|
|
276
|
+
const from = this.currentFrame();
|
|
277
|
+
this._anim?.cancel();
|
|
278
|
+
this._anim = this.motion(this, [from, this.frame(true)], { duration: 120, easing: 'cubic-bezier(0.3, 0, 0.7, 1)', fill: 'forwards' });
|
|
279
|
+
}
|
|
280
|
+
up() {
|
|
281
|
+
if (!this._down)
|
|
282
|
+
return;
|
|
283
|
+
this._down = false;
|
|
284
|
+
this.removeAttribute('data-pressed');
|
|
285
|
+
const from = this.currentFrame();
|
|
286
|
+
this._anim?.cancel();
|
|
287
|
+
const frames = this.flag('bounce') && !this.reduced
|
|
288
|
+
? [from, { transform: 'scale(1.06)', offset: 0.45 }, { transform: 'scale(0.99)', offset: 0.75 }, this.frame(false)]
|
|
289
|
+
: [from, this.frame(false)];
|
|
290
|
+
const a = this.motion(this, frames, { duration: this.flag('bounce') ? 480 : 320, easing: EASE_SPRING });
|
|
291
|
+
this._anim = a;
|
|
292
|
+
if (a)
|
|
293
|
+
a.onfinish = () => this._anim === a && (this._anim = null);
|
|
294
|
+
}
|
|
295
|
+
currentFrame() {
|
|
296
|
+
if (typeof getComputedStyle !== 'function')
|
|
297
|
+
return this.frame(false);
|
|
298
|
+
const cs = getComputedStyle(this);
|
|
299
|
+
return this.reduced ? { opacity: cs.opacity || '1' } : { transform: cs.transform && cs.transform !== 'none' ? cs.transform : 'scale(1)' };
|
|
300
|
+
}
|
|
301
|
+
mount() {
|
|
302
|
+
this.listen(this, 'pointerdown', (e) => {
|
|
303
|
+
if (e.pointerType === 'mouse' && e.button !== 0)
|
|
304
|
+
return;
|
|
305
|
+
this.down();
|
|
306
|
+
});
|
|
307
|
+
for (const t of ['pointerup', 'pointerleave', 'pointercancel', 'blur'])
|
|
308
|
+
this.listen(this, t, () => this.up());
|
|
309
|
+
this.listen(this, 'keydown', (e) => (e.key === ' ' || e.key === 'Enter') && !e.repeat && this.down());
|
|
310
|
+
this.listen(this, 'keyup', (e) => (e.key === ' ' || e.key === 'Enter') && this.up());
|
|
311
|
+
}
|
|
312
|
+
unmount() {
|
|
313
|
+
this._anim?.cancel();
|
|
314
|
+
this._anim = null;
|
|
315
|
+
this._down = false;
|
|
316
|
+
}
|
|
317
|
+
}, { id: 'press', text: css$1 });
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
var css = "usa-toggle{--usa-toggle-w:40px;--usa-toggle-h:20px;--usa-toggle-on:#7c5cff;--usa-toggle-off:transparent;--usa-toggle-line:currentColor;display:inline-flex;align-items:center;gap:0.6em;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle}usa-toggle[disabled]{cursor:not-allowed;opacity:0.45}usa-toggle .usa-toggle-track{position:relative;flex:none;width:var(--usa-toggle-w);height:var(--usa-toggle-h);border-radius:999px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--usa-toggle-line) 60%,transparent);background:var(--usa-toggle-off);transition:background-color 0.2s ease,border-color 0.2s ease}usa-toggle .usa-toggle-knob{position:absolute;top:50%;left:3px;width:calc(var(--usa-toggle-h) - 8px);height:calc(var(--usa-toggle-h) - 8px);margin-top:calc((var(--usa-toggle-h) - 8px) / -2);border-radius:999px;background:color-mix(in srgb,var(--usa-toggle-line) 75%,transparent);transform-origin:left center;transition:transform 0.28s cubic-bezier(0.34,1.4,0.64,1),background-color 0.2s ease}usa-toggle:hover .usa-toggle-knob{transform:scale(1.15)}usa-toggle[data-pressed] .usa-toggle-knob{transform:scaleX(1.45)}usa-toggle[checked] .usa-toggle-track{background:var(--usa-toggle-on);border-color:var(--usa-toggle-on)}usa-toggle[checked] .usa-toggle-knob{background:#fff;transform:translateX(calc(var(--usa-toggle-w) - var(--usa-toggle-h)));transform-origin:right center}usa-toggle[checked]:hover .usa-toggle-knob{transform:translateX(calc(var(--usa-toggle-w) - var(--usa-toggle-h))) scale(1.15)}usa-toggle[checked][data-pressed] .usa-toggle-knob{transform:translateX(calc(var(--usa-toggle-w) - var(--usa-toggle-h) - 4px)) scaleX(1.45)}usa-toggle:focus-visible{outline:none}usa-toggle:focus-visible .usa-toggle-track{outline:2px solid var(--usa-toggle-on);outline-offset:2px}";
|
|
321
|
+
|
|
322
|
+
function defineToggle(tag = 'usa-toggle') {
|
|
323
|
+
return defineElement(tag, (Base) => { var _a; return _a = class UsaToggle extends Base {
|
|
324
|
+
static get observedAttributes() {
|
|
325
|
+
return ['checked', 'disabled', 'label'];
|
|
326
|
+
}
|
|
327
|
+
constructor() {
|
|
328
|
+
super();
|
|
329
|
+
this._internals = null;
|
|
330
|
+
try {
|
|
331
|
+
this._internals = typeof this.attachInternals === 'function' ? this.attachInternals() : null;
|
|
332
|
+
}
|
|
333
|
+
catch {
|
|
334
|
+
this._internals = null;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
get checked() {
|
|
338
|
+
return this.hasAttribute('checked');
|
|
339
|
+
}
|
|
340
|
+
set checked(v) {
|
|
341
|
+
this.toggleAttribute('checked', !!v);
|
|
342
|
+
}
|
|
343
|
+
get disabled() {
|
|
344
|
+
return this.hasAttribute('disabled');
|
|
345
|
+
}
|
|
346
|
+
set disabled(v) {
|
|
347
|
+
this.toggleAttribute('disabled', !!v);
|
|
348
|
+
}
|
|
349
|
+
changed() {
|
|
350
|
+
this.sync();
|
|
351
|
+
}
|
|
352
|
+
sync() {
|
|
353
|
+
this.setAttribute('aria-checked', String(this.checked));
|
|
354
|
+
this.setAttribute('aria-disabled', String(this.disabled));
|
|
355
|
+
this.tabIndex = this.disabled ? -1 : 0;
|
|
356
|
+
const label = this.getAttribute('label');
|
|
357
|
+
if (label && !this.hasAttribute('aria-label'))
|
|
358
|
+
this.setAttribute('aria-label', label);
|
|
359
|
+
this._internals?.setFormValue?.(this.checked ? this.str('value', 'on') : null);
|
|
360
|
+
}
|
|
361
|
+
mount() {
|
|
362
|
+
if (!this.querySelector(':scope > .usa-toggle-track')) {
|
|
363
|
+
const track = document.createElement('span');
|
|
364
|
+
track.className = 'usa-toggle-track';
|
|
365
|
+
track.setAttribute('aria-hidden', 'true');
|
|
366
|
+
const knob = document.createElement('span');
|
|
367
|
+
knob.className = 'usa-toggle-knob';
|
|
368
|
+
track.append(knob);
|
|
369
|
+
this.prepend(track);
|
|
370
|
+
}
|
|
371
|
+
this.setAttribute('role', 'switch');
|
|
372
|
+
this.sync();
|
|
373
|
+
this.listen(this, 'click', () => this.toggle());
|
|
374
|
+
this.listen(this, 'keydown', (e) => {
|
|
375
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
376
|
+
e.preventDefault();
|
|
377
|
+
if (!e.repeat)
|
|
378
|
+
this.toggle();
|
|
379
|
+
}
|
|
380
|
+
});
|
|
381
|
+
this.listen(this, 'pointerdown', () => !this.disabled && this.setAttribute('data-pressed', ''));
|
|
382
|
+
for (const t of ['pointerup', 'pointerleave', 'pointercancel'])
|
|
383
|
+
this.listen(this, t, () => this.removeAttribute('data-pressed'));
|
|
384
|
+
}
|
|
385
|
+
toggle(force) {
|
|
386
|
+
if (this.disabled)
|
|
387
|
+
return;
|
|
388
|
+
const next = force === undefined ? !this.checked : force;
|
|
389
|
+
if (next === this.checked)
|
|
390
|
+
return;
|
|
391
|
+
this.checked = next;
|
|
392
|
+
this.sync();
|
|
393
|
+
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
394
|
+
this.emit('change', { checked: next });
|
|
395
|
+
}
|
|
396
|
+
},
|
|
397
|
+
_a.formAssociated = true,
|
|
398
|
+
_a; }, { id: 'toggle', text: css });
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
/**
|
|
402
|
+
* use-scroll-animate/components/interaction — micro-interactions.
|
|
403
|
+
* `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,
|
|
404
|
+
* `<usa-press>`, `<usa-toggle>`.
|
|
405
|
+
*/
|
|
406
|
+
/** Register every component of this category under its default tag. */
|
|
407
|
+
function defineInteractionComponents() {
|
|
408
|
+
defineRipple();
|
|
409
|
+
defineMagnetic();
|
|
410
|
+
defineTilt();
|
|
411
|
+
defineSpotlight();
|
|
412
|
+
definePress();
|
|
413
|
+
defineToggle();
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
export { defineInteractionComponents, defineMagnetic, definePress, defineRipple, defineSpotlight, defineTilt, defineToggle };
|
|
417
|
+
//# sourceMappingURL=interaction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interaction.js","sources":["../../src/components/interaction/ripple.ts","../../src/components/interaction/magnetic.ts","../../src/components/interaction/tilt.ts","../../src/components/interaction/spotlight.ts","../../src/components/interaction/press.ts","../../src/components/interaction/toggle.ts","../../src/components/interaction/index.ts"],"sourcesContent":["import { defineElement, EASE_OUT, type UsaElement } from '../base';\nimport css from './ripple.css?raw';\n\n/**\n * `<usa-ripple>` — an ink ripple from the pointer (or the centre, for\n * keyboard presses) on whatever it wraps: buttons, list items, cards.\n *\n * Attributes: `color` (default `currentColor`), `opacity` (0.22),\n * `duration` (ms, 550), `centered`, `disabled`. Clips its content to its\n * own border radius. Reduced motion: a brief highlight instead of the wave.\n */\nexport interface UsaRippleElement extends UsaElement {\n /** Spawn a ripple at client coordinates (default: centre). */\n ripple(x?: number, y?: number): void;\n}\n\nexport function defineRipple(tag = 'usa-ripple'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaRipple extends Base {\n static get observedAttributes(): string[] {\n return [];\n }\n\n mount(): void {\n this.listen(this, 'pointerdown', (e: PointerEvent) => {\n if (e.button !== 0 && e.pointerType === 'mouse') return;\n this.ripple(e.clientX, e.clientY);\n });\n this.listen(this, 'keydown', (e: KeyboardEvent) => {\n if ((e.key === 'Enter' || e.key === ' ') && !e.repeat) this.ripple();\n });\n }\n\n ripple(x?: number, y?: number): void {\n if (this.flag('disabled')) return;\n const r = this.getBoundingClientRect();\n const centered = this.flag('centered') || x === undefined || y === undefined;\n const cx = centered ? r.width / 2 : (x as number) - r.left;\n const cy = centered ? r.height / 2 : (y as number) - r.top;\n const radius = Math.hypot(Math.max(cx, r.width - cx), Math.max(cy, r.height - cy));\n const wave = document.createElement('span');\n wave.className = 'usa-ripple-wave';\n wave.setAttribute('aria-hidden', 'true');\n const size = radius * 2;\n wave.style.cssText = `width:${size}px;height:${size}px;left:${cx - radius}px;top:${cy - radius}px;background:${this.str('color', 'currentColor')}`;\n this.append(wave);\n const opacity = this.num('opacity', 0.22);\n const duration = this.num('duration', 550);\n const frames = this.reduced\n ? [{ opacity }, { opacity: 0 }]\n : [\n { transform: 'scale(0)', opacity },\n { transform: 'scale(1)', opacity, offset: 0.7 },\n { transform: 'scale(1)', opacity: 0 },\n ];\n const a = this.motion(wave, frames, { duration: this.reduced ? 300 : duration, easing: EASE_OUT, fill: 'forwards' });\n if (a) a.onfinish = () => wave.remove();\n else setTimeout(() => wave.remove(), 0);\n }\n },\n { id: 'ripple', text: css }\n );\n}\n","import { defineElement, raf, caf, type UsaElement } from '../base';\nimport css from './magnetic.css?raw';\n\n/**\n * `<usa-magnetic>` — its content leans toward the pointer when the pointer\n * comes near, and springs back when it leaves (great for CTAs and icons).\n *\n * Attributes: `strength` (0–1 share of the pointer offset, 0.35), `radius`\n * (px of attraction beyond the element's edge, 60), `disabled`. Only on\n * devices with a fine pointer that hovers; off under reduced motion.\n * Writes one `transform` per frame through `--usa-mx` / `--usa-my`.\n */\nexport type UsaMagneticElement = UsaElement;\n\nexport function defineMagnetic(tag = 'usa-magnetic'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaMagnetic extends Base {\n static get observedAttributes(): string[] {\n return ['strength', 'radius', 'disabled'];\n }\n\n private _frame = 0;\n\n mount(): void {\n if (this.reduced || this.flag('disabled')) return;\n if (typeof matchMedia === 'function' && !matchMedia('(hover: hover) and (pointer: fine)').matches) return;\n const strength = this.num('strength', 0.35);\n const radius = this.num('radius', 60);\n let x = 0;\n let y = 0;\n let active = false;\n const apply = () => {\n this._frame = 0;\n const r = this.getBoundingClientRect();\n const dx = x - (r.left + r.width / 2);\n const dy = y - (r.top + r.height / 2);\n const near = Math.abs(dx) < r.width / 2 + radius && Math.abs(dy) < r.height / 2 + radius;\n if (near) {\n active = true;\n this.setAttribute('data-active', '');\n this.style.setProperty('--usa-mx', `${(dx * strength).toFixed(2)}px`);\n this.style.setProperty('--usa-my', `${(dy * strength).toFixed(2)}px`);\n } else if (active) this.release();\n };\n this.listen(\n document,\n 'pointermove',\n (e: PointerEvent) => {\n if (e.pointerType !== 'mouse' && e.pointerType !== 'pen') return;\n x = e.clientX;\n y = e.clientY;\n if (!this._frame) this._frame = raf(apply);\n },\n { passive: true }\n );\n this.listen(document, 'pointerleave', () => this.release());\n this.listen(window, 'blur', () => this.release());\n }\n\n private release(): void {\n this.removeAttribute('data-active');\n this.style.removeProperty('--usa-mx');\n this.style.removeProperty('--usa-my');\n }\n\n unmount(): void {\n caf(this._frame);\n this._frame = 0;\n this.release();\n }\n },\n { id: 'magnetic', text: css }\n );\n}\n","import { defineElement, raf, caf, clamp, type UsaElement } from '../base';\nimport css from './tilt.css?raw';\n\n/**\n * `<usa-tilt>` — a 3D card that tilts toward the pointer, with an optional\n * glare highlight that follows it.\n *\n * Attributes: `max` (deg, 10), `scale` (1.03 while hovered), `perspective`\n * (px, 900), `glare` (add the light reflection), `reverse` (tilt away),\n * `disabled`. Off under reduced motion. Exposes `--usa-tilt-x` /\n * `--usa-tilt-y` (−1…1) for parallax layers inside the card.\n */\nexport type UsaTiltElement = UsaElement;\n\nexport function defineTilt(tag = 'usa-tilt'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaTilt extends Base {\n static get observedAttributes(): string[] {\n return ['max', 'scale', 'perspective', 'glare', 'reverse', 'disabled'];\n }\n\n private _frame = 0;\n private _glare: HTMLElement | null = null;\n\n mount(): void {\n if (this.flag('glare') && !this._glare) {\n this._glare = document.createElement('span');\n this._glare.className = 'usa-tilt-glare';\n this._glare.setAttribute('aria-hidden', 'true');\n this.append(this._glare);\n } else if (!this.flag('glare') && this._glare) {\n this._glare.remove();\n this._glare = null;\n }\n if (this.reduced || this.flag('disabled')) return;\n const max = this.num('max', 10) * (this.flag('reverse') ? -1 : 1);\n const scale = this.num('scale', 1.03);\n const persp = this.num('perspective', 900);\n let px = 0.5;\n let py = 0.5;\n let rect: DOMRect | null = null;\n const apply = () => {\n this._frame = 0;\n const nx = clamp(px * 2 - 1, -1, 1);\n const ny = clamp(py * 2 - 1, -1, 1);\n this.style.transform = `perspective(${persp}px) rotateX(${(-ny * max).toFixed(2)}deg) rotateY(${(nx * max).toFixed(2)}deg) scale(${scale})`;\n this.style.setProperty('--usa-tilt-x', nx.toFixed(3));\n this.style.setProperty('--usa-tilt-y', ny.toFixed(3));\n this.style.setProperty('--usa-glare-x', `${(px * 100).toFixed(1)}%`);\n this.style.setProperty('--usa-glare-y', `${(py * 100).toFixed(1)}%`);\n };\n this.listen(this, 'pointerenter', (e: PointerEvent) => {\n if (e.pointerType === 'touch') return;\n rect = this.getBoundingClientRect();\n this.setAttribute('data-active', '');\n });\n this.listen(this, 'pointermove', (e: PointerEvent) => {\n if (e.pointerType === 'touch') return;\n rect = rect || this.getBoundingClientRect();\n px = (e.clientX - rect.left) / (rect.width || 1);\n py = (e.clientY - rect.top) / (rect.height || 1);\n if (!this._frame) this._frame = raf(apply);\n });\n this.listen(this, 'pointerleave', () => this.reset());\n }\n\n private reset(): void {\n caf(this._frame);\n this._frame = 0;\n this.removeAttribute('data-active');\n this.style.transform = '';\n this.style.setProperty('--usa-tilt-x', '0');\n this.style.setProperty('--usa-tilt-y', '0');\n }\n\n unmount(): void {\n this.reset();\n }\n },\n { id: 'tilt', text: css }\n );\n}\n","import { defineElement, raf, caf, type UsaElement } from '../base';\nimport css from './spotlight.css?raw';\n\n/**\n * `<usa-spotlight>` — the Windows Fluent \"Reveal highlight\": a soft light\n * follows the pointer across a group of items, lighting up their borders\n * (even of neighbours) and the background of the hovered one. Put buttons,\n * tiles or menu items inside; each direct child is an item (or mark items\n * with `data-spotlight` to pick them yourself).\n *\n * Attributes: `size` (px, radius of the light, 160), `color` (default a\n * translucent white), `border` (px width of the lit border, 1),\n * `no-fill` (only light the borders). Not a motion effect, so it stays on\n * under reduced motion; off on touch-only devices.\n */\nexport type UsaSpotlightElement = UsaElement;\n\nexport function defineSpotlight(tag = 'usa-spotlight'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaSpotlight extends Base {\n static get observedAttributes(): string[] {\n return ['size', 'color', 'border'];\n }\n\n private _frame = 0;\n\n private items(): HTMLElement[] {\n const marked = Array.from(this.querySelectorAll<HTMLElement>('[data-spotlight]'));\n const items = marked.length ? marked : (Array.from(this.children) as HTMLElement[]);\n items.forEach((el) => el.classList.add('usa-spotlight-item'));\n return items;\n }\n\n mount(): void {\n const size = this.getAttribute('size');\n if (size) this.style.setProperty('--usa-spot-size', `${Number(size)}px`);\n const color = this.getAttribute('color');\n if (color) this.style.setProperty('--usa-spot-color', color);\n const border = this.getAttribute('border');\n if (border) this.style.setProperty('--usa-spot-border', `${Number(border)}px`);\n let items = this.items();\n let x = 0;\n let y = 0;\n const apply = () => {\n this._frame = 0;\n // All reads, then all writes\n const rects = items.map((el) => el.getBoundingClientRect());\n rects.forEach((r, i) => {\n items[i].style.setProperty('--usa-spot-x', `${(x - r.left).toFixed(1)}px`);\n items[i].style.setProperty('--usa-spot-y', `${(y - r.top).toFixed(1)}px`);\n });\n };\n this.listen(this, 'pointerenter', (e: PointerEvent) => {\n if (e.pointerType === 'touch') return;\n items = this.items();\n this.setAttribute('data-lit', '');\n });\n this.listen(this, 'pointermove', (e: PointerEvent) => {\n if (e.pointerType === 'touch') return;\n x = e.clientX;\n y = e.clientY;\n if (!this.hasAttribute('data-lit')) this.setAttribute('data-lit', '');\n if (!this._frame) this._frame = raf(apply);\n });\n this.listen(this, 'pointerleave', () => this.removeAttribute('data-lit'));\n }\n\n unmount(): void {\n caf(this._frame);\n this._frame = 0;\n this.removeAttribute('data-lit');\n }\n },\n { id: 'spotlight', text: css }\n );\n}\n","import { defineElement, EASE_SPRING, type UsaElement } from '../base';\nimport css from './press.css?raw';\n\n/**\n * `<usa-press>` — tactile press feedback: content dips while pressed and\n * springs back on release (the Fluent \"pointer down\" scale), or bounces once\n * on click with `bounce`.\n *\n * Attributes: `scale` (pressed scale, 0.95), `bounce` (overshoot on\n * release), `disabled`. Works with mouse, touch, pen and Space/Enter.\n * Reduced motion: a subtle dim instead of scaling.\n */\nexport interface UsaPressElement extends UsaElement {\n readonly pressed: boolean;\n}\n\nexport function definePress(tag = 'usa-press'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaPress extends Base {\n static get observedAttributes(): string[] {\n return ['disabled'];\n }\n\n private _anim: Animation | null = null;\n private _down = false;\n\n get pressed(): boolean {\n return this._down;\n }\n\n private frame(down: boolean): Keyframe {\n if (this.reduced) return { opacity: down ? 0.7 : 1 };\n return { transform: down ? `scale(${this.num('scale', 0.95)})` : 'scale(1)' };\n }\n\n private down(): void {\n if (this._down || this.flag('disabled')) return;\n this._down = true;\n this.setAttribute('data-pressed', '');\n const from = this.currentFrame();\n this._anim?.cancel();\n this._anim = this.motion(this, [from, this.frame(true)], { duration: 120, easing: 'cubic-bezier(0.3, 0, 0.7, 1)', fill: 'forwards' });\n }\n\n private up(): void {\n if (!this._down) return;\n this._down = false;\n this.removeAttribute('data-pressed');\n const from = this.currentFrame();\n this._anim?.cancel();\n const frames: Keyframe[] =\n this.flag('bounce') && !this.reduced\n ? [from, { transform: 'scale(1.06)', offset: 0.45 }, { transform: 'scale(0.99)', offset: 0.75 }, this.frame(false)]\n : [from, this.frame(false)];\n const a = this.motion(this, frames, { duration: this.flag('bounce') ? 480 : 320, easing: EASE_SPRING });\n this._anim = a;\n if (a) a.onfinish = () => this._anim === a && (this._anim = null);\n }\n\n private currentFrame(): Keyframe {\n if (typeof getComputedStyle !== 'function') return this.frame(false);\n const cs = getComputedStyle(this);\n return this.reduced ? { opacity: cs.opacity || '1' } : { transform: cs.transform && cs.transform !== 'none' ? cs.transform : 'scale(1)' };\n }\n\n mount(): void {\n this.listen(this, 'pointerdown', (e: PointerEvent) => {\n if (e.pointerType === 'mouse' && e.button !== 0) return;\n this.down();\n });\n for (const t of ['pointerup', 'pointerleave', 'pointercancel', 'blur']) this.listen(this, t, () => this.up());\n this.listen(this, 'keydown', (e: KeyboardEvent) => (e.key === ' ' || e.key === 'Enter') && !e.repeat && this.down());\n this.listen(this, 'keyup', (e: KeyboardEvent) => (e.key === ' ' || e.key === 'Enter') && this.up());\n }\n\n unmount(): void {\n this._anim?.cancel();\n this._anim = null;\n this._down = false;\n }\n },\n { id: 'press', text: css }\n );\n}\n","import { defineElement, type UsaElement } from '../base';\nimport css from './toggle.css?raw';\n\n/**\n * `<usa-toggle>` — an accessible switch whose knob stretches while pressed\n * and glides across (the Windows 11 / iOS toggle). `role=\"switch\"`,\n * keyboard (Space / Enter), and form-associated where `ElementInternals`\n * exists (submits `value`, default `\"on\"`, under `name` when checked).\n *\n * Attributes: `checked`, `disabled`, `name`, `value`, `label`\n * (accessible name if there is no `aria-label` / `<label>`). Events:\n * `change` and `usa:change` (`detail.checked`). Reduced motion: no glide.\n */\nexport interface UsaToggleElement extends UsaElement {\n checked: boolean;\n disabled: boolean;\n toggle(force?: boolean): void;\n}\n\nexport function defineToggle(tag = 'usa-toggle'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaToggle extends Base {\n static formAssociated = true;\n static get observedAttributes(): string[] {\n return ['checked', 'disabled', 'label'];\n }\n\n private _internals: ElementInternals | null = null;\n\n constructor() {\n super();\n try {\n this._internals = typeof (this as any).attachInternals === 'function' ? (this as any).attachInternals() : null;\n } catch {\n this._internals = null;\n }\n }\n\n get checked(): boolean {\n return this.hasAttribute('checked');\n }\n set checked(v: boolean) {\n this.toggleAttribute('checked', !!v);\n }\n get disabled(): boolean {\n return this.hasAttribute('disabled');\n }\n set disabled(v: boolean) {\n this.toggleAttribute('disabled', !!v);\n }\n\n changed(): void {\n this.sync();\n }\n\n private sync(): void {\n this.setAttribute('aria-checked', String(this.checked));\n this.setAttribute('aria-disabled', String(this.disabled));\n this.tabIndex = this.disabled ? -1 : 0;\n const label = this.getAttribute('label');\n if (label && !this.hasAttribute('aria-label')) this.setAttribute('aria-label', label);\n this._internals?.setFormValue?.(this.checked ? this.str('value', 'on') : null);\n }\n\n mount(): void {\n if (!this.querySelector(':scope > .usa-toggle-track')) {\n const track = document.createElement('span');\n track.className = 'usa-toggle-track';\n track.setAttribute('aria-hidden', 'true');\n const knob = document.createElement('span');\n knob.className = 'usa-toggle-knob';\n track.append(knob);\n this.prepend(track);\n }\n this.setAttribute('role', 'switch');\n this.sync();\n this.listen(this, 'click', () => this.toggle());\n this.listen(this, 'keydown', (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n if (!e.repeat) this.toggle();\n }\n });\n this.listen(this, 'pointerdown', () => !this.disabled && this.setAttribute('data-pressed', ''));\n for (const t of ['pointerup', 'pointerleave', 'pointercancel']) this.listen(this, t, () => this.removeAttribute('data-pressed'));\n }\n\n toggle(force?: boolean): void {\n if (this.disabled) return;\n const next = force === undefined ? !this.checked : force;\n if (next === this.checked) return;\n this.checked = next;\n this.sync();\n this.dispatchEvent(new Event('change', { bubbles: true }));\n this.emit('change', { checked: next });\n }\n },\n { id: 'toggle', text: css }\n );\n}\n","/**\n * use-scroll-animate/components/interaction — micro-interactions.\n * `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,\n * `<usa-press>`, `<usa-toggle>`.\n */\nimport { defineRipple, type UsaRippleElement } from './ripple';\nimport { defineMagnetic, type UsaMagneticElement } from './magnetic';\nimport { defineTilt, type UsaTiltElement } from './tilt';\nimport { defineSpotlight, type UsaSpotlightElement } from './spotlight';\nimport { definePress, type UsaPressElement } from './press';\nimport { defineToggle, type UsaToggleElement } from './toggle';\n\nexport { defineRipple, defineMagnetic, defineTilt, defineSpotlight, definePress, defineToggle };\nexport type { UsaRippleElement, UsaMagneticElement, UsaTiltElement, UsaSpotlightElement, UsaPressElement, UsaToggleElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineInteractionComponents(): void {\n defineRipple();\n defineMagnetic();\n defineTilt();\n defineSpotlight();\n definePress();\n defineToggle();\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'usa-ripple': UsaRippleElement;\n 'usa-magnetic': UsaMagneticElement;\n 'usa-tilt': UsaTiltElement;\n 'usa-spotlight': UsaSpotlightElement;\n 'usa-press': UsaPressElement;\n 'usa-toggle': UsaToggleElement;\n }\n}\n"],"names":["css"],"mappings":"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"}
|