@geoffcox/sterling-svelte 0.0.3 → 0.0.5
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 +1 -1
- package/buttons/Button.svelte.d.ts +1 -1
- package/clickOutside.d.ts +3 -0
- package/clickOutside.js +14 -0
- package/index.d.ts +3 -1
- package/index.js +3 -1
- package/inputs/Checkbox.svelte +151 -0
- package/inputs/Checkbox.svelte.d.ts +42 -0
- package/inputs/Input.svelte +152 -0
- package/inputs/Input.svelte.d.ts +47 -0
- package/inputs/Radio.svelte +158 -0
- package/inputs/Radio.svelte.d.ts +42 -0
- package/inputs/Select.svelte +360 -0
- package/inputs/Select.svelte.d.ts +59 -0
- package/inputs/Slider.svelte +280 -0
- package/inputs/Slider.svelte.d.ts +26 -0
- package/lists/List.svelte +313 -0
- package/lists/List.svelte.d.ts +59 -0
- package/package.json +1 -1
- package/theme/darkTheme.js +8 -10
- package/theme/lightTheme.js +7 -9
package/buttons/Button.svelte
CHANGED
|
@@ -42,7 +42,7 @@ declare const __propDef: {
|
|
|
42
42
|
export type ButtonProps = typeof __propDef.props;
|
|
43
43
|
export type ButtonEvents = typeof __propDef.events;
|
|
44
44
|
export type ButtonSlots = typeof __propDef.slots;
|
|
45
|
-
/**
|
|
45
|
+
/** A styled HTML button element. */
|
|
46
46
|
export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
|
|
47
47
|
}
|
|
48
48
|
export {};
|
package/clickOutside.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export const clickOutside = (node) => {
|
|
2
|
+
const handleClick = (event) => {
|
|
3
|
+
const targetNode = event?.target;
|
|
4
|
+
if (targetNode && !node.contains(targetNode)) {
|
|
5
|
+
node.dispatchEvent(new CustomEvent('click_outside'));
|
|
6
|
+
}
|
|
7
|
+
};
|
|
8
|
+
document.addEventListener('click', handleClick, true);
|
|
9
|
+
return {
|
|
10
|
+
destroy() {
|
|
11
|
+
document.removeEventListener('click', handleClick, true);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
};
|
package/index.d.ts
CHANGED
|
@@ -8,4 +8,6 @@ export { neutrals } from './theme/colors';
|
|
|
8
8
|
export { toggleDarkTheme } from './theme/toggleDarkTheme';
|
|
9
9
|
export { type ButtonVariant, type ButtonShape } from './buttons/types';
|
|
10
10
|
import Button from './buttons/Button.svelte';
|
|
11
|
-
|
|
11
|
+
import Input from './inputs/Input.svelte';
|
|
12
|
+
import Checkbox from './inputs/Checkbox.svelte';
|
|
13
|
+
export { Button, Checkbox, Input };
|
package/index.js
CHANGED
|
@@ -8,4 +8,6 @@ export { neutrals } from './theme/colors';
|
|
|
8
8
|
export { toggleDarkTheme } from './theme/toggleDarkTheme';
|
|
9
9
|
export {} from './buttons/types';
|
|
10
10
|
import Button from './buttons/Button.svelte';
|
|
11
|
-
|
|
11
|
+
import Input from './inputs/Input.svelte';
|
|
12
|
+
import Checkbox from './inputs/Checkbox.svelte';
|
|
13
|
+
export { Button, Checkbox, Input };
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<script>export let checked = false;
|
|
2
|
+
export let disabled = false;
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<!--
|
|
6
|
+
@component
|
|
7
|
+
A styled HTML input type=checkbox element.
|
|
8
|
+
-->
|
|
9
|
+
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
10
|
+
<label class="sterling-checkbox">
|
|
11
|
+
<div class="container">
|
|
12
|
+
<input
|
|
13
|
+
type="checkbox"
|
|
14
|
+
on:blur
|
|
15
|
+
on:click
|
|
16
|
+
on:change
|
|
17
|
+
on:dblclick
|
|
18
|
+
on:focus
|
|
19
|
+
on:focusin
|
|
20
|
+
on:focusout
|
|
21
|
+
on:keydown
|
|
22
|
+
on:keypress
|
|
23
|
+
on:keyup
|
|
24
|
+
on:input
|
|
25
|
+
on:mousedown
|
|
26
|
+
on:mouseenter
|
|
27
|
+
on:mouseleave
|
|
28
|
+
on:mousemove
|
|
29
|
+
on:mouseover
|
|
30
|
+
on:mouseout
|
|
31
|
+
on:mouseup
|
|
32
|
+
on:toggle
|
|
33
|
+
on:wheel
|
|
34
|
+
bind:checked
|
|
35
|
+
{...$$restProps}
|
|
36
|
+
{disabled}
|
|
37
|
+
/>
|
|
38
|
+
<div class="indicator" />
|
|
39
|
+
</div>
|
|
40
|
+
<div class="label-content" class:disabled>
|
|
41
|
+
<slot />
|
|
42
|
+
</div>
|
|
43
|
+
</label>
|
|
44
|
+
|
|
45
|
+
<style>
|
|
46
|
+
.sterling-checkbox {
|
|
47
|
+
display: inline-flex;
|
|
48
|
+
align-content: stretch;
|
|
49
|
+
align-items: stretch;
|
|
50
|
+
box-sizing: border-box;
|
|
51
|
+
font: inherit;
|
|
52
|
+
gap: 0.4em;
|
|
53
|
+
outline: none;
|
|
54
|
+
padding: 0;
|
|
55
|
+
margin: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/*
|
|
59
|
+
The container
|
|
60
|
+
- allows the input to be hidden
|
|
61
|
+
- avoids input participating in layout
|
|
62
|
+
- prevents collisions with surrounding slots
|
|
63
|
+
*/
|
|
64
|
+
.container {
|
|
65
|
+
font: inherit;
|
|
66
|
+
position: relative;
|
|
67
|
+
display: grid;
|
|
68
|
+
align-items: center;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/*
|
|
72
|
+
The input is hidden since the built-in browser checkbox cannot be customized
|
|
73
|
+
*/
|
|
74
|
+
input {
|
|
75
|
+
font: inherit;
|
|
76
|
+
margin: 0;
|
|
77
|
+
padding: 0;
|
|
78
|
+
position: absolute;
|
|
79
|
+
opacity: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/*
|
|
83
|
+
The indicator handles both the box and the checkmark.
|
|
84
|
+
The box cannot be on the container since the adjacent sibling selector is needed
|
|
85
|
+
and there is not a parent CSS selector.
|
|
86
|
+
*/
|
|
87
|
+
.indicator {
|
|
88
|
+
background-color: var(--Input__background-color);
|
|
89
|
+
border-color: var(--Input__border-color);
|
|
90
|
+
border-style: var(--Input__border-style);
|
|
91
|
+
border-width: var(--Input__border-width);
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
display: inline-block;
|
|
94
|
+
height: 20px;
|
|
95
|
+
position: relative;
|
|
96
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
97
|
+
width: 20px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
input:checked + .indicator {
|
|
101
|
+
background-color: var(--Input__background-color);
|
|
102
|
+
border-color: var(--Input__border-color);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
input:focus-visible + .indicator {
|
|
106
|
+
outline-color: var(--Common__outline-color);
|
|
107
|
+
outline-offset: var(--Common__outline-offset);
|
|
108
|
+
outline-style: var(--Common__outline-style);
|
|
109
|
+
outline-width: var(--Common__outline-width);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
input:disabled + .indicator {
|
|
113
|
+
background-color: var(--Input__background-color--disabled);
|
|
114
|
+
border-color: var(--Input__border-color--disabled);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/*
|
|
118
|
+
The checkmark is a rotated L centered in the box.
|
|
119
|
+
*/
|
|
120
|
+
input:checked + .indicator::after {
|
|
121
|
+
border-color: var(--Input__color);
|
|
122
|
+
border-style: solid;
|
|
123
|
+
border-width: 0 3px 3px 0;
|
|
124
|
+
box-sizing: border-box;
|
|
125
|
+
content: '';
|
|
126
|
+
height: 14px;
|
|
127
|
+
left: 50%;
|
|
128
|
+
position: absolute;
|
|
129
|
+
top: 50%;
|
|
130
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
131
|
+
transform-origin: center;
|
|
132
|
+
transition: border-color 250ms;
|
|
133
|
+
width: 7px;
|
|
134
|
+
visibility: visible;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
input:checked:disabled + .indicator::after {
|
|
138
|
+
border-color: var(--Input__color--disabled);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.label-content {
|
|
142
|
+
color: var(--Input__color);
|
|
143
|
+
user-select: none;
|
|
144
|
+
margin-top: 0.25em;
|
|
145
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.label-content.disabled {
|
|
149
|
+
color: var(--Input__color--disabled);
|
|
150
|
+
}
|
|
151
|
+
</style>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
checked?: boolean | undefined;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
blur: FocusEvent;
|
|
10
|
+
click: MouseEvent;
|
|
11
|
+
change: Event;
|
|
12
|
+
dblclick: MouseEvent;
|
|
13
|
+
focus: FocusEvent;
|
|
14
|
+
focusin: FocusEvent;
|
|
15
|
+
focusout: FocusEvent;
|
|
16
|
+
keydown: KeyboardEvent;
|
|
17
|
+
keypress: KeyboardEvent;
|
|
18
|
+
keyup: KeyboardEvent;
|
|
19
|
+
input: Event;
|
|
20
|
+
mousedown: MouseEvent;
|
|
21
|
+
mouseenter: MouseEvent;
|
|
22
|
+
mouseleave: MouseEvent;
|
|
23
|
+
mousemove: MouseEvent;
|
|
24
|
+
mouseover: MouseEvent;
|
|
25
|
+
mouseout: MouseEvent;
|
|
26
|
+
mouseup: MouseEvent;
|
|
27
|
+
toggle: Event;
|
|
28
|
+
wheel: WheelEvent;
|
|
29
|
+
} & {
|
|
30
|
+
[evt: string]: CustomEvent<any>;
|
|
31
|
+
};
|
|
32
|
+
slots: {
|
|
33
|
+
default: {};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
export type CheckboxProps = typeof __propDef.props;
|
|
37
|
+
export type CheckboxEvents = typeof __propDef.events;
|
|
38
|
+
export type CheckboxSlots = typeof __propDef.slots;
|
|
39
|
+
/** A styled HTML input type=checkbox element. */
|
|
40
|
+
export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
|
|
41
|
+
}
|
|
42
|
+
export {};
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
<script>export let value = "";
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<!--
|
|
5
|
+
@component
|
|
6
|
+
A styled HTML input element with optional label.
|
|
7
|
+
-->
|
|
8
|
+
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
9
|
+
{#if $$slots.label}
|
|
10
|
+
<label class="sterling-input-label">
|
|
11
|
+
<div class="label-content">
|
|
12
|
+
<slot name="label" />
|
|
13
|
+
</div>
|
|
14
|
+
<input
|
|
15
|
+
class="sterling-input labeled"
|
|
16
|
+
bind:value
|
|
17
|
+
on:blur
|
|
18
|
+
on:click
|
|
19
|
+
on:change
|
|
20
|
+
on:copy
|
|
21
|
+
on:cut
|
|
22
|
+
on:paste
|
|
23
|
+
on:dblclick
|
|
24
|
+
on:focus
|
|
25
|
+
on:focusin
|
|
26
|
+
on:focusout
|
|
27
|
+
on:input
|
|
28
|
+
on:invalid
|
|
29
|
+
on:keydown
|
|
30
|
+
on:keypress
|
|
31
|
+
on:keyup
|
|
32
|
+
on:mousedown
|
|
33
|
+
on:mouseenter
|
|
34
|
+
on:mouseleave
|
|
35
|
+
on:mousemove
|
|
36
|
+
on:mouseover
|
|
37
|
+
on:mouseout
|
|
38
|
+
on:mouseup
|
|
39
|
+
on:select
|
|
40
|
+
on:submit
|
|
41
|
+
on:reset
|
|
42
|
+
on:wheel
|
|
43
|
+
{...$$restProps}
|
|
44
|
+
/>
|
|
45
|
+
</label>
|
|
46
|
+
{:else}
|
|
47
|
+
<input
|
|
48
|
+
class="sterling-input"
|
|
49
|
+
bind:value
|
|
50
|
+
on:blur
|
|
51
|
+
on:click
|
|
52
|
+
on:change
|
|
53
|
+
on:copy
|
|
54
|
+
on:cut
|
|
55
|
+
on:paste
|
|
56
|
+
on:dblclick
|
|
57
|
+
on:focus
|
|
58
|
+
on:focusin
|
|
59
|
+
on:focusout
|
|
60
|
+
on:input
|
|
61
|
+
on:invalid
|
|
62
|
+
on:keydown
|
|
63
|
+
on:keypress
|
|
64
|
+
on:keyup
|
|
65
|
+
on:mousedown
|
|
66
|
+
on:mouseenter
|
|
67
|
+
on:mouseleave
|
|
68
|
+
on:mousemove
|
|
69
|
+
on:mouseover
|
|
70
|
+
on:mouseout
|
|
71
|
+
on:mouseup
|
|
72
|
+
on:select
|
|
73
|
+
on:submit
|
|
74
|
+
on:reset
|
|
75
|
+
on:wheel
|
|
76
|
+
{...$$restProps}
|
|
77
|
+
/>
|
|
78
|
+
{/if}
|
|
79
|
+
|
|
80
|
+
<style>
|
|
81
|
+
.sterling-input-label {
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-direction: column;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.sterling-input-label > .label-content {
|
|
87
|
+
font-size: 0.7em;
|
|
88
|
+
margin: 0.5em 0 0 0.7em;
|
|
89
|
+
color: var(--Display__color--subtle);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.sterling-input-label,
|
|
93
|
+
.sterling-input {
|
|
94
|
+
background-color: var(--Input__background-color);
|
|
95
|
+
border-color: var(--Input__border-color);
|
|
96
|
+
border-radius: var(--Input__border-radius);
|
|
97
|
+
border-style: var(--Input__border-style);
|
|
98
|
+
border-width: var(--Input__border-width);
|
|
99
|
+
color: var(--Input__color);
|
|
100
|
+
font: inherit;
|
|
101
|
+
margin: 0;
|
|
102
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.sterling-input-label:hover,
|
|
106
|
+
.sterling-input:hover {
|
|
107
|
+
background-color: var(--Input__background-color--hover);
|
|
108
|
+
border-color: var(--Input__border-color--hover);
|
|
109
|
+
color: var(--Input__color--hover);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.sterling-input-label:focus-within,
|
|
113
|
+
.sterling-input:focus-within {
|
|
114
|
+
background-color: var(--Input__background-color--focus);
|
|
115
|
+
border-color: var(--Input__border-color--focus);
|
|
116
|
+
color: var(--Input__color--focus);
|
|
117
|
+
outline-color: var(--Common__outline-color);
|
|
118
|
+
outline-offset: var(--Common__outline-offset);
|
|
119
|
+
outline-style: var(--Common__outline-style);
|
|
120
|
+
outline-width: var(--Common__outline-width);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.sterling-input-label:disabled,
|
|
124
|
+
.sterling-input:disabled {
|
|
125
|
+
background-color: var(--Input__background-color--disabled);
|
|
126
|
+
border-color: var(---Input__border-color--disabled);
|
|
127
|
+
color: var(--Input__color--disabled);
|
|
128
|
+
cursor: not-allowed;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.sterling-input {
|
|
132
|
+
padding: 0.5em 0.5em;
|
|
133
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.sterling-input.labeled,
|
|
137
|
+
.sterling-input.labeled:hover,
|
|
138
|
+
.sterling-input.labeled:focus-within,
|
|
139
|
+
.sterling-input.labeled:disabled {
|
|
140
|
+
background-color: transparent;
|
|
141
|
+
border: none;
|
|
142
|
+
outline: none;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.sterling-input::placeholder {
|
|
146
|
+
color: var(--Display__color--faint);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.sterling-input:disabled::placeholder {
|
|
150
|
+
color: var(--Display__color--disabled);
|
|
151
|
+
}
|
|
152
|
+
</style>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
value?: string | undefined;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
blur: FocusEvent;
|
|
9
|
+
click: MouseEvent;
|
|
10
|
+
change: Event;
|
|
11
|
+
copy: ClipboardEvent;
|
|
12
|
+
cut: ClipboardEvent;
|
|
13
|
+
paste: ClipboardEvent;
|
|
14
|
+
dblclick: MouseEvent;
|
|
15
|
+
focus: FocusEvent;
|
|
16
|
+
focusin: FocusEvent;
|
|
17
|
+
focusout: FocusEvent;
|
|
18
|
+
input: Event;
|
|
19
|
+
invalid: Event;
|
|
20
|
+
keydown: KeyboardEvent;
|
|
21
|
+
keypress: KeyboardEvent;
|
|
22
|
+
keyup: KeyboardEvent;
|
|
23
|
+
mousedown: MouseEvent;
|
|
24
|
+
mouseenter: MouseEvent;
|
|
25
|
+
mouseleave: MouseEvent;
|
|
26
|
+
mousemove: MouseEvent;
|
|
27
|
+
mouseover: MouseEvent;
|
|
28
|
+
mouseout: MouseEvent;
|
|
29
|
+
mouseup: MouseEvent;
|
|
30
|
+
select: Event;
|
|
31
|
+
submit: SubmitEvent;
|
|
32
|
+
reset: Event;
|
|
33
|
+
wheel: WheelEvent;
|
|
34
|
+
} & {
|
|
35
|
+
[evt: string]: CustomEvent<any>;
|
|
36
|
+
};
|
|
37
|
+
slots: {
|
|
38
|
+
label: {};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
export type InputProps = typeof __propDef.props;
|
|
42
|
+
export type InputEvents = typeof __propDef.events;
|
|
43
|
+
export type InputSlots = typeof __propDef.slots;
|
|
44
|
+
/** A styled HTML input element with optional label. */
|
|
45
|
+
export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
|
|
46
|
+
}
|
|
47
|
+
export {};
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<script>import { onMount } from "svelte";
|
|
2
|
+
export let checked = false;
|
|
3
|
+
export let group = void 0;
|
|
4
|
+
const onChange = (e) => {
|
|
5
|
+
if (e.currentTarget.checked) {
|
|
6
|
+
group = $$restProps.value;
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
let mounted = false;
|
|
10
|
+
onMount(() => {
|
|
11
|
+
if (checked) {
|
|
12
|
+
group = $$restProps.value;
|
|
13
|
+
}
|
|
14
|
+
mounted = true;
|
|
15
|
+
});
|
|
16
|
+
$: {
|
|
17
|
+
if (mounted) {
|
|
18
|
+
checked = group === $$restProps.value;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<!--
|
|
24
|
+
@component
|
|
25
|
+
A styled HTML input type=radio element with optional label.
|
|
26
|
+
-->
|
|
27
|
+
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
28
|
+
<label class="sterling-radio">
|
|
29
|
+
<div class="container">
|
|
30
|
+
<input
|
|
31
|
+
type="radio"
|
|
32
|
+
on:blur
|
|
33
|
+
on:click
|
|
34
|
+
on:change
|
|
35
|
+
on:change={onChange}
|
|
36
|
+
on:dblclick
|
|
37
|
+
on:focus
|
|
38
|
+
on:focusin
|
|
39
|
+
on:focusout
|
|
40
|
+
on:keydown
|
|
41
|
+
on:keypress
|
|
42
|
+
on:keyup
|
|
43
|
+
on:input
|
|
44
|
+
on:mousedown
|
|
45
|
+
on:mouseenter
|
|
46
|
+
on:mouseleave
|
|
47
|
+
on:mousemove
|
|
48
|
+
on:mouseover
|
|
49
|
+
on:mouseout
|
|
50
|
+
on:mouseup
|
|
51
|
+
on:toggle
|
|
52
|
+
on:wheel
|
|
53
|
+
checked={group === $$restProps.value}
|
|
54
|
+
{...$$restProps}
|
|
55
|
+
/>
|
|
56
|
+
<div class="indicator" />
|
|
57
|
+
</div>
|
|
58
|
+
<div class="label-content">
|
|
59
|
+
<slot />
|
|
60
|
+
</div>
|
|
61
|
+
</label>
|
|
62
|
+
|
|
63
|
+
<style>
|
|
64
|
+
label {
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: 0.4em;
|
|
68
|
+
outline: none;
|
|
69
|
+
padding: 0;
|
|
70
|
+
margin: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/*
|
|
74
|
+
The container
|
|
75
|
+
- allows the input to be hidden
|
|
76
|
+
- avoids input participating in layout
|
|
77
|
+
- prevents collisions with surrounding slots
|
|
78
|
+
*/
|
|
79
|
+
.container {
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
position: relative;
|
|
82
|
+
font: inherit;
|
|
83
|
+
display: flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/*
|
|
88
|
+
The input is hidden since the built-in browser radio cannot be customized
|
|
89
|
+
*/
|
|
90
|
+
input {
|
|
91
|
+
font: inherit;
|
|
92
|
+
margin: 0;
|
|
93
|
+
padding: 0;
|
|
94
|
+
position: absolute;
|
|
95
|
+
opacity: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/*
|
|
99
|
+
The indicator handles both the radio box and circle mark.
|
|
100
|
+
The box cannot be on the container since the adjacent sibling selector is needed
|
|
101
|
+
and there is not a parent CSS selector.
|
|
102
|
+
*/
|
|
103
|
+
.indicator {
|
|
104
|
+
background-color: var(--Input__background-color);
|
|
105
|
+
border-color: var(--Input__border-color);
|
|
106
|
+
border-style: var(--Input__border-style);
|
|
107
|
+
border-width: var(--Input__border-width);
|
|
108
|
+
border-radius: 10000px;
|
|
109
|
+
box-sizing: border-box;
|
|
110
|
+
display: inline-block;
|
|
111
|
+
height: 21px;
|
|
112
|
+
position: relative;
|
|
113
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
114
|
+
width: 21px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
input:checked + .indicator {
|
|
118
|
+
background-color: var(--Input__background-color);
|
|
119
|
+
border-color: var(--Input__border-color);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
input:focus-visible + .indicator {
|
|
123
|
+
outline-color: var(--Common__outline-color);
|
|
124
|
+
outline-offset: var(--Common__outline-offset);
|
|
125
|
+
outline-style: var(--Common__outline-style);
|
|
126
|
+
outline-width: var(--Common__outline-width);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
input:disabled + .indicator {
|
|
130
|
+
background-color: var(--Input__background-color--disabled);
|
|
131
|
+
border-color: var(--Input__border-color--disabled);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.indicator::after {
|
|
135
|
+
background-color: transparent;
|
|
136
|
+
border-radius: 10000px;
|
|
137
|
+
content: '';
|
|
138
|
+
height: 9px;
|
|
139
|
+
left: 50%;
|
|
140
|
+
position: absolute;
|
|
141
|
+
top: 50%;
|
|
142
|
+
transform: translate(-50%, -50%);
|
|
143
|
+
transition: background-color 250ms;
|
|
144
|
+
width: 9px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
input:checked + .indicator::after {
|
|
148
|
+
background-color: var(--Input__color);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
input:checked:disabled + .indicator::after {
|
|
152
|
+
background-color: var(--Input__color--disabled);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.label-content {
|
|
156
|
+
color: var(--Common__color);
|
|
157
|
+
}
|
|
158
|
+
</style>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
checked?: boolean | undefined;
|
|
6
|
+
group?: any | undefined | null;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
blur: FocusEvent;
|
|
10
|
+
click: MouseEvent;
|
|
11
|
+
change: Event;
|
|
12
|
+
dblclick: MouseEvent;
|
|
13
|
+
focus: FocusEvent;
|
|
14
|
+
focusin: FocusEvent;
|
|
15
|
+
focusout: FocusEvent;
|
|
16
|
+
keydown: KeyboardEvent;
|
|
17
|
+
keypress: KeyboardEvent;
|
|
18
|
+
keyup: KeyboardEvent;
|
|
19
|
+
input: Event;
|
|
20
|
+
mousedown: MouseEvent;
|
|
21
|
+
mouseenter: MouseEvent;
|
|
22
|
+
mouseleave: MouseEvent;
|
|
23
|
+
mousemove: MouseEvent;
|
|
24
|
+
mouseover: MouseEvent;
|
|
25
|
+
mouseout: MouseEvent;
|
|
26
|
+
mouseup: MouseEvent;
|
|
27
|
+
toggle: Event;
|
|
28
|
+
wheel: WheelEvent;
|
|
29
|
+
} & {
|
|
30
|
+
[evt: string]: CustomEvent<any>;
|
|
31
|
+
};
|
|
32
|
+
slots: {
|
|
33
|
+
default: {};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
export type RadioProps = typeof __propDef.props;
|
|
37
|
+
export type RadioEvents = typeof __propDef.events;
|
|
38
|
+
export type RadioSlots = typeof __propDef.slots;
|
|
39
|
+
/** A styled HTML input type=radio element with optional label. */
|
|
40
|
+
export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
|
|
41
|
+
}
|
|
42
|
+
export {};
|