@geoffcox/sterling-svelte 0.0.8 → 0.0.10
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/buttons/Button.svelte +152 -145
- package/display/Label.svelte +27 -0
- package/display/Label.svelte.d.ts +20 -0
- package/display/Progress.svelte +141 -133
- package/index.d.ts +3 -1
- package/index.js +3 -1
- package/inputs/Checkbox.svelte +129 -117
- package/inputs/Input.svelte +108 -142
- package/inputs/Radio.svelte +129 -113
- package/inputs/Select.svelte +191 -199
- package/inputs/Slider.svelte +182 -209
- package/lists/List.svelte +143 -214
- package/package.json +5 -1
- package/surfaces/CloseX.svelte +5 -0
- package/surfaces/CloseX.svelte.d.ts +23 -0
- package/surfaces/Dialog.svelte +241 -0
- package/surfaces/Dialog.svelte.d.ts +34 -0
- package/theme/colors.js +2 -0
- package/theme/darkTheme.js +3 -3
package/inputs/Radio.svelte
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
<script>import { onMount } from "svelte";
|
|
2
|
+
import { v4 as uuid } from "uuid";
|
|
3
|
+
import Label from "../display/Label.svelte";
|
|
2
4
|
export let checked = false;
|
|
3
5
|
export let group = void 0;
|
|
4
6
|
export let disabled = false;
|
|
7
|
+
const inputId = uuid();
|
|
5
8
|
const onChange = (e) => {
|
|
6
9
|
if (e.currentTarget.checked) {
|
|
7
10
|
group = $$restProps.value;
|
|
@@ -26,140 +29,153 @@ $: {
|
|
|
26
29
|
A styled HTML input type=radio element with optional label.
|
|
27
30
|
-->
|
|
28
31
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
32
|
+
<div class="sterling-radio">
|
|
33
|
+
<div class="container">
|
|
34
|
+
<input
|
|
35
|
+
type="radio"
|
|
36
|
+
on:blur
|
|
37
|
+
on:click
|
|
38
|
+
on:change
|
|
39
|
+
on:change={onChange}
|
|
40
|
+
on:dblclick
|
|
41
|
+
on:focus
|
|
42
|
+
on:focusin
|
|
43
|
+
on:focusout
|
|
44
|
+
on:keydown
|
|
45
|
+
on:keypress
|
|
46
|
+
on:keyup
|
|
47
|
+
on:input
|
|
48
|
+
on:mousedown
|
|
49
|
+
on:mouseenter
|
|
50
|
+
on:mouseleave
|
|
51
|
+
on:mousemove
|
|
52
|
+
on:mouseover
|
|
53
|
+
on:mouseout
|
|
54
|
+
on:mouseup
|
|
55
|
+
on:toggle
|
|
56
|
+
on:wheel
|
|
57
|
+
checked={group === $$restProps.value}
|
|
58
|
+
{...$$restProps}
|
|
59
|
+
{disabled}
|
|
60
|
+
id={inputId}
|
|
61
|
+
/>
|
|
62
|
+
<div class="indicator" />
|
|
63
|
+
</div>
|
|
64
|
+
{#if $$slots.label}
|
|
65
|
+
<div class="label">
|
|
66
|
+
<Label {disabled} for={inputId}>
|
|
67
|
+
<slot name="label" />
|
|
68
|
+
</Label>
|
|
69
|
+
</div>
|
|
70
|
+
{/if}
|
|
71
|
+
</div>
|
|
64
72
|
|
|
65
73
|
<style>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
.sterling-radio {
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
align-content: stretch;
|
|
77
|
+
align-items: stretch;
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
font: inherit;
|
|
80
|
+
gap: 0.4em;
|
|
81
|
+
outline: none;
|
|
82
|
+
padding: 0;
|
|
83
|
+
margin: 0;
|
|
84
|
+
}
|
|
85
|
+
/*
|
|
76
86
|
The container
|
|
77
87
|
- allows the input to be hidden
|
|
78
88
|
- avoids input participating in layout
|
|
79
89
|
- prevents collisions with surrounding slots
|
|
80
90
|
*/
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
91
|
+
.container {
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
position: relative;
|
|
94
|
+
font: inherit;
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
}
|
|
88
98
|
|
|
89
|
-
|
|
99
|
+
/*
|
|
90
100
|
The input is hidden since the built-in browser radio cannot be customized
|
|
91
101
|
*/
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
102
|
+
input {
|
|
103
|
+
font: inherit;
|
|
104
|
+
margin: 0;
|
|
105
|
+
padding: 0;
|
|
106
|
+
position: absolute;
|
|
107
|
+
opacity: 0;
|
|
108
|
+
height: 21px;
|
|
109
|
+
width: 21px;
|
|
110
|
+
}
|
|
99
111
|
|
|
100
|
-
|
|
112
|
+
/*
|
|
101
113
|
The indicator handles both the radio box and circle mark.
|
|
102
114
|
The box cannot be on the container since the adjacent sibling selector is needed
|
|
103
115
|
and there is not a parent CSS selector.
|
|
104
116
|
*/
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
117
|
+
.indicator {
|
|
118
|
+
background-color: var(--Input__background-color);
|
|
119
|
+
border-color: var(--Input__border-color);
|
|
120
|
+
border-style: var(--Input__border-style);
|
|
121
|
+
border-width: var(--Input__border-width);
|
|
122
|
+
border-radius: 10000px;
|
|
123
|
+
box-sizing: border-box;
|
|
124
|
+
display: inline-block;
|
|
125
|
+
height: 21px;
|
|
126
|
+
position: relative;
|
|
127
|
+
pointer-events: none;
|
|
128
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
129
|
+
width: 21px;
|
|
130
|
+
}
|
|
118
131
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
132
|
+
input:checked + .indicator {
|
|
133
|
+
background-color: var(--Input__background-color);
|
|
134
|
+
border-color: var(--Input__border-color);
|
|
135
|
+
}
|
|
123
136
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
137
|
+
input:focus-visible + .indicator {
|
|
138
|
+
outline-color: var(--Common__outline-color);
|
|
139
|
+
outline-offset: var(--Common__outline-offset);
|
|
140
|
+
outline-style: var(--Common__outline-style);
|
|
141
|
+
outline-width: var(--Common__outline-width);
|
|
142
|
+
}
|
|
130
143
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
144
|
+
input:disabled + .indicator {
|
|
145
|
+
background-color: var(--Input__background-color--disabled);
|
|
146
|
+
border-color: var(--Input__border-color--disabled);
|
|
147
|
+
}
|
|
135
148
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
149
|
+
.indicator::after {
|
|
150
|
+
background-color: transparent;
|
|
151
|
+
border-radius: 10000px;
|
|
152
|
+
content: '';
|
|
153
|
+
height: 9px;
|
|
154
|
+
left: 50%;
|
|
155
|
+
position: absolute;
|
|
156
|
+
top: 50%;
|
|
157
|
+
transform: translate(-50%, -50%);
|
|
158
|
+
transition: background-color 250ms;
|
|
159
|
+
width: 9px;
|
|
160
|
+
}
|
|
148
161
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
162
|
+
input:checked + .indicator::after {
|
|
163
|
+
background-color: var(--Input__color);
|
|
164
|
+
}
|
|
152
165
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
166
|
+
input:checked:disabled + .indicator::after {
|
|
167
|
+
background-color: var(--Input__color--disabled);
|
|
168
|
+
}
|
|
156
169
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
170
|
+
.label {
|
|
171
|
+
user-select: none;
|
|
172
|
+
margin-top: 0.25em;
|
|
173
|
+
}
|
|
161
174
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
175
|
+
@media (prefers-reduced-motion) {
|
|
176
|
+
.indicator,
|
|
177
|
+
.indicator::after {
|
|
178
|
+
transition: none;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
165
181
|
</style>
|