@sveltia/ui 0.20.0 → 0.20.2

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 (13) hide show
  1. package/package/components/dialog/dialog.svelte +2 -2
  2. package/package/components/progressbar/progressbar.svelte +1 -1
  3. package/package/components/text-editor/core.d.ts +1 -0
  4. package/package/components/text-editor/core.js +13 -1
  5. package/package/components/text-editor/lexical-root.svelte +6 -0
  6. package/package/components/text-editor/toolbar/format-text-button.svelte +3 -1
  7. package/package/components/text-editor/toolbar/insert-link-button.svelte +2 -4
  8. package/package/components/text-editor/toolbar/toggle-block-menu-item.svelte +4 -6
  9. package/package/components/util/app-shell.svelte +12 -36
  10. package/package/components/util/modal.svelte +8 -4
  11. package/package/styles/core.scss +151 -147
  12. package/package/styles/variables.scss +198 -196
  13. package/package.json +27 -27
package/package/components/dialog/dialog.svelte CHANGED
@@ -63,9 +63,9 @@
63
63
  (async () => {
64
64
  await sleep(50);
65
65
  /** @type {HTMLInputElement | HTMLButtonElement} */ (
66
- content.querySelector('input, button.primary')
66
+ content?.querySelector('input, button.primary')
67
67
  )?.focus();
68
- /** @type {HTMLInputElement} */ (content.querySelector('input'))?.select();
68
+ /** @type {HTMLInputElement} */ (content?.querySelector('input'))?.select();
69
69
  })();
70
70
  }
71
71
  });
package/package/components/progressbar/progressbar.svelte CHANGED
@@ -49,6 +49,6 @@
49
49
  }
50
50
  .progressbar div {
51
51
  height: 100%;
52
- background-color: var(--sui-progressbar-foreground-color, var(--sui-primary-accent-color-text));
52
+ background-color: var(--sui-progressbar-foreground-color, var(--sui-primary-accent-color-light));
53
53
  transition: width 250ms;
54
54
  }</style>
package/package/components/text-editor/core.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export function initEditor(): import("lexical").LexicalEditor;
2
2
  export function convertMarkdown(editor: import("lexical").LexicalEditor, value: string): Promise<void>;
3
+ export function focusEditor(editor: import("lexical").LexicalEditor): Promise<void>;
package/package/components/text-editor/core.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  LinkNode,
6
6
  TOGGLE_LINK_COMMAND,
7
7
  $isLinkNode as isLinkNode,
8
- toggleLink,
8
+ $toggleLink as toggleLink,
9
9
  } from '@lexical/link';
10
10
  import {
11
11
  INSERT_ORDERED_LIST_COMMAND,
@@ -261,3 +261,15 @@ export const convertMarkdown = async (editor, value) =>
261
261
  }
262
262
  });
263
263
  });
264
+
265
+ /**
266
+ * Move focus to the editor so the user can start editing immediately.
267
+ * @param {import('lexical').LexicalEditor} editor - Editor instance.
268
+ * @returns {Promise<void>} Nothing.
269
+ */
270
+ export const focusEditor = async (editor) =>
271
+ new Promise((resolve) => {
272
+ editor.focus(() => {
273
+ resolve(undefined);
274
+ });
275
+ });
package/package/components/text-editor/lexical-root.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script>
2
+ import { $createParagraphNode as createParagraphNode, $getRoot as getRoot } from 'lexical';
2
3
  import { getContext, onMount } from 'svelte';
3
4
 
4
5
  /**
@@ -96,6 +97,11 @@
96
97
  $effect(() => {
97
98
  if ($editor && lexicalRoot) {
98
99
  $editor.setRootElement(lexicalRoot);
100
+ // We should avoid an empty editor; there should be at least one `<p>`
101
+ // @see https://github.com/facebook/lexical/issues/2308
102
+ $editor.update(() => {
103
+ getRoot().append(createParagraphNode());
104
+ });
99
105
  }
100
106
  });
101
107
  </script>
package/package/components/text-editor/toolbar/format-text-button.svelte CHANGED
@@ -5,6 +5,7 @@
5
5
  import { availableButtons } from '..';
6
6
  import Button from '../../button/button.svelte';
7
7
  import Icon from '../../icon/icon.svelte';
8
+ import { focusEditor } from '../core';
8
9
 
9
10
  /**
10
11
  * @typedef {object} Props
@@ -33,7 +34,8 @@
33
34
  aria-controls="{$editorId}-lexical-root"
34
35
  disabled={!$useRichText}
35
36
  pressed={$selectionInlineTypes.includes(type)}
36
- onclick={() => {
37
+ onclick={async () => {
38
+ await focusEditor($editor);
37
39
  $editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
38
40
  }}
39
41
  >
package/package/components/text-editor/toolbar/insert-link-button.svelte CHANGED
@@ -2,7 +2,6 @@
2
2
  import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
3
3
  import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
4
4
  import { generateElementId } from '@sveltia/utils/element';
5
- import { sleep } from '@sveltia/utils/misc';
6
5
  import {
7
6
  COMMAND_PRIORITY_NORMAL,
8
7
  KEY_DOWN_COMMAND,
@@ -23,6 +22,7 @@
23
22
  import Dialog from '../../dialog/dialog.svelte';
24
23
  import Icon from '../../icon/icon.svelte';
25
24
  import TextInput from '../../text-field/text-input.svelte';
25
+ import { focusEditor } from '../core';
26
26
 
27
27
  const id = generateElementId('insert-link');
28
28
 
@@ -147,9 +147,7 @@
147
147
  });
148
148
  });
149
149
 
150
- // Wait a sec until the text is selected
151
- await sleep(50);
152
-
150
+ await focusEditor($editor);
153
151
  $editor.dispatchCommand(TOGGLE_LINK_COMMAND, anchorURL);
154
152
  }
155
153
 
package/package/components/text-editor/toolbar/toggle-block-menu-item.svelte CHANGED
@@ -14,6 +14,7 @@
14
14
  import { availableButtons } from '..';
15
15
  import Icon from '../../icon/icon.svelte';
16
16
  import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
17
+ import { focusEditor } from '../core';
17
18
 
18
19
  /**
19
20
  * @typedef {object} Props
@@ -43,7 +44,9 @@
43
44
  /**
44
45
  * Change the current selection’s type to {@link type}.
45
46
  */
