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