@sveltia/ui 0.22.6 → 0.23.0

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 (5) hide show
  1. package/dist/components/toolbar/toolbar.svelte +5 -13
  2. package/dist/components/util/app-shell.svelte +28 -28
  3. package/dist/index.js +1 -2
  4. package/dist/styles/variables.scss +17 -17
  5. package/package.json +18 -18
package/dist/components/toolbar/toolbar.svelte CHANGED
@@ -52,15 +52,11 @@
52
52
  flex: none !important;
53
53
  display: flex;
54
54
  align-items: center;
55
- padding: 0 4px;
55
+ padding: 0 8px;
56
+ background-color: var(--toolbar-background-color, transparent);
56
57
  }
57
58
  [role=toolbar].primary {
58
59
  --toolbar-size: var(--sui-primary-toolbar-size);
59
- border-color: var(--sui-primary-border-color);
60
- background-color: var(--sui-secondary-background-color);
61
- }
62
- [role=toolbar].secondary {
63
- background-color: var(--sui-tertiary-background-color);
64
60
  }
65
61
  [role=toolbar][aria-orientation=horizontal] {
66
62
  height: var(--toolbar-size);
@@ -69,23 +65,19 @@
69
65
  flex-direction: column;
70
66
  width: var(--toolbar-size);
71
67
  }
72
- [role=toolbar]:not(:last-child) {
73
- border-width: 0 0 1px;
74
- border-color: var(--sui-primary-border-color);
75
- }
76
68
  [role=toolbar] :global(button[role="button"][aria-pressed="true"]),
77
69
  [role=toolbar] :global(button[role="button"][aria-checked="true"]) {
78
70
  background-color: var(--sui-selected-background-color);
79
71
  }
80
72
  [role=toolbar] :global(h2) {
81
- flex: auto;
73
+ flex: none;
82
74
  display: flex;
83
75
  align-items: center;
84
76
  gap: 8px;
85
77
  margin: 0;
86
- padding: 0 8px;
78
+ padding: 0 12px;
87
79
  min-width: 0;
88
- font-size: var(--sui-font-size-large);
80
+ font-size: var(--sui-font-size-x-large);
89
81
  }
90
82
  [role=toolbar] :global(h2) :global(strong) {
91
83
  display: block;
package/dist/components/util/app-shell.svelte CHANGED
@@ -246,9 +246,9 @@
246
246
  --sui-tab-small-height: var(--sui-control-small-height);
247
247
  --sui-tab-medium-height: var(--sui-control-medium-height);
248
248
  --sui-tab-large-height: var(--sui-control-large-height);
249
- --sui-primary-toolbar-size: 48px;
250
- --sui-secondary-toolbar-size: 40px;
251
- --sui-primary-row-height: 48px;
249
+ --sui-primary-toolbar-size: 56px;
250
+ --sui-secondary-toolbar-size: 48px;
251
+ --sui-primary-row-height: 56px;
252
252
  --sui-secondary-row-height: 40px;
253
253
  }
254
254
  @media (pointer: coarse) {
@@ -258,9 +258,9 @@
258
258
  --sui-control-medium-height: 40px;
259
259
  --sui-control-large-height: 60px;
260
260
  --sui-checkbox-height: 24px;
261
- --sui-primary-toolbar-size: 56px;
262
- --sui-secondary-toolbar-size: 48px;
263
- --sui-primary-row-height: 56px;
261
+ --sui-primary-toolbar-size: 64px;
262
+ --sui-secondary-toolbar-size: 56px;
263
+ --sui-primary-row-height: 64px;
264
264
  --sui-secondary-row-height: 48px;
265
265
  }
266
266
  }
@@ -282,12 +282,12 @@
282
282
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
283
283
  --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
284
284
  --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
285
- --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
286
- --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
285
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 95%;
286
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%;
287
287
  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
288
- --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
289
- --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
290
- --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
288
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%;
289
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%;
290
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%;
291
291
  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
292
292
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
293
293
  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -314,14 +314,14 @@
314
314
  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
315
315
  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
316
316
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
317
- --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
318
- --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
319
- --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
317
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 8%;
318
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 10%;
319
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 13%;
320
320
  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
321
321
  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
322
- --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
323
- --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
324
- --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
322
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 40%;
323
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 24%;
324
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 20%;
325
325
  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
326
326
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
327
327
  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
@@ -351,12 +351,12 @@
351
351
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
352
352
  --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
353
353
  --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
354
- --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
355
- --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
354
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 95%;
355
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%;
356
356
  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
357
- --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
358
- --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
359
- --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
357
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%;
358
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%;
359
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%;
360
360
  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
361
361
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
362
362
  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -385,14 +385,14 @@
385
385
  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
386
386
  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
387
387
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
388
- --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
389
- --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
390
- --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
388
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 8%;
389
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 10%;
390
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 13%;
391
391
  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
392
392
  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
393
- --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
394
- --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
395
- --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
393
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 40%;
394
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 24%;
395
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 20%;
396
396
  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
397
397
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
398
398
  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
package/dist/index.js CHANGED
@@ -95,5 +95,4 @@ export { default as AppShell } from './components/util/app-shell.svelte';
95
95
  export { default as Group } from './components/util/group.svelte';
96
96
  export { default as Modal } from './components/util/modal.svelte';
97
97
 
98
- // eslint-disable-next-line import/export
99
- export * from './typedefs';
98
+ // eslint-disable-next-line import/export export * from './typedefs';
package/dist/styles/variables.scss CHANGED
@@ -7,12 +7,12 @@
7
7
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%; // disabled
8
8
  --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%; // content/input
9
9
  --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%; // primary
10
- --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%; // secondary
11
- --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%; // tertiary/disabled
10
+ --sui-background-color-3-hsl: var(--sui-base-hue) 5% 95%; // secondary
11
+ --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%; // tertiary/disabled
12
12
  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%; // highlight
13
- --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%; // control
14
- --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%; // primary
15
- --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%; // secondary
13
+ --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%; // control
14
+ --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%; // primary
15
+ --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%; // secondary
16
16
  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
17
17
  // Accents
18
18
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
@@ -41,14 +41,14 @@
41
41
  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%; // secondary
42
42
  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%; // tertiary
43
43
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%; // disabled
44
- --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%; // content/input
45
- --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%; // primary
46
- --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%; // secondary
44
+ --sui-background-color-1-hsl: var(--sui-base-hue) 10% 8%; // content/input
45
+ --sui-background-color-2-hsl: var(--sui-base-hue) 10% 10%; // primary
46
+ --sui-background-color-3-hsl: var(--sui-base-hue) 10% 13%; // secondary
47
47
  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
48
48
  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
49
- --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%; // control
50
- --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%; // primary
51
- --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%; // secondary
49
+ --sui-border-color-1-hsl: var(--sui-base-hue) 10% 40%; // control
50
+ --sui-border-color-2-hsl: var(--sui-base-hue) 10% 24%; // primary
51
+ --sui-border-color-3-hsl: var(--sui-base-hue) 10% 20%; // secondary
52
52
  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
53
53
  // Accents
54
54
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%); // lighter
@@ -234,10 +234,10 @@
234
234
  --sui-tab-medium-height: var(--sui-control-medium-height);
235
235
  --sui-tab-large-height: var(--sui-control-large-height);
236
236
  // Toolbar
237
- --sui-primary-toolbar-size: 48px;
238
- --sui-secondary-toolbar-size: 40px;
237
+ --sui-primary-toolbar-size: 56px;
238
+ --sui-secondary-toolbar-size: 48px;
239
239
  // table
240
- --sui-primary-row-height: 48px;
240
+ --sui-primary-row-height: 56px;
241
241
  --sui-secondary-row-height: 40px;
242
242
 
243
243
  // Make controls larger on touch devices, e.g. mobile & tablet
@@ -246,9 +246,9 @@
246
246
  --sui-control-medium-height: 40px;
247
247
  --sui-control-large-height: 60px;
248
248
  --sui-checkbox-height: 24px;
249
- --sui-primary-toolbar-size: 56px;
250
- --sui-secondary-toolbar-size: 48px;
251
- --sui-primary-row-height: 56px;
249
+ --sui-primary-toolbar-size: 64px;
250
+ --sui-secondary-toolbar-size: 56px;
251
+ --sui-primary-row-height: 64px;
252
252
  --sui-secondary-row-height: 48px;
253
253
  }
254
254
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.22.6",
3
+ "version": "0.23.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -46,33 +46,33 @@
46
46
  "svelte": "^5.0.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@playwright/test": "^1.49.1",
50
- "@sveltejs/adapter-auto": "^3.3.1",
51
- "@sveltejs/kit": "^2.15.2",
52
- "@sveltejs/package": "^2.3.7",
49
+ "@playwright/test": "^1.50.0",
50
+ "@sveltejs/adapter-auto": "^4.0.0",
51
+ "@sveltejs/kit": "^2.16.1",
52
+ "@sveltejs/package": "^2.3.9",
53
53
  "@sveltejs/vite-plugin-svelte": "5.0.3",
54
- "cspell": "^8.17.1",
54
+ "cspell": "^8.17.3",
55
55
  "eslint": "^8.57.1",
56
56
  "eslint-config-airbnb-base": "^15.0.0",
57
- "eslint-config-prettier": "^9.1.0",
57
+ "eslint-config-prettier": "^10.0.1",
58
58
  "eslint-plugin-import": "^2.31.0",
59
- "eslint-plugin-jsdoc": "^50.6.1",
59
+ "eslint-plugin-jsdoc": "^50.6.3",
60
60
  "eslint-plugin-svelte": "^2.46.1",
61
- "postcss": "^8.4.49",
62
- "postcss-html": "^1.7.0",
61
+ "postcss": "^8.5.1",
62
+ "postcss-html": "^1.8.0",
63
63
  "prettier": "^3.4.2",
64
- "prettier-plugin-svelte": "^3.3.2",
65
- "sass": "^1.83.1",
66
- "stylelint": "^16.12.0",
64
+ "prettier-plugin-svelte": "^3.3.3",
65
+ "sass": "^1.83.4",
66
+ "stylelint": "^16.14.1",
67
67
  "stylelint-config-recommended-scss": "^14.1.0",
68
- "stylelint-scss": "^6.10.0",
69
- "svelte": "5.17.3",
70
- "svelte-check": "^4.1.3",
68
+ "stylelint-scss": "^6.10.1",
69
+ "svelte": "5.19.4",
70
+ "svelte-check": "^4.1.4",
71
71
  "svelte-i18n": "^4.0.1",
72
72
  "svelte-preprocess": "^6.0.3",
73
73
  "tslib": "^2.8.1",
74
- "vite": "^6.0.7",
75
- "vitest": "^2.1.8"
74
+ "vite": "^6.0.11",
75
+ "vitest": "^3.0.4"
76
76
  },
77
77
  "exports": {
78
78
  ".": {