@sveltia/ui 0.31.2 → 0.31.4

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 (28) hide show
  1. package/dist/components/button/button.svelte +1 -1
  2. package/dist/components/button/select-button-group.svelte +1 -1
  3. package/dist/components/calendar/calendar.svelte +1 -1
  4. package/dist/components/grid/grid.svelte +1 -1
  5. package/dist/components/listbox/listbox.svelte +1 -1
  6. package/dist/components/menu/menu-item.svelte +1 -1
  7. package/dist/components/menu/menu.svelte +1 -1
  8. package/dist/components/radio/radio-group.svelte +1 -1
  9. package/dist/components/select/combobox.svelte +1 -1
  10. package/dist/components/tabs/tab-list.svelte +1 -1
  11. package/dist/components/text-editor/code-editor.svelte +1 -1
  12. package/dist/components/text-editor/core.js +2 -2
  13. package/dist/components/text-editor/lexical-root.svelte +1 -1
  14. package/dist/components/text-editor/store.svelte.js +1 -1
  15. package/dist/components/text-editor/text-editor.svelte +2 -2
  16. package/dist/components/text-editor/toolbar/code-language-switcher.svelte +1 -1
  17. package/dist/components/text-editor/toolbar/format-text-button.svelte +2 -2
  18. package/dist/components/text-editor/toolbar/insert-link-button.svelte +3 -3
  19. package/dist/components/text-editor/toolbar/text-editor-toolbar.svelte +1 -1
  20. package/dist/components/text-editor/toolbar/toggle-block-menu-item.svelte +2 -2
  21. package/dist/components/text-field/text-input.svelte +1 -1
  22. package/dist/components/util/app-shell.svelte +34 -11
  23. package/dist/index.d.ts +3 -3
  24. package/dist/index.js +2 -2
  25. package/dist/services/group.svelte.js +1 -1
  26. package/dist/styles/core.scss +30 -12
  27. package/dist/styles/variables.scss +4 -0
  28. package/package.json +10 -10
@@ -5,7 +5,7 @@
5
5
  @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
6
6
  -->
7
7
  <script>
8
- import { activateKeyShortcuts } from '../../services/events.svelte';
8
+ import { activateKeyShortcuts } from '../../services/events.svelte.js';
9
9
  import TruncatedText from '../typography/truncated-text.svelte';
10
10
  import Popup from '../util/popup.svelte';
11
11
 
@@ -5,7 +5,7 @@
5
5
  @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
6
6
  -->
7
7
  <script>
8
- import { activateGroup } from '../../services/group.svelte';
8
+ import { activateGroup } from '../../services/group.svelte.js';
9
9
 
10
10
  /**
11
11
  * @import { Snippet } from 'svelte';
@@ -4,7 +4,7 @@
4
4
  -->
5
5
  <script>
6
6
  import { _ } from 'svelte-i18n';
7
- import { isRTL } from '../../services/i18n';
7
+ import { isRTL } from '../../services/i18n.js';
8
8
  import Button from '../button/button.svelte';
9
9
  import Divider from '../divider/divider.svelte';
10
10
  import Spacer from '../divider/spacer.svelte';
@@ -5,7 +5,7 @@
5
5
  @see https://w3c.github.io/aria/#grid
6
6
  -->
7
7
  <script>
8
- import { activateGroup } from '../../services/group.svelte';
8
+ import { activateGroup } from '../../services/group.svelte.js';
9
9
 
10
10
  /**
11
11
  * @import { Snippet } from 'svelte';
@@ -6,7 +6,7 @@
6
6
  @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
7
7
  -->
8
8
  <script>
9
- import { activateGroup } from '../../services/group.svelte';
9
+ import { activateGroup } from '../../services/group.svelte.js';
10
10
 
11
11
  /**
12
12
  * @import { Snippet } from 'svelte';
@@ -5,7 +5,7 @@
5
5
  -->
6
6
  <script>
7
7
  import { onMount } from 'svelte';
8
- import { isRTL } from '../../services/i18n';
8
+ import { isRTL } from '../../services/i18n.js';
9
9
  import Button from '../button/button.svelte';
10
10
  import Icon from '../icon/icon.svelte';
11
11
  import Popup from '../util/popup.svelte';
@@ -5,7 +5,7 @@
5
5
  @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
6
6
  -->
7
7
  <script>
8
- import { activateGroup } from '../../services/group.svelte';
8
+ import { activateGroup } from '../../services/group.svelte.js';
9
9
 
10
10
  /**
11
11
  * @import { Snippet } from 'svelte';
@@ -5,7 +5,7 @@
5
5
  @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
6
6
  -->
7
7
  <script>
8
- import { activateGroup } from '../../services/group.svelte';
8
+ import { activateGroup } from '../../services/group.svelte.js';
9
9
 
10
10
  /**
11
11
  * @import { Snippet } from 'svelte';
@@ -7,7 +7,7 @@
7
7
  -->
8
8
  <script>
9
9
  import { _ } from 'svelte-i18n';
10
- import { getSelectedItemDetail } from '../../services/select.svelte';
10
+ import { getSelectedItemDetail } from '../../services/select.svelte.js';
11
11
  import Button from '../button/button.svelte';
12
12
  import Icon from '../icon/icon.svelte';
13
13
  import Listbox from '../listbox/listbox.svelte';
@@ -6,7 +6,7 @@
6
6
  -->
7
7
  <script>
8
8
  import { onMount } from 'svelte';
9
- import { activateGroup } from '../../services/group.svelte';
9
+ import { activateGroup } from '../../services/group.svelte.js';
10
10
 
11
11
  /**
12
12
  * @import { Snippet } from 'svelte';
@@ -8,7 +8,7 @@
8
8
  import Alert from '../alert/alert.svelte';
9
9
  import Toast from '../toast/toast.svelte';
10
10
  import LexicalRoot from './lexical-root.svelte';
11
- import { createEditorStore } from './store.svelte';
11
+ import { createEditorStore } from './store.svelte.js';
12
12
  import CodeEditorToolbar from './toolbar/code-editor-toolbar.svelte';
13
13
 
14
14
  /**
@@ -52,8 +52,8 @@ import {
52
52
  $isRangeSelection as isRangeSelection,
53
53
  } from 'lexical';
54
54
  import prismComponents from 'prismjs/components';
55
- import { BLOCK_BUTTON_TYPES, TEXT_FORMAT_BUTTON_TYPES } from './constants';
56
- import { TABLE } from './transformers/table';
55
+ import { BLOCK_BUTTON_TYPES, TEXT_FORMAT_BUTTON_TYPES } from './constants.js';
56
+ import { TABLE } from './transformers/table.js';
57
57
 
58
58
  /**
59
59
  * @import { CreateEditorArgs, LexicalEditor } from 'lexical';
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { getContext, onMount } from 'svelte';
3
- import { initEditor } from './core';
3
+ import { initEditor } from './core.js';
4
4
 
5
5
  /**
6
6
  * @import { Snippet } from 'svelte';
@@ -1,5 +1,5 @@
1
1
  import { generateElementId } from '@sveltia/utils/element';
2
- import { convertMarkdownToLexical } from './core';
2
+ import { convertMarkdownToLexical } from './core.js';
3
3
 
4
4
  /**
5
5
  * @import { TextEditorConfig, TextEditorSelectionState, TextEditorStore } from '../../typedefs';
@@ -8,9 +8,9 @@
8
8
  import Alert from '../alert/alert.svelte';
9
9
  import TextArea from '../text-field/text-area.svelte';
10
10
  import Toast from '../toast/toast.svelte';
11
- import { BLOCK_BUTTON_TYPES, INLINE_BUTTON_TYPES } from './constants';
11
+ import { BLOCK_BUTTON_TYPES, INLINE_BUTTON_TYPES } from './constants.js';
12
12
  import LexicalRoot from './lexical-root.svelte';
13
- import { createEditorStore } from './store.svelte';
13
+ import { createEditorStore } from './store.svelte.js';
14
14
  import TextEditorToolbar from './toolbar/text-editor-toolbar.svelte';
15
15
 
16
16
  /**
@@ -6,7 +6,7 @@
6
6
  import { _ } from 'svelte-i18n';
7
7
  import Option from '../../listbox/option.svelte';
8
8
  import Select from '../../select/select.svelte';
9
- import { focusEditor, loadCodeHighlighter } from '../core';
9
+ import { focusEditor, loadCodeHighlighter } from '../core.js';
10
10
 
11
11
  /**
12
12
  * @import { TextEditorStore } from '../../../typedefs';
@@ -4,8 +4,8 @@
4
4
  import { _ } from 'svelte-i18n';
5
5
  import Button from '../../button/button.svelte';
6
6
  import Icon from '../../icon/icon.svelte';
7
- import { AVAILABLE_BUTTONS } from '../constants';
8
- import { focusEditor } from '../core';
7
+ import { AVAILABLE_BUTTONS } from '../constants.js';
8
+ import { focusEditor } from '../core.js';
9
9
 
10
10
  /**
11
11
  * @import { TextEditorFormatType, TextEditorStore } from '../../../typedefs';
@@ -15,13 +15,13 @@
15
15
  } from 'lexical';
16
16
  import { getContext } from 'svelte';
17
17
  import { _ } from 'svelte-i18n';
18
- import { isMac, matchShortcuts } from '../../../services/events.svelte';
18
+ import { isMac, matchShortcuts } from '../../../services/events.svelte.js';
19
19
  import Button from '../../button/button.svelte';
20
20
  import Dialog from '../../dialog/dialog.svelte';
21
21
  import Icon from '../../icon/icon.svelte';
22
22
  import TextInput from '../../text-field/text-input.svelte';
23
- import { AVAILABLE_BUTTONS } from '../constants';
24
- import { focusEditor } from '../core';
23
+ import { AVAILABLE_BUTTONS } from '../constants.js';
24
+ import { focusEditor } from '../core.js';
25
25
 
26
26
  /**
27
27
  * @import { TextEditorStore } from '../../../typedefs';
@@ -14,7 +14,7 @@
14
14
  BLOCK_BUTTON_TYPES,
15
15
  IMAGE_COMPONENT_IDS,
16
16
  INLINE_BUTTON_TYPES,
17
- } from '../constants';
17
+ } from '../constants.js';
18
18
  import CodeLanguageSwitcher from './code-language-switcher.svelte';
19
19
  import FormatTextButton from './format-text-button.svelte';
20
20
  import InsertImageButton from './insert-image-button.svelte';
@@ -14,8 +14,8 @@
14
14
  import { _ } from 'svelte-i18n';
15
15
  import Icon from '../../icon/icon.svelte';
16
16
  import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
17
- import { AVAILABLE_BUTTONS } from '../constants';
18
- import { focusEditor } from '../core';
17
+ import { AVAILABLE_BUTTONS } from '../constants.js';
18
+ import { focusEditor } from '../core.js';
19
19
 
20
20
  /**
21
21
  * @import { TextEditorBlockType, TextEditorStore } from '../../../typedefs';
@@ -5,7 +5,7 @@
5
5
  @see https://w3c.github.io/aria/#textbox
6
6
  -->
7
7
  <script>
8
- import { activateKeyShortcuts } from '../../services/events.svelte';
8
+ import { activateKeyShortcuts } from '../../services/events.svelte.js';
9
9
  import TruncatedText from '../typography/truncated-text.svelte';
10
10
 
11
11
  /**
@@ -205,6 +205,10 @@
205
205
  --sui-line-height-compact: 1.5;
206
206
  --sui-line-height-comfortable: 1.75;
207
207
  --sui-word-spacing-normal: 0.1ex;
208
+ --sui-heading-margin: 0;
209
+ --sui-heading-font-family: var(--sui-font-family-default);
210
+ --sui-heading-font-weight: var(--sui-font-weight-bold);
211
+ --sui-heading-line-height: var(--sui-line-height-default);
208
212
  --sui-paragraph-margin: 1.75em;
209
213
  --sui-control-small-border-width: 1px;
210
214
  --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
@@ -468,28 +472,47 @@
468
472
  outline-color: var(--sui-primary-accent-color-translucent);
469
473
  z-index: 2;
470
474
  }
471
- :global(:is(h1, h2, h3, h4, h5, h6)) {
472
- margin: 0;
473
- font-weight: var(--sui-font-weight-bold, bold);
474
- line-height: var(--sui-line-height-default);
475
- }
476
475
  :global(h1) {
477
- font-size: 32px;
476
+ margin: var(--sui-h1-margin, var(--sui-heading-margin));
477
+ font-size: var(--sui-h1-font-size, 32px);
478
+ font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
479
+ font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
480
+ line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
478
481
  }
479
482
  :global(h2) {
480
- font-size: 28px;
483
+ margin: var(--sui-h2-margin, var(--sui-heading-margin));
484
+ font-size: var(--sui-h2-font-size, 28px);
485
+ font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
486
+ font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
487
+ line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
481
488
  }
482
489
  :global(h3) {
483
- font-size: 24px;
490
+ margin: var(--sui-h3-margin, var(--sui-heading-margin));
491
+ font-size: var(--sui-h3-font-size, 24px);
492
+ font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
493
+ font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
494
+ line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
484
495
  }
485
496
  :global(h4) {
486
- font-size: 20px;
497
+ margin: var(--sui-h4-margin, var(--sui-heading-margin));
498
+ font-size: var(--sui-h4-font-size, 20px);
499
+ font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
500
+ font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
501
+ line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
487
502
  }
488
503
  :global(h5) {
489
- font-size: 16px;
504
+ margin: var(--sui-h5-margin, var(--sui-heading-margin));
505
+ font-size: var(--sui-h5-font-size, 16px);
506
+ font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
507
+ font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
508
+ line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
490
509
  }
491
510
  :global(h6) {
492
- font-size: 12px;
511
+ margin: var(--sui-h6-margin, var(--sui-heading-margin));
512
+ font-size: var(--sui-h6-font-size, 12px);
513
+ font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
514
+ font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
515
+ line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));
493
516
  }
494
517
  :global(strong) {
495
518
  font-weight: var(--sui-font-weight-bold, bold);
package/dist/index.d.ts CHANGED
@@ -73,7 +73,7 @@ export { default as AppShell } from "./components/util/app-shell.svelte";
73
73
  export { default as EmptyState } from "./components/util/empty-state.svelte";
74
74
  export { default as Group } from "./components/util/group.svelte";
75
75
  export { default as Modal } from "./components/util/modal.svelte";
76
- export * from "./typedefs";
77
- import { initLocales } from './services/i18n';
78
- import { isRTL } from './services/i18n';
76
+ export * from "./typedefs.js";
77
+ import { initLocales } from './services/i18n.js';
78
+ import { isRTL } from './services/i18n.js';
79
79
  export { initLocales, isRTL };
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { initLocales, isRTL } from './services/i18n';
1
+ import { initLocales, isRTL } from './services/i18n.js';
2
2
 
3
3
  initLocales();
4
4
 
@@ -80,4 +80,4 @@ export { default as Modal } from './components/util/modal.svelte';
80
80
  export { initLocales, isRTL };
81
81
 
82
82
  // eslint-disable-next-line import/export
83
- export * from './typedefs';
83
+ export * from './typedefs.js';
@@ -6,7 +6,7 @@ import { generateElementId } from '@sveltia/utils/element';
6
6
  import { sleep } from '@sveltia/utils/misc';
7
7
  import { get } from 'svelte/store';
8
8
  import { isRTL } from './i18n.js';
9
- import { getSelectedItemDetail } from './select.svelte';
9
+ import { getSelectedItemDetail } from './select.svelte.js';
10
10
 
11
11
  /**
12
12
  * Normalize the given string for search value comparison. Since `transliterate` is slow, we only
@@ -48,34 +48,52 @@
48
48
  z-index: 2;
49
49
  }
50
50
 
51
- :is(h1, h2, h3, h4, h5, h6) {
52
- margin: 0;
53
- font-weight: var(--sui-font-weight-bold, bold);
54
- line-height: var(--sui-line-height-default);
55
- }
56
-
57
51
  h1 {
58
- font-size: 32px;
52
+ margin: var(--sui-h1-margin, var(--sui-heading-margin));
53
+ font-size: var(--sui-h1-font-size, 32px);
54
+ font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
55
+ font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
56
+ line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
59
57
  }
60
58
 
61
59
  h2 {
62
- font-size: 28px;
60
+ margin: var(--sui-h2-margin, var(--sui-heading-margin));
61
+ font-size: var(--sui-h2-font-size, 28px);
62
+ font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
63
+ font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
64
+ line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
63
65
  }
64
66
 
65
67
  h3 {
66
- font-size: 24px;
68
+ margin: var(--sui-h3-margin, var(--sui-heading-margin));
69
+ font-size: var(--sui-h3-font-size, 24px);
70
+ font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
71
+ font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
72
+ line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
67
73
  }
68
74
 
69
75
  h4 {
70
- font-size: 20px;
76
+ margin: var(--sui-h4-margin, var(--sui-heading-margin));
77
+ font-size: var(--sui-h4-font-size, 20px);
78
+ font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
79
+ font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
80
+ line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
71
81
  }
72
82
 
73
83
  h5 {
74
- font-size: 16px;
84
+ margin: var(--sui-h5-margin, var(--sui-heading-margin));
85
+ font-size: var(--sui-h5-font-size, 16px);
86
+ font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
87
+ font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
88
+ line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
75
89
  }
76
90
 
77
91
  h6 {
78
- font-size: 12px;
92
+ margin: var(--sui-h6-margin, var(--sui-heading-margin));
93
+ font-size: var(--sui-h6-font-size, 12px);
94
+ font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
95
+ font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
96
+ line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));
79
97
  }
80
98
 
81
99
  strong {
@@ -167,6 +167,10 @@
167
167
  --sui-line-height-compact: 1.5;
168
168
  --sui-line-height-comfortable: 1.75;
169
169
  --sui-word-spacing-normal: 0.1ex;
170
+ --sui-heading-margin: 0;
171
+ --sui-heading-font-family: var(--sui-font-family-default);
172
+ --sui-heading-font-weight: var(--sui-font-weight-bold);
173
+ --sui-heading-line-height: var(--sui-line-height-default);
170
174
  --sui-paragraph-margin: 1.75em;
171
175
  // Controls
172
176
  --sui-control-small-border-width: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.31.2",
3
+ "version": "0.31.4",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -18,7 +18,7 @@
18
18
  "@lexical/selection": "^0.37.0",
19
19
  "@lexical/table": "^0.37.0",
20
20
  "@lexical/utils": "^0.37.0",
21
- "@sveltia/utils": "^0.8.5",
21
+ "@sveltia/utils": "^0.8.6",
22
22
  "lexical": "^0.37.0",
23
23
  "prismjs": "^1.30.0",
24
24
  "svelte-i18n": "^4.0.1"
@@ -27,18 +27,18 @@
27
27
  "svelte": "^5.0.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@sveltejs/adapter-auto": "^6.1.1",
31
- "@sveltejs/kit": "^2.46.5",
30
+ "@sveltejs/adapter-auto": "^7.0.0",
31
+ "@sveltejs/kit": "^2.47.3",
32
32
  "@sveltejs/package": "^2.5.4",
33
33
  "@sveltejs/vite-plugin-svelte": "^6.2.1",
34
- "cspell": "^9.2.1",
34
+ "cspell": "^9.2.2",
35
35
  "eslint": "^8.57.1",
36
36
  "eslint-config-airbnb-base": "^15.0.0",
37
37
  "eslint-config-prettier": "^10.1.8",
38
38
  "eslint-plugin-import": "^2.32.0",
39
- "eslint-plugin-jsdoc": "^61.1.1",
39
+ "eslint-plugin-jsdoc": "^61.1.8",
40
40
  "eslint-plugin-svelte": "^2.46.1",
41
- "oxlint": "^1.22.0",
41
+ "oxlint": "^1.24.0",
42
42
  "postcss": "^8.5.6",
43
43
  "postcss-html": "^1.8.0",
44
44
  "prettier": "^3.6.2",
@@ -47,12 +47,12 @@
47
47
  "stylelint": "^16.25.0",
48
48
  "stylelint-config-recommended-scss": "^16.0.2",
49
49
  "stylelint-scss": "^6.12.1",
50
- "svelte": "^5.39.12",
50
+ "svelte": "^5.41.0",
51
51
  "svelte-check": "^4.3.3",
52
52
  "svelte-preprocess": "^6.0.3",
53
53
  "tslib": "^2.8.1",
54
- "vite": "^7.1.9",
55
- "vitest": "^3.2.4"
54
+ "vite": "^7.1.12",
55
+ "vitest": "^4.0.3"
56
56
  },
57
57
  "exports": {
58
58
  ".": {