@dorsk/tsumikit 0.4.0 → 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.
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
// Progress bar. Determinate when `value` is a number (0..max); omit `value`
|
|
3
|
-
// for an indeterminate animation. Uses
|
|
4
|
-
// aria-value* attributes. Token-styled.
|
|
3
|
+
// (or pass `indeterminate`) for an indeterminate animation. Uses
|
|
4
|
+
// role="progressbar" with the right aria-value* attributes. Token-styled.
|
|
5
|
+
//
|
|
6
|
+
// Variants (all token-driven, composable):
|
|
7
|
+
// size='sm' — thin track (~5px) for inline download/health rows.
|
|
8
|
+
// gradient — accent→teal fill (storage meter / library-health bars).
|
|
9
|
+
// striped — diagonal stripes; animated while in-flight (unpacking).
|
|
10
|
+
// indeterminate — explicit "scanning"/"importing" mode without a percentage.
|
|
5
11
|
let {
|
|
6
12
|
value,
|
|
7
13
|
max = 100,
|
|
8
14
|
label,
|
|
9
15
|
tone = 'accent',
|
|
16
|
+
size = 'md',
|
|
17
|
+
gradient = false,
|
|
18
|
+
striped = false,
|
|
19
|
+
indeterminate: indeterminateProp = false,
|
|
10
20
|
class: klass = ''
|
|
11
21
|
}: {
|
|
12
22
|
value?: number;
|
|
@@ -15,16 +25,26 @@
|
|
|
15
25
|
// Fill colour. `accent` is the default brand fill; the semantic tones
|
|
16
26
|
// retint the bar for severity (e.g. usage meters going warm/hot).
|
|
17
27
|
tone?: 'accent' | 'success' | 'warn' | 'danger';
|
|
28
|
+
// Track height. `sm` is a thin ~5px track for inline rows.
|
|
29
|
+
size?: 'sm' | 'md';
|
|
30
|
+
// Accent→teal gradient fill (overrides the flat tone colour).
|
|
31
|
+
gradient?: boolean;
|
|
32
|
+
// Diagonal stripes; animated in indeterminate mode.
|
|
33
|
+
striped?: boolean;
|
|
34
|
+
// Force indeterminate mode even when a `value` is supplied.
|
|
35
|
+
indeterminate?: boolean;
|
|
18
36
|
class?: string;
|
|
19
37
|
} = $props();
|
|
20
38
|
|
|
21
39
|
const pct = $derived(value == null ? 0 : Math.max(0, Math.min(100, (value / max) * 100)));
|
|
22
|
-
const indeterminate = $derived(value == null);
|
|
40
|
+
const indeterminate = $derived(indeterminateProp || value == null);
|
|
23
41
|
</script>
|
|
24
42
|
|
|
25
43
|
<div
|
|
26
|
-
class="progress tone-{tone} {klass}"
|
|
44
|
+
class="progress tone-{tone} size-{size} {klass}"
|
|
27
45
|
class:indeterminate
|
|
46
|
+
class:gradient
|
|
47
|
+
class:striped
|
|
28
48
|
role="progressbar"
|
|
29
49
|
aria-label={label}
|
|
30
50
|
aria-valuemin={indeterminate ? undefined : 0}
|
|
@@ -42,6 +62,9 @@
|
|
|
42
62
|
border-radius: var(--r-pill);
|
|
43
63
|
overflow: hidden;
|
|
44
64
|
}
|
|
65
|
+
.progress.size-sm {
|
|
66
|
+
height: 0.3125rem;
|
|
67
|
+
}
|
|
45
68
|
.bar {
|
|
46
69
|
height: 100%;
|
|
47
70
|
background: var(--fill, var(--accent));
|
|
@@ -57,11 +80,52 @@
|
|
|
57
80
|
.tone-danger {
|
|
58
81
|
--fill: var(--danger);
|
|
59
82
|
}
|
|
83
|
+
.progress.gradient .bar {
|
|
84
|
+
background: linear-gradient(90deg, var(--fill, var(--accent)), var(--c-teal));
|
|
85
|
+
}
|
|
86
|
+
.progress.striped .bar {
|
|
87
|
+
background-image: linear-gradient(
|
|
88
|
+
45deg,
|
|
89
|
+
rgba(255, 255, 255, 0.18) 25%,
|
|
90
|
+
transparent 25%,
|
|
91
|
+
transparent 50%,
|
|
92
|
+
rgba(255, 255, 255, 0.18) 50%,
|
|
93
|
+
rgba(255, 255, 255, 0.18) 75%,
|
|
94
|
+
transparent 75%,
|
|
95
|
+
transparent
|
|
96
|
+
);
|
|
97
|
+
background-size: 1rem 1rem;
|
|
98
|
+
}
|
|
99
|
+
.progress.gradient.striped .bar {
|
|
100
|
+
background-image:
|
|
101
|
+
linear-gradient(
|
|
102
|
+
45deg,
|
|
103
|
+
rgba(255, 255, 255, 0.18) 25%,
|
|
104
|
+
transparent 25%,
|
|
105
|
+
transparent 50%,
|
|
106
|
+
rgba(255, 255, 255, 0.18) 50%,
|
|
107
|
+
rgba(255, 255, 255, 0.18) 75%,
|
|
108
|
+
transparent 75%,
|
|
109
|
+
transparent
|
|
110
|
+
),
|
|
111
|
+
linear-gradient(90deg, var(--fill, var(--accent)), var(--c-teal));
|
|
112
|
+
background-size:
|
|
113
|
+
1rem 1rem,
|
|
114
|
+
100% 100%;
|
|
115
|
+
}
|
|
60
116
|
.progress.indeterminate .bar {
|
|
61
117
|
width: 40%;
|
|
62
|
-
animation: progress-slide 1.1s ease-in-out infinite;
|
|
118
|
+
animation: kt-progress-slide 1.1s ease-in-out infinite;
|
|
63
119
|
}
|
|
64
|
-
|
|
120
|
+
.progress.striped .bar {
|
|
121
|
+
animation: kt-stripe 0.6s linear infinite;
|
|
122
|
+
}
|
|
123
|
+
.progress.striped.indeterminate .bar {
|
|
124
|
+
animation:
|
|
125
|
+
kt-progress-slide 1.1s ease-in-out infinite,
|
|
126
|
+
kt-stripe 0.6s linear infinite;
|
|
127
|
+
}
|
|
128
|
+
@keyframes kt-progress-slide {
|
|
65
129
|
0% {
|
|
66
130
|
transform: translateX(-110%);
|
|
67
131
|
}
|
|
@@ -69,4 +133,19 @@
|
|
|
69
133
|
transform: translateX(310%);
|
|
70
134
|
}
|
|
71
135
|
}
|
|
136
|
+
@keyframes kt-stripe {
|
|
137
|
+
0% {
|
|
138
|
+
background-position: 0 0;
|
|
139
|
+
}
|
|
140
|
+
100% {
|
|
141
|
+
background-position: 1rem 0;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
@media (prefers-reduced-motion: reduce) {
|
|
145
|
+
.progress.indeterminate .bar,
|
|
146
|
+
.progress.striped .bar,
|
|
147
|
+
.progress.striped.indeterminate .bar {
|
|
148
|
+
animation: none;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
72
151
|
</style>
|
|
@@ -3,6 +3,10 @@ type $$ComponentProps = {
|
|
|
3
3
|
max?: number;
|
|
4
4
|
label?: string;
|
|
5
5
|
tone?: 'accent' | 'success' | 'warn' | 'danger';
|
|
6
|
+
size?: 'sm' | 'md';
|
|
7
|
+
gradient?: boolean;
|
|
8
|
+
striped?: boolean;
|
|
9
|
+
indeterminate?: boolean;
|
|
6
10
|
class?: string;
|
|
7
11
|
};
|
|
8
12
|
declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
|
package/package.json
CHANGED