@geoffcox/sterling-svelte 0.0.9 → 0.0.11

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.
Files changed (15) hide show
  1. package/README.md +4 -0
  2. package/display/Label.svelte +27 -0
  3. package/display/Label.svelte.d.ts +20 -0
  4. package/display/Progress.svelte +141 -143
  5. package/index.d.ts +3 -1
  6. package/index.js +3 -1
  7. package/inputs/Checkbox.svelte +129 -126
  8. package/inputs/Input.svelte +108 -150
  9. package/inputs/Radio.svelte +129 -122
  10. package/inputs/Select.svelte +190 -195
  11. package/inputs/Slider.svelte +40 -74
  12. package/inputs/Switch.svelte +219 -0
  13. package/inputs/Switch.svelte.d.ts +58 -0
  14. package/lists/List.svelte +147 -223
  15. package/package.json +20 -1
package/inputs/Checkbox.svelte CHANGED
@@ -1,159 +1,162 @@
1
- <script>export let checked = false;
1
+ <script>import { v4 as uuid } from "uuid";
2
+ import Label from "../display/Label.svelte";
3
+ export let checked = false;
2
4
  export let disabled = false;
5
+ const inputId = uuid();
3
6
  </script>
4
7
 
5
8
  <!--
6
9
  @component
7
10
  A styled HTML input type=checkbox element.
8
11
  -->
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 name="label" />
42
- </div>
43
- </label>
12
+ <div class="sterling-checkbox">
13
+ <div class="container">
14
+ <input
15
+ type="checkbox"
16
+ on:blur
17
+ on:click
18
+ on:change
19
+ on:dblclick
20
+ on:focus
21
+ on:focusin
22
+ on:focusout
23
+ on:keydown
24
+ on:keypress
25
+ on:keyup
26
+ on:input
27
+ on:mousedown
28
+ on:mouseenter
29
+ on:mouseleave
30
+ on:mousemove
31
+ on:mouseover
32
+ on:mouseout
33
+ on:mouseup
34
+ on:toggle
35
+ on:wheel
36
+ bind:checked
37
+ {...$$restProps}
38
+ id={inputId}
39
+ {disabled}
40
+ />
41
+ <div class="indicator" />
42
+ </div>
43
+ {#if $$slots.label}
44
+ <div class="label">
45
+ <Label {disabled} for={inputId}>
46
+ <slot name="label" />
47
+ </Label>
48
+ </div>
49
+ {/if}
50
+ </div>
44
51
 
45
52
  <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
- }
53
+ .sterling-checkbox {
54
+ display: inline-flex;
55
+ align-content: stretch;
56
+ align-items: stretch;
57
+ box-sizing: border-box;
58
+ font: inherit;
59
+ gap: 0.4em;
60
+ outline: none;
61
+ padding: 0;
62
+ margin: 0;
63
+ }
57
64
 
58
- /*
65
+ /*
59
66
  The container
60
67
  - allows the input to be hidden
61
68
  - avoids input participating in layout
62
69
  - prevents collisions with surrounding slots
63
70
  */
64
- .container {
65
- font: inherit;
66
- position: relative;
67
- display: grid;
68
- align-items: center;
69
- }
71
+ .container {
72
+ font: inherit;
73
+ position: relative;
74
+ display: grid;
75
+ align-items: center;
76
+ }
70
77
 
71
- /*
78
+ /*
72
79
  The input is hidden since the built-in browser checkbox cannot be customized
73
80
  */
74
- input {
75
- font: inherit;
76
- margin: 0;
77
- padding: 0;
78
- position: absolute;
79
- opacity: 0;
80
- }
81
+ input {
82
+ font: inherit;
83
+ margin: 0;
84
+ padding: 0;
85
+ position: absolute;
86
+ opacity: 0;
87
+ height: 20px;
88
+ width: 20px;
89
+ }
81
90
 