46
- const changeBlockType = () => {
47
+ const changeBlockType = async () => {
48
+ await focusEditor($editor);
49
+
47
50
  const [, headingLevel] = type.match(/^heading-(\d)$/) ?? [];
48
51
 
49
52
  if (headingLevel) {
@@ -75,11 +78,6 @@
75
78
  setBlocksType(getSelection(), () => createQuoteNode());
76
79
  });
77
80
  }
78
-
79
- // Move focus back to the editor
80
- window.setTimeout(() => {
81
- $editor.focus();
82
- }, 500);
83
81
  };
84
82
  </script>
85
83
 
package/package/components/util/app-shell.svelte CHANGED
@@ -98,7 +98,7 @@
98
98
  {@render children?.()}
99
99
  </div>
100
100
 
101
- <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans+Mono:wght@100..900&display=swap");
101
+ <style>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans+Mono:wght@100..900&display=swap");
102
102
  @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");
103
103
  :global(:root),
104
104
  :global(:host) {
@@ -253,7 +253,6 @@
253
253
  --sui-primary-row-height: 48px;
254
254
  --sui-secondary-row-height: 40px;
255
255
  }
256
-
257
256
  @media (pointer: coarse) {
258
257
  :global(:root),
259
258
  :global(:host) {
@@ -309,7 +308,6 @@
309
308
  --sui-alert-border-color-saturation: 48%;
310
309
  --sui-alert-border-color-lightness: 68%;
311
310
  }
312
-
313
311
  :global(:root[data-theme=dark]),
314
312
  :global(:host[data-theme=dark]) {
315
313
  color-scheme: dark;
@@ -344,7 +342,6 @@
344
342
  --sui-alert-border-color-saturation: 38%;
345
343
  --sui-alert-border-color-lightness: 18%;
346
344
  }
347
-
348
345
  @media (prefers-color-scheme: light) {
349
346
  :global(:root:not([data-theme])),
350
347
  :global(:host:not([data-theme])) {
@@ -417,10 +414,10 @@
417
414
  --sui-alert-border-color-lightness: 18%;
418
415
  }
419
416
  }
417
+
420
418
  :global(.material-symbols-outlined) {
421
419
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
422
420
  }
423
-
424
421
  :global(*),
425
422
  :global(::before),
426
423
  :global(::after) {
@@ -443,25 +440,20 @@
443
440
  transition-duration: 1ms !important;
444
441
  }
445
442
  }
446
-
447
443
  :global(::selection) {
448
444
  background-color: var(--sui-primary-accent-color-translucent);
449
445
  }
450
-
451
446
  :global(*) {
452
447
  -webkit-tap-highlight-color: transparent;
453
448
  }
454
-
455
449
  :global(:focus) {
456
450
  z-index: 1;
457
451
  outline-width: 0;
458
452
  }
459
-
460
453
  :global(:focus-visible) {
461
454
  outline-color: var(--sui-primary-accent-color-translucent);
462
455
  z-index: 2;
463
456
  }
464
-
465
457
  :global(h1),
466
458
  :global(h2),
467
459
  :global(h3),
@@ -472,35 +464,27 @@
472
464
  font-weight: var(--sui-font-weight-bold, bold);
473
465
  line-height: var(--sui-line-height-default);
474
466
  }
475
-
476
467
  :global(h1) {
477
468
  font-size: 32px;
478
469
  }
479
-
480
470
  :global(h2) {
481
471
  font-size: 28px;
482
472
  }
483
-
484
473
  :global(h3) {
485
474
  font-size: 24px;
486
475
  }
487
-
488
476
  :global(h4) {
489
477
  font-size: 20px;
490
478
  }
491
-
492
479
  :global(h5) {
493
480
  font-size: 16px;
494
481
  }
495
-
496
482
  :global(h6) {
497
483
  font-size: 12px;
498
484
  }
499
-
500
485
  :global(strong) {
501
486
  font-weight: var(--sui-font-weight-bold, bold);
502
487
  }
503
-
504
488
  :global(a) {
505
489
  color: var(--sui-primary-accent-color-text);
506
490
  text-decoration: none;
@@ -509,21 +493,20 @@
509
493
  :global(a:hover), :global(a:focus), :global(a:active) {
510
494
  text-decoration: underline;
511
495
  }
512
- :global(:root[data-underline-links=true]) :global(a), :global(:host[data-underline-links=true]) :global(a) {
496
+ :global(:root[data-underline-links="true"]) :global(a), :global(:host[data-underline-links="true"]) :global(a) {
513
497
  text-decoration: underline;
514
498
  }
515
-
516
499
  :global(p),
517
- :global(li) {
500
+ :global(ul),
501
+ :global(ol),
502
+ :global(dl) {
518
503
  margin: var(--sui-paragraph-margin) 0;
519
504
  line-height: var(--sui-line-height-comfortable);
520
505
  }
521
-
522
506
  :global(ul),
523
507
  :global(ol) {
524
508
  padding-inline: 2em;
525
509
  }
526
-
527
510
  :global(code),
528
511
  :global(pre) {
529
512
  border-radius: 4px;
@@ -532,39 +515,33 @@
532
515
  font-size: var(--sui-font-size-monospace);
533
516
  vertical-align: -0.05em;
534
517
  }
535
-
536
518
  :global(pre) {
537
519
  padding: 8px;
538
520
  line-height: var(--sui-line-height-compact);
539
521
  -webkit-user-select: text;
540
522
  user-select: text;
541
523
  }
542
-
543
524
  :global(code) {
544
525
  padding: 2px 4px;
545
526
  }
546
-
547
527
  :global(table) {
548
528
  border-collapse: collapse;
549
529
  }
550
-
551
530
  :global(th),
552
531
  :global(td) {
553
532
  border: 1px solid var(--sui-textbox-border-color);
554
533
  padding: 8px;
555
534
  }
556
-
557
535
  :global(blockquote) {
558
536
  margin-inline: 16px 0;
559
537
  border-inline-start: 4px solid var(--sui-textbox-border-color);
560
538
  padding-inline-start: 12px;
561
539
  }
562
-
563
540
  :global(.disabled),
564
541
  :global(.readonly),
565
542
  :global([aria-disabled=true]),
566
543
  :global([aria-readonly=true]),
567
- :global([inert]) {
544
+ :global([inert]:not(body)) {
568
545
  cursor: default;
569
546
  pointer-events: none;
570
547
  -webkit-user-select: none;
@@ -575,10 +552,9 @@
575
552
  :global(.readonly) :global(*),
576
553
  :global([aria-disabled=true]) :global(*),
577
554
  :global([aria-readonly=true]) :global(*),
578
- :global([inert]) :global(*) {
555
+ :global([inert]:not(body)) :global(*) {
579
556
  filter: grayscale(0) opacity(1);
580
557
  }
581
-
582
558
  :global(.disabled) :global(*),
583
559
  :global(.readonly) :global(*),
584
560
  :global([aria-disabled=true]) :global(*),
@@ -590,13 +566,13 @@
590
566
  user-select: none;
591
567
  }
592
568
 
593
- :global(.font-loader) {
569
+ .font-loader {
594
570
  position: absolute;
595
571
  left: -99999px;
596
572
  font-family: var(--sui-font-family-default);
597
573
  }
598
574
 
599
- :global(.app-shell) {
575
+ .app-shell {
600
576
  position: fixed;
601
577
  inset: 0;
602
578
  overflow: hidden;
@@ -613,12 +589,12 @@
613
589
  touch-action: none;
614
590
  cursor: default;
615
591
  }
616
- :global(.app-shell.horizontal) {
592
+ .app-shell.horizontal {
617
593
  display: flex;
618
594
  flex-direction: row;
619
595
  overflow: hidden;
620
596
  }
621
- :global(.app-shell.vertical) {
597
+ .app-shell.vertical {
622
598
  display: flex;
623
599
  flex-direction: column;
624
600
  overflow: hidden;
package/package/components/util/modal.svelte CHANGED
@@ -95,23 +95,27 @@
95
95
  return;
96
96
  }
97
97
 
98
+ const { returnValue } = dialog;
99
+
98
100
  onClosing?.(new CustomEvent('Closing'));
101
+ // Prevent a button behind the `<dialog>` from being clicked erroneously (Svelte bug)
102
+ document.body.inert = true;
99
103
  dialog.close();
104
+ document.body.inert = false;
100
105
  setActiveClass = false;
101
106
  setOpenClass = false;
102
107
  await waitForTransition();
103
108
  showContent = false;
104
109
 
105
- if (dialog.returnValue === 'ok') {
110
+ if (returnValue === 'ok') {
106
111
  onOk?.(new CustomEvent('Ok'));
107
- onClose?.(new CustomEvent('Close', { detail: { returnValue: 'ok' } }));
108
112
  }
109
113
 
110
- if (dialog.returnValue === 'cancel') {
114
+ if (returnValue === 'cancel') {
111
115
  onCancel?.(new CustomEvent('Cancel'));
112
- onClose?.(new CustomEvent('Close', { detail: { returnValue: 'cancel' } }));
113
116
  }
114
117
 
118
+ onClose?.(new CustomEvent('Close', { detail: { returnValue } }));
115
119
  dialog.returnValue = '';
116
120
  };
117
121
 
package/package/styles/core.scss CHANGED
@@ -6,179 +6,183 @@
6
6
  // Use `font-display: block;` @see https://stackoverflow.com/q/41710834
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
- .material-symbols-outlined {
10
- font-variation-settings:
11
- "FILL" 0,
12
- "wght" 300,
13
- "GRAD" 0,
14
- "opsz" 24;
15
- }
16
-
17
- *,
18
- ::before,
19
- ::after {
20
- overflow-anchor: none;
21
- scroll-behavior: smooth;
22
- box-sizing: border-box;
23
- outline-offset: 0px;
24
- outline-width: var(--sui-focus-ring-width) !important;
25
- outline-style: solid;
26
- outline-color: transparent;
27
- border-width: 0;
28
- border-style: solid;
29
- vertical-align: top;
30
-
31
- @media (prefers-reduced-motion) {
32
- scroll-behavior: auto;
33
- // Disable transition but make sure the `transitionend` event works
34
- transition-duration: 1ms !important;
9
+ :global {
10
+ .material-symbols-outlined {
11
+ font-variation-settings:
12
+ "FILL" 0,
13
+ "wght" 300,
14
+ "GRAD" 0,
15
+ "opsz" 24;
35
16
  }
36
- }
37
-
38
- ::selection {
39
- background-color: var(--sui-primary-accent-color-translucent);
40
- }
41
-
42
- * {
43
- -webkit-tap-highlight-color: transparent;
44
- }
45
17
 
46
- :focus {
47
- z-index: 1;
48
- outline-width: 0;
49
- }
18
+ *,
19
+ ::before,
20
+ ::after {
21
+ overflow-anchor: none;
22
+ scroll-behavior: smooth;
23
+ box-sizing: border-box;
24
+ outline-offset: 0px;
25
+ outline-width: var(--sui-focus-ring-width) !important;
26
+ outline-style: solid;
27
+ outline-color: transparent;
28
+ border-width: 0;
29
+ border-style: solid;
30
+ vertical-align: top;
31
+
32
+ @media (prefers-reduced-motion) {
33
+ scroll-behavior: auto;
34
+ // Disable transition but make sure the `transitionend` event works
35
+ transition-duration: 1ms !important;
36
+ }
37
+ }
50
38
 
51
- :focus-visible {
52
- outline-color: var(--sui-primary-accent-color-translucent);
53
- z-index: 2;
54
- }
39
+ ::selection {
40
+ background-color: var(--sui-primary-accent-color-translucent);
41
+ }
55
42
 
56
- h1,
57
- h2,
58
- h3,
59
- h4,
60
- h5,
61
- h6 {
62
- margin: 0;
63
- font-weight: var(--sui-font-weight-bold, bold);
64
- line-height: var(--sui-line-height-default);
65
- }
43
+ * {
44
+ -webkit-tap-highlight-color: transparent;
45
+ }
66
46
 
67
- h1 {
68
- font-size: 32px;
69
- }
47
+ :focus {
48
+ z-index: 1;
49
+ outline-width: 0;
50
+ }
70
51
 
71
- h2 {
72
- font-size: 28px;
73
- }
52
+ :focus-visible {
53
+ outline-color: var(--sui-primary-accent-color-translucent);
54
+ z-index: 2;
55
+ }
74
56
 
75
- h3 {
76
- font-size: 24px;
77
- }
57
+ h1,
58
+ h2,
59
+ h3,
60
+ h4,
61
+ h5,
62
+ h6 {
63
+ margin: 0;
64
+ font-weight: var(--sui-font-weight-bold, bold);
65
+ line-height: var(--sui-line-height-default);
66
+ }
78
67
 
79
- h4 {
80
- font-size: 20px;
81
- }
68
+ h1 {
69
+ font-size: 32px;
70
+ }
82
71
 
83
- h5 {
84
- font-size: 16px;
85
- }
72
+ h2 {
73
+ font-size: 28px;
74
+ }
86
75
 
87
- h6 {
88
- font-size: 12px;
89
- }
76
+ h3 {
77
+ font-size: 24px;
78
+ }
90
79
 
91
- strong {
92
- font-weight: var(--sui-font-weight-bold, bold);
93
- }
80
+ h4 {
81
+ font-size: 20px;
82
+ }
94
83
 
95
- a {
96
- color: var(--sui-primary-accent-color-text);
97
- text-decoration: none;
98
- text-underline-offset: 2px;
84
+ h5 {
85
+ font-size: 16px;
86
+ }
99
87
 
100
- &:hover,
101
- &:focus,
102
- &:active {
103
- text-decoration: underline;
88
+ h6 {
89
+ font-size: 12px;
104
90
  }
105
91
 
106
- :root[data-underline-links="true"] &,
107
- :host[data-underline-links="true"] & {
108
- text-decoration: underline;
92
+ strong {
93
+ font-weight: var(--sui-font-weight-bold, bold);
109
94
  }
110
- }
111
95
 
112
- p,
113
- li {
114
- margin: var(--sui-paragraph-margin) 0;
115
- line-height: var(--sui-line-height-comfortable);
116
- }
96
+ a {
97
+ color: var(--sui-primary-accent-color-text);
98
+ text-decoration: none;
99
+ text-underline-offset: 2px;
100
+
101
+ &:hover,
102
+ &:focus,
103
+ &:active {
104
+ text-decoration: underline;
105
+ }
106
+
107
+ :global(:root[data-underline-links="true"]) &,
108
+ :global(:host[data-underline-links="true"]) & {
109
+ text-decoration: underline;
110
+ }
111
+ }
117
112
 
118
- ul,
119
- ol {
120
- padding-inline: 2em;
121
- }
113
+ p,
114
+ ul,
115
+ ol,
116
+ dl {
117
+ margin: var(--sui-paragraph-margin) 0;
118
+ line-height: var(--sui-line-height-comfortable);
119
+ }
122
120
 
123
- code,
124
- pre {
125
- border-radius: 4px;
126
- background-color: var(--sui-code-background-color);
127
- font-family: var(--sui-font-family-monospace);
128
- font-size: var(--sui-font-size-monospace);
129
- vertical-align: -0.05em;
130
- }
121
+ ul,
122
+ ol {
123
+ padding-inline: 2em;
124
+ }
131
125
 
132
- pre {
133
- padding: 8px;
134
- line-height: var(--sui-line-height-compact);
135
- -webkit-user-select: text;
136
- user-select: text;
137
- }
126
+ code,
127
+ pre {
128
+ border-radius: 4px;
129
+ background-color: var(--sui-code-background-color);
130
+ font-family: var(--sui-font-family-monospace);
131
+ font-size: var(--sui-font-size-monospace);
132
+ vertical-align: -0.05em;
133
+ }
138
134
 
139
- code {
140
- padding: 2px 4px;
141
- }
135
+ pre {
136
+ padding: 8px;
137
+ line-height: var(--sui-line-height-compact);
138
+ -webkit-user-select: text;
139
+ user-select: text;
140
+ }
142
141
 
143
- table {
144
- border-collapse: collapse;
145
- }
142
+ code {
143
+ padding: 2px 4px;
144
+ }
146
145
 
147
- th,
148
- td {
149
- border: 1px solid var(--sui-textbox-border-color);
150
- padding: 8px;
151
- }
146
+ table {
147
+ border-collapse: collapse;
148
+ }
152
149
 
153
- blockquote {
154
- margin-inline: 16px 0;
155
- border-inline-start: 4px solid var(--sui-textbox-border-color);
156
- padding-inline-start: 12px;
157
- }
150
+ th,
151
+ td {
152
+ border: 1px solid var(--sui-textbox-border-color);
153
+ padding: 8px;
154
+ }
158
155
 
159
- .disabled,
160
- .readonly,
161
- [aria-disabled="true"],
162
- [aria-readonly="true"],
163
- [inert] {
164
- cursor: default;
165
- pointer-events: none;
166
- -webkit-user-select: none;
167
- user-select: none;
168
- filter: grayscale(1) opacity(0.35);
156
+ blockquote {
157
+ margin-inline: 16px 0;
158
+ border-inline-start: 4px solid var(--sui-textbox-border-color);
159
+ padding-inline-start: 12px;
160
+ }
169
161
 
170
- :global(*) {
171
- filter: grayscale(0) opacity(1); // Maintain the opacity on child nodes
162
+ .disabled,
163
+ .readonly,
164
+ [aria-disabled="true"],
165
+ [aria-readonly="true"],
166
+ [inert]:not(body) {
167
+ cursor: default;
168
+ pointer-events: none;
169
+ -webkit-user-select: none;
170
+ user-select: none;
171
+ filter: grayscale(1) opacity(0.35);
172
+
173
+ :global(*) {
174
+ filter: grayscale(0) opacity(1); // Maintain the opacity on child nodes
175
+ }
172
176
  }
173
- }
174
177
 
175
- .disabled *,
176
- .readonly *,
177
- [aria-disabled="true"] *,
178
- [aria-readonly="true"] *,
179
- [inert] * {
180
- cursor: default;
181
- pointer-events: none;
182
- -webkit-user-select: none;
183
- user-select: none;
178
+ .disabled *,
179
+ .readonly *,
180
+ [aria-disabled="true"] *,
181
+ [aria-readonly="true"] *,
182
+ [inert] * {
183
+ cursor: default;
184
+ pointer-events: none;
185
+ -webkit-user-select: none;
186
+ user-select: none;
187
+ }
184
188
  }
package/package/styles/variables.scss CHANGED
@@ -70,209 +70,211 @@
70
70
  --sui-alert-border-color-lightness: 18%;
71
71
  }
72
72
 
73
- :root,
74
- :host {
75
- // Base HSL values
76
- --sui-base-hue: 210;
77
- // Foreground
78
- --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
79
- --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
80
- --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
81
- --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
82
- --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
83
- --sui-error-foreground-color: hsl(
84
- var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
85
- var(--sui-alert-foreground-color-lightness)
86
- );
87
- --sui-warning-foreground-color: hsl(
88
- var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
89
- var(--sui-alert-foreground-color-lightness)
90
- );
91
- --sui-info-foreground-color: hsl(
92
- var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
93
- var(--sui-alert-foreground-color-lightness)
94
- );
95
- --sui-success-foreground-color: hsl(
96
- var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
97
- var(--sui-alert-foreground-color-lightness)
98
- );
99
- // Background
100
- --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
101
- --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
102
- --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
103
- --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
104
- --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
105
- --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
106
- --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
107
- --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
108
- --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
109
- --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
110
- --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
111
- --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
112
- --sui-error-background-color: hsl(
113
- var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
114
- var(--sui-alert-background-color-lightness)
115
- );
116
- --sui-warning-background-color: hsl(
117
- var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
118
- var(--sui-alert-background-color-lightness)
119
- );
120
- --sui-info-background-color: hsl(
121
- var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
122
- var(--sui-alert-background-color-lightness)
123
- );
124
- --sui-success-background-color: hsl(
125
- var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
126
- var(--sui-alert-background-color-lightness)
127
- );
128
- // Outline
129
- --sui-focus-ring-width: 4px;
130
- // Borders
131
- --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
132
- --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
133
- --sui-error-border-color: hsl(
134
- var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
135
- var(--sui-alert-border-color-lightness)
136
- );
137
- --sui-warning-border-color: hsl(
138
- var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
139
- var(--sui-alert-border-color-lightness)
140
- );
141
- --sui-info-border-color: hsl(
142
- var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
143
- var(--sui-alert-border-color-lightness)
144
- );
145
- --sui-success-border-color: hsl(
146
- var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
147
- var(--sui-alert-border-color-lightness)
148
- );
149
- // Shadows
150
- --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
151
- --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
152
- // Text
153
- --sui-font-family-default: "Merriweather Sans", sans-serif;
154
- --sui-font-size-xxx-large: 23px;
155
- --sui-font-size-xx-large: 19px;
156
- --sui-font-size-x-large: 17px;
157
- --sui-font-size-large: 15px;
158
- --sui-font-size-default: 13px;
159
- --sui-font-size-small: 11px;
160
- --sui-font-size-x-small: 9px;
161
- --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
162
- --sui-font-weight-bold: 625; // ditto
163
- --sui-font-family-monospace: "Noto Sans Mono", monospace;
164
- --sui-font-size-monospace: 0.9em;
165
- --sui-line-height-default: 1.25;
166
- --sui-line-height-compact: 1.5;
167
- --sui-line-height-comfortable: 1.75;
168
- --sui-word-spacing-normal: 0.1ex;
169
- --sui-paragraph-margin: 1.75em;
170
- // Controls
171
- --sui-control-small-border-width: 1px;
172
- --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
173
- --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
174
- --sui-control-small-height: 24px;
175
- --sui-control-medium-border-width: 1px;
176
- --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
177
- --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
178
- --sui-control-medium-height: 32px;
179
- --sui-control-large-border-width: 1px;
180
- --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
181
- --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
182
- --sui-control-large-height: 48px;
183
- --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
184
- --sui-control-foreground-color: var(--sui-primary-foreground-color);
185
- --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
186
- --sui-control-font-family: var(--sui-font-family-default);
187
- --sui-control-font-size: var(--sui-font-size-default);
188
- --sui-control-line-height: var(--sui-line-height-compact);
189
- // Button
190
- --sui-button-small-border-radius: var(--sui-control-small-border-radius);
191
- --sui-button-small-padding: var(--sui-control-small-padding);
192
- --sui-button-small-height: var(--sui-control-small-height);
193
- --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
194
- --sui-button-medium-padding: var(--sui-control-medium-padding);
195
- --sui-button-medium-height: var(--sui-control-medium-height);
196
- --sui-button-large-border-radius: var(--sui-control-large-border-radius);
197
- --sui-button-large-padding: var(--sui-control-large-padding);
198
- --sui-button-large-height: var(--sui-control-large-height);
199
- --sui-button-border-color: var(--sui-control-border-color);
200
- --sui-button-background-color: var(--sui-control-background-color);
201
- // Checkbox, radio button, switch
202
- --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
203
- --sui-checkbox-height: 20px;
204
- --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
205
- --sui-checkbox-background-color: var(--sui-control-background-color);
206
- // Option & menu item
207
- --sui-option-border-radius: var(--sui-control-medium-border-radius);
208
- --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
209
- calc((var(--sui-control-medium-height) / 5));
210
- --sui-option-height: var(--sui-control-medium-height);
211
- // Listbox
212
- --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
213
- --sui-listbox-border-color: var(--sui-control-border-color);
214
- --sui-listbox-foreground-color: var(--sui-control-foreground-color);
215
- --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
216
- // Textbox: singleline & multiline text fields
217
- --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
218
- --sui-textbox-height: var(--sui-control-medium-height);
219
- --sui-textbox-border-color: var(--sui-control-border-color);
220
- --sui-textbox-foreground-color: var(--sui-control-foreground-color);
221
- --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
222
- --sui-textbox-font-family: var(--sui-font-family-default);
223
- --sui-textbox-font-size: var(--sui-font-size-default);
224
- --sui-textbox-singleline-padding: 0 8px;
225
- --sui-textbox-singleline-min-width: 240px;
226
- --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
227
- --sui-textbox-multiline-padding: 16px;
228
- --sui-textbox-multiline-min-width: 480px;
229
- --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
230
- // Tab
231
- --sui-tab-height: var(--sui-control-medium-height);
232
- --sui-tab-small-height: var(--sui-control-small-height);
233
- --sui-tab-medium-height: var(--sui-control-medium-height);
234
- --sui-tab-large-height: var(--sui-control-large-height);
235
- // Toolbar
236
- --sui-primary-toolbar-size: 48px;
237
- --sui-secondary-toolbar-size: 40px;
238
- // table
239
- --sui-primary-row-height: 48px;
240
- --sui-secondary-row-height: 40px;
73
+ :global {
74
+ :root,
75
+ :host {
76
+ // Base HSL values
77
+ --sui-base-hue: 210;
78
+ // Foreground
79
+ --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
80
+ --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
81
+ --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
82
+ --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
83
+ --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
84
+ --sui-error-foreground-color: hsl(
85
+ var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
86
+ var(--sui-alert-foreground-color-lightness)
87
+ );
88
+ --sui-warning-foreground-color: hsl(
89
+ var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
90
+ var(--sui-alert-foreground-color-lightness)
91
+ );
92
+ --sui-info-foreground-color: hsl(
93
+ var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
94
+ var(--sui-alert-foreground-color-lightness)
95
+ );
96
+ --sui-success-foreground-color: hsl(
97
+ var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
98
+ var(--sui-alert-foreground-color-lightness)
99
+ );
100
+ // Background
101
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
102
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
103
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
104
+ --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
105
+ --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
106
+ --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
107
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
108
+ --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
109
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
110
+ --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
111
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
112
+ --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
113
+ --sui-error-background-color: hsl(
114
+ var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
115
+ var(--sui-alert-background-color-lightness)
116
+ );
117
+ --sui-warning-background-color: hsl(
118
+ var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
119
+ var(--sui-alert-background-color-lightness)
120
+ );
121
+ --sui-info-background-color: hsl(
122
+ var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
123
+ var(--sui-alert-background-color-lightness)
124
+ );
125
+ --sui-success-background-color: hsl(
126
+ var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
127
+ var(--sui-alert-background-color-lightness)
128
+ );
129
+ // Outline
130
+ --sui-focus-ring-width: 4px;
131
+ // Borders
132
+ --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
133
+ --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
134
+ --sui-error-border-color: hsl(
135
+ var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
136
+ var(--sui-alert-border-color-lightness)
137
+ );
138
+ --sui-warning-border-color: hsl(
139
+ var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
140
+ var(--sui-alert-border-color-lightness)
141
+ );
142
+ --sui-info-border-color: hsl(
143
+ var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
144
+ var(--sui-alert-border-color-lightness)
145
+ );
146
+ --sui-success-border-color: hsl(
147
+ var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
148
+ var(--sui-alert-border-color-lightness)
149
+ );
150
+ // Shadows
151
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
152
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
153
+ // Text
154
+ --sui-font-family-default: "Merriweather Sans", sans-serif;
155
+ --sui-font-size-xxx-large: 23px;
156
+ --sui-font-size-xx-large: 19px;
157
+ --sui-font-size-x-large: 17px;
158
+ --sui-font-size-large: 15px;
159
+ --sui-font-size-default: 13px;
160
+ --sui-font-size-small: 11px;
161
+ --sui-font-size-x-small: 9px;
162
+ --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
163
+ --sui-font-weight-bold: 625; // ditto
164
+ --sui-font-family-monospace: "Noto Sans Mono", monospace;
165
+ --sui-font-size-monospace: 0.9em;
166
+ --sui-line-height-default: 1.25;
167
+ --sui-line-height-compact: 1.5;
168
+ --sui-line-height-comfortable: 1.75;
169
+ --sui-word-spacing-normal: 0.1ex;
170
+ --sui-paragraph-margin: 1.75em;
171
+ // Controls
172
+ --sui-control-small-border-width: 1px;
173
+ --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
174
+ --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
175
+ --sui-control-small-height: 24px;
176
+ --sui-control-medium-border-width: 1px;
177
+ --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
178
+ --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
179
+ --sui-control-medium-height: 32px;
180
+ --sui-control-large-border-width: 1px;
181
+ --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
182
+ --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
183
+ --sui-control-large-height: 48px;
184
+ --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
185
+ --sui-control-foreground-color: var(--sui-primary-foreground-color);
186
+ --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
187
+ --sui-control-font-family: var(--sui-font-family-default);
188
+ --sui-control-font-size: var(--sui-font-size-default);
189
+ --sui-control-line-height: var(--sui-line-height-compact);
190
+ // Button
191
+ --sui-button-small-border-radius: var(--sui-control-small-border-radius);
192
+ --sui-button-small-padding: var(--sui-control-small-padding);
193
+ --sui-button-small-height: var(--sui-control-small-height);
194
+ --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
195
+ --sui-button-medium-padding: var(--sui-control-medium-padding);
196
+ --sui-button-medium-height: var(--sui-control-medium-height);
197
+ --sui-button-large-border-radius: var(--sui-control-large-border-radius);
198
+ --sui-button-large-padding: var(--sui-control-large-padding);
199
+ --sui-button-large-height: var(--sui-control-large-height);
200
+ --sui-button-border-color: var(--sui-control-border-color);
201
+ --sui-button-background-color: var(--sui-control-background-color);
202
+ // Checkbox, radio button, switch
203
+ --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
204
+ --sui-checkbox-height: 20px;
205
+ --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
206
+ --sui-checkbox-background-color: var(--sui-control-background-color);
207
+ // Option & menu item
208
+ --sui-option-border-radius: var(--sui-control-medium-border-radius);
209
+ --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
210
+ calc((var(--sui-control-medium-height) / 5));
211
+ --sui-option-height: var(--sui-control-medium-height);
212
+ // Listbox
213
+ --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
214
+ --sui-listbox-border-color: var(--sui-control-border-color);
215
+ --sui-listbox-foreground-color: var(--sui-control-foreground-color);
216
+ --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
217
+ // Textbox: singleline & multiline text fields
218
+ --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
219
+ --sui-textbox-height: var(--sui-control-medium-height);
220
+ --sui-textbox-border-color: var(--sui-control-border-color);
221
+ --sui-textbox-foreground-color: var(--sui-control-foreground-color);
222
+ --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
223
+ --sui-textbox-font-family: var(--sui-font-family-default);
224
+ --sui-textbox-font-size: var(--sui-font-size-default);
225
+ --sui-textbox-singleline-padding: 0 8px;
226
+ --sui-textbox-singleline-min-width: 240px;
227
+ --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
228
+ --sui-textbox-multiline-padding: 16px;
229
+ --sui-textbox-multiline-min-width: 480px;
230
+ --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
231
+ // Tab
232
+ --sui-tab-height: var(--sui-control-medium-height);
233
+ --sui-tab-small-height: var(--sui-control-small-height);
234
+ --sui-tab-medium-height: var(--sui-control-medium-height);
235
+ --sui-tab-large-height: var(--sui-control-large-height);
236
+ // Toolbar
237
+ --sui-primary-toolbar-size: 48px;
238
+ --sui-secondary-toolbar-size: 40px;
239
+ // table
240
+ --sui-primary-row-height: 48px;
241
+ --sui-secondary-row-height: 40px;
241
242
 
242
- // Make controls larger on touch devices, e.g. mobile & tablet
243
- @media (pointer: coarse) {
244
- --sui-control-small-height: 30px;
245
- --sui-control-medium-height: 40px;
246
- --sui-control-large-height: 60px;
247
- --sui-checkbox-height: 24px;
248
- --sui-primary-toolbar-size: 56px;
249
- --sui-secondary-toolbar-size: 48px;
250
- --sui-primary-row-height: 56px;
251
- --sui-secondary-row-height: 48px;
252
- }
253
-
254
- @media (prefers-reduced-transparency) {
255
- --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
256
- --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
257
- --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
258
- }
259
-
260
- &[data-theme="light"] {
261
- @include light-theme;
262
- }
243
+ // Make controls larger on touch devices, e.g. mobile & tablet
244
+ @media (pointer: coarse) {
245
+ --sui-control-small-height: 30px;
246
+ --sui-control-medium-height: 40px;
247
+ --sui-control-large-height: 60px;
248
+ --sui-checkbox-height: 24px;
249
+ --sui-primary-toolbar-size: 56px;
250
+ --sui-secondary-toolbar-size: 48px;
251
+ --sui-primary-row-height: 56px;
252
+ --sui-secondary-row-height: 48px;
253
+ }
263
254
 
264
- &[data-theme="dark"] {
265
- @include dark-theme;
266
- }
255
+ @media (prefers-reduced-transparency) {
256
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
257
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
258
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
259
+ }
267
260
 
268
- // Follow the system appearance setting when the `data-theme` attribute is not set (yet)
269
- &:not([data-theme]) {
270
- @media (prefers-color-scheme: light) {
261
+ &[data-theme="light"] {
271
262
  @include light-theme;
272
263
  }
273
264
 
274
- @media (prefers-color-scheme: dark) {
265
+ &[data-theme="dark"] {
275
266
  @include dark-theme;
276
267
  }
268
+
269
+ // Follow the system appearance setting when the `data-theme` attribute is not set (yet)
270
+ &:not([data-theme]) {
271
+ @media (prefers-color-scheme: light) {
272
+ @include light-theme;
273
+ }
274
+
275
+ @media (prefers-color-scheme: dark) {
276
+ @include dark-theme;
277
+ }
278
+ }
277
279
  }
278
280
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.20.0",
3
+ "version": "0.20.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -28,50 +28,50 @@
28
28
  "test:unit": "vitest"
29
29
  },
30
30
  "dependencies": {
31
- "@lexical/code": "^0.20.0",
32
- "@lexical/dragon": "^0.20.0",
33
- "@lexical/history": "^0.20.0",
34
- "@lexical/link": "^0.20.0",
35
- "@lexical/list": "^0.20.0",
36
- "@lexical/markdown": "^0.20.0",
37
- "@lexical/rich-text": "^0.20.0",
38
- "@lexical/selection": "^0.20.0",
39
- "@lexical/table": "^0.20.0",
40
- "@lexical/utils": "^0.20.0",
31
+ "@lexical/code": "^0.21.0",
32
+ "@lexical/dragon": "^0.21.0",
33
+ "@lexical/history": "^0.21.0",
34
+ "@lexical/link": "^0.21.0",
35
+ "@lexical/list": "^0.21.0",
36
+ "@lexical/markdown": "^0.21.0",
37
+ "@lexical/rich-text": "^0.21.0",
38
+ "@lexical/selection": "^0.21.0",
39
+ "@lexical/table": "^0.21.0",
40
+ "@lexical/utils": "^0.21.0",
41
41
  "@sveltia/utils": "^0.5.0",
42
- "lexical": "^0.20.0"
42
+ "lexical": "^0.21.0"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "svelte": "^5.0.0"
46
46
  },
47
47
  "devDependencies": {
48
- "@playwright/test": "^1.48.2",
48
+ "@playwright/test": "^1.49.0",
49
49
  "@sveltejs/adapter-auto": "^3.3.1",
50
- "@sveltejs/kit": "^2.8.0",
50
+ "@sveltejs/kit": "^2.9.0",
51
51
  "@sveltejs/package": "^2.3.7",
52
- "@sveltejs/vite-plugin-svelte": "4.0.0",
53
- "cspell": "^8.16.0",
52
+ "@sveltejs/vite-plugin-svelte": "5.0.1",
53
+ "cspell": "^8.16.1",
54
54
  "eslint": "^8.57.1",
55
55
  "eslint-config-airbnb-base": "^15.0.0",
56
56
  "eslint-config-prettier": "^9.1.0",
57
57
  "eslint-plugin-import": "^2.31.0",
58
- "eslint-plugin-jsdoc": "^50.4.3",
59
- "eslint-plugin-svelte": "^2.46.0",
58
+ "eslint-plugin-jsdoc": "^50.6.0",
59
+ "eslint-plugin-svelte": "^2.46.1",
60
60
  "postcss": "^8.4.49",
61
61
  "postcss-html": "^1.7.0",
62
- "prettier": "^3.3.3",
63
- "prettier-plugin-svelte": "^3.2.8",
64
- "sass": "^1.80.6",
65
- "stylelint": "^16.10.0",
62
+ "prettier": "^3.4.2",
63
+ "prettier-plugin-svelte": "^3.3.2",
64
+ "sass": "^1.82.0",
65
+ "stylelint": "^16.11.0",
66
66
  "stylelint-config-recommended-scss": "^14.1.0",
67
- "stylelint-scss": "^6.8.1",
68
- "svelte": "5.1.15",
69
- "svelte-check": "^4.0.7",
67
+ "stylelint-scss": "^6.10.0",
68
+ "svelte": "5.7.1",
69
+ "svelte-check": "^4.1.1",
70
70
  "svelte-i18n": "^4.0.1",
71
71
  "svelte-preprocess": "^6.0.3",
72
72
  "tslib": "^2.8.1",
73
- "vite": "^5.4.11",
74
- "vitest": "^2.1.4"
73
+ "vite": "^6.0.3",
74
+ "vitest": "^2.1.8"
75
75
  },
76
76
  "exports": {
77
77
  ".": {