@noxlovette/material 0.4.8 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animation/TransitionPatterns.stories.svelte +357 -0
- package/dist/animation/TransitionPatterns.stories.svelte.d.ts +3 -0
- package/dist/animation/containerTransform.d.ts +26 -12
- package/dist/animation/containerTransform.js +22 -138
- package/dist/animation/enterExit.d.ts +21 -3
- package/dist/animation/enterExit.js +69 -22
- package/dist/animation/index.d.ts +1 -1
- package/dist/animation/index.js +1 -1
- package/dist/animation/presence.svelte.d.ts +47 -0
- package/dist/animation/presence.svelte.js +84 -0
- package/dist/animation/sharedAxisTransition.d.ts +35 -37
- package/dist/animation/sharedAxisTransition.js +50 -22
- package/dist/animation/skeleton.d.ts +11 -0
- package/dist/animation/skeleton.js +23 -0
- package/dist/animation/spring.d.ts +61 -0
- package/dist/animation/spring.js +53 -0
- package/dist/animation/springValue.svelte.d.ts +22 -0
- package/dist/animation/springValue.svelte.js +42 -0
- package/dist/animation/transition.d.ts +3 -1
- package/dist/animation/transition.js +3 -1
- package/dist/attachments/clickOutside.d.ts +13 -0
- package/dist/attachments/clickOutside.js +18 -0
- package/dist/attachments/index.d.ts +1 -0
- package/dist/attachments/index.js +1 -0
- package/dist/components/buttons/FAB.svelte +23 -16
- package/dist/components/buttons/FABMenu.svelte +24 -29
- package/dist/components/buttons/FABMenu.svelte.d.ts +2 -1
- package/dist/components/buttons/FABMenuItem.svelte +23 -20
- package/dist/components/buttons/FABMenuItem.svelte.d.ts +5 -1
- package/dist/components/buttons/split-button/SplitButton.svelte +10 -17
- package/dist/components/buttons/split-button/theme.js +1 -1
- package/dist/components/buttons/types.d.ts +3 -3
- package/dist/components/cards/theme.js +1 -1
- package/dist/components/containers/bottom-sheet/BottomSheet.stories.svelte +8 -12
- package/dist/components/containers/bottom-sheet/BottomSheet.svelte +67 -55
- package/dist/components/containers/bottom-sheet/BottomSheet.svelte.d.ts +1 -1
- package/dist/components/containers/bottom-sheet/types.d.ts +8 -2
- package/dist/components/containers/context-menu/ContextMenu.svelte +23 -36
- package/dist/components/containers/context-menu/theme.js +2 -2
- package/dist/components/containers/dialogue/Dialogue.svelte +49 -65
- package/dist/components/containers/link-preview/LinkPreview.svelte +12 -23
- package/dist/components/containers/link-preview/theme.d.ts +3 -3
- package/dist/components/containers/menu/Menu.svelte +14 -21
- package/dist/components/containers/menu/MenuSub.svelte +10 -17
- package/dist/components/containers/pane/DraggablePane.svelte +90 -5
- package/dist/components/containers/pane/DraggablePane.svelte.d.ts +1 -1
- package/dist/components/containers/pane/theme.js +2 -2
- package/dist/components/containers/popover/Popover.svelte +31 -42
- package/dist/components/containers/popover/theme.d.ts +3 -3
- package/dist/components/containers/scroll-area/theme.js +2 -2
- package/dist/components/containers/side-sheet/SideSheet.stories.svelte +10 -15
- package/dist/components/containers/side-sheet/SideSheet.svelte +44 -44
- package/dist/components/containers/side-sheet/SideSheet.svelte.d.ts +4 -3
- package/dist/components/containers/side-sheet/types.d.ts +8 -2
- package/dist/components/date/DateField.svelte +85 -92
- package/dist/components/date/DateField.svelte.d.ts +2 -5
- package/dist/components/date/DateRangeField.svelte +113 -155
- package/dist/components/date/DateRangeField.svelte.d.ts +2 -5
- package/dist/components/date/theme.d.ts +95 -0
- package/dist/components/date/theme.js +99 -14
- package/dist/components/date/types.d.ts +13 -0
- package/dist/components/forms/checkbox/theme.js +2 -2
- package/dist/components/forms/command/theme.d.ts +3 -3
- package/dist/components/forms/command/theme.js +1 -1
- package/dist/components/forms/pin/theme.js +2 -2
- package/dist/components/forms/radio-group/theme.js +2 -2
- package/dist/components/forms/select/Select.svelte +42 -54
- package/dist/components/forms/select/theme.js +4 -4
- package/dist/components/forms/slider/Slider.svelte +144 -126
- package/dist/components/forms/slider/Slider.svelte.d.ts +3 -0
- package/dist/components/forms/slider/theme.d.ts +154 -48
- package/dist/components/forms/slider/theme.js +60 -20
- package/dist/components/forms/slider/types.d.ts +1 -1
- package/dist/components/forms/switch/theme.js +4 -4
- package/dist/components/forms/textfield/Textfield.svelte +1 -1
- package/dist/components/forms/textfield/theme.d.ts +9 -0
- package/dist/components/forms/textfield/theme.js +26 -9
- package/dist/components/forms/toggle-group/theme.js +1 -1
- package/dist/components/forms/tooltip/Tooltip.svelte +24 -35
- package/dist/components/nav/breadcrumb/theme.js +1 -1
- package/dist/components/nav/navbar/theme.js +2 -2
- package/dist/components/nav/rail/Rail.svelte +4 -5
- package/dist/components/nav/rail/theme.js +7 -7
- package/dist/components/nav/tabs/theme.js +1 -1
- package/dist/components/progress/CircularProgress.svelte +78 -4
- package/dist/components/progress/CircularProgress.svelte.d.ts +5 -0
- package/dist/components/progress/LinearProgress.svelte +70 -7
- package/dist/components/progress/LinearProgress.svelte.d.ts +5 -0
- package/dist/components/progress/WavyLinearProgress.svelte +27 -3
- package/dist/components/progress/WavyLinearProgress.svelte.d.ts +3 -0
- package/dist/components/progress/_wavy.d.ts +2 -0
- package/dist/components/progress/_wavy.js +3 -1
- package/dist/components/snackbar/Snackbar.svelte +13 -17
- package/dist/components/table/TableBody.svelte +3 -16
- package/dist/components/table/TableBody.svelte.d.ts +1 -5
- package/dist/components/table/TableHeader.svelte +1 -1
- package/dist/components/table/theme.js +1 -1
- package/dist/components/table/types.d.ts +0 -7
- package/dist/components/time/TimeField.stories.svelte +41 -0
- package/dist/components/time/TimeField.stories.svelte.d.ts +19 -0
- package/dist/components/time/TimeField.svelte +62 -61
- package/dist/components/toolbar/theme.js +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/component.css +21 -22
- package/dist/styles/motion.css +317 -38
- package/dist/utils/Layer.svelte +16 -29
- package/dist/utils/icon/LoadingIndicator.svelte +61 -22
- package/dist/utils/icon/loadingShapes.d.ts +1 -0
- package/dist/utils/icon/loadingShapes.js +15 -0
- package/package.json +5 -2
- package/dist/actions/clickOutside.d.ts +0 -3
- package/dist/actions/clickOutside.js +0 -13
- package/dist/actions/floating.d.ts +0 -20
- package/dist/actions/floating.js +0 -87
- package/dist/actions/index.d.ts +0 -6
- package/dist/actions/index.js +0 -6
- package/dist/actions/keyboard.d.ts +0 -3
- package/dist/actions/keyboard.js +0 -14
- package/dist/actions/portal.d.ts +0 -3
- package/dist/actions/portal.js +0 -8
- package/dist/actions/positionFloating.d.ts +0 -10
- package/dist/actions/positionFloating.js +0 -59
- package/dist/actions/rovingFocusGroup.d.ts +0 -20
- package/dist/actions/rovingFocusGroup.js +0 -82
- package/dist/animation/easing.d.ts +0 -6
- package/dist/animation/easing.js +0 -78
- package/dist/animation/outroClass.d.ts +0 -3
- package/dist/animation/outroClass.js +0 -20
- package/dist/animation/transitionTypes.d.ts +0 -8
- package/dist/animation/transitionTypes.js +0 -1
package/dist/utils/Layer.svelte
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
<script module lang="ts">
|
|
2
|
+
import { animate } from 'motion';
|
|
3
|
+
import { springTokens, springTransition } from '../animation/spring.js';
|
|
4
|
+
|
|
2
5
|
let initialized = false;
|
|
3
6
|
|
|
4
7
|
const activePointerRipples: (() => void)[] = [];
|
|
@@ -24,7 +27,6 @@
|
|
|
24
27
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return null;
|
|
25
28
|
|
|
26
29
|
const size = Math.hypot(Math.max(x, width - x), Math.max(y, height - y)) * 2.5;
|
|
27
|
-
const speed = Math.max(Math.min(Math.log(size) * 50, 600), 200);
|
|
28
30
|
|
|
29
31
|
const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'radialGradient');
|
|
30
32
|
gradient.id = `ripple-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
|
@@ -44,20 +46,12 @@
|
|
|
44
46
|
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
45
47
|
circle.setAttribute('cx', `${x}`);
|
|
46
48
|
circle.setAttribute('cy', `${y}`);
|
|
47
|
-
circle.setAttribute('r',
|
|
49
|
+
circle.setAttribute('r', `${size / 2}`);
|
|
48
50
|
circle.setAttribute('fill', `url(#${gradient.id})`);
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
expand.setAttribute('to', `${size / 2}`);
|
|
54
|
-
expand.setAttribute('dur', `${speed}ms`);
|
|
55
|
-
expand.setAttribute('fill', 'freeze');
|
|
56
|
-
expand.setAttribute('calcMode', 'spline');
|
|
57
|
-
// md.sys.motion.easing.standard: cubic-bezier(0.2, 0, 0, 1) — keep in sync with
|
|
58
|
-
// --md-sys-motion-timing-function in motion.css (SMIL keySplines can't reference CSS vars).
|
|
59
|
-
expand.setAttribute('keySplines', '0.2 0, 0 1');
|
|
60
|
-
circle.appendChild(expand);
|
|
51
|
+
// Grow by scale rather than `r`: transform runs on WAAPI, an SVG attribute would not.
|
|
52
|
+
circle.style.transformBox = 'fill-box';
|
|
53
|
+
circle.style.transformOrigin = 'center';
|
|
54
|
+
circle.style.transform = 'scale(0)';
|
|
61
55
|
|
|
62
56
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
63
57
|
svg.classList.add('m3-ripple');
|
|
@@ -99,20 +93,13 @@
|
|
|
99
93
|
|
|
100
94
|
node.appendChild(svg);
|
|
101
95
|
|
|
96
|
+
// Ripples are an effect, not layout: critically damped springs, no overshoot.
|
|
97
|
+
animate(circle, { transform: 'scale(1)' }, springTransition(springTokens.slowEffects));
|
|
98
|
+
|
|
102
99
|
return () => {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
fade.setAttribute('to', '0');
|
|
107
|
-
fade.setAttribute('dur', '800ms');
|
|
108
|
-
fade.setAttribute('fill', 'freeze');
|
|
109
|
-
fade.setAttribute('calcMode', 'spline');
|
|
110
|
-
// md.sys.motion.easing.standard: cubic-bezier(0.2, 0, 0, 1) — keep in sync with
|
|
111
|
-
// --md-sys-motion-timing-function in motion.css (SMIL keySplines can't reference CSS vars).
|
|
112
|
-
fade.setAttribute('keySplines', '0.2 0, 0 1');
|
|
113
|
-
circle.appendChild(fade);
|
|
114
|
-
fade.beginElement();
|
|
115
|
-
setTimeout(() => svg.remove(), 800);
|
|
100
|
+
animate(circle, { opacity: 0 }, springTransition(springTokens.slowEffects)).then(() =>
|
|
101
|
+
svg.remove()
|
|
102
|
+
);
|
|
116
103
|
};
|
|
117
104
|
};
|
|
118
105
|
|
|
@@ -199,8 +186,8 @@
|
|
|
199
186
|
|
|
200
187
|
background-color: currentColor;
|
|
201
188
|
opacity: 0;
|
|
202
|
-
transition: opacity var(--md-sys-motion-duration-fast
|
|
203
|
-
var(--md-sys-motion-timing-function
|
|
189
|
+
transition: opacity var(--md-sys-motion-duration-fast-effects-spring)
|
|
190
|
+
var(--md-sys-motion-timing-function-fast-effects-spring);
|
|
204
191
|
|
|
205
192
|
&:not(
|
|
206
193
|
:global(input:disabled + label) > .tint,
|
|
@@ -1,3 +1,61 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import { animate, mix, type AnimationPlaybackControls } from 'motion';
|
|
3
|
+
import type { Attachment } from 'svelte/attachments';
|
|
4
|
+
import { springTransition } from '../../animation/spring.js';
|
|
5
|
+
import { LOADING_SHAPES } from './loadingShapes.js';
|
|
6
|
+
|
|
7
|
+
/*
|
|
8
|
+
Component-level values from the M3 loading indicator (Jetpack Compose `LoadingIndicator`, the
|
|
9
|
+
reference implementation): a new morph every 650ms on a 200 / 0.6 spring, each morph adding a
|
|
10
|
+
quarter turn, on top of a constant full turn every 4666ms. The spring is the component's own,
|
|
11
|
+
not one of the system springs in spring.ts.
|
|
12
|
+
https://m3.material.io/components/loading-indicator/specs
|
|
13
|
+
*/
|
|
14
|
+
const MORPH_INTERVAL_MS = 650;
|
|
15
|
+
const MORPH_SPRING = springTransition({ stiffness: 200, dampingRatio: 0.6 });
|
|
16
|
+
const MORPH_ROTATION_DEG = 90;
|
|
17
|
+
const GLOBAL_ROTATION_S = 4.666;
|
|
18
|
+
|
|
19
|
+
/** Constant spin — a linear transform, so Motion hands it to WAAPI. */
|
|
20
|
+
const spin: Attachment<SVGGElement> = (group) => {
|
|
21
|
+
const controls = animate(
|
|
22
|
+
group,
|
|
23
|
+
{ transform: ['rotate(0deg)', 'rotate(360deg)'] },
|
|
24
|
+
{ duration: GLOBAL_ROTATION_S, ease: 'linear', repeat: Infinity }
|
|
25
|
+
);
|
|
26
|
+
return () => controls.stop();
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
/** Morphs to the next shape every interval; the spring's overshoot also swings the quarter turn. */
|
|
30
|
+
const morph: Attachment<SVGPathElement> = (path) => {
|
|
31
|
+
let index = 0;
|
|
32
|
+
let controls: AnimationPlaybackControls | undefined;
|
|
33
|
+
|
|
34
|
+
const next = () => {
|
|
35
|
+
const shape = mix(
|
|
36
|
+
LOADING_SHAPES[index % LOADING_SHAPES.length],
|
|
37
|
+
LOADING_SHAPES[(index + 1) % LOADING_SHAPES.length]
|
|
38
|
+
);
|
|
39
|
+
const turn = (index % 4) * MORPH_ROTATION_DEG;
|
|
40
|
+
controls = animate(0, 1, {
|
|
41
|
+
...MORPH_SPRING,
|
|
42
|
+
onUpdate: (progress) => {
|
|
43
|
+
path.setAttribute('d', shape(progress));
|
|
44
|
+
path.setAttribute('transform', `rotate(${turn + progress * MORPH_ROTATION_DEG} 24 24)`);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
index++;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
next();
|
|
51
|
+
const timer = setInterval(next, MORPH_INTERVAL_MS);
|
|
52
|
+
return () => {
|
|
53
|
+
clearInterval(timer);
|
|
54
|
+
controls?.stop();
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
</script>
|
|
58
|
+
|
|
1
59
|
<script lang="ts">
|
|
2
60
|
import type { LoadingIndicatorProps } from './types.js';
|
|
3
61
|
import { loadingIndicator } from './theme.js';
|
|
@@ -14,26 +72,7 @@
|
|
|
14
72
|
</script>
|
|
15
73
|
|
|
16
74
|
<svg width={size} height={size} class={styling} viewBox="0 0 48 48">
|
|
17
|
-
<
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
dur="5s"
|
|
21
|
-
repeatCount="indefinite"
|
|
22
|
-
calcMode="spline"
|
|
23
|
-
keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8"
|
|
24
|
-
keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1"
|
|
25
|
-
values="m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z;m39.9 24.0 -0.3 0.8 -0.4 0.8 -0.3 0.8 -0.2 1.5 0.1 0.9 0.1 0.9 -0.1 0.9 -0.2 0.8 -0.3 0.8 -0.2 0.4 -0.3 0.4 -0.5 0.7 -0.7 0.5 -0.8 0.4 -0.8 0.4 -0.8 0.4 -1.2 1.0 -0.5 0.7 -0.5 0.8 -0.6 0.6 -0.6 0.6 -0.8 0.4 -0.4 0.2 -0.5 0.1 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.9 -0.3 -0.8 -0.1 -1.6 -0.1 -0.8 0.2 -0.9 0.3 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.5 -0.1 -0.4 -0.2 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.5 -0.8 -0.5 -0.7 -1.2 -1.0 -0.7 -0.4 -0.9 -0.4 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.3 -0.4 -0.2 -0.4 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.9 0.1 -0.9 -0.2 -1.5 -0.3 -0.8 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.7 -0.0 -0.2 0.2 -0.8 0.4 -0.8 0.5 -0.7 0.6 -0.6 0.7 -0.7 0.5 -0.6 0.6 -1.3 0.3 -0.9 0.2 -0.8 0.3 -0.8 0.5 -0.7 0.5 -0.6 0.2 -0.2 0.5 -0.4 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.9 -0.0 0.8 -0.1 1.4 -0.5 0.7 -0.4 0.7 -0.5 0.7 -0.5 0.8 -0.3 0.8 -0.2 0.9 -0.1 0.0 -0.0 0.8 0.1 0.9 0.2 0.8 0.3 0.7 0.5 0.7 0.5 0.7 0.4 1.4 0.5 0.8 0.1 0.9 0.0 0.9 0.2 0.8 0.3 0.7 0.4 0.5 0.4 0.2 0.1 0.5 0.7 0.5 0.7 0.3 0.8 0.2 0.8 0.3 0.9 0.6 1.3 0.5 0.6 0.7 0.7 0.6 0.6 0.5 0.7 0.4 0.8 0.2 0.8 0.0 0.2 0.1 0.7 -0.1 0.9 z;m38.9 24.2 -0.2 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.3 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.4 1.0 -0.4 0.8 -0.4 0.8 -0.6 0.6 -0.7 0.5 0.0 0.1 -0.7 0.4 -0.8 0.3 -0.8 0.3 -0.9 0.1 -1.1 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -1.1 -0.0 -0.9 -0.1 -0.8 -0.3 -0.8 -0.3 -0.7 -0.5 -0.1 0.0 -0.6 -0.5 -0.6 -0.7 -0.4 -0.7 -0.4 -0.8 -0.4 -1.0 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -0.8 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -1.1 -0.2 -0.9 -0.0 -0.8 0.0 -0.9 0.2 -0.8 0.1 -0.1 0.3 -0.7 0.4 -0.8 0.6 -0.6 0.6 -0.6 0.9 -0.7 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.9 -0.7 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.8 -0.0 0.1 -0.0 0.9 0.0 0.8 0.2 0.8 0.3 0.8 0.4 0.9 0.7 0.6 0.5 0.7 0.4 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.4 0.6 0.5 0.9 0.7 0.6 0.6 0.6 0.7 0.4 0.7 0.3 0.7 0.0 0.1 0.2 0.8 0.1 0.9 -0.0 0.9 -0.2 0.8 -0.3 1.1 z;m39.6 24.0 -0.1 0.8 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.3 0.8 -0.4 0.7 -0.4 0.7 -0.5 0.6 -0.4 0.6 -0.6 0.6 -0.6 0.6 -0.4 0.4 -0.6 0.6 -0.4 0.5 -0.9 0.8 -0.5 0.5 -0.6 0.6 -0.4 0.4 -0.7 0.7 -0.5 0.5 -0.6 0.4 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.7 0.3 -0.8 0.3 -0.8 0.3 -0.8 0.2 -0.8 0.1 -0.8 0.1 -0.8 0.1 -0.9 0.0 -0.8 -0.0 -0.9 -0.1 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.3 -0.8 -0.4 -0.8 -0.4 -0.7 -0.5 -0.7 -0.5 -0.7 -0.5 -0.6 -0.6 -0.1 -0.1 -0.5 -0.6 -0.6 -0.7 -0.5 -0.7 -0.5 -0.8 -0.4 -0.7 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.1 -0.9 0.0 -0.8 0.0 -0.9 0.1 -0.8 0.1 -0.8 0.1 -0.8 0.3 -0.8 0.2 -0.8 0.3 -0.7 0.4 -0.8 0.3 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.5 0.6 -0.6 0.6 -0.7 0.4 -0.4 0.6 -0.6 0.5 -0.4 0.8 -0.9 0.5 -0.5 0.6 -0.6 0.4 -0.4 0.7 -0.7 0.5 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.4 0.7 -0.4 0.7 -0.3 0.8 -0.3 0.8 -0.3 0.8 -0.2 0.8 -0.1 0.8 -0.1 0.8 -0.1 0.9 -0.0 0.8 0.0 0.9 0.1 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.4 0.8 0.3 0.8 0.4 0.7 0.5 0.7 0.5 0.7 0.5 0.6 0.7 0.1 -0.0 0.5 0.6 0.6 0.7 0.5 0.7 0.5 0.8 0.4 0.7 0.3 0.8 0.4 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.1 0.9 0.0 0.8 -0.0 0.8 -0.1 0.9 z;m40.0 24.0 -0.1 0.8 -0.5 0.8 -0.6 0.8 -0.6 0.6 -0.6 0.7 -0.5 0.6 -0.7 1.2 -0.1 0.7 -0.1 0.8 -0.0 0.9 -0.1 0.9 -0.1 0.9 -0.2 0.9 -0.5 0.7 -0.0 0.0 -0.7 0.5 -0.9 0.2 -0.9 0.1 -0.9 0.1 -0.8 0.0 -0.8 0.1 -0.8 0.1 -1.2 0.7 -0.6 0.5 -0.7 0.6 -0.6 0.6 -0.8 0.6 -0.8 0.5 -0.8 0.1 -0.0 0.0 -0.8 -0.1 -0.8 -0.5 -0.8 -0.6 -0.6 -0.6 -0.7 -0.6 -0.6 -0.5 -1.2 -0.7 -0.7 -0.1 -0.8 -0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.2 -0.7 -0.5 -0.0 0.0 -0.5 -0.7 -0.2 -0.9 -0.1 -0.9 -0.1 -0.9 -0.0 -0.8 -0.1 -0.8 -0.1 -0.8 -0.7 -1.2 -0.5 -0.6 -0.6 -0.7 -0.6 -0.6 -0.6 -0.8 -0.5 -0.8 -0.1 -0.8 -0.0 -0.0 0.1 -0.8 0.5 -0.8 0.6 -0.8 0.6 -0.6 0.6 -0.7 0.5 -0.6 0.7 -1.2 0.1 -0.7 0.1 -0.8 0.0 -0.9 0.1 -0.9 0.1 -0.9 0.2 -0.9 0.5 -0.7 -0.0 -0.0 0.7 -0.5 0.9 -0.2 0.9 -0.1 0.9 -0.1 0.8 -0.0 0.8 -0.1 0.8 -0.1 1.2 -0.7 0.6 -0.5 0.7 -0.6 0.6 -0.6 0.8 -0.6 0.8 -0.5 0.8 -0.1 0.0 -0.0 0.8 0.1 0.8 0.5 0.8 0.6 0.6 0.6 0.7 0.6 0.6 0.5 1.2 0.7 0.7 0.1 0.8 0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.2 0.7 0.5 0.0 -0.0 0.5 0.7 0.2 0.9 0.1 0.9 0.1 0.9 0.0 0.8 0.1 0.8 0.1 0.8 0.7 1.2 0.5 0.6 0.6 0.7 0.6 0.6 0.6 0.8 0.5 0.8 0.1 0.8 z;m36.9 24.6 0.1 0.7 0.2 0.8 0.2 0.7 0.4 0.9 0.4 0.9 0.2 0.9 0.1 1.0 0.1 0.9 -0.1 0.9 -0.3 0.9 -0.3 0.9 -0.4 0.8 -0.5 0.8 -0.6 0.6 -0.1 0.1 -0.6 0.6 -0.8 0.5 -0.8 0.4 -0.9 0.3 -0.9 0.3 -0.9 0.1 -0.9 -0.1 -1.0 -0.1 -0.9 -0.2 -0.9 -0.4 -0.9 -0.4 -0.7 -0.2 -0.8 -0.2 -0.7 -0.1 -1.2 0.0 -0.7 0.1 -0.8 0.2 -0.7 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -1.0 0.1 -0.9 0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.5 -0.6 -0.6 -0.1 -0.1 -0.6 -0.6 -0.5 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 0.1 -0.9 0.1 -1.0 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -0.7 0.2 -0.8 0.1 -0.7 -0.0 -1.2 -0.1 -0.7 -0.2 -0.8 -0.2 -0.7 -0.4 -0.9 -0.4 -0.9 -0.2 -0.9 -0.1 -1.0 -0.1 -0.9 0.1 -0.9 0.3 -0.9 0.3 -0.9 0.4 -0.8 0.5 -0.8 0.6 -0.6 0.1 -0.1 0.6 -0.6 0.8 -0.5 0.8 -0.4 0.9 -0.3 0.9 -0.3 0.9 -0.1 0.9 0.1 1.0 0.1 0.9 0.2 0.9 0.4 0.9 0.4 0.7 0.2 0.8 0.2 0.7 0.1 1.2 -0.0 0.7 -0.1 0.8 -0.2 0.7 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 1.0 -0.1 0.9 -0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.5 0.6 0.6 0.1 0.1 0.6 0.6 0.5 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 -0.1 0.9 -0.1 1.0 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 0.7 -0.2 0.8 -0.1 0.7 z;m37.7 24.0 -0.3 0.7 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.6 -0.3 0.5 -0.4 0.6 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.3 0.4 -0.5 0.4 -0.8 0.8 -0.4 0.5 -0.4 0.3 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.6 0.4 -0.5 0.3 -0.6 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.7 0.3 -0.7 0.2 -0.7 0.3 -0.9 0.3 -0.8 0.2 -0.8 0.1 -0.9 0.1 -1.0 0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.6 -0.7 -0.6 -0.0 0.0 -0.6 -0.7 -0.6 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 -0.1 -0.9 0.0 -0.9 0.1 -1.0 0.1 -0.9 0.1 -0.8 0.2 -0.8 0.3 -0.9 0.3 -0.7 0.2 -0.7 0.3 -0.7 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.6 0.3 -0.5 0.4 -0.6 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.3 -0.4 0.5 -0.4 0.8 -0.8 0.4 -0.5 0.4 -0.3 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.6 -0.4 0.5 -0.3 0.6 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.7 -0.3 0.7 -0.2 0.7 -0.3 0.9 -0.3 0.8 -0.2 0.8 -0.1 0.9 -0.1 1.0 -0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.6 0.7 0.6 -0.0 0.0 0.6 0.7 0.6 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 0.1 0.9 -0.0 0.9 -0.1 1.0 -0.1 0.9 -0.1 0.8 -0.2 0.8 -0.3 0.9 -0.3 0.7 z;m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z"
|
|
26
|
-
/>
|
|
27
|
-
<animateTransform
|
|
28
|
-
attributeName="transform"
|
|
29
|
-
attributeType="XML"
|
|
30
|
-
type="rotate"
|
|
31
|
-
dur="5s"
|
|
32
|
-
repeatCount="indefinite"
|
|
33
|
-
calcMode="spline"
|
|
34
|
-
keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8"
|
|
35
|
-
keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1"
|
|
36
|
-
values="0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24"
|
|
37
|
-
/>
|
|
38
|
-
</path>
|
|
75
|
+
<g style="transform-box: view-box; transform-origin: center" {@attach spin}>
|
|
76
|
+
<path fill="currentColor" d={LOADING_SHAPES[0]} {@attach morph} />
|
|
77
|
+
</g>
|
|
39
78
|
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const LOADING_SHAPES: readonly ["m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z", "m39.9 24.0 -0.3 0.8 -0.4 0.8 -0.3 0.8 -0.2 1.5 0.1 0.9 0.1 0.9 -0.1 0.9 -0.2 0.8 -0.3 0.8 -0.2 0.4 -0.3 0.4 -0.5 0.7 -0.7 0.5 -0.8 0.4 -0.8 0.4 -0.8 0.4 -1.2 1.0 -0.5 0.7 -0.5 0.8 -0.6 0.6 -0.6 0.6 -0.8 0.4 -0.4 0.2 -0.5 0.1 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.9 -0.3 -0.8 -0.1 -1.6 -0.1 -0.8 0.2 -0.9 0.3 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.5 -0.1 -0.4 -0.2 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.5 -0.8 -0.5 -0.7 -1.2 -1.0 -0.7 -0.4 -0.9 -0.4 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.3 -0.4 -0.2 -0.4 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.9 0.1 -0.9 -0.2 -1.5 -0.3 -0.8 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.7 -0.0 -0.2 0.2 -0.8 0.4 -0.8 0.5 -0.7 0.6 -0.6 0.7 -0.7 0.5 -0.6 0.6 -1.3 0.3 -0.9 0.2 -0.8 0.3 -0.8 0.5 -0.7 0.5 -0.6 0.2 -0.2 0.5 -0.4 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.9 -0.0 0.8 -0.1 1.4 -0.5 0.7 -0.4 0.7 -0.5 0.7 -0.5 0.8 -0.3 0.8 -0.2 0.9 -0.1 0.0 -0.0 0.8 0.1 0.9 0.2 0.8 0.3 0.7 0.5 0.7 0.5 0.7 0.4 1.4 0.5 0.8 0.1 0.9 0.0 0.9 0.2 0.8 0.3 0.7 0.4 0.5 0.4 0.2 0.1 0.5 0.7 0.5 0.7 0.3 0.8 0.2 0.8 0.3 0.9 0.6 1.3 0.5 0.6 0.7 0.7 0.6 0.6 0.5 0.7 0.4 0.8 0.2 0.8 0.0 0.2 0.1 0.7 -0.1 0.9 z", "m38.9 24.2 -0.2 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.3 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.4 1.0 -0.4 0.8 -0.4 0.8 -0.6 0.6 -0.7 0.5 0.0 0.1 -0.7 0.4 -0.8 0.3 -0.8 0.3 -0.9 0.1 -1.1 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -1.1 -0.0 -0.9 -0.1 -0.8 -0.3 -0.8 -0.3 -0.7 -0.5 -0.1 0.0 -0.6 -0.5 -0.6 -0.7 -0.4 -0.7 -0.4 -0.8 -0.4 -1.0 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -0.8 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -1.1 -0.2 -0.9 -0.0 -0.8 0.0 -0.9 0.2 -0.8 0.1 -0.1 0.3 -0.7 0.4 -0.8 0.6 -0.6 0.6 -0.6 0.9 -0.7 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.9 -0.7 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.8 -0.0 0.1 -0.0 0.9 0.0 0.8 0.2 0.8 0.3 0.8 0.4 0.9 0.7 0.6 0.5 0.7 0.4 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.4 0.6 0.5 0.9 0.7 0.6 0.6 0.6 0.7 0.4 0.7 0.3 0.7 0.0 0.1 0.2 0.8 0.1 0.9 -0.0 0.9 -0.2 0.8 -0.3 1.1 z", "m39.6 24.0 -0.1 0.8 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.3 0.8 -0.4 0.7 -0.4 0.7 -0.5 0.6 -0.4 0.6 -0.6 0.6 -0.6 0.6 -0.4 0.4 -0.6 0.6 -0.4 0.5 -0.9 0.8 -0.5 0.5 -0.6 0.6 -0.4 0.4 -0.7 0.7 -0.5 0.5 -0.6 0.4 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.7 0.3 -0.8 0.3 -0.8 0.3 -0.8 0.2 -0.8 0.1 -0.8 0.1 -0.8 0.1 -0.9 0.0 -0.8 -0.0 -0.9 -0.1 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.3 -0.8 -0.4 -0.8 -0.4 -0.7 -0.5 -0.7 -0.5 -0.7 -0.5 -0.6 -0.6 -0.1 -0.1 -0.5 -0.6 -0.6 -0.7 -0.5 -0.7 -0.5 -0.8 -0.4 -0.7 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.1 -0.9 0.0 -0.8 0.0 -0.9 0.1 -0.8 0.1 -0.8 0.1 -0.8 0.3 -0.8 0.2 -0.8 0.3 -0.7 0.4 -0.8 0.3 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.5 0.6 -0.6 0.6 -0.7 0.4 -0.4 0.6 -0.6 0.5 -0.4 0.8 -0.9 0.5 -0.5 0.6 -0.6 0.4 -0.4 0.7 -0.7 0.5 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.4 0.7 -0.4 0.7 -0.3 0.8 -0.3 0.8 -0.3 0.8 -0.2 0.8 -0.1 0.8 -0.1 0.8 -0.1 0.9 -0.0 0.8 0.0 0.9 0.1 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.4 0.8 0.3 0.8 0.4 0.7 0.5 0.7 0.5 0.7 0.5 0.6 0.7 0.1 -0.0 0.5 0.6 0.6 0.7 0.5 0.7 0.5 0.8 0.4 0.7 0.3 0.8 0.4 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.1 0.9 0.0 0.8 -0.0 0.8 -0.1 0.9 z", "m40.0 24.0 -0.1 0.8 -0.5 0.8 -0.6 0.8 -0.6 0.6 -0.6 0.7 -0.5 0.6 -0.7 1.2 -0.1 0.7 -0.1 0.8 -0.0 0.9 -0.1 0.9 -0.1 0.9 -0.2 0.9 -0.5 0.7 -0.0 0.0 -0.7 0.5 -0.9 0.2 -0.9 0.1 -0.9 0.1 -0.8 0.0 -0.8 0.1 -0.8 0.1 -1.2 0.7 -0.6 0.5 -0.7 0.6 -0.6 0.6 -0.8 0.6 -0.8 0.5 -0.8 0.1 -0.0 0.0 -0.8 -0.1 -0.8 -0.5 -0.8 -0.6 -0.6 -0.6 -0.7 -0.6 -0.6 -0.5 -1.2 -0.7 -0.7 -0.1 -0.8 -0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.2 -0.7 -0.5 -0.0 0.0 -0.5 -0.7 -0.2 -0.9 -0.1 -0.9 -0.1 -0.9 -0.0 -0.8 -0.1 -0.8 -0.1 -0.8 -0.7 -1.2 -0.5 -0.6 -0.6 -0.7 -0.6 -0.6 -0.6 -0.8 -0.5 -0.8 -0.1 -0.8 -0.0 -0.0 0.1 -0.8 0.5 -0.8 0.6 -0.8 0.6 -0.6 0.6 -0.7 0.5 -0.6 0.7 -1.2 0.1 -0.7 0.1 -0.8 0.0 -0.9 0.1 -0.9 0.1 -0.9 0.2 -0.9 0.5 -0.7 -0.0 -0.0 0.7 -0.5 0.9 -0.2 0.9 -0.1 0.9 -0.1 0.8 -0.0 0.8 -0.1 0.8 -0.1 1.2 -0.7 0.6 -0.5 0.7 -0.6 0.6 -0.6 0.8 -0.6 0.8 -0.5 0.8 -0.1 0.0 -0.0 0.8 0.1 0.8 0.5 0.8 0.6 0.6 0.6 0.7 0.6 0.6 0.5 1.2 0.7 0.7 0.1 0.8 0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.2 0.7 0.5 0.0 -0.0 0.5 0.7 0.2 0.9 0.1 0.9 0.1 0.9 0.0 0.8 0.1 0.8 0.1 0.8 0.7 1.2 0.5 0.6 0.6 0.7 0.6 0.6 0.6 0.8 0.5 0.8 0.1 0.8 z", "m36.9 24.6 0.1 0.7 0.2 0.8 0.2 0.7 0.4 0.9 0.4 0.9 0.2 0.9 0.1 1.0 0.1 0.9 -0.1 0.9 -0.3 0.9 -0.3 0.9 -0.4 0.8 -0.5 0.8 -0.6 0.6 -0.1 0.1 -0.6 0.6 -0.8 0.5 -0.8 0.4 -0.9 0.3 -0.9 0.3 -0.9 0.1 -0.9 -0.1 -1.0 -0.1 -0.9 -0.2 -0.9 -0.4 -0.9 -0.4 -0.7 -0.2 -0.8 -0.2 -0.7 -0.1 -1.2 0.0 -0.7 0.1 -0.8 0.2 -0.7 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -1.0 0.1 -0.9 0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.5 -0.6 -0.6 -0.1 -0.1 -0.6 -0.6 -0.5 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 0.1 -0.9 0.1 -1.0 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -0.7 0.2 -0.8 0.1 -0.7 -0.0 -1.2 -0.1 -0.7 -0.2 -0.8 -0.2 -0.7 -0.4 -0.9 -0.4 -0.9 -0.2 -0.9 -0.1 -1.0 -0.1 -0.9 0.1 -0.9 0.3 -0.9 0.3 -0.9 0.4 -0.8 0.5 -0.8 0.6 -0.6 0.1 -0.1 0.6 -0.6 0.8 -0.5 0.8 -0.4 0.9 -0.3 0.9 -0.3 0.9 -0.1 0.9 0.1 1.0 0.1 0.9 0.2 0.9 0.4 0.9 0.4 0.7 0.2 0.8 0.2 0.7 0.1 1.2 -0.0 0.7 -0.1 0.8 -0.2 0.7 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 1.0 -0.1 0.9 -0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.5 0.6 0.6 0.1 0.1 0.6 0.6 0.5 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 -0.1 0.9 -0.1 1.0 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 0.7 -0.2 0.8 -0.1 0.7 z", "m37.7 24.0 -0.3 0.7 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.6 -0.3 0.5 -0.4 0.6 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.3 0.4 -0.5 0.4 -0.8 0.8 -0.4 0.5 -0.4 0.3 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.6 0.4 -0.5 0.3 -0.6 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.7 0.3 -0.7 0.2 -0.7 0.3 -0.9 0.3 -0.8 0.2 -0.8 0.1 -0.9 0.1 -1.0 0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.6 -0.7 -0.6 -0.0 0.0 -0.6 -0.7 -0.6 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 -0.1 -0.9 0.0 -0.9 0.1 -1.0 0.1 -0.9 0.1 -0.8 0.2 -0.8 0.3 -0.9 0.3 -0.7 0.2 -0.7 0.3 -0.7 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.6 0.3 -0.5 0.4 -0.6 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.3 -0.4 0.5 -0.4 0.8 -0.8 0.4 -0.5 0.4 -0.3 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.6 -0.4 0.5 -0.3 0.6 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.7 -0.3 0.7 -0.2 0.7 -0.3 0.9 -0.3 0.8 -0.2 0.8 -0.1 0.9 -0.1 1.0 -0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.6 0.7 0.6 -0.0 0.0 0.6 0.7 0.6 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 0.1 0.9 -0.0 0.9 -0.1 1.0 -0.1 0.9 -0.1 0.8 -0.2 0.8 -0.3 0.9 -0.3 0.7 z"];
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/*
|
|
2
|
+
The seven shapes the M3 loading indicator morphs through, in a 48 × 48 viewBox. Every path has
|
|
3
|
+
the same command structure (120 relative points), so Motion's `mix` can interpolate between any
|
|
4
|
+
two.
|
|
5
|
+
https://m3.material.io/components/loading-indicator/specs
|
|
6
|
+
*/
|
|
7
|
+
export const LOADING_SHAPES = [
|
|
8
|
+
'm37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z',
|
|
9
|
+
'm39.9 24.0 -0.3 0.8 -0.4 0.8 -0.3 0.8 -0.2 1.5 0.1 0.9 0.1 0.9 -0.1 0.9 -0.2 0.8 -0.3 0.8 -0.2 0.4 -0.3 0.4 -0.5 0.7 -0.7 0.5 -0.8 0.4 -0.8 0.4 -0.8 0.4 -1.2 1.0 -0.5 0.7 -0.5 0.8 -0.6 0.6 -0.6 0.6 -0.8 0.4 -0.4 0.2 -0.5 0.1 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.9 -0.3 -0.8 -0.1 -1.6 -0.1 -0.8 0.2 -0.9 0.3 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.5 -0.1 -0.4 -0.2 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.5 -0.8 -0.5 -0.7 -1.2 -1.0 -0.7 -0.4 -0.9 -0.4 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.3 -0.4 -0.2 -0.4 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.9 0.1 -0.9 -0.2 -1.5 -0.3 -0.8 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.7 -0.0 -0.2 0.2 -0.8 0.4 -0.8 0.5 -0.7 0.6 -0.6 0.7 -0.7 0.5 -0.6 0.6 -1.3 0.3 -0.9 0.2 -0.8 0.3 -0.8 0.5 -0.7 0.5 -0.6 0.2 -0.2 0.5 -0.4 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.9 -0.0 0.8 -0.1 1.4 -0.5 0.7 -0.4 0.7 -0.5 0.7 -0.5 0.8 -0.3 0.8 -0.2 0.9 -0.1 0.0 -0.0 0.8 0.1 0.9 0.2 0.8 0.3 0.7 0.5 0.7 0.5 0.7 0.4 1.4 0.5 0.8 0.1 0.9 0.0 0.9 0.2 0.8 0.3 0.7 0.4 0.5 0.4 0.2 0.1 0.5 0.7 0.5 0.7 0.3 0.8 0.2 0.8 0.3 0.9 0.6 1.3 0.5 0.6 0.7 0.7 0.6 0.6 0.5 0.7 0.4 0.8 0.2 0.8 0.0 0.2 0.1 0.7 -0.1 0.9 z',
|
|
10
|
+
'm38.9 24.2 -0.2 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.3 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.4 1.0 -0.4 0.8 -0.4 0.8 -0.6 0.6 -0.7 0.5 0.0 0.1 -0.7 0.4 -0.8 0.3 -0.8 0.3 -0.9 0.1 -1.1 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -1.1 -0.0 -0.9 -0.1 -0.8 -0.3 -0.8 -0.3 -0.7 -0.5 -0.1 0.0 -0.6 -0.5 -0.6 -0.7 -0.4 -0.7 -0.4 -0.8 -0.4 -1.0 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -0.8 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -1.1 -0.2 -0.9 -0.0 -0.8 0.0 -0.9 0.2 -0.8 0.1 -0.1 0.3 -0.7 0.4 -0.8 0.6 -0.6 0.6 -0.6 0.9 -0.7 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.9 -0.7 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.8 -0.0 0.1 -0.0 0.9 0.0 0.8 0.2 0.8 0.3 0.8 0.4 0.9 0.7 0.6 0.5 0.7 0.4 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.4 0.6 0.5 0.9 0.7 0.6 0.6 0.6 0.7 0.4 0.7 0.3 0.7 0.0 0.1 0.2 0.8 0.1 0.9 -0.0 0.9 -0.2 0.8 -0.3 1.1 z',
|
|
11
|
+
'm39.6 24.0 -0.1 0.8 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.3 0.8 -0.4 0.7 -0.4 0.7 -0.5 0.6 -0.4 0.6 -0.6 0.6 -0.6 0.6 -0.4 0.4 -0.6 0.6 -0.4 0.5 -0.9 0.8 -0.5 0.5 -0.6 0.6 -0.4 0.4 -0.7 0.7 -0.5 0.5 -0.6 0.4 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.7 0.3 -0.8 0.3 -0.8 0.3 -0.8 0.2 -0.8 0.1 -0.8 0.1 -0.8 0.1 -0.9 0.0 -0.8 -0.0 -0.9 -0.1 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.3 -0.8 -0.4 -0.8 -0.4 -0.7 -0.5 -0.7 -0.5 -0.7 -0.5 -0.6 -0.6 -0.1 -0.1 -0.5 -0.6 -0.6 -0.7 -0.5 -0.7 -0.5 -0.8 -0.4 -0.7 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.1 -0.9 0.0 -0.8 0.0 -0.9 0.1 -0.8 0.1 -0.8 0.1 -0.8 0.3 -0.8 0.2 -0.8 0.3 -0.7 0.4 -0.8 0.3 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.5 0.6 -0.6 0.6 -0.7 0.4 -0.4 0.6 -0.6 0.5 -0.4 0.8 -0.9 0.5 -0.5 0.6 -0.6 0.4 -0.4 0.7 -0.7 0.5 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.4 0.7 -0.4 0.7 -0.3 0.8 -0.3 0.8 -0.3 0.8 -0.2 0.8 -0.1 0.8 -0.1 0.8 -0.1 0.9 -0.0 0.8 0.0 0.9 0.1 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.4 0.8 0.3 0.8 0.4 0.7 0.5 0.7 0.5 0.7 0.5 0.6 0.7 0.1 -0.0 0.5 0.6 0.6 0.7 0.5 0.7 0.5 0.8 0.4 0.7 0.3 0.8 0.4 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.1 0.9 0.0 0.8 -0.0 0.8 -0.1 0.9 z',
|
|
12
|
+
'm40.0 24.0 -0.1 0.8 -0.5 0.8 -0.6 0.8 -0.6 0.6 -0.6 0.7 -0.5 0.6 -0.7 1.2 -0.1 0.7 -0.1 0.8 -0.0 0.9 -0.1 0.9 -0.1 0.9 -0.2 0.9 -0.5 0.7 -0.0 0.0 -0.7 0.5 -0.9 0.2 -0.9 0.1 -0.9 0.1 -0.8 0.0 -0.8 0.1 -0.8 0.1 -1.2 0.7 -0.6 0.5 -0.7 0.6 -0.6 0.6 -0.8 0.6 -0.8 0.5 -0.8 0.1 -0.0 0.0 -0.8 -0.1 -0.8 -0.5 -0.8 -0.6 -0.6 -0.6 -0.7 -0.6 -0.6 -0.5 -1.2 -0.7 -0.7 -0.1 -0.8 -0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.2 -0.7 -0.5 -0.0 0.0 -0.5 -0.7 -0.2 -0.9 -0.1 -0.9 -0.1 -0.9 -0.0 -0.8 -0.1 -0.8 -0.1 -0.8 -0.7 -1.2 -0.5 -0.6 -0.6 -0.7 -0.6 -0.6 -0.6 -0.8 -0.5 -0.8 -0.1 -0.8 -0.0 -0.0 0.1 -0.8 0.5 -0.8 0.6 -0.8 0.6 -0.6 0.6 -0.7 0.5 -0.6 0.7 -1.2 0.1 -0.7 0.1 -0.8 0.0 -0.9 0.1 -0.9 0.1 -0.9 0.2 -0.9 0.5 -0.7 -0.0 -0.0 0.7 -0.5 0.9 -0.2 0.9 -0.1 0.9 -0.1 0.8 -0.0 0.8 -0.1 0.8 -0.1 1.2 -0.7 0.6 -0.5 0.7 -0.6 0.6 -0.6 0.8 -0.6 0.8 -0.5 0.8 -0.1 0.0 -0.0 0.8 0.1 0.8 0.5 0.8 0.6 0.6 0.6 0.7 0.6 0.6 0.5 1.2 0.7 0.7 0.1 0.8 0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.2 0.7 0.5 0.0 -0.0 0.5 0.7 0.2 0.9 0.1 0.9 0.1 0.9 0.0 0.8 0.1 0.8 0.1 0.8 0.7 1.2 0.5 0.6 0.6 0.7 0.6 0.6 0.6 0.8 0.5 0.8 0.1 0.8 z',
|
|
13
|
+
'm36.9 24.6 0.1 0.7 0.2 0.8 0.2 0.7 0.4 0.9 0.4 0.9 0.2 0.9 0.1 1.0 0.1 0.9 -0.1 0.9 -0.3 0.9 -0.3 0.9 -0.4 0.8 -0.5 0.8 -0.6 0.6 -0.1 0.1 -0.6 0.6 -0.8 0.5 -0.8 0.4 -0.9 0.3 -0.9 0.3 -0.9 0.1 -0.9 -0.1 -1.0 -0.1 -0.9 -0.2 -0.9 -0.4 -0.9 -0.4 -0.7 -0.2 -0.8 -0.2 -0.7 -0.1 -1.2 0.0 -0.7 0.1 -0.8 0.2 -0.7 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -1.0 0.1 -0.9 0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.5 -0.6 -0.6 -0.1 -0.1 -0.6 -0.6 -0.5 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 0.1 -0.9 0.1 -1.0 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -0.7 0.2 -0.8 0.1 -0.7 -0.0 -1.2 -0.1 -0.7 -0.2 -0.8 -0.2 -0.7 -0.4 -0.9 -0.4 -0.9 -0.2 -0.9 -0.1 -1.0 -0.1 -0.9 0.1 -0.9 0.3 -0.9 0.3 -0.9 0.4 -0.8 0.5 -0.8 0.6 -0.6 0.1 -0.1 0.6 -0.6 0.8 -0.5 0.8 -0.4 0.9 -0.3 0.9 -0.3 0.9 -0.1 0.9 0.1 1.0 0.1 0.9 0.2 0.9 0.4 0.9 0.4 0.7 0.2 0.8 0.2 0.7 0.1 1.2 -0.0 0.7 -0.1 0.8 -0.2 0.7 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 1.0 -0.1 0.9 -0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.5 0.6 0.6 0.1 0.1 0.6 0.6 0.5 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 -0.1 0.9 -0.1 1.0 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 0.7 -0.2 0.8 -0.1 0.7 z',
|
|
14
|
+
'm37.7 24.0 -0.3 0.7 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.6 -0.3 0.5 -0.4 0.6 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.3 0.4 -0.5 0.4 -0.8 0.8 -0.4 0.5 -0.4 0.3 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.6 0.4 -0.5 0.3 -0.6 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.7 0.3 -0.7 0.2 -0.7 0.3 -0.9 0.3 -0.8 0.2 -0.8 0.1 -0.9 0.1 -1.0 0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.6 -0.7 -0.6 -0.0 0.0 -0.6 -0.7 -0.6 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 -0.1 -0.9 0.0 -0.9 0.1 -1.0 0.1 -0.9 0.1 -0.8 0.2 -0.8 0.3 -0.9 0.3 -0.7 0.2 -0.7 0.3 -0.7 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.6 0.3 -0.5 0.4 -0.6 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.3 -0.4 0.5 -0.4 0.8 -0.8 0.4 -0.5 0.4 -0.3 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.6 -0.4 0.5 -0.3 0.6 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.7 -0.3 0.7 -0.2 0.7 -0.3 0.9 -0.3 0.8 -0.2 0.8 -0.1 0.9 -0.1 1.0 -0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.6 0.7 0.6 -0.0 0.0 0.6 0.7 0.6 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 0.1 0.9 -0.0 0.9 -0.1 1.0 -0.1 0.9 -0.1 0.8 -0.2 0.8 -0.3 0.9 -0.3 0.7 z'
|
|
15
|
+
];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@noxlovette/material",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A Material Design 3 component library for Svelte, built on Bits UI.",
|
|
6
6
|
"keywords": [
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
"url": "https://github.com/noxlovette/material/issues"
|
|
24
24
|
},
|
|
25
25
|
"scripts": {
|
|
26
|
-
"build": "svelte-package",
|
|
26
|
+
"build": "bun run generate:springs && svelte-package",
|
|
27
|
+
"generate:springs": "bun scripts/generate-motion-springs.ts && prettier --write src/lib/styles/motion.css",
|
|
27
28
|
"build:site": "vite build",
|
|
28
29
|
"watch": "svelte-package --watch",
|
|
29
30
|
"prepublishOnly": "bun run build",
|
|
@@ -81,6 +82,7 @@
|
|
|
81
82
|
"eslint-config-prettier": "^10.1.8",
|
|
82
83
|
"eslint-plugin-svelte": "^3.23.0",
|
|
83
84
|
"globals": "^17.11.0",
|
|
85
|
+
"jsdom": "^30.1.1",
|
|
84
86
|
"lefthook": "^2.1.12",
|
|
85
87
|
"prettier": "^3.9.6",
|
|
86
88
|
"prettier-plugin-organize-imports": "^4.3.0",
|
|
@@ -110,6 +112,7 @@
|
|
|
110
112
|
"bits-ui": "^2.19.0",
|
|
111
113
|
"clsx": "^2.1.1",
|
|
112
114
|
"mode-watcher": "^1.1.0",
|
|
115
|
+
"motion": "^13.4.0",
|
|
113
116
|
"nanoid": "^6.0.1",
|
|
114
117
|
"tailwind-merge": "^3.6.0",
|
|
115
118
|
"tailwind-variants": "^3.3.1"
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export function clickOutside(node, callback) {
|
|
2
|
-
const handleClick = (event) => {
|
|
3
|
-
if (!node.contains(event.target)) {
|
|
4
|
-
callback();
|
|
5
|
-
}
|
|
6
|
-
};
|
|
7
|
-
document.addEventListener('click', handleClick, true);
|
|
8
|
-
return {
|
|
9
|
-
destroy() {
|
|
10
|
-
document.removeEventListener('click', handleClick, true);
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { type Middleware, type Placement } from '@floating-ui/dom';
|
|
2
|
-
export type FloatingParams = {
|
|
3
|
-
reference: HTMLElement;
|
|
4
|
-
placement?: Placement;
|
|
5
|
-
strategy?: 'absolute' | 'fixed';
|
|
6
|
-
offsetPx?: number;
|
|
7
|
-
middleware?: Middleware[];
|
|
8
|
-
arrowEl?: HTMLElement | null;
|
|
9
|
-
arrowPadding?: number;
|
|
10
|
-
enabled?: boolean;
|
|
11
|
-
onUpdate?: (data: {
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
placement: Placement;
|
|
15
|
-
}) => void;
|
|
16
|
-
};
|
|
17
|
-
export declare function floating(node: HTMLElement, params: FloatingParams): {
|
|
18
|
-
update(next: FloatingParams): void;
|
|
19
|
-
destroy(): void;
|
|
20
|
-
};
|
package/dist/actions/floating.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import { arrow as arrowMw, autoUpdate, computePosition, offset, shift } from '@floating-ui/dom';
|
|
2
|
-
export function floating(node, params) {
|
|
3
|
-
let cleanup = null;
|
|
4
|
-
let p = { ...params };
|
|
5
|
-
p.strategy ??= 'absolute';
|
|
6
|
-
p.offsetPx ??= 8;
|
|
7
|
-
p.enabled ??= true;
|
|
8
|
-
async function update() {
|
|
9
|
-
if (!p.enabled)
|
|
10
|
-
return;
|
|
11
|
-
if (!p.reference)
|
|
12
|
-
return;
|
|
13
|
-
const middleware = [
|
|
14
|
-
offset(p.offsetPx ?? 8),
|
|
15
|
-
shift({ padding: 8 }),
|
|
16
|
-
...(p.middleware ?? [])
|
|
17
|
-
];
|
|
18
|
-
if (p.arrowEl) {
|
|
19
|
-
middleware.push(arrowMw({
|
|
20
|
-
element: p.arrowEl,
|
|
21
|
-
padding: p.arrowPadding ?? 6
|
|
22
|
-
}));
|
|
23
|
-
}
|
|
24
|
-
const { x, y, placement, middlewareData } = await computePosition(p.reference, node, {
|
|
25
|
-
placement: p.placement,
|
|
26
|
-
strategy: p.strategy,
|
|
27
|
-
middleware
|
|
28
|
-
});
|
|
29
|
-
Object.assign(node.style, {
|
|
30
|
-
position: p.strategy,
|
|
31
|
-
left: `${x}px`,
|
|
32
|
-
top: `${y}px`
|
|
33
|
-
});
|
|
34
|
-
// Optional arrow positioning
|
|
35
|
-
if (p.arrowEl && middlewareData.arrow) {
|
|
36
|
-
const { x: ax, y: ay } = middlewareData.arrow;
|
|
37
|
-
const side = placement.split('-')[0]; // 'top'|'bottom'|'left'|'right'
|
|
38
|
-
const staticSide = {
|
|
39
|
-
top: 'bottom',
|
|
40
|
-
bottom: 'top',
|
|
41
|
-
left: 'right',
|
|
42
|
-
right: 'left'
|
|
43
|
-
};
|
|
44
|
-
Object.assign(p.arrowEl.style, {
|
|
45
|
-
left: ax != null ? `${ax}px` : '',
|
|
46
|
-
top: ay != null ? `${ay}px` : '',
|
|
47
|
-
right: '',
|
|
48
|
-
bottom: '',
|
|
49
|
-
[staticSide[side]]: `-4px` // arrow size tweak
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
p.onUpdate?.({ x, y, placement: placement });
|
|
53
|
-
}
|
|
54
|
-
function startAutoUpdate() {
|
|
55
|
-
stopAutoUpdate();
|
|
56
|
-
if (!p.enabled || !p.reference)
|
|
57
|
-
return;
|
|
58
|
-
cleanup = autoUpdate(p.reference, node, update, {
|
|
59
|
-
// works well for scroll containers too
|
|
60
|
-
ancestorScroll: true,
|
|
61
|
-
ancestorResize: true,
|
|
62
|
-
elementResize: true,
|
|
63
|
-
layoutShift: true,
|
|
64
|
-
animationFrame: false
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
function stopAutoUpdate() {
|
|
68
|
-
cleanup?.();
|
|
69
|
-
cleanup = null;
|
|
70
|
-
}
|
|
71
|
-
// init
|
|
72
|
-
startAutoUpdate();
|
|
73
|
-
void update();
|
|
74
|
-
return {
|
|
75
|
-
update(next) {
|
|
76
|
-
p = { ...p, ...next };
|
|
77
|
-
p.strategy ??= 'absolute';
|
|
78
|
-
p.offsetPx ??= 8;
|
|
79
|
-
p.enabled ??= true;
|
|
80
|
-
startAutoUpdate();
|
|
81
|
-
void update();
|
|
82
|
-
},
|
|
83
|
-
destroy() {
|
|
84
|
-
stopAutoUpdate();
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
}
|
package/dist/actions/index.d.ts
DELETED
package/dist/actions/index.js
DELETED
package/dist/actions/keyboard.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export function keyEscape(node, callback) {
|
|
2
|
-
const handleKeydown = (event) => {
|
|
3
|
-
if (event.key === 'Escape') {
|
|
4
|
-
event.preventDefault();
|
|
5
|
-
callback();
|
|
6
|
-
}
|
|
7
|
-
};
|
|
8
|
-
window.addEventListener('keydown', handleKeydown);
|
|
9
|
-
return {
|
|
10
|
-
destroy() {
|
|
11
|
-
window.removeEventListener('keydown', handleKeydown);
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
}
|
package/dist/actions/portal.d.ts
DELETED
package/dist/actions/portal.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
type FloatingOptions = {
|
|
2
|
-
anchor: HTMLElement;
|
|
3
|
-
offset?: number;
|
|
4
|
-
viewportPadding?: number;
|
|
5
|
-
};
|
|
6
|
-
export declare function positionFloating(node: HTMLElement, options: FloatingOptions): {
|
|
7
|
-
update(newOptions: FloatingOptions): void;
|
|
8
|
-
destroy(): void;
|
|
9
|
-
};
|
|
10
|
-
export {};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
export function positionFloating(node, options) {
|
|
2
|
-
let { anchor, offset = 8, viewportPadding = 8 } = options;
|
|
3
|
-
function updatePosition() {
|
|
4
|
-
if (!anchor || !node)
|
|
5
|
-
return;
|
|
6
|
-
const anchorRect = anchor.getBoundingClientRect();
|
|
7
|
-
const pickerRect = node.getBoundingClientRect();
|
|
8
|
-
const vh = window.innerHeight;
|
|
9
|
-
const vw = window.innerWidth;
|
|
10
|
-
const spaceBelow = vh - anchorRect.bottom;
|
|
11
|
-
const spaceAbove = anchorRect.top;
|
|
12
|
-
let placement = 'bottom';
|
|
13
|
-
if (spaceBelow < pickerRect.height && spaceAbove > spaceBelow) {
|
|
14
|
-
placement = 'top';
|
|
15
|
-
}
|
|
16
|
-
let top;
|
|
17
|
-
if (placement === 'bottom') {
|
|
18
|
-
top = anchorRect.bottom + offset;
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
top = anchorRect.top - pickerRect.height - offset;
|
|
22
|
-
}
|
|
23
|
-
node.style.position = 'fixed';
|
|
24
|
-
const maxWidth = Math.max(vw - viewportPadding * 2, 0);
|
|
25
|
-
const maxHeight = Math.max(vh - viewportPadding * 2, 0);
|
|
26
|
-
const minWidth = Math.min(anchorRect.width, maxWidth);
|
|
27
|
-
const clamp = (value, min, max) => max < min ? min : Math.min(Math.max(value, min), max);
|
|
28
|
-
const clampedTop = clamp(top, viewportPadding, vh - pickerRect.height - viewportPadding);
|
|
29
|
-
const clampedLeft = clamp(anchorRect.left, viewportPadding, vw - pickerRect.width - viewportPadding);
|
|
30
|
-
node.style.top = `${isFinite(clampedTop) ? clampedTop : viewportPadding}px`;
|
|
31
|
-
node.style.left = `${isFinite(clampedLeft) ? clampedLeft : viewportPadding}px`;
|
|
32
|
-
node.style.minWidth = `${minWidth}px`;
|
|
33
|
-
node.style.maxWidth = `${maxWidth}px`;
|
|
34
|
-
node.style.maxHeight = `${maxHeight}px`;
|
|
35
|
-
node.style.overflow = 'auto';
|
|
36
|
-
node.dataset.placement = placement;
|
|
37
|
-
}
|
|
38
|
-
const ro = new ResizeObserver(() => updatePosition());
|
|
39
|
-
ro.observe(node);
|
|
40
|
-
ro.observe(anchor);
|
|
41
|
-
const onScroll = () => updatePosition();
|
|
42
|
-
const onResize = () => updatePosition();
|
|
43
|
-
window.addEventListener('scroll', onScroll, true);
|
|
44
|
-
window.addEventListener('resize', onResize);
|
|
45
|
-
queueMicrotask(updatePosition);
|
|
46
|
-
return {
|
|
47
|
-
update(newOptions) {
|
|
48
|
-
anchor = newOptions.anchor;
|
|
49
|
-
offset = newOptions.offset ?? 8;
|
|
50
|
-
viewportPadding = newOptions.viewportPadding ?? 8;
|
|
51
|
-
updatePosition();
|
|
52
|
-
},
|
|
53
|
-
destroy() {
|
|
54
|
-
ro.disconnect();
|
|
55
|
-
window.removeEventListener('scroll', onScroll, true);
|
|
56
|
-
window.removeEventListener('resize', onResize);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export type RovingFocusGroupParams = {
|
|
2
|
-
/** CSS selector (relative to the node) matching the focusable candidates. */
|
|
3
|
-
candidateSelector: string;
|
|
4
|
-
/** Loop from the last candidate back to the first (and vice versa). */
|
|
5
|
-
loop?: boolean;
|
|
6
|
-
/** Disable the group without unmounting it (leaves existing tabindex/focus alone). */
|
|
7
|
-
enabled?: boolean;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* Roving-tabindex keyboard navigation for a group of sibling elements (e.g. table rows,
|
|
11
|
-
* list items): only one candidate is ever a Tab stop, and ArrowDown/ArrowUp (plus the
|
|
12
|
-
* j/k vim aliases) move focus — and the roving tab stop — between candidates. Tab and
|
|
13
|
-
* Shift+Tab keep working natively since they only ever see the single active tabindex=0
|
|
14
|
-
* candidate. Modeled on bits-ui's RovingFocusGroup (packages/bits-ui/src/lib/internal/
|
|
15
|
-
* roving-focus-group.ts), adapted to a plain Svelte action instead of a headless class.
|
|
16
|
-
*/
|
|
17
|
-
export declare function rovingFocusGroup(node: HTMLElement, params: RovingFocusGroupParams): {
|
|
18
|
-
update(newParams: RovingFocusGroupParams): void;
|
|
19
|
-
destroy(): void;
|
|
20
|
-
};
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
const NEXT_KEYS = new Set(['ArrowDown', 'j']);
|
|
2
|
-
const PREV_KEYS = new Set(['ArrowUp', 'k']);
|
|
3
|
-
/**
|
|
4
|
-
* Roving-tabindex keyboard navigation for a group of sibling elements (e.g. table rows,
|
|
5
|
-
* list items): only one candidate is ever a Tab stop, and ArrowDown/ArrowUp (plus the
|
|
6
|
-
* j/k vim aliases) move focus — and the roving tab stop — between candidates. Tab and
|
|
7
|
-
* Shift+Tab keep working natively since they only ever see the single active tabindex=0
|
|
8
|
-
* candidate. Modeled on bits-ui's RovingFocusGroup (packages/bits-ui/src/lib/internal/
|
|
9
|
-
* roving-focus-group.ts), adapted to a plain Svelte action instead of a headless class.
|
|
10
|
-
*/
|
|
11
|
-
export function rovingFocusGroup(node, params) {
|
|
12
|
-
let p = params;
|
|
13
|
-
function candidates() {
|
|
14
|
-
return Array.from(node.querySelectorAll(p.candidateSelector));
|
|
15
|
-
}
|
|
16
|
-
function setup() {
|
|
17
|
-
if (!p.enabled)
|
|
18
|
-
return;
|
|
19
|
-
const items = candidates();
|
|
20
|
-
if (!items.length)
|
|
21
|
-
return;
|
|
22
|
-
const active = items.includes(document.activeElement)
|
|
23
|
-
? document.activeElement
|
|
24
|
-
: items[0];
|
|
25
|
-
for (const item of items) {
|
|
26
|
-
item.tabIndex = item === active ? 0 : -1;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
function handleFocusIn(event) {
|
|
30
|
-
if (!p.enabled)
|
|
31
|
-
return;
|
|
32
|
-
const items = candidates();
|
|
33
|
-
const target = event.target;
|
|
34
|
-
if (!items.includes(target))
|
|
35
|
-
return;
|
|
36
|
-
for (const item of items) {
|
|
37
|
-
item.tabIndex = item === target ? 0 : -1;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
function handleKeydown(event) {
|
|
41
|
-
if (!p.enabled)
|
|
42
|
-
return;
|
|
43
|
-
const target = event.target;
|
|
44
|
-
const items = candidates();
|
|
45
|
-
const index = items.indexOf(target);
|
|
46
|
-
if (index === -1)
|
|
47
|
-
return;
|
|
48
|
-
let nextIndex;
|
|
49
|
-
if (NEXT_KEYS.has(event.key))
|
|
50
|
-
nextIndex = index + 1;
|
|
51
|
-
else if (PREV_KEYS.has(event.key))
|
|
52
|
-
nextIndex = index - 1;
|
|
53
|
-
else if (event.key === 'Home')
|
|
54
|
-
nextIndex = 0;
|
|
55
|
-
else if (event.key === 'End')
|
|
56
|
-
nextIndex = items.length - 1;
|
|
57
|
-
if (nextIndex === undefined)
|
|
58
|
-
return;
|
|
59
|
-
if (nextIndex < 0)
|
|
60
|
-
nextIndex = p.loop ? items.length - 1 : 0;
|
|
61
|
-
else if (nextIndex >= items.length)
|
|
62
|
-
nextIndex = p.loop ? 0 : items.length - 1;
|
|
63
|
-
const nextItem = items[nextIndex];
|
|
64
|
-
if (!nextItem || nextItem === target)
|
|
65
|
-
return;
|
|
66
|
-
event.preventDefault();
|
|
67
|
-
nextItem.focus();
|
|
68
|
-
}
|
|
69
|
-
setup();
|
|
70
|
-
node.addEventListener('keydown', handleKeydown);
|
|
71
|
-
node.addEventListener('focusin', handleFocusIn);
|
|
72
|
-
return {
|
|
73
|
-
update(newParams) {
|
|
74
|
-
p = newParams;
|
|
75
|
-
setup();
|
|
76
|
-
},
|
|
77
|
-
destroy() {
|
|
78
|
-
node.removeEventListener('keydown', handleKeydown);
|
|
79
|
-
node.removeEventListener('focusin', handleFocusIn);
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export declare const easeEmphasized: (t: number) => number;
|
|
2
|
-
export declare const easeEmphasizedDecel: (t: number) => number;
|
|
3
|
-
export declare const easeEmphasizedAccel: (t: number) => number;
|
|
4
|
-
export declare const easeStandard: (t: number) => number;
|
|
5
|
-
export declare const easeStandardDecel: (t: number) => number;
|
|
6
|
-
export declare const easeStandardAccel: (t: number) => number;
|