use-scroll-animate 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +31 -2
  3. package/README_ja.md +19 -0
  4. package/README_zh.md +30 -0
  5. package/dist/chunks/base-CJ7XfidP.cjs +233 -0
  6. package/dist/chunks/base-CJ7XfidP.cjs.map +1 -0
  7. package/dist/chunks/base-CuvCgqLy.js +219 -0
  8. package/dist/chunks/base-CuvCgqLy.js.map +1 -0
  9. package/dist/components/background.cjs +395 -0
  10. package/dist/components/background.cjs.map +1 -0
  11. package/dist/components/background.css +7 -0
  12. package/dist/components/background.d.cts +132 -0
  13. package/dist/components/background.d.ts +132 -0
  14. package/dist/components/background.js +387 -0
  15. package/dist/components/background.js.map +1 -0
  16. package/dist/components/feedback.cjs +444 -0
  17. package/dist/components/feedback.cjs.map +1 -0
  18. package/dist/components/feedback.css +7 -0
  19. package/dist/components/feedback.d.cts +170 -0
  20. package/dist/components/feedback.d.ts +170 -0
  21. package/dist/components/feedback.js +434 -0
  22. package/dist/components/feedback.js.map +1 -0
  23. package/dist/components/interaction.cjs +426 -0
  24. package/dist/components/interaction.cjs.map +1 -0
  25. package/dist/components/interaction.css +8 -0
  26. package/dist/components/interaction.d.cts +142 -0
  27. package/dist/components/interaction.d.ts +142 -0
  28. package/dist/components/interaction.js +417 -0
  29. package/dist/components/interaction.js.map +1 -0
  30. package/dist/components/physics.cjs +664 -0
  31. package/dist/components/physics.cjs.map +1 -0
  32. package/dist/components/physics.css +5 -0
  33. package/dist/components/physics.d.cts +216 -0
  34. package/dist/components/physics.d.ts +216 -0
  35. package/dist/components/physics.js +644 -0
  36. package/dist/components/physics.js.map +1 -0
  37. package/dist/components/reveal.cjs +360 -0
  38. package/dist/components/reveal.cjs.map +1 -0
  39. package/dist/components/reveal.css +5 -0
  40. package/dist/components/reveal.d.cts +132 -0
  41. package/dist/components/reveal.d.ts +132 -0
  42. package/dist/components/reveal.js +350 -0
  43. package/dist/components/reveal.js.map +1 -0
  44. package/dist/components/text.cjs +528 -0
  45. package/dist/components/text.cjs.map +1 -0
  46. package/dist/components/text.css +7 -0
  47. package/dist/components/text.d.cts +164 -0
  48. package/dist/components/text.d.ts +164 -0
  49. package/dist/components/text.js +517 -0
  50. package/dist/components/text.js.map +1 -0
  51. package/dist/components/transitions.cjs +546 -0
  52. package/dist/components/transitions.cjs.map +1 -0
  53. package/dist/components/transitions.css +6 -0
  54. package/dist/components/transitions.d.cts +180 -0
  55. package/dist/components/transitions.d.ts +180 -0
  56. package/dist/components/transitions.js +536 -0
  57. package/dist/components/transitions.js.map +1 -0
  58. package/dist/components.cjs +127 -0
  59. package/dist/components.cjs.map +1 -0
  60. package/dist/components.css +33 -0
  61. package/dist/components.d.cts +919 -0
  62. package/dist/components.d.ts +919 -0
  63. package/dist/components.js +65 -0
  64. package/dist/components.js.map +1 -0
  65. package/dist/components.umd.js +22 -0
  66. package/dist/components.umd.js.map +1 -0
  67. package/docs/API.md +2 -0
  68. package/docs/components.md +169 -0
  69. package/docs/windows-apps.md +108 -0
  70. package/package.json +105 -5
