@sveltia/ui 0.6.0 → 0.6.1

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.
@@ -119,10 +119,13 @@
119
119
  border-style: solid;
120
120
  border-color: transparent;
121
121
  padding: 0;
122
- color: inherit;
122
+ color: var(--sui-control-foreground-color);
123
123
  background-color: transparent;
124
124
  box-shadow: none;
125
- font: inherit;
125
+ font-family: var(--sui-control-font-family);
126
+ font-size: var(--sui-control-font-size);
127
+ line-height: var(--sui-control-line-height);
128
+ font-weight: normal;
126
129
  text-align: left;
127
130
  cursor: pointer;
128
131
  transition: all 200ms;
@@ -94,7 +94,10 @@
94
94
  display: inline-flex;
95
95
  align-items: center;
96
96
  gap: 8px;
97
- color: inherit;
97
+ color: var(--sui-control-foreground-color);
98
+ font-family: var(--sui-control-font-family);
99
+ font-size: var(--sui-control-font-size);
100
+ line-height: var(--sui-control-line-height);
98
101
  cursor: pointer;
99
102
  -webkit-user-select: none;
100
103
  user-select: none;
@@ -41,13 +41,17 @@
41
41
  <style>[role=listbox] {
42
42
  display: flex;
43
43
  flex-direction: column;
44
- color: inherit;
45
44
  margin: 0;
46
45
  border-width: 1px;
47
46
  border-color: var(--sui-control-border-color);
48
47
  border-radius: 4px;
49
48
  padding: 4px;
50
49
  min-width: 160px;
50
+ color: var(--sui-control-foreground-color);
51
+ background-color: var(--sui-control-background-color);
52
+ font-family: var(--sui-control-font-family);
53
+ font-size: var(--sui-control-font-size);
54
+ line-height: var(--sui-control-line-height);
51
55
  }
52
56
  [role=listbox] :global([role="separator"]) {
53
57
  margin: 4px;
@@ -83,7 +83,10 @@
83
83
  display: inline-flex;
84
84
  align-items: center;
85
85
  gap: 8px;
86
- color: inherit;
86
+ color: var(--sui-control-foreground-color);
87
+ font-family: var(--sui-control-font-family);
88
+ font-size: var(--sui-control-font-size);
89
+ line-height: var(--sui-control-line-height);
87
90
  cursor: pointer;
88
91
  -webkit-user-select: none;
89
92
  user-select: none;
@@ -167,8 +167,12 @@
167
167
  border-radius: 4px;
168
168
  padding: 0 32px 0 8px;
169
169
  width: 100%;
170
- height: var(--sui-input-medium-height);
170
+ height: var(--sui-textbox-medium-height);
171
+ color: var(--sui-control-foreground-color);
171
172
  background-color: var(--sui-disabled-background-color);
173
+ font-family: var(--sui-control-font-family);
174
+ font-size: var(--sui-control-font-size);
175
+ line-height: var(--sui-control-line-height);
172
176
  -webkit-user-select: none;
173
177
  user-select: none;
174
178
  cursor: pointer;
@@ -204,6 +208,7 @@
204
208
  overflow: auto;
205
209
  background-color: var(--sui-secondary-background-color);
206
210
  backdrop-filter: blur(16px);
211
+ /* Add .1s delay before the position can be determined */
207
212
  transition: opacity 100ms 100ms;
208
213
  }
209
214
  .combobox + :global([role="listbox"]:not(.open)) {
@@ -47,10 +47,12 @@
47
47
  border-style: solid;
48
48
  border-color: transparent;
49
49
  padding: 0;
50
- color: inherit;
50
+ color: var(--sui-control-foreground-color);
51
51
  background-color: transparent;
52
52
  box-shadow: none;
53
- font: inherit;
53
+ font-family: var(--sui-control-font-family);
54
+ font-size: var(--sui-control-font-size);
55
+ line-height: var(--sui-control-line-height);
54
56
  text-align: left;
55
57
  cursor: pointer;
56
58
  -webkit-user-select: none;
@@ -114,7 +114,7 @@
114
114
  border-width: 1px;
115
115
  border-color: var(--sui-control-border-color);
116
116
  width: 32px;
117
- height: var(--sui-input-medium-height);
117
+ height: var(--sui-textbox-medium-height);
118
118
  }
119
119
  .number-input :global(button):first-of-type {
120
120
  border-radius: 0;
@@ -73,7 +73,7 @@
73
73
  margin-left: -1px;
74
74
  border-width: 1px;
75
75
  border-color: var(--sui-control-border-color);
76
- height: var(--sui-input-medium-height);
76
+ height: var(--sui-textbox-medium-height);
77
77
  aspect-ratio: 1/1;
78
78
  }
79
79
  .password-input :global(button):last-child {
@@ -104,15 +104,15 @@ textarea {
104
104
  margin: 0;
105
105
  border-width: 1px;
106
106
  border-color: var(--sui-control-border-color);
107
- border-radius: var(--sui-input-medium-border-radius);
108
- background-color: var(--sui-control-background-color);
107
+ border-radius: var(--sui-textbox-medium-border-radius);
109
108
  padding: 8px;
110
109
  width: 100%;
111
110
  min-height: 8em;
112
- color: inherit;
113
- font-family: inherit;
114
- font-size: inherit;
115
- line-height: 1.75;
111
+ color: var(--sui-textbox-foreground-color);
112
+ background-color: var(--sui-textbox-background-color);
113
+ font-family: var(--sui-textbox-font-family);
114
+ font-size: var(--sui-textbox-font-size);
115
+ line-height: var(--sui-textbox-multiline-line-height);
116
116
  resize: vertical;
117
117
  transition: all 200ms;
118
118
  }
@@ -87,15 +87,15 @@ input {
87
87
  flex: auto;
88
88
  border-width: 1px;
89
89
  border-color: var(--sui-control-border-color);
90
- border-radius: var(--sui-input-medium-border-radius);
90
+ border-radius: var(--sui-textbox-medium-border-radius);
91
91
  padding: 0 8px;
92
92
  min-width: 0;
93
- height: var(--sui-input-medium-height);
94
- background-color: var(--sui-control-background-color);
95
- color: inherit;
96
- font-family: inherit;
97
- font-size: inherit;
98
- line-height: 30px;
93
+ height: var(--sui-textbox-medium-height);
94
+ color: var(--sui-textbox-foreground-color);
95
+ background-color: var(--sui-textbox-background-color);
96
+ font-family: var(--sui-textbox-font-family);
97
+ font-size: var(--sui-textbox-font-size);
98
+ line-height: var(--sui-textbox-singleline-line-height);
99
99
  transition: all 200ms;
100
100
  }
101
101
  input:focus {
@@ -118,7 +118,7 @@ input ~ :global(button) {
118
118
  margin-left: -1px;
119
119
  border-width: 1px;
120
120
  border-color: var(--sui-control-border-color);
121
- height: var(--sui-input-medium-height);
121
+ height: var(--sui-textbox-medium-height);
122
122
  aspect-ratio: 1/1;
123
123
  }
124
124
  input ~ :global(button):last-child {
@@ -133,7 +133,7 @@ input ~ :global(button) :global(.icon) {
133
133
  inset: 0 8px;
134
134
  z-index: 2;
135
135
  display: flex;
136
- justify-content: var(--sui-input-label-align, flex-start);
136
+ justify-content: var(--sui-textbox-label-align, flex-start);
137
137
  align-items: center;
138
138
  color: var(--sui-primary-foreground-color);
139
139
  opacity: 0.5;
@@ -144,7 +144,6 @@
144
144
  --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
145
145
  --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
146
146
  --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
147
- --sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
148
147
  --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
149
148
  --sui-error-background-color: hsl(
150
149
  var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
@@ -164,7 +163,6 @@
164
163
  );
165
164
  --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
166
165
  --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
167
- --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
168
166
  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
169
167
  --sui-error-border-color: hsl(
170
168
  var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
@@ -196,6 +194,9 @@
196
194
  --sui-font-weight-bold: 600;
197
195
  --sui-font-family-monospace: "Noto Sans Mono", monospace;
198
196
  --sui-font-size-monospace: 13px;
197
+ --sui-line-height-default: 1.25;
198
+ --sui-line-height-compact: 1.5;
199
+ --sui-line-height-comfortable: 1.75;
199
200
  --sui-control-small-border-width: 1px;
200
201
  --sui-control-small-border-radius: 2px;
201
202
  --sui-control-small-height: 24px;
@@ -205,6 +206,12 @@
205
206
  --sui-control-large-border-width: 1px;
206
207
  --sui-control-large-border-radius: 8px;
207
208
  --sui-control-large-height: 40px;
209
+ --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
210
+ --sui-control-foreground-color: var(--sui-primary-foreground-color);
211
+ --sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
212
+ --sui-control-font-family: var(--sui-font-family-default);
213
+ --sui-control-font-size: var(--sui-font-size-default);
214
+ --sui-control-line-height: var(--sui-line-height-default);
208
215
  --sui-button-small-border-radius: var(--sui-control-small-border-radius);
209
216
  --sui-button-small-height: var(--sui-control-small-height);
210
217
  --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
@@ -217,12 +224,18 @@
217
224
  --sui-option-medium-height: var(--sui-control-medium-height);
218
225
  --sui-option-large-border-radius: var(--sui-control-large-border-radius);
219
226
  --sui-option-large-height: var(--sui-control-large-height);
220
- --sui-input-small-border-radius: var(--sui-control-small-border-radius);
221
- --sui-input-small-height: var(--sui-control-small-height);
222
- --sui-input-medium-border-radius: var(--sui-control-medium-border-radius);
223
- --sui-input-medium-height: var(--sui-control-medium-height);
224
- --sui-input-large-border-radius: var(--sui-control-large-border-radius);
225
- --sui-input-large-height: var(--sui-control-large-height);
227
+ --sui-textbox-small-border-radius: var(--sui-control-small-border-radius);
228
+ --sui-textbox-small-height: var(--sui-control-small-height);
229
+ --sui-textbox-medium-border-radius: var(--sui-control-medium-border-radius);
230
+ --sui-textbox-medium-height: var(--sui-control-medium-height);
231
+ --sui-textbox-large-border-radius: var(--sui-control-large-border-radius);
232
+ --sui-textbox-large-height: var(--sui-control-large-height);
233
+ --sui-textbox-foreground-color: var(--sui-control-foreground-color);
234
+ --sui-textbox-background-color: var(--sui-control-background-color);
235
+ --sui-textbox-font-family: var(--sui-font-family-default);
236
+ --sui-textbox-font-size: var(--sui-font-size-default);
237
+ --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
238
+ --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
226
239
  --sui-tab-small-height: var(--sui-control-small-height);
227
240
  --sui-tab-medium-height: var(--sui-control-medium-height);
228
241
  --sui-tab-large-height: var(--sui-control-large-height);
@@ -233,6 +246,7 @@
233
246
  }
234
247
 
235
248
  :global(*) {
249
+ overflow-anchor: none;
236
250
  scroll-behavior: smooth;
237
251
  box-sizing: border-box;
238
252
  outline-offset: 1px;
@@ -277,19 +291,9 @@
277
291
  vertical-align: top;
278
292
  }
279
293
 
280
- :global(button),
281
- :global(input),
282
- :global(textarea),
283
- :global(select),
284
- :global(option) {
285
- font-family: inherit;
286
- font-size: inherit;
287
- color: inherit;
288
- }
289
-
290
294
  :global(p),
291
295
  :global(li) {
292
- line-height: 1.75;
296
+ line-height: var(--sui-line-height-comfortable);
293
297
  }
294
298
 
295
299
  :global(code),
@@ -298,7 +302,7 @@
298
302
  }
299
303
 
300
304
  :global(pre) {
301
- line-height: 1.5;
305
+ line-height: var(--sui-line-height-compact);
302
306
  -webkit-user-select: text;
303
307
  user-select: text;
304
308
  }
@@ -314,7 +318,7 @@
314
318
  max-width: 100%;
315
319
  height: 100%;
316
320
  max-height: 100%;
317
- color: inherit;
321
+ color: var(--sui-primary-foreground-color);
318
322
  background: transparent;
319
323
  -webkit-user-select: none;
320
324
  user-select: none;
@@ -339,6 +343,5 @@
339
343
  -webkit-user-select: none;
340
344
  user-select: none;
341
345
  touch-action: none;
342
- overflow-anchor: none;
343
346
  cursor: default;
344
347
  }</style>
@@ -7,10 +7,15 @@
7
7
  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
8
8
 
9
9
  .material-symbols-outlined {
10
- font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
10
+ font-variation-settings:
11
+ "FILL" 0,
12
+ "wght" 300,
13
+ "GRAD" 0,
14
+ "opsz" 24;
11
15
  }
12
16
 
13
17
  * {
18
+ overflow-anchor: none;
14
19
  scroll-behavior: smooth;
15
20
  box-sizing: border-box;
16
21
  outline-offset: 1px;
@@ -55,19 +60,9 @@ iframe {
55
60
  vertical-align: top;
56
61
  }
57
62
 
58
- button,
59
- input,
60
- textarea,
61
- select,
62
- option {
63
- font-family: inherit;
64
- font-size: inherit;
65
- color: inherit;
66
- }
67
-
68
63
  p,
69
64
  li {
70
- line-height: 1.75;
65
+ line-height: var(--sui-line-height-comfortable);
71
66
  }
72
67
 
73
68
  code,
@@ -76,7 +71,7 @@ pre {
76
71
  }
77
72
 
78
73
  pre {
79
- line-height: 1.5;
74
+ line-height: var(--sui-line-height-compact);
80
75
  -webkit-user-select: text;
81
76
  user-select: text;
82
77
  }
@@ -92,7 +87,7 @@ dialog {
92
87
  max-width: 100%;
93
88
  height: 100%;
94
89
  max-height: 100%;
95
- color: inherit;
90
+ color: var(--sui-primary-foreground-color);
96
91
  background: transparent;
97
92
  -webkit-user-select: none;
98
93
  user-select: none;
@@ -97,7 +97,6 @@
97
97
  --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
98
98
  --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
99
99
  --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
100
- --sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
101
100
  --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
102
101
  --sui-error-background-color: hsl(
103
102
  var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
@@ -118,7 +117,6 @@
118
117
  // Borders
119
118
  --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
120
119
  --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
121
- --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
122
120
  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
123
121
  --sui-error-border-color: hsl(
124
122
  var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
@@ -152,6 +150,9 @@
152
150
  --sui-font-weight-bold: 600;
153
151
  --sui-font-family-monospace: "Noto Sans Mono", monospace;
154
152
  --sui-font-size-monospace: 13px;
153
+ --sui-line-height-default: 1.25;
154
+ --sui-line-height-compact: 1.5;
155
+ --sui-line-height-comfortable: 1.75;
155
156
  // Controls
156
157
  --sui-control-small-border-width: 1px;
157
158
  --sui-control-small-border-radius: 2px;
@@ -162,6 +163,12 @@
162
163
  --sui-control-large-border-width: 1px;
163
164
  --sui-control-large-border-radius: 8px;
164
165
  --sui-control-large-height: 40px;
166
+ --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
167
+ --sui-control-foreground-color: var(--sui-primary-foreground-color);
168
+ --sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
169
+ --sui-control-font-family: var(--sui-font-family-default);
170
+ --sui-control-font-size: var(--sui-font-size-default);
171
+ --sui-control-line-height: var(--sui-line-height-default);
165
172
  // Buttons
166
173
  --sui-button-small-border-radius: var(--sui-control-small-border-radius);
167
174
  --sui-button-small-height: var(--sui-control-small-height);
@@ -176,13 +183,19 @@
176
183
  --sui-option-medium-height: var(--sui-control-medium-height);
177
184
  --sui-option-large-border-radius: var(--sui-control-large-border-radius);
178
185
  --sui-option-large-height: var(--sui-control-large-height);
179
- // Input
180
- --sui-input-small-border-radius: var(--sui-control-small-border-radius);
181
- --sui-input-small-height: var(--sui-control-small-height);
182
- --sui-input-medium-border-radius: var(--sui-control-medium-border-radius);
183
- --sui-input-medium-height: var(--sui-control-medium-height);
184
- --sui-input-large-border-radius: var(--sui-control-large-border-radius);
185
- --sui-input-large-height: var(--sui-control-large-height);
186
+ // Textbox: singleline & multiline text fields
187
+ --sui-textbox-small-border-radius: var(--sui-control-small-border-radius);
188
+ --sui-textbox-small-height: var(--sui-control-small-height);
189
+ --sui-textbox-medium-border-radius: var(--sui-control-medium-border-radius);
190
+ --sui-textbox-medium-height: var(--sui-control-medium-height);
191
+ --sui-textbox-large-border-radius: var(--sui-control-large-border-radius);
192
+ --sui-textbox-large-height: var(--sui-control-large-height);
193
+ --sui-textbox-foreground-color: var(--sui-control-foreground-color);
194
+ --sui-textbox-background-color: var(--sui-control-background-color);
195
+ --sui-textbox-font-family: var(--sui-font-family-default);
196
+ --sui-textbox-font-size: var(--sui-font-size-default);
197
+ --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
198
+ --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
186
199
  // Tab
187
200
  --sui-tab-small-height: var(--sui-control-small-height);
188
201
  --sui-tab-medium-height: var(--sui-control-medium-height);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -12,47 +12,47 @@
12
12
  "build:watch": "svelte-kit sync && svelte-package -o package --watch",
13
13
  "preview": "vite preview",
14
14
  "prepublishOnly": "npm run build",
15
- "format": "prettier --plugin-search-dir . --write .",
15
+ "format": "prettier --plugin prettier-plugin-svelte --write .",
16
16
  "lint": "npm-run-all lint:*",
17
17
  "lint:cspell": "cspell --no-progress",
18
18
  "lint:svelte": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
19
- "lint:prettier": "prettier --check --plugin-search-dir=. .",
19
+ "lint:prettier": "prettier --check --plugin prettier-plugin-svelte .",
20
20
  "lint:eslint": "eslint .",
21
21
  "lint:stylelint": "stylelint '**/*.{css,scss,svelte}'",
22
22
  "test": "playwright test",
23
23
  "test:unit": "vitest"
24
24
  },
25
25
  "dependencies": {
26
- "svelte": "^4.0.5"
26
+ "svelte": "^4.2.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@playwright/test": "^1.36.1",
29
+ "@playwright/test": "^1.38.0",
30
30
  "@sveltejs/adapter-auto": "2.1.0",
31
- "@sveltejs/kit": "^1.22.3",
32
- "@sveltejs/package": "^2.2.0",
33
- "cspell": "^6.31.2",
34
- "eslint": "^8.45.0",
31
+ "@sveltejs/kit": "^1.25.0",
32
+ "@sveltejs/package": "^2.2.2",
33
+ "cspell": "^7.3.6",
34
+ "eslint": "^8.49.0",
35
35
  "eslint-config-airbnb-base": "^15.0.0",
36
- "eslint-config-prettier": "^8.8.0",
37
- "eslint-plugin-import": "^2.27.5",
38
- "eslint-plugin-jsdoc": "^46.4.4",
39
- "eslint-plugin-svelte": "^2.32.2",
36
+ "eslint-config-prettier": "^9.0.0",
37
+ "eslint-plugin-import": "^2.28.1",
38
+ "eslint-plugin-jsdoc": "^46.8.1",
39
+ "eslint-plugin-svelte": "^2.33.1",
40
40
  "npm-run-all": "^4.1.5",
41
- "postcss": "^8.4.26",
41
+ "postcss": "^8.4.29",
42
42
  "postcss-html": "^1.5.0",
43
- "prettier": "^2.8.8",
44
- "prettier-plugin-svelte": "^2.10.1",
45
- "sass": "^1.63.6",
46
- "stylelint": "^15.10.1",
47
- "stylelint-config-recommended-scss": "^12.0.0",
48
- "stylelint-scss": "^5.0.1",
49
- "svelte-check": "^3.4.6",
50
- "svelte-i18n": "^3.7.0",
43
+ "prettier": "^3.0.3",
44
+ "prettier-plugin-svelte": "^3.0.3",
45
+ "sass": "^1.67.0",
46
+ "stylelint": "^15.10.3",
47
+ "stylelint-config-recommended-scss": "^13.0.0",
48
+ "stylelint-scss": "^5.2.1",
49
+ "svelte-check": "^3.5.1",
50
+ "svelte-i18n": "^3.7.4",
51
51
  "svelte-migrate": "^1.2.6",
52
52
  "svelte-preprocess": "^5.0.4",
53
- "tslib": "^2.6.0",
54
- "vite": "^4.4.4",
55
- "vitest": "^0.33.0"
53
+ "tslib": "^2.6.2",
54
+ "vite": "^4.4.9",
55
+ "vitest": "^0.34.4"
56
56
  },
57
57
  "exports": {
58
58
  "./package.json": "./package.json",