@sveltia/ui 0.6.3 → 0.6.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/package/components/button/button.svelte.d.ts +2 -2
- package/package/components/button/select-button-group.svelte +1 -1
- package/package/components/dialog/dialog.svelte +1 -0
- package/package/components/drawer/drawer.svelte +1 -0
- package/package/components/select/combobox.svelte +1 -0
- package/package/components/util/app-shell.svelte +39 -7
- package/package/components/util/popup.svelte +2 -0
- package/package/styles/core.scss +1 -6
- package/package/styles/variables.scss +1 -1
- package/package.json +17 -17
|
@@ -13,9 +13,9 @@ export default class Button extends SvelteComponent<{
|
|
|
13
13
|
type?: "reset" | "submit" | "button";
|
|
14
14
|
disabled?: boolean;
|
|
15
15
|
size?: "small" | "medium" | "large";
|
|
16
|
+
hidden?: boolean;
|
|
16
17
|
element?: HTMLButtonElement;
|
|
17
18
|
role?: string;
|
|
18
|
-
hidden?: boolean;
|
|
19
19
|
pressed?: boolean | "true" | "false" | "mixed";
|
|
20
20
|
popupPosition?: PopupPosition;
|
|
21
21
|
keyShortcuts?: string;
|
|
@@ -84,9 +84,9 @@ declare const __propDef: {
|
|
|
84
84
|
type?: ('button' | 'submit' | 'reset');
|
|
85
85
|
disabled?: boolean;
|
|
86
86
|
size?: ('small' | 'medium' | 'large');
|
|
87
|
+
hidden?: boolean;
|
|
87
88
|
element?: HTMLButtonElement | null;
|
|
88
89
|
role?: string;
|
|
89
|
-
hidden?: boolean;
|
|
90
90
|
pressed?: (boolean | 'false' | 'mixed' | 'true' | undefined);
|
|
91
91
|
popupPosition?: PopupPosition;
|
|
92
92
|
keyShortcuts?: string;
|
|
@@ -248,6 +248,7 @@ dialog form {
|
|
|
248
248
|
flex-direction: column;
|
|
249
249
|
border-radius: 4px;
|
|
250
250
|
background-color: var(--sui-secondary-background-color-translucent);
|
|
251
|
+
-webkit-backdrop-filter: blur(16px);
|
|
251
252
|
backdrop-filter: blur(16px);
|
|
252
253
|
box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
|
|
253
254
|
will-change: opacity, transform;
|
|
@@ -233,6 +233,7 @@ dialog form {
|
|
|
233
233
|
flex-direction: column;
|
|
234
234
|
border-radius: 4px;
|
|
235
235
|
background-color: var(--sui-secondary-background-color-translucent);
|
|
236
|
+
-webkit-backdrop-filter: blur(16px);
|
|
236
237
|
backdrop-filter: blur(16px);
|
|
237
238
|
box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
|
|
238
239
|
will-change: opacity, transform;
|
|
@@ -207,6 +207,7 @@
|
|
|
207
207
|
box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
|
|
208
208
|
overflow: auto;
|
|
209
209
|
background-color: var(--sui-secondary-background-color);
|
|
210
|
+
-webkit-backdrop-filter: blur(16px);
|
|
210
211
|
backdrop-filter: blur(16px);
|
|
211
212
|
/* Add .1s delay before the position can be determined */
|
|
212
213
|
transition: opacity 100ms 100ms;
|
|
@@ -7,6 +7,17 @@
|
|
|
7
7
|
<script>
|
|
8
8
|
import { onMount } from 'svelte';
|
|
9
9
|
|
|
10
|
+
const stylesheets = [
|
|
11
|
+
// https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
|
|
12
|
+
'https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap',
|
|
13
|
+
// https://fonts.google.com/icons?icon.set=Material+Symbols
|
|
14
|
+
// Use `font-display: block;` @see https://stackoverflow.com/q/41710834
|
|
15
|
+
'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
|
|
16
|
+
];
|
|
17
|
+
|
|
18
|
+
/** @type {HTMLElement} */
|
|
19
|
+
let fontLoader;
|
|
20
|
+
|
|
10
21
|
onMount(() => {
|
|
11
22
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
12
23
|
const { dataset } = document.documentElement;
|
|
@@ -28,9 +39,29 @@
|
|
|
28
39
|
mediaQuery.onchange = () => {
|
|
29
40
|
applyTheme();
|
|
30
41
|
};
|
|
42
|
+
|
|
43
|
+
window.setTimeout(() => {
|
|
44
|
+
fontLoader.remove();
|
|
45
|
+
}, 1000);
|
|
31
46
|
});
|
|
32
47
|
</script>
|
|
33
48
|
|
|
49
|
+
<svelte:head>
|
|
50
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
51
|
+
<meta name="google" content="notranslate" />
|
|
52
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
53
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
|
|
54
|
+
{#each stylesheets as href}
|
|
55
|
+
<link rel="preload" {href} as="style" />
|
|
56
|
+
<link rel="stylesheet" {href} />
|
|
57
|
+
{/each}
|
|
58
|
+
</svelte:head>
|
|
59
|
+
|
|
60
|
+
<!-- Preload fonts, including the icons -->
|
|
61
|
+
<div class="font-loader" aria-hidden="true" bind:this={fontLoader} style:opacity="0">
|
|
62
|
+
<strong>Sveltia</strong> <em>UI</em> <span class="material-symbols-outlined">favorite</span>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
34
65
|
<div
|
|
35
66
|
class="sui app-shell"
|
|
36
67
|
role="none"
|
|
@@ -163,7 +194,7 @@
|
|
|
163
194
|
);
|
|
164
195
|
--sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
|
|
165
196
|
--sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
|
|
166
|
-
--sui-checkbox-border-color: hsl(var(--sui-foreground-color-
|
|
197
|
+
--sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
|
|
167
198
|
--sui-error-border-color: hsl(
|
|
168
199
|
var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
|
|
169
200
|
var(--sui-alert-border-color-lightness)
|
|
@@ -255,6 +286,7 @@
|
|
|
255
286
|
outline-color: transparent;
|
|
256
287
|
border-width: 0;
|
|
257
288
|
border-style: solid;
|
|
289
|
+
vertical-align: top;
|
|
258
290
|
}
|
|
259
291
|
|
|
260
292
|
:global(:focus) {
|
|
@@ -285,12 +317,6 @@
|
|
|
285
317
|
text-decoration: none;
|
|
286
318
|
}
|
|
287
319
|
|
|
288
|
-
:global(img),
|
|
289
|
-
:global(svg),
|
|
290
|
-
:global(iframe) {
|
|
291
|
-
vertical-align: top;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
320
|
:global(p),
|
|
295
321
|
:global(li) {
|
|
296
322
|
line-height: var(--sui-line-height-comfortable);
|
|
@@ -329,6 +355,12 @@
|
|
|
329
355
|
background: transparent;
|
|
330
356
|
}
|
|
331
357
|
|
|
358
|
+
:global(.font-loader) {
|
|
359
|
+
position: absolute;
|
|
360
|
+
left: -99999px;
|
|
361
|
+
font-family: var(--sui-font-family-default);
|
|
362
|
+
}
|
|
363
|
+
|
|
332
364
|
:global(.app-shell) {
|
|
333
365
|
position: fixed;
|
|
334
366
|
inset: 0;
|
|
@@ -127,6 +127,7 @@
|
|
|
127
127
|
style:z-index={$style.zIndex}
|
|
128
128
|
style:min-width={$style.width}
|
|
129
129
|
style:max-height={$style.height}
|
|
130
|
+
style:visibility={$style.inset ? undefined : 'hidden'}
|
|
130
131
|
>
|
|
131
132
|
{#if showContent}
|
|
132
133
|
<slot />
|
|
@@ -155,6 +156,7 @@
|
|
|
155
156
|
outline-width: 0 !important;
|
|
156
157
|
color: var(--sui-primary-foreground-color);
|
|
157
158
|
background-color: var(--sui-secondary-background-color-translucent);
|
|
159
|
+
-webkit-backdrop-filter: blur(16px);
|
|
158
160
|
backdrop-filter: blur(16px);
|
|
159
161
|
box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
|
|
160
162
|
will-change: opacity, transform;
|
package/package/styles/core.scss
CHANGED
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
outline-color: transparent;
|
|
25
25
|
border-width: 0;
|
|
26
26
|
border-style: solid;
|
|
27
|
+
vertical-align: top;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
:focus {
|
|
@@ -54,12 +55,6 @@ a {
|
|
|
54
55
|
text-decoration: none;
|
|
55
56
|
}
|
|
56
57
|
|
|
57
|
-
img,
|
|
58
|
-
svg,
|
|
59
|
-
iframe {
|
|
60
|
-
vertical-align: top;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
58
|
p,
|
|
64
59
|
li {
|
|
65
60
|
line-height: var(--sui-line-height-comfortable);
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
// Borders
|
|
118
118
|
--sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
|
|
119
119
|
--sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
|
|
120
|
-
--sui-checkbox-border-color: hsl(var(--sui-foreground-color-
|
|
120
|
+
--sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
|
|
121
121
|
--sui-error-border-color: hsl(
|
|
122
122
|
var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
|
|
123
123
|
var(--sui-alert-border-color-lightness)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sveltia/ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -23,36 +23,36 @@
|
|
|
23
23
|
"test:unit": "vitest"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"svelte": "^4.2.
|
|
26
|
+
"svelte": "^4.2.2"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@playwright/test": "^1.
|
|
29
|
+
"@playwright/test": "^1.39.0",
|
|
30
30
|
"@sveltejs/adapter-auto": "2.1.0",
|
|
31
|
-
"@sveltejs/kit": "^1.
|
|
31
|
+
"@sveltejs/kit": "^1.26.0",
|
|
32
32
|
"@sveltejs/package": "^2.2.2",
|
|
33
|
-
"cspell": "^7.3.
|
|
34
|
-
"eslint": "^8.
|
|
33
|
+
"cspell": "^7.3.8",
|
|
34
|
+
"eslint": "^8.52.0",
|
|
35
35
|
"eslint-config-airbnb-base": "^15.0.0",
|
|
36
36
|
"eslint-config-prettier": "^9.0.0",
|
|
37
|
-
"eslint-plugin-import": "^2.
|
|
38
|
-
"eslint-plugin-jsdoc": "^46.8.
|
|
39
|
-
"eslint-plugin-svelte": "^2.
|
|
37
|
+
"eslint-plugin-import": "^2.29.0",
|
|
38
|
+
"eslint-plugin-jsdoc": "^46.8.2",
|
|
39
|
+
"eslint-plugin-svelte": "^2.34.0",
|
|
40
40
|
"npm-run-all": "^4.1.5",
|
|
41
|
-
"postcss": "^8.4.
|
|
41
|
+
"postcss": "^8.4.31",
|
|
42
42
|
"postcss-html": "^1.5.0",
|
|
43
43
|
"prettier": "^3.0.3",
|
|
44
44
|
"prettier-plugin-svelte": "^3.0.3",
|
|
45
|
-
"sass": "^1.
|
|
46
|
-
"stylelint": "^15.
|
|
45
|
+
"sass": "^1.69.4",
|
|
46
|
+
"stylelint": "^15.11.0",
|
|
47
47
|
"stylelint-config-recommended-scss": "^13.0.0",
|
|
48
48
|
"stylelint-scss": "^5.2.1",
|
|
49
|
-
"svelte-check": "^3.5.
|
|
50
|
-
"svelte-i18n": "^
|
|
51
|
-
"svelte-migrate": "^1.2.
|
|
49
|
+
"svelte-check": "^3.5.2",
|
|
50
|
+
"svelte-i18n": "^4.0.0",
|
|
51
|
+
"svelte-migrate": "^1.2.7",
|
|
52
52
|
"svelte-preprocess": "^5.0.4",
|
|
53
53
|
"tslib": "^2.6.2",
|
|
54
|
-
"vite": "^4.
|
|
55
|
-
"vitest": "^0.34.
|
|
54
|
+
"vite": "^4.5.0",
|
|
55
|
+
"vitest": "^0.34.6"
|
|
56
56
|
},
|
|
57
57
|
"exports": {
|
|
58
58
|
"./package.json": "./package.json",
|