@@ -0,0 +1,127 @@
1
+ 'use strict';
2
+
3
+ var components_reveal = require('./components/reveal.cjs');
4
+ var components_text = require('./components/text.cjs');
5
+ var components_interaction = require('./components/interaction.cjs');
6
+ var components_feedback = require('./components/feedback.cjs');
7
+ var components_background = require('./components/background.cjs');
8
+ var components_transitions = require('./components/transitions.cjs');
9
+ var components_physics = require('./components/physics.cjs');
10
+ var base = require('./chunks/base-CJ7XfidP.cjs');
11
+
12
+ /**
13
+ * use-scroll-animate/components
14
+ *
15
+ * Framework-agnostic, dependency-free animated UI components built on
16
+ * Custom Elements + CSS + the Web Animations API. They run in any browser
17
+ * and in Windows desktop apps that render with a web view: Electron, Tauri
18
+ * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.
19
+ *
20
+ * ```js
21
+ * import { defineComponents } from 'use-scroll-animate/components';
22
+ * defineComponents(); // registers every <usa-*> element
23
+ * // or only what you use (tree-shakable):
24
+ * import { defineTypewriter } from 'use-scroll-animate/components/text';
25
+ * ```
26
+ *
27
+ * Importing has no side effects and is SSR-safe; nothing is registered
28
+ * until a `define*()` function runs in a browser.
29
+ *
30
+ * @license MIT
31
+ */
32
+ /** The component categories and their default tags. */
33
+ const COMPONENT_CATEGORIES = {
34
+ reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],
35
+ text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate'],
36
+ interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],
37
+ feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],
38
+ background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic'],
39
+ transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],
40
+ physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],
41
+ };
42
+ const BY_CATEGORY = {
43
+ reveal: components_reveal.defineRevealComponents,
44
+ text: components_text.defineTextComponents,
45
+ interaction: components_interaction.defineInteractionComponents,
46
+ feedback: components_feedback.defineFeedbackComponents,
47
+ background: components_background.defineBackgroundComponents,
48
+ transitions: components_transitions.defineTransitionComponents,
49
+ physics: components_physics.definePhysicsComponents,
50
+ };
51
+ /**
52
+ * Register every `<usa-*>` component (or only the given categories).
53
+ * Safe to call more than once and on the server (no-op without DOM).
54
+ */
55
+ function defineComponents(categories) {
56
+ (categories || Object.keys(BY_CATEGORY)).forEach((c) => BY_CATEGORY[c]?.());
57
+ }
58
+
59
+ exports.REVEAL_EFFECTS = components_reveal.REVEAL_EFFECTS;
60
+ exports.defineReveal = components_reveal.defineReveal;
61
+ exports.defineRevealComponents = components_reveal.defineRevealComponents;
62
+ exports.defineScrollProgress = components_reveal.defineScrollProgress;
63
+ exports.defineScrolly = components_reveal.defineScrolly;
64
+ exports.defineStagger = components_reveal.defineStagger;
65
+ exports.readScrollProgress = components_reveal.readScrollProgress;
66
+ exports.revealKeyframes = components_reveal.revealKeyframes;
67
+ exports.defineCounter = components_text.defineCounter;
68
+ exports.defineScramble = components_text.defineScramble;
69
+ exports.defineShimmerText = components_text.defineShimmerText;
70
+ exports.defineSplitText = components_text.defineSplitText;
71
+ exports.defineTextComponents = components_text.defineTextComponents;
72
+ exports.defineTextRotate = components_text.defineTextRotate;
73
+ exports.defineTypewriter = components_text.defineTypewriter;
74
+ exports.easeOutExpo = components_text.easeOutExpo;
75
+ exports.scrambleFrame = components_text.scrambleFrame;
76
+ exports.defineInteractionComponents = components_interaction.defineInteractionComponents;
77
+ exports.defineMagnetic = components_interaction.defineMagnetic;
78
+ exports.definePress = components_interaction.definePress;
79
+ exports.defineRipple = components_interaction.defineRipple;
80
+ exports.defineSpotlight = components_interaction.defineSpotlight;
81
+ exports.defineTilt = components_interaction.defineTilt;
82
+ exports.defineToggle = components_interaction.defineToggle;
83
+ exports.SPINNER_VARIANTS = components_feedback.SPINNER_VARIANTS;
84
+ exports.defineCheck = components_feedback.defineCheck;
85
+ exports.defineFeedbackComponents = components_feedback.defineFeedbackComponents;
86
+ exports.defineProgress = components_feedback.defineProgress;
87
+ exports.defineSkeleton = components_feedback.defineSkeleton;
88
+ exports.defineSpinner = components_feedback.defineSpinner;
89
+ exports.defineToaster = components_feedback.defineToaster;
90
+ exports.toast = components_feedback.toast;
91
+ exports.defineAcrylic = components_background.defineAcrylic;
92
+ exports.defineAurora = components_background.defineAurora;
93
+ exports.defineBackgroundComponents = components_background.defineBackgroundComponents;
94
+ exports.defineGrain = components_background.defineGrain;
95
+ exports.defineMarquee = components_background.defineMarquee;
96
+ exports.defineParticles = components_background.defineParticles;
97
+ exports.connectedAnimation = components_transitions.connectedAnimation;
98
+ exports.defineAccordion = components_transitions.defineAccordion;
99
+ exports.defineDialog = components_transitions.defineDialog;
100
+ exports.defineFlipList = components_transitions.defineFlipList;
101
+ exports.defineTransitionComponents = components_transitions.defineTransitionComponents;
102
+ exports.defineViewSwitch = components_transitions.defineViewSwitch;
103
+ exports.flip = components_transitions.flip;
104
+ exports.viewTransition = components_transitions.viewTransition;
105
+ exports.SPRING_EFFECTS = components_physics.SPRING_EFFECTS;
106
+ exports.SPRING_PRESETS = components_physics.SPRING_PRESETS;
107
+ exports.createSpring = components_physics.createSpring;
108
+ exports.defineDraggable = components_physics.defineDraggable;
109
+ exports.defineOverscroll = components_physics.defineOverscroll;
110
+ exports.definePhysicsComponents = components_physics.definePhysicsComponents;
111
+ exports.defineSpring = components_physics.defineSpring;
112
+ exports.linearEasing = components_physics.linearEasing;
113
+ exports.projectInertia = components_physics.projectInertia;
114
+ exports.resolveSpring = components_physics.resolveSpring;
115
+ exports.rubberBand = components_physics.rubberBand;
116
+ exports.snapTo = components_physics.snapTo;
117
+ exports.spring = components_physics.spring;
118
+ exports.springEasing = components_physics.springEasing;
119
+ exports.springEffectKeyframes = components_physics.springEffectKeyframes;
120
+ exports.springSamples = components_physics.springSamples;
121
+ exports.stepSpring = components_physics.stepSpring;
122
+ exports.supportsLinearEasing = components_physics.supportsLinearEasing;
123
+ exports.configureComponents = base.configureComponents;
124
+ exports.prefersReducedMotion = base.prefersReducedMotion;
125
+ exports.COMPONENT_CATEGORIES = COMPONENT_CATEGORIES;
126
+ exports.defineComponents = defineComponents;
127
+ //# sourceMappingURL=components.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\n\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate'],\n interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic'],\n transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n reveal: defineRevealComponents,\n text: defineTextComponents,\n interaction: defineInteractionComponents,\n feedback: defineFeedbackComponents,\n background: defineBackgroundComponents,\n transitions: defineTransitionComponents,\n physics: definePhysicsComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents"],"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAiBH;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;AAC3E,IAAA,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAChH,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;IACrF,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,CAAC;IACtF,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;;AAK5D,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;CACjC;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;IAC/D,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,33 @@
1
+ /* use-scroll-animate/components — all <usa-*> styles */
2
+ .usa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
3
+ usa-reveal,usa-stagger{display:block}usa-reveal[data-state="hidden"],usa-stagger[data-state="hidden"]>*{opacity:0}@media (prefers-reduced-motion:reduce){usa-reveal[data-state="hidden"],usa-stagger[data-state="hidden"]>*{opacity:1}}
4
+ usa-scroll-progress{display:block;position:fixed;left:0;right:0;top:0;z-index:1000;height:var(--usa-progress-height,3px);background:var(--usa-progress-track,transparent);pointer-events:none;contain:strict}usa-scroll-progress[position="bottom"]{top:auto;bottom:0}usa-scroll-progress[position="inline"]{position:relative;z-index:auto;border-radius:999px;overflow:hidden}usa-scroll-progress .usa-progress-fill{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--usa-progress-color,linear-gradient(90deg,#7c5cff,#22d3ee));will-change:transform}
5
+ usa-scrolly{display:block;position:relative}usa-scrolly [data-sticky]{position:sticky;top:var(--usa-sticky-top,0px)}usa-scrolly [data-step]{opacity:var(--usa-step-dim,0.35);transition:opacity 0.4s ease}usa-scrolly [data-step][data-active]{opacity:1}@media (prefers-reduced-motion:reduce){usa-scrolly [data-step]{transition:none}}
6
+ usa-counter{font-variant-numeric:tabular-nums}
7
+ usa-shimmer-text{--usa-shimmer-color:currentColor;--usa-shimmer-shine:#fff;background:linear-gradient(var(--usa-shimmer-angle,110deg),var(--usa-shimmer-color) 35%,var(--usa-shimmer-shine) 50%,var(--usa-shimmer-color) 65%) 0 0 / 250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:usa-shimmer var(--usa-shimmer-duration,2600ms) linear infinite}@keyframes usa-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
8
+ usa-split-text .usa-split-word{display:inline-block;white-space:nowrap}usa-split-text .usa-split-unit{display:inline-block;white-space:pre}usa-split-text[data-state="hidden"] .usa-split-unit{opacity:0}usa-split-text[data-state="play"] .usa-split-unit{animation:usa-split-rise var(--usa-split-duration,620ms) cubic-bezier(0.22,1,0.36,1) both;animation-delay:calc(var(--usa-split-delay,0ms) + var(--i,0) * var(--usa-split-stagger,28ms))}usa-split-text[effect="fade"][data-state="play"] .usa-split-unit{animation-name:usa-split-fade}usa-split-text[effect="blur"][data-state="play"] .usa-split-unit{animation-name:usa-split-blur}usa-split-text[effect="flip"][data-state="play"] .usa-split-unit{animation-name:usa-split-flip;transform-origin:50% 100%}usa-split-text[effect="pop"][data-state="play"] .usa-split-unit{animation-name:usa-split-pop;animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}@keyframes usa-split-rise{from{opacity:0;transform:translate3d(0,0.6em,0)}to{opacity:1;transform:none}}@keyframes usa-split-fade{from{opacity:0}to{opacity:1}}@keyframes usa-split-blur{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}@keyframes usa-split-flip{from{opacity:0;transform:perspective(500px) rotateX(-80deg)}to{opacity:1;transform:none}}@keyframes usa-split-pop{from{opacity:0;transform:scale(0.3)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){usa-split-text .usa-split-unit{animation:none !important;opacity:1 !important}}
9
+ usa-text-rotate{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-block:0.08em}usa-text-rotate .usa-rotate-word{grid-area:1 / 1;white-space:nowrap}usa-text-rotate .usa-rotate-word[data-hidden]{opacity:0}
10
+ usa-typewriter{white-space:pre-wrap}usa-typewriter .usa-tw-caret{display:inline-block;width:var(--usa-caret-width,0.08em);height:1.05em;margin-left:0.06em;vertical-align:-0.12em;background:var(--usa-caret-color,currentColor);animation:usa-caret 1.06s steps(1) infinite}usa-typewriter[data-typing] .usa-tw-caret{animation:none}usa-typewriter[data-no-cursor] .usa-tw-caret{display:none}@keyframes usa-caret{50%{opacity:0}}@media (prefers-reduced-motion:reduce){usa-typewriter .usa-tw-caret,usa-shimmer-text{animation:none}}
11
+ 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}}
12
+ usa-press{display:inline-block;touch-action:manipulation;-webkit-tap-highlight-color:transparent}usa-press[block]{display:block}
13
+ 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}
14
+ 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}
15
+ 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}
16
+ 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}
17
+ usa-check{--usa-check-size:56px;--usa-check-color:#0f9d58;display:inline-block;width:var(--usa-check-size);height:var(--usa-check-size);vertical-align:middle}usa-check[data-variant="error"]{--usa-check-color:#d13438}usa-check[data-variant="warning"]{--usa-check-color:#c19c00}usa-check svg{width:100%;height:100%;overflow:visible}usa-check circle,usa-check path{fill:none;stroke:var(--usa-check-color);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}usa-check[data-state="idle"] circle,usa-check[data-state="idle"] path{stroke-dashoffset:1}usa-check[data-state="done"] circle,usa-check[data-state="done"] path{stroke-dashoffset:0}
18
+ usa-progress{--usa-progress-color:#7c5cff;--usa-progress-track:color-mix(in srgb,currentColor 14%,transparent);position:relative;display:block;height:var(--usa-progress-height,4px);border-radius:999px;overflow:hidden;background:var(--usa-progress-track);contain:paint}usa-progress .usa-progress-bar{position:absolute;inset:0;border-radius:inherit;background:var(--usa-progress-color);transform:scaleX(0);transform-origin:0 50%;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1)}usa-progress .usa-progress-bar2{display:none}usa-progress[data-indeterminate] .usa-progress-bar{right:auto;width:40%;transform:translateX(-100%);transition:none;animation:usa-indet 2s cubic-bezier(0.4,0,0.6,1) infinite}usa-progress[data-indeterminate] .usa-progress-bar2{display:block;width:60%;animation:usa-indet2 2s cubic-bezier(0.4,0,0.6,1) 1s infinite}usa-progress[state="paused"]{--usa-progress-color:#c19c00}usa-progress[state="error"]{--usa-progress-color:#d13438}usa-progress[state="paused"] .usa-progress-bar,usa-progress[state="error"] .usa-progress-bar{animation-play-state:paused}@keyframes usa-indet{from{transform:translateX(-100%)}to{transform:translateX(250%)}}@keyframes usa-indet2{from{transform:translateX(-100%)}to{transform:translateX(167%)}}@media (prefers-reduced-motion:reduce){usa-progress .usa-progress-bar{transition:none}usa-progress[data-indeterminate] .usa-progress-bar{width:100%;transform:none;animation:usa-calm-bar 2.4s ease-in-out infinite}usa-progress[data-indeterminate] .usa-progress-bar2{display:none}}@keyframes usa-calm-bar{0%,100%{opacity:1}50%{opacity:0.4}}
19
+ usa-skeleton{display:block;--usa-skeleton-base:color-mix(in srgb,currentColor 10%,transparent);--usa-skeleton-shine:color-mix(in srgb,currentColor 9%,transparent);--usa-skeleton-radius:8px}usa-skeleton[loading]>:not(.usa-skeleton-ph){display:none !important}usa-skeleton .usa-skeleton-ph{display:flex;gap:14px;align-items:flex-start}usa-skeleton .usa-bone-lines{flex:1;display:grid;gap:10px;min-width:0}usa-skeleton .usa-bone{position:relative;display:block;overflow:hidden;height:0.9em;border-radius:var(--usa-skeleton-radius);background:var(--usa-skeleton-base)}usa-skeleton .usa-bone-last{width:62%}usa-skeleton .usa-bone-block{height:120px}usa-skeleton .usa-bone-circle{border-radius:50%;flex:none}usa-skeleton .usa-bone-avatar{width:44px;height:44px}usa-skeleton .usa-bone::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--usa-skeleton-shine),transparent);animation:usa-skeleton 1.5s ease-in-out infinite}@keyframes usa-skeleton{to{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){usa-skeleton .usa-bone::after{animation:none}}
20
+ usa-spinner{--usa-spinner-size:32px;--usa-spinner-color:currentColor;position:relative;display:inline-block;vertical-align:middle;flex:none;width:var(--usa-spinner-size);height:var(--usa-spinner-size);color:var(--usa-spinner-color)}usa-spinner i{position:absolute;display:block}usa-spinner[paused] *,usa-spinner[paused] *::after{animation-play-state:paused !important}usa-spinner svg{width:100%;height:100%;animation:usa-spin 2s linear infinite;overflow:visible}usa-spinner svg circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0.5 100;stroke-dashoffset:0;animation:usa-ring-arc 1.6s ease-in-out infinite}@keyframes usa-spin{to{transform:rotate(360deg)}}@keyframes usa-ring-arc{0%{stroke-dasharray:0.5 100;stroke-dashoffset:0}50%{stroke-dasharray:62 100;stroke-dashoffset:-20}100%{stroke-dasharray:0.5 100;stroke-dashoffset:-99}}usa-spinner[data-variant="windows"] i{inset:0;opacity:0;animation:usa-orbit 5.5s infinite}usa-spinner[data-variant="windows"] i::after{content:"";position:absolute;left:50%;top:0;width:12%;height:12%;margin-left:-6%;border-radius:50%;background:currentColor}usa-spinner[data-variant="windows"] i:nth-child(2){animation-delay:240ms;--n:1}usa-spinner[data-variant="windows"] i:nth-child(3){animation-delay:480ms;--n:2}usa-spinner[data-variant="windows"] i:nth-child(4){animation-delay:720ms;--n:3}usa-spinner[data-variant="windows"] i:nth-child(5){animation-delay:960ms;--n:4}@keyframes usa-orbit{0%{transform:rotate(225deg);opacity:1;animation-timing-function:ease-out}7%{transform:rotate(345deg);animation-timing-function:linear}30%{transform:rotate(455deg);animation-timing-function:ease-in-out}39%{transform:rotate(690deg);animation-timing-function:linear}70%{transform:rotate(815deg);opacity:1;animation-timing-function:ease-out}75%{transform:rotate(945deg);animation-timing-function:ease-out}76%,100%{transform:rotate(945deg);opacity:0}}usa-spinner[data-variant="ring"] i{inset:0;border-radius:50%;border:calc(var(--usa-spinner-size) / 9) solid color-mix(in srgb,currentColor 20%,transparent);border-top-color:currentColor;animation:usa-spin 0.8s linear infinite}usa-spinner[data-variant="dots"]{display:inline-flex;align-items:center;justify-content:space-between;height:calc(var(--usa-spinner-size) / 2.5)}usa-spinner[data-variant="dots"] i{position:static;width:22%;aspect-ratio:1;border-radius:50%;background:currentColor;animation:usa-dot 1.2s ease-in-out infinite}usa-spinner[data-variant="dots"] i:nth-child(2){animation-delay:0.15s}usa-spinner[data-variant="dots"] i:nth-child(3){animation-delay:0.3s}@keyframes usa-dot{0%,60%,100%{transform:translateY(0);opacity:0.35}30%{transform:translateY(-70%);opacity:1}}usa-spinner[data-variant="pulse"] i{inset:0;border-radius:50%;background:currentColor;opacity:0;animation:usa-pulse 1.6s cubic-bezier(0.22,1,0.36,1) infinite}usa-spinner[data-variant="pulse"] i:nth-child(2){animation-delay:0.8s}@keyframes usa-pulse{from{transform:scale(0.1);opacity:0.8}to{transform:scale(1);opacity:0}}usa-spinner[data-variant="bars"]{display:inline-flex;align-items:center;justify-content:space-between}usa-spinner[data-variant="bars"] i{position:static;width:16%;height:100%;border-radius:2px;background:currentColor;transform:scaleY(0.35);animation:usa-bar 1s ease-in-out infinite}usa-spinner[data-variant="bars"] i:nth-child(2){animation-delay:0.12s}usa-spinner[data-variant="bars"] i:nth-child(3){animation-delay:0.24s}usa-spinner[data-variant="bars"] i:nth-child(4){animation-delay:0.36s}@keyframes usa-bar{0%,100%{transform:scaleY(0.35)}40%{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){usa-spinner svg,usa-spinner i,usa-spinner i::after{animation:usa-calm 2.4s ease-in-out infinite !important}usa-spinner[data-variant="windows"] i{transform:rotate(calc(var(--n,0) * 72deg))}usa-spinner svg circle{animation:none;stroke-dasharray:30 100}}@keyframes usa-calm{0%,100%{opacity:1}50%{opacity:0.4}}
21
+ usa-toaster{position:fixed;z-index:2147483000;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}usa-toaster[position^="top"]{bottom:auto;top:16px}usa-toaster[position$="left"]{right:auto;left:16px}usa-toaster[position$="center"]{right:auto;left:50%;translate:-50% 0}usa-toaster .usa-toast{--usa-toast-accent:#0078d4;pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border-radius:10px;background:var(--usa-toast-bg,color-mix(in srgb,Canvas 92%,transparent));color:var(--usa-toast-fg,CanvasText);border:1px solid color-mix(in srgb,CanvasText 12%,transparent);border-left:3px solid var(--usa-toast-accent);box-shadow:0 8px 28px -8px rgb(0 0 0 / 0.35);font:inherit;font-size:14px;line-height:1.4;-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}usa-toaster .usa-toast[data-type="success"]{--usa-toast-accent:#0f9d58}usa-toaster .usa-toast[data-type="warning"]{--usa-toast-accent:#c19c00}usa-toaster .usa-toast[data-type="error"]{--usa-toast-accent:#d13438}usa-toaster .usa-toast-icon{flex:none;width:20px;height:20px;fill:none;stroke:var(--usa-toast-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}usa-toaster .usa-toast-msg{flex:1;min-width:0;padding-top:1px;overflow-wrap:anywhere}usa-toaster .usa-toast-action,usa-toaster .usa-toast-close{flex:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:6px;padding:2px 6px}usa-toaster .usa-toast-action{color:var(--usa-toast-accent);font-weight:600}usa-toaster .usa-toast-close{opacity:0.6;line-height:0;padding:3px}usa-toaster .usa-toast-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}usa-toaster .usa-toast-action:hover,usa-toaster .usa-toast-close:hover{background:color-mix(in srgb,currentColor 10%,transparent);opacity:1}
22
+ usa-acrylic{--usa-acrylic-tint:#f3f3f3;--usa-acrylic-opacity:55%;--usa-acrylic-blur:30px;position:relative;display:block;isolation:isolate;overflow:hidden;background-color:color-mix(in srgb,var(--usa-acrylic-tint) var(--usa-acrylic-opacity),transparent);-webkit-backdrop-filter:blur(var(--usa-acrylic-blur)) saturate(1.6);backdrop-filter:blur(var(--usa-acrylic-blur)) saturate(1.6);border:1px solid color-mix(in srgb,#fff 22%,transparent)}@media (prefers-color-scheme:dark){usa-acrylic{--usa-acrylic-tint:#2c2c2c}}usa-acrylic::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}usa-acrylic::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateX(-120%);background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / 0.28) 50%,transparent 70%)}usa-acrylic[shimmer="hover"]:hover::after,usa-acrylic[data-shine]::after{animation:usa-acrylic-shine 1.1s cubic-bezier(0.22,1,0.36,1) both}@keyframes usa-acrylic-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}usa-acrylic[variant="mica"]{--usa-acrylic-opacity:80%;-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(color-mix(in srgb,var(--usa-acrylic-tint) var(--usa-acrylic-opacity),transparent),color-mix(in srgb,var(--usa-acrylic-tint) var(--usa-acrylic-opacity),transparent)),var(--usa-mica-source,linear-gradient(135deg,#b8c6ff,#ffd6e8));border-color:transparent}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){usa-acrylic{background-color:var(--usa-acrylic-tint)}}@media (prefers-reduced-transparency:reduce){usa-acrylic{background:var(--usa-acrylic-tint);-webkit-backdrop-filter:none;backdrop-filter:none}}@media (forced-colors:active){usa-acrylic{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:CanvasText}usa-acrylic::before,usa-acrylic::after{display:none}}
23
+ usa-aurora{position:relative;display:block;isolation:isolate;overflow:hidden}usa-aurora .usa-aurora-layer{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--usa-aurora-opacity,0.7);overflow:hidden;contain:strict}usa-aurora .usa-aurora-layer i{position:absolute;display:block;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);will-change:transform;animation:usa-aurora-a var(--usa-aurora-speed,18s) ease-in-out infinite alternate}usa-aurora .usa-aurora-layer i:nth-child(1){left:-15%;top:-30%}usa-aurora .usa-aurora-layer i:nth-child(2){right:-20%;top:-10%;animation-name:usa-aurora-b;animation-duration:calc(var(--usa-aurora-speed,18s) * 1.3)}usa-aurora .usa-aurora-layer i:nth-child(3){left:10%;bottom:-45%;animation-name:usa-aurora-c;animation-duration:calc(var(--usa-aurora-speed,18s) * 0.9)}usa-aurora .usa-aurora-layer i:nth-child(4){right:0;bottom:-30%;width:50%;animation-name:usa-aurora-b;animation-direction:alternate-reverse}usa-aurora[paused] .usa-aurora-layer i,usa-aurora[data-offscreen] .usa-aurora-layer i{animation-play-state:paused}@keyframes usa-aurora-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(30%,20%,0) scale(1.25)}}@keyframes usa-aurora-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-35%,25%,0) scale(0.85)}}@keyframes usa-aurora-c{from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}to{transform:translate3d(25%,-30%,0) rotate(40deg) scale(1.2)}}@media (prefers-reduced-motion:reduce){usa-aurora .usa-aurora-layer i,usa-grain .usa-grain-layer,usa-acrylic::after{animation:none !important}}
24
+ usa-grain{position:relative;display:block;isolation:isolate;overflow:hidden}usa-grain .usa-grain-layer{position:absolute;inset:-100%;z-index:1;pointer-events:none}usa-grain[animated] .usa-grain-layer{animation:usa-grain 0.8s steps(10) infinite}@keyframes usa-grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,4%)}30%{transform:translate(6%,-16%)}40%{transform:translate(-4%,18%)}50%{transform:translate(-12%,8%)}60%{transform:translate(14%,0)}70%{transform:translate(0,12%)}80%{transform:translate(3%,25%)}90%{transform:translate(-8%,8%)}}
25
+ usa-marquee{--usa-marquee-gap:32px;display:block;overflow:hidden;contain:content}usa-marquee[fade]{-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}usa-marquee[fade][data-vertical]{-webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}usa-marquee .usa-marquee-track{display:flex;width:max-content;gap:var(--usa-marquee-gap);will-change:transform}usa-marquee .usa-marquee-group{display:flex;flex:none;align-items:center;gap:var(--usa-marquee-gap)}usa-marquee[data-vertical] .usa-marquee-track,usa-marquee[data-vertical] .usa-marquee-group{flex-direction:column;width:auto}usa-marquee[data-vertical]{height:var(--usa-marquee-height,240px)}usa-marquee[data-static]{overflow:auto;scrollbar-width:thin}
26
+ usa-particles{position:relative;display:block;min-height:120px;overflow:hidden}usa-particles>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
27
+ usa-accordion{display:block}usa-accordion>details>summary{cursor:pointer}usa-accordion>details>summary::-webkit-details-marker{display:none}usa-accordion>details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1em}usa-accordion>details>summary::after{content:"";flex:none;width:0.5em;height:0.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);opacity:0.7}usa-accordion>details[open]:not([data-closing])>summary::after{transform:translateY(25%) rotate(-135deg)}@media (prefers-reduced-motion:reduce){usa-accordion>details>summary::after{transition:none}}
28
+ usa-dialog{display:contents}usa-dialog:not(:defined){display:none}
29
+ usa-flip-list{display:block}
30
+ usa-view-switch{display:grid}usa-view-switch>*{grid-area:1 / 1;min-width:0}usa-view-switch>[hidden]:not([data-leaving]){display:none !important}usa-view-switch>[data-leaving]{display:block;pointer-events:none}
31
+ usa-draggable{display:inline-block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform;-webkit-tap-highlight-color:transparent}usa-draggable[axis="x"]{touch-action:pan-y}usa-draggable[axis="y"]{touch-action:pan-x}usa-draggable[block]{display:block}usa-draggable[data-dragging]{cursor:grabbing}usa-draggable[disabled]{cursor:default}usa-draggable:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:3px}
32
+ usa-overscroll{display:block;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}usa-overscroll[axis="x"]{overflow-y:hidden}usa-overscroll>*{transform:translate3d(0,var(--usa-overscroll,0px),0)}usa-overscroll[axis="x"]>*{transform:translate3d(var(--usa-overscroll,0px),0,0)}usa-overscroll[data-stretched]>*{will-change:transform}
33
+ usa-spring{display:inline-block;transform-origin:50% 70%}usa-spring[block]{display:block}usa-spring[effect="drop"]{transform-origin:50% 100%}usa-spring[data-state="hidden"]{opacity:0}usa-spring[trigger="click"],usa-spring[trigger="hover"]{cursor:pointer;-webkit-tap-highlight-color:transparent}