@signal9/era-ui 30.7.0 → 30.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/ui/alert-dialog/alert-dialog-action.svelte +2 -0
- package/dist/ui/alert-dialog/alert-dialog-cancel.svelte +2 -0
- package/dist/ui/button/button.svelte +33 -2
- package/dist/ui/button/button.svelte.d.ts +27 -0
- package/dist/ui/button/index.d.ts +2 -0
- package/dist/ui/dialog/dialog-close.svelte +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
## [30.8.0](https://github.com/sig-nine/era-ui/compare/v30.7.0...v30.8.0) (2026-08-16)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
* **button:** busy is in-flight without a spinner ([e163c39](https://github.com/sig-nine/era-ui/commit/e163c39b33b4e73e179f59324b6797d64b7563e3))
|
|
6
|
+
|
|
1
7
|
## [30.7.0](https://github.com/sig-nine/era-ui/compare/v30.6.0...v30.7.0) (2026-08-16)
|
|
2
8
|
|
|
3
9
|
### Features
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
active = false,
|
|
14
14
|
icon = false,
|
|
15
15
|
loading = false,
|
|
16
|
+
busy = false,
|
|
16
17
|
loadingLabel,
|
|
17
18
|
disabled,
|
|
18
19
|
lead,
|
|
@@ -47,8 +48,35 @@
|
|
|
47
48
|
*
|
|
48
49
|
* The visible label is therefore HIDDEN in flight — the one thing this
|
|
49
50
|
* trades away, and the reason `loadingLabel` exists.
|
|
51
|
+
*
|
|
52
|
+
* IF YOU DO NOT WANT A SPINNER, use `busy`. Not showing one is a
|
|
53
|
+
* supported posture, not a legacy one — see that prop.
|
|
50
54
|
*/
|
|
51
55
|
loading?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* In flight, WITHOUT a spinner: disables the button and sets `aria-busy`,
|
|
58
|
+
* and changes nothing else. The label stays visible and legible.
|
|
59
|
+
*
|
|
60
|
+
* This exists because "show a spinner" is a taste, not a requirement,
|
|
61
|
+
* and era had only one answer. A consumer whose house style is that
|
|
62
|
+
* spinners should not appear had to spell the posture out themselves —
|
|
63
|
+
* `disabled` plus a restated `aria-busy` — and rely on knowing that
|
|
64
|
+
* `restProps` spreads last, which is a real fact about this component
|
|
65
|
+
* that no reader should have to depend on. Two words for two postures
|
|
66
|
+
* is clearer than one word plus a workaround.
|
|
67
|
+
*
|
|
68
|
+
* `loading` implies this: it is `busy` plus the spinner and the hidden
|
|
69
|
+
* label. What you get from `busy` alone is a control that is visibly
|
|
70
|
+
* disabled (the era-interactive opacity) and announced as busy, with
|
|
71
|
+
* its geometry and its ink untouched — which is also why it needs no
|
|
72
|
+
* `loadingLabel`: nothing about the button changed except that you
|
|
73
|
+
* cannot press it.
|
|
74
|
+
*
|
|
75
|
+
* Reported by a consumer whose user asked for no spinners anywhere.
|
|
76
|
+
* They were right that a fix for the width shift did not answer it: a
|
|
77
|
+
* spinner that no longer moves its neighbours is still a spinner.
|
|
78
|
+
*/
|
|
79
|
+
busy?: boolean;
|
|
52
80
|
/** Screen-reader-only label announced while `loading` is true. */
|
|
53
81
|
loadingLabel?: string;
|
|
54
82
|
/** Icon rendered BEFORE the label, outside it. Use this rather than putting
|
|
@@ -101,7 +129,10 @@
|
|
|
101
129
|
children?: Snippet;
|
|
102
130
|
} = $props();
|
|
103
131
|
|
|
104
|
-
|
|
132
|
+
// `loading` is `busy` plus a spinner, so everything that is true of busy is
|
|
133
|
+
// true of loading. Only the spinner and the hidden label read `loading`.
|
|
134
|
+
const inFlight = $derived(loading || busy);
|
|
135
|
+
const effectiveDisabled = $derived(disabled || inFlight);
|
|
105
136
|
</script>
|
|
106
137
|
|
|
107
138
|
<!--
|
|
@@ -122,7 +153,7 @@
|
|
|
122
153
|
<Button.Root
|
|
123
154
|
bind:ref
|
|
124
155
|
disabled={effectiveDisabled}
|
|
125
|
-
aria-busy={
|
|
156
|
+
aria-busy={inFlight || undefined}
|
|
126
157
|
data-state={active ? 'on' : undefined}
|
|
127
158
|
data-size={size}
|
|
128
159
|
class={cn(
|
|
@@ -26,8 +26,35 @@ type $$ComponentProps = Button.RootProps & {
|
|
|
26
26
|
*
|
|
27
27
|
* The visible label is therefore HIDDEN in flight — the one thing this
|
|
28
28
|
* trades away, and the reason `loadingLabel` exists.
|
|
29
|
+
*
|
|
30
|
+
* IF YOU DO NOT WANT A SPINNER, use `busy`. Not showing one is a
|
|
31
|
+
* supported posture, not a legacy one — see that prop.
|
|
29
32
|
*/
|
|
30
33
|
loading?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* In flight, WITHOUT a spinner: disables the button and sets `aria-busy`,
|
|
36
|
+
* and changes nothing else. The label stays visible and legible.
|
|
37
|
+
*
|
|
38
|
+
* This exists because "show a spinner" is a taste, not a requirement,
|
|
39
|
+
* and era had only one answer. A consumer whose house style is that
|
|
40
|
+
* spinners should not appear had to spell the posture out themselves —
|
|
41
|
+
* `disabled` plus a restated `aria-busy` — and rely on knowing that
|
|
42
|
+
* `restProps` spreads last, which is a real fact about this component
|
|
43
|
+
* that no reader should have to depend on. Two words for two postures
|
|
44
|
+
* is clearer than one word plus a workaround.
|
|
45
|
+
*
|
|
46
|
+
* `loading` implies this: it is `busy` plus the spinner and the hidden
|
|
47
|
+
* label. What you get from `busy` alone is a control that is visibly
|
|
48
|
+
* disabled (the era-interactive opacity) and announced as busy, with
|
|
49
|
+
* its geometry and its ink untouched — which is also why it needs no
|
|
50
|
+
* `loadingLabel`: nothing about the button changed except that you
|
|
51
|
+
* cannot press it.
|
|
52
|
+
*
|
|
53
|
+
* Reported by a consumer whose user asked for no spinners anywhere.
|
|
54
|
+
* They were right that a fix for the width shift did not answer it: a
|
|
55
|
+
* spinner that no longer moves its neighbours is still a spinner.
|
|
56
|
+
*/
|
|
57
|
+
busy?: boolean;
|
|
31
58
|
/** Screen-reader-only label announced while `loading` is true. */
|
|
32
59
|
loadingLabel?: string;
|
|
33
60
|
/** Icon rendered BEFORE the label, outside it. Use this rather than putting
|