82
- /*
91
+ /*
83
92
  The indicator handles both the box and the checkmark.
84
93
  The box cannot be on the container since the adjacent sibling selector is needed
85
94
  and there is not a parent CSS selector.
86
95
  */
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
- }
96
+ .indicator {
97
+ background-color: var(--Input__background-color);
98
+ border-color: var(--Input__border-color);
99
+ border-style: var(--Input__border-style);
100
+ border-width: var(--Input__border-width);
101
+ box-sizing: border-box;
102
+ display: inline-block;
103
+ height: 20px;
104
+ position: relative;
105
+ transition: background-color 250ms, color 250ms, border-color 250ms;
106
+ width: 20px;
107
+ pointer-events: none;
108
+ }
99
109
 
100
- input:checked + .indicator {
101
- background-color: var(--Input__background-color);
102
- border-color: var(--Input__border-color);
103
- }
110
+ input:checked + .indicator {
111
+ background-color: var(--Input__background-color);
112
+ border-color: var(--Input__border-color);
113
+ }
104
114
 
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
- }
115
+ input:focus-visible + .indicator {
116
+ outline-color: var(--Common__outline-color);
117
+ outline-offset: var(--Common__outline-offset);
118
+ outline-style: var(--Common__outline-style);
119
+ outline-width: var(--Common__outline-width);
120
+ }
111
121
 
112
- input:disabled + .indicator {
113
- background-color: var(--Input__background-color--disabled);
114
- border-color: var(--Input__border-color--disabled);
115
- }
122
+ input:disabled + .indicator {
123
+ background-color: var(--Input__background-color--disabled);
124
+ border-color: var(--Input__border-color--disabled);
125
+ }
116
126
 
117
- /*
127
+ /*
118
128
  The checkmark is a rotated L centered in the box.
119
129
  */
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
- }
130
+ input:checked + .indicator::after {
131
+ border-color: var(--Input__color);
132
+ border-style: solid;
133
+ border-width: 0 3px 3px 0;
134
+ box-sizing: border-box;
135
+ content: '';
136
+ height: 14px;
137
+ left: 50%;
138
+ position: absolute;
139
+ top: 50%;
140
+ transform: translate(-50%, -50%) rotate(45deg);
141
+ transform-origin: center;
142
+ transition: border-color 250ms;
143
+ width: 7px;
144
+ visibility: visible;
145
+ }
136
146
 
137
- input:checked:disabled + .indicator::after {
138
- border-color: var(--Input__color--disabled);
139
- }
147
+ input:checked:disabled + .indicator::after {
148
+ border-color: var(--Input__color--disabled);
149
+ }
140
150
 
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
- }
151
+ .label {
152
+ user-select: none;
153
+ margin-top: 0.25em;
154
+ }
147
155
 
148
- .label-content.disabled {
149
- color: var(--Input__color--disabled);
150
- }
151
-
152
- @media (prefers-reduced-motion) {
153
- .indicator,
154
- input:checked + .indicator::after,
155
- .label-content {
156
- transition: none;
157
- }
158
- }
156
+ @media (prefers-reduced-motion) {
157
+ .indicator,
158
+ input:checked + .indicator::after {
159
+ transition: none;
160
+ }
161
+ }
159
162
  </style>
package/inputs/Input.svelte CHANGED
@@ -1,169 +1,127 @@
1
- <script>export let value = "";
1
+ <script>import { v4 as uuid } from "uuid";
2
+ import Label from "../display/Label.svelte";
3
+ export let value = "";
2
4
  export let disabled = false;
5
+ const inputId = uuid();
3
6
  </script>
4
7
 
5
8
  <!--
6
9
  @component
7
10
  A styled HTML input element with optional label.
8
11
  -->
9
- <!-- svelte-ignore a11y-label-has-associated-control -->
10
- {#if $$slots.label}
11
- <label class="sterling-input-label">
12
- <div class="label-content" class:disabled>
13
- <slot name="label" />
14
- </div>
15
- <input
16
- class="sterling-input labeled"
17
- bind:value
18
- on:blur
19
- on:click
20
- on:change
21
- on:copy
22
- on:cut
23
- on:paste
24
- on:dblclick
25
- on:focus
26
- on:focusin
27
- on:focusout
28
- on:input
29
- on:invalid
30
- on:keydown
31
- on:keypress
32
- on:keyup
33
- on:mousedown
34
- on:mouseenter
35
- on:mouseleave
36
- on:mousemove
37
- on:mouseover
38
- on:mouseout
39
- on:mouseup
40
- on:select
41
- on:submit
42
- on:reset
43
- on:wheel
44
- {...$$restProps}
45
- {disabled}
46
- />
47
- </label>
48
- {:else}
49
- <input
50
- class="sterling-input"
51
- bind:value
52
- on:blur
53
- on:click
54
- on:change
55
- on:copy
56
- on:cut
57
- on:paste
58
- on:dblclick
59
- on:focus
60
- on:focusin
61
- on:focusout
62
- on:input
63
- on:invalid
64
- on:keydown
65
- on:keypress
66
- on:keyup
67
- on:mousedown
68
- on:mouseenter
69
- on:mouseleave
70
- on:mousemove
71
- on:mouseover
72
- on:mouseout
73
- on:mouseup
74
- on:select
75
- on:submit
76
- on:reset
77
- on:wheel
78
- {...$$restProps}
79
- {disabled}
80
- />
81
- {/if}
12
+ <div class="sterling-input">
13
+ {#if $$slots.label}
14
+ <div class="label">
15
+ <Label {disabled} for={inputId}>
16
+ <slot name="label" />
17
+ </Label>
18
+ </div>
19
+ {/if}
20
+ <input
21
+ bind:value
22
+ on:blur
23
+ on:click
24
+ on:change
25
+ on:copy
26
+ on:cut
27
+ on:paste
28
+ on:dblclick
29
+ on:focus
30
+ on:focusin
31
+ on:focusout
32
+ on:input
33
+ on:invalid
34
+ on:keydown
35
+ on:keypress
36
+ on:keyup
37
+ on:mousedown
38
+ on:mouseenter
39
+ on:mouseleave
40
+ on:mousemove
41
+ on:mouseover
42
+ on:mouseout
43
+ on:mouseup
44
+ on:select
45
+ on:submit
46
+ on:reset
47
+ on:wheel
48
+ {...$$restProps}
49
+ {disabled}
50
+ id={inputId}
51
+ />
52
+ </div>
82
53
 
83
54
  <style>
84
- .sterling-input-label {
85
- display: flex;
86
- flex-direction: column;
87
- }
55
+ .sterling-input {
56
+ display: flex;
57
+ flex-direction: column;
58
+ background-color: var(--Input__background-color);
59
+ border-color: var(--Input__border-color);
60
+ border-radius: var(--Input__border-radius);
61
+ border-style: var(--Input__border-style);
62
+ border-width: var(--Input__border-width);
63
+ color: var(--Input__color);
64
+ font: inherit;
65
+ margin: 0;
66
+ transition: background-color 250ms, color 250ms, border-color 250ms;
67
+ }
88
68
 
89
- .label-content {
90
- font-size: 0.7em;
91
- margin: 0.5em 0 0 0.7em;
92
- color: var(--Display__color--subtle);
93
- transition: background-color 250ms, color 250ms, border-color 250ms;
94
- }
69
+ .sterling-input:hover {
70
+ background-color: var(--Input__background-color--hover);
71
+ border-color: var(--Input__border-color--hover);
72
+ color: var(--Input__color--hover);
73
+ }
95
74
 
96
- .label-content.disabled {
97
- color: var(--Display__color--disabled);
98
- }
75
+ .sterling-input:focus-within {
76
+ background-color: var(--Input__background-color--focus);
77
+ border-color: var(--Input__border-color--focus);
78
+ color: var(--Input__color--focus);
79
+ outline-color: var(--Common__outline-color);
80
+ outline-offset: var(--Common__outline-offset);
81
+ outline-style: var(--Common__outline-style);
82
+ outline-width: var(--Common__outline-width);
83
+ }
99
84
 
100
- .sterling-input-label,
101
- .sterling-input {
102
- background-color: var(--Input__background-color);
103
- border-color: var(--Input__border-color);
104
- border-radius: var(--Input__border-radius);
105
- border-style: var(--Input__border-style);
106
- border-width: var(--Input__border-width);
107
- color: var(--Input__color);
108
- font: inherit;
109
- margin: 0;
110
- transition: background-color 250ms, color 250ms, border-color 250ms;
111
- }
85
+ .sterling-input:disabled {
86
+ background-color: var(--Input__background-color--disabled);
87
+ border-color: var(---Input__border-color--disabled);
88
+ color: var(--Input__color--disabled);
89
+ cursor: not-allowed;
90
+ }
112
91
 
113
- .sterling-input-label:hover,
114
- .sterling-input:hover {
115
- background-color: var(--Input__background-color--hover);
116
- border-color: var(--Input__border-color--hover);
117
- color: var(--Input__color--hover);
118
- }
92
+ .sterling-input input {
93
+ font: inherit;
94
+ color: inherit;
95
+ padding: 0.5em 0.5em;
96
+ }
119
97
 
120
- .sterling-input-label:focus-within,
121
- .sterling-input:focus-within {
122
- background-color: var(--Input__background-color--focus);
123
- border-color: var(--Input__border-color--focus);
124
- color: var(--Input__color--focus);
125
- outline-color: var(--Common__outline-color);
126
- outline-offset: var(--Common__outline-offset);
127
- outline-style: var(--Common__outline-style);
128
- outline-width: var(--Common__outline-width);
129
- }
98
+ .sterling-input input,
99
+ .sterling-input input:hover,
100
+ .sterling-input input:focus-within,
101
+ .sterling-input input:disabled {
102
+ background-color: transparent;
103
+ border: none;
104
+ outline: none;
105
+ }
130
106
 
131
- .sterling-input-label:disabled,
132
- .sterling-input:disabled {
133
- background-color: var(--Input__background-color--disabled);
134
- border-color: var(---Input__border-color--disabled);
135
- color: var(--Input__color--disabled);
136
- cursor: not-allowed;
137
- }
107
+ .sterling-input input::placeholder {
108
+ color: var(--Display__color--faint);
109
+ transition: background-color 250ms, color 250ms, border-color 250ms;
110
+ }
138
111
 
139
- .sterling-input {
140
- padding: 0.5em 0.5em;
141
- }
112
+ .sterling-input input:disabled::placeholder {
113
+ color: var(--Display__color--disabled);
114
+ }
142
115
 
143
- .sterling-input.labeled,
144
- .sterling-input.labeled:hover,
145
- .sterling-input.labeled:focus-within,
146
- .sterling-input.labeled:disabled {
147
- background-color: transparent;
148
- border: none;
149
- outline: none;
150
- }
116
+ .label {
117
+ font-size: 0.7em;
118
+ margin: 0.5em 0 0 0.7em;
119
+ }
151
120
 
152
- .sterling-input::placeholder {
153
- color: var(--Display__color--faint);
154
- transition: background-color 250ms, color 250ms, border-color 250ms;
155
- }
156
-
157
- .sterling-input:disabled::placeholder {
158
- color: var(--Display__color--disabled);
159
- }
160
-
161
- @media (prefers-reduced-motion) {
162
- .sterling-input-label,
163
- .sterling-input,
164
- .label-content,
165
- .sterling-input::placeholder {
166
- transition: none;
167
- }
168
- }
121
+ @media (prefers-reduced-motion) {
122
+ .sterling-input,
123
+ .sterling-input input::placeholder {
124
+ transition: none;
125
+ }
126
+ }
169
127
  </style>