@sveltia/ui 0.22.5 → 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 (7) hide show
  1. package/dist/components/text-editor/core.js +1 -1
  2. package/dist/components/text-editor/toolbar/editor-toolbar.svelte +1 -0
  3. package/dist/components/toolbar/toolbar.svelte +5 -13
  4. package/dist/components/util/app-shell.svelte +28 -28
  5. package/dist/index.js +1 -2
  6. package/dist/styles/variables.scss +17 -17
  7. package/package.json +29 -29
package/dist/components/text-editor/core.js CHANGED
@@ -227,7 +227,7 @@ export const initEditor = ({ components } = {}) => {
227
227
  registerHistory(editor, createEmptyHistoryState(), 1000);
228
228
 
229
229
  registerCodeHighlighting(editor, {
230
- defaultLanguage: 'plain',
230
+ defaultLanguage: '',
231
231
  // eslint-disable-next-line jsdoc/require-jsdoc
232
232
  tokenize: (code, language = 'plain') =>
233
233
  window.Prism.tokenize(code, window.Prism.languages[language] ?? window.Prism.languages.plain),
package/dist/components/text-editor/toolbar/editor-toolbar.svelte CHANGED
@@ -144,6 +144,7 @@
144
144
  .wrapper :global([role="toolbar"]) {
145
145
  position: sticky;
146
146
  top: 0;
147
+ z-index: 1;
147
148
  display: flex;
148
149
  gap: 8px;
149
150
  border-width: 1px 1px 0;
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.5",
3
+ "version": "0.23.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -28,51 +28,51 @@
28
28
  "test:unit": "vitest"
29
29
  },
30
30
  "dependencies": {
31
- "@lexical/code": "^0.23.0",
32
- "@lexical/dragon": "^0.23.0",
33
- "@lexical/history": "^0.23.0",
34
- "@lexical/link": "^0.23.0",
35
- "@lexical/list": "^0.23.0",
36
- "@lexical/markdown": "^0.23.0",
37
- "@lexical/rich-text": "^0.23.0",
38
- "@lexical/selection": "^0.23.0",
39
- "@lexical/table": "^0.23.0",
40
- "@lexical/utils": "^0.23.0",
31
+ "@lexical/code": "^0.23.1",
32
+ "@lexical/dragon": "^0.23.1",
33
+ "@lexical/history": "^0.23.1",
34
+ "@lexical/link": "^0.23.1",
35
+ "@lexical/list": "^0.23.1",
36
+ "@lexical/markdown": "^0.23.1",
37
+ "@lexical/rich-text": "^0.23.1",
38
+ "@lexical/selection": "^0.23.1",
39
+ "@lexical/table": "^0.23.1",
40
+ "@lexical/utils": "^0.23.1",
41
41
  "@sveltia/utils": "^0.6.3",
42
42
  "prismjs": "^1.29.0",
43
- "lexical": "^0.23.0"
43
+ "lexical": "^0.23.1"
44
44
  },
45
45
  "peerDependencies": {
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.1",
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.16.2",
70
- "svelte-check": "^4.1.1",
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
  ".": {