@streamscloud/kit 0.55.0 → 0.55.1
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.
|
@@ -12,11 +12,11 @@ $effect(() => {
|
|
|
12
12
|
});
|
|
13
13
|
</script>
|
|
14
14
|
|
|
15
|
-
{#if
|
|
16
|
-
{
|
|
17
|
-
|
|
18
|
-
{/if}
|
|
15
|
+
{#if blocking}
|
|
16
|
+
<div class="spinner-overlay" class:spinner-overlay--fixed={position === 'fixed-center'} class:spinner-overlay--dimmed={visible}></div>
|
|
17
|
+
{/if}
|
|
19
18
|
|
|
19
|
+
{#if visible}
|
|
20
20
|
<span
|
|
21
21
|
class="spinner spinner--{size}"
|
|
22
22
|
class:spinner--accent={color === 'accent'}
|
|
@@ -41,7 +41,9 @@ $effect(() => {
|
|
|
41
41
|
@component
|
|
42
42
|
Spinner — indeterminate loading indicator. Single-arc circle rotating at a constant rate. Color preset (`accent` default) resolves to a semantic token; override the public CSS vars on any ancestor for global theming. Pass `label` to expose it to screen readers as a live status region.
|
|
43
43
|
|
|
44
|
-
Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds
|
|
44
|
+
Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds an overlay; `timeout` delays visibility to avoid flicker for fast operations.
|
|
45
|
+
|
|
46
|
+
`blocking` and `timeout` are orthogonal. The overlay mounts with the component and swallows pointer input from the first millisecond regardless of `timeout`; once `timeout` elapses the spinner appears and the overlay fades to its dim background. Pointer input only — a focused control underneath still reacts to the keyboard; wrap the region in `inert` if that matters.
|
|
45
47
|
|
|
46
48
|
For tight inline glyphs inside other kit cmps (Button loading state, async Select), use the internal `_internal/spinner` instead — that one fills its inline box and inherits `currentColor` for stroke.
|
|
47
49
|
|
|
@@ -58,7 +60,7 @@ For tight inline glyphs inside other kit cmps (Button loading state, async Selec
|
|
|
58
60
|
| `--sc-kit--spinner--color-text` | Color for `text` preset | `--sc-kit--color--text--primary` |
|
|
59
61
|
| `--sc-kit--spinner--color-on-accent` | Color for `on-accent` preset | `--sc-kit--color--text--on-accent` |
|
|
60
62
|
| `--sc-kit--spinner--duration` | Rotation duration | `1.6s` |
|
|
61
|
-
| `--sc-kit--spinner--overlay--background` | Backdrop color
|
|
63
|
+
| `--sc-kit--spinner--overlay--background` | Backdrop color the `blocking` overlay fades to once the spinner shows | `rgba(0, 0, 0, 0.3)` |
|
|
62
64
|
| `--sc-kit--spinner--overlay--z-index` | Backdrop stacking | `--sc-kit--z-index--popover` minus 1 |
|
|
63
65
|
|
|
64
66
|
### Size presets
|
|
@@ -74,12 +76,17 @@ For tight inline glyphs inside other kit cmps (Button loading state, async Selec
|
|
|
74
76
|
--_overlay--z-index: var(--sc-kit--spinner--overlay--z-index, calc(var(--sc-kit--z-index--popover) - 1));
|
|
75
77
|
position: absolute;
|
|
76
78
|
inset: 0;
|
|
77
|
-
background: var(--_overlay--background);
|
|
79
|
+
background-color: var(--_overlay--background);
|
|
80
|
+
opacity: 0;
|
|
78
81
|
z-index: var(--_overlay--z-index);
|
|
82
|
+
transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
|
|
79
83
|
}
|
|
80
84
|
.spinner-overlay--fixed {
|
|
81
85
|
position: fixed;
|
|
82
86
|
}
|
|
87
|
+
.spinner-overlay--dimmed {
|
|
88
|
+
opacity: 1;
|
|
89
|
+
}
|
|
83
90
|
|
|
84
91
|
.spinner {
|
|
85
92
|
--_spinner--size: var(--sc-kit--spinner--size, 1.25rem);
|
|
@@ -7,15 +7,17 @@ type Props = {
|
|
|
7
7
|
label?: string;
|
|
8
8
|
/** Centering mode. `absolute-center` centers within the closest positioned ancestor; `fixed-center` centers in the viewport. Omit for an inline-flex glyph at the current position. */
|
|
9
9
|
position?: 'absolute-center' | 'fixed-center';
|
|
10
|
-
/** Renders
|
|
10
|
+
/** Renders an overlay that swallows pointer input immediately, independent of `timeout`; it stays invisible until `timeout` elapses, then fades to its dim background. Pair with `position` for a full-area dimmer. */
|
|
11
11
|
blocking?: boolean;
|
|
12
|
-
/** Delay in ms before the spinner becomes visible (and
|
|
12
|
+
/** Delay in ms before the spinner becomes visible (and a `blocking` overlay dims). Prevents flicker for fast operations. @default 0 */
|
|
13
13
|
timeout?: number;
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
16
16
|
* Spinner — indeterminate loading indicator. Single-arc circle rotating at a constant rate. Color preset (`accent` default) resolves to a semantic token; override the public CSS vars on any ancestor for global theming. Pass `label` to expose it to screen readers as a live status region.
|
|
17
17
|
*
|
|
18
|
-
* Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds
|
|
18
|
+
* Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds an overlay; `timeout` delays visibility to avoid flicker for fast operations.
|
|
19
|
+
*
|
|
20
|
+
* `blocking` and `timeout` are orthogonal. The overlay mounts with the component and swallows pointer input from the first millisecond regardless of `timeout`; once `timeout` elapses the spinner appears and the overlay fades to its dim background. Pointer input only — a focused control underneath still reacts to the keyboard; wrap the region in `inert` if that matters.
|
|
19
21
|
*
|
|
20
22
|
* For tight inline glyphs inside other kit cmps (Button loading state, async Select), use the internal `_internal/spinner` instead — that one fills its inline box and inherits `currentColor` for stroke.
|
|
21
23
|
*
|
|
@@ -32,7 +34,7 @@ type Props = {
|
|
|
32
34
|
* | `--sc-kit--spinner--color-text` | Color for `text` preset | `--sc-kit--color--text--primary` |
|
|
33
35
|
* | `--sc-kit--spinner--color-on-accent` | Color for `on-accent` preset | `--sc-kit--color--text--on-accent` |
|
|
34
36
|
* | `--sc-kit--spinner--duration` | Rotation duration | `1.6s` |
|
|
35
|
-
* | `--sc-kit--spinner--overlay--background` | Backdrop color
|
|
37
|
+
* | `--sc-kit--spinner--overlay--background` | Backdrop color the `blocking` overlay fades to once the spinner shows | `rgba(0, 0, 0, 0.3)` |
|
|
36
38
|
* | `--sc-kit--spinner--overlay--z-index` | Backdrop stacking | `--sc-kit--z-index--popover` minus 1 |
|
|
37
39
|
*
|
|
38
40
|
* ### Size presets
|