@sveltia/ui 0.25.1 → 0.25.3

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 (16) hide show
  1. package/dist/components/checkbox/checkbox.svelte +5 -7
  2. package/dist/components/dialog/dialog.svelte +1 -2
  3. package/dist/components/disclosure/disclosure.svelte +1 -2
  4. package/dist/components/drawer/drawer.svelte +2 -2
  5. package/dist/components/grid/grid-body.svelte +1 -3
  6. package/dist/components/listbox/option-group.svelte +1 -3
  7. package/dist/components/menu/menu-item-group.svelte +1 -3
  8. package/dist/components/radio/radio.svelte +1 -2
  9. package/dist/components/select/combobox.svelte +1 -2
  10. package/dist/components/table/table-body.svelte +1 -2
  11. package/dist/components/text-editor/toolbar/insert-link-button.svelte +1 -2
  12. package/dist/components/text-field/number-input.svelte +2 -2
  13. package/dist/components/text-field/password-input.svelte +1 -2
  14. package/dist/components/text-field/search-bar.svelte +2 -2
  15. package/dist/components/text-field/text-input.svelte +1 -2
  16. package/package.json +19 -19
package/dist/components/checkbox/checkbox.svelte CHANGED
@@ -6,7 +6,6 @@
6
6
  @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
7
7
  -->
8
8
  <script>
9
- import { generateElementId } from '@sveltia/utils/element';
10
9
  import Button from '../button/button.svelte';
11
10
  import Icon from '../icon/icon.svelte';
12
11
 
@@ -48,7 +47,7 @@
48
47
  /* eslint-enable prefer-const */
49
48
  } = $props();
50
49
 
51
- const id = generateElementId('checkbox');
50
+ const id = $props.id();
52
51
 
53
52
  /**
54
53
  * Reference to the `<button>` element.
@@ -105,8 +104,10 @@
105
104
  {#snippet startIcon()}
106
105
  {#if checkIcon}
107
106
  {@render checkIcon()}
108
- {:else}
109
- <Icon name={indeterminate ? 'remove' : 'check'} />
107
+ {:else if indeterminate}
108
+ <Icon name="remove" />
109
+ {:else if checked}
110
+ <Icon name="check" />
110
111
  {/if}
111
112
  {/snippet}
112
113
  </Button>
@@ -171,9 +172,6 @@
171
172
  color: var(--sui-checkbox-foreground-color-checked, var(--sui-primary-accent-color-inverted));
172
173
  background-color: var(--sui-checkbox-background-color-checked, var(--sui-primary-accent-color));
173
174
  }
174
- .checkbox :global(button[aria-checked="false"]) {
175
- color: transparent;
176
- }
177
175
  .checkbox :global(button[aria-invalid="true"]) {
178
176
  border-color: var(--sui-error-border-color);
179
177
  color: var(--sui-error-foreground-color);
package/dist/components/dialog/dialog.svelte CHANGED
@@ -5,7 +5,6 @@
5
5
  @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
6
6
  -->
7
7
  <script>
8
- import { generateElementId } from '@sveltia/utils/element';
9
8
  import { sleep } from '@sveltia/utils/misc';
10
9
  import { _ } from 'svelte-i18n';
11
10
  import Button from '../button/button.svelte';
@@ -47,7 +46,7 @@
47
46
  * The ID of the drawer.
48
47
  * @type {string}
49
48
  */
50
- const id = generateElementId('dialog');
49
+ const id = $props.id();
51
50
  /**
52
51
  * A reference to the modal component.
53
52
  * @type {any}
package/dist/components/disclosure/disclosure.svelte CHANGED
@@ -5,7 +5,6 @@
5
5
  @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
6
6
  -->
7
7
  <script>
8
- import { generateElementId } from '@sveltia/utils/element';
9
8
  import Button from '../button/button.svelte';
10
9
  import Icon from '../icon/icon.svelte';
11
10
 
@@ -41,7 +40,7 @@
41
40
  /* eslint-enable prefer-const */
42
41
  } = $props();
43
42
 
44
- const id = generateElementId('disclosure');
43
+ const id = $props.id();
45
44
  </script>
46
45
 
47
46
  <div
package/dist/components/drawer/drawer.svelte CHANGED
@@ -5,7 +5,6 @@
5
5
  @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
6
6
  -->
7
7
  <script>
8
- import { generateElementId } from '@sveltia/utils/element';
9
8
  import { _ } from 'svelte-i18n';
10
9
  import Button from '../button/button.svelte';
11
10
  import Spacer from '../divider/spacer.svelte';
@@ -53,7 +52,8 @@
53
52
  * The ID of the drawer.
54
53
  * @type {string}
55
54
  */
56
- const id = generateElementId('drawer');
55
+ const id = $props.id();
56
+
57
57
  /**
58
58
  * A reference to the modal component.
59
59
  * @type {any}
package/dist/components/grid/grid-body.svelte CHANGED
@@ -5,8 +5,6 @@
5
5
  @see https://w3c.github.io/aria/#rowgroup
6
6
  -->
7
7
  <script>
8
- import { generateElementId } from '@sveltia/utils/element';
9
-
10
8
  /**
11
9
  * @typedef {object} Props
12
10
  * @property {string} [class] - The `class` attribute on the wrapper element.
@@ -26,7 +24,7 @@
26
24
  /* eslint-enable prefer-const */
27
25
  } = $props();
28
26
 
29
- const id = generateElementId('tbody');
27
+ const id = $props.id();
30
28
  </script>
31
29
 
32
30
  <div
package/dist/components/listbox/option-group.svelte CHANGED
@@ -7,8 +7,6 @@
7
7
  @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
8
8
  -->
9
9
  <script>
10
- import { generateElementId } from '@sveltia/utils/element';
11
-
12
10
  /**
13
11
  * @typedef {object} Props
14
12
  * @property {string} [class] - The `class` attribute on the wrapper element.
@@ -34,7 +32,7 @@
34
32
  /* eslint-enable prefer-const */
35
33
  } = $props();
36
34
 
37
- const id = generateElementId('optgroup');
35
+ const id = $props.id();
38
36
  </script>
39
37
 
40
38
  <div
package/dist/components/menu/menu-item-group.svelte CHANGED
@@ -3,8 +3,6 @@
3
3
  A menu item group.
4
4
  -->
5
5
  <script>
6
- import { generateElementId } from '@sveltia/utils/element';
7
-
8
6
  /**
9
7
  * @typedef {object} Props
10
8
  * @property {string} [class] - The `class` attribute on the wrapper element.
@@ -29,7 +27,7 @@
29
27
  /* eslint-enable prefer-const */
30
28
  } = $props();
31
29
 
32
- const id = generateElementId('group');
30
+ const id = $props.id();
33
31
  </script>
34
32
 
35
33
  <div
package/dist/components/radio/radio.svelte CHANGED
@@ -6,7 +6,6 @@
6
6
  @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
7
7
  -->
8
8
  <script>
9
- import { generateElementId } from '@sveltia/utils/element';
10
9
  import Button from '../button/button.svelte';
11
10
 
12
11
  /**
@@ -45,7 +44,7 @@
45
44
  /* eslint-enable prefer-const */
46
45
  } = $props();
47
46
 
48
- const id = generateElementId('checkbox');
47
+ const id = $props.id();
49
48
 
50
49
  /**
51
50
  * Reference to the `<button>` element.
package/dist/components/select/combobox.svelte CHANGED
@@ -6,7 +6,6 @@
6
6
  @todo Add DOM API compatibility.
7
7
  -->
8
8
  <script>
9
- import { generateElementId } from '@sveltia/utils/element';
10
9
  import { _ } from 'svelte-i18n';
11
10
  import Button from '../button/button.svelte';
12
11
  import Icon from '../icon/icon.svelte';
@@ -37,7 +36,7 @@
37
36
  /* eslint-enable prefer-const */
38
37
  } = $props();
39
38
 
40
- const id = generateElementId('combobox');
39
+ const id = $props.id();
41
40
  const selectedSelector = '[role="option"][aria-selected="true"]';
42
41
  let isPopupOpen = $state(false);
43
42
 
package/dist/components/table/table-body.svelte CHANGED
@@ -5,7 +5,6 @@
5
5
  @see https://w3c.github.io/aria/#rowgroup
6
6
  -->
7
7
  <script>
8
- import { generateElementId } from '@sveltia/utils/element';
9
8
  /**
10
9
  * @typedef {object} Props
11
10
  * @property {string} [class] - The `class` attribute on the wrapper element.
@@ -25,7 +24,7 @@
25
24
  /* eslint-enable prefer-const */
26
25
  } = $props();
27
26
 
28
- const id = generateElementId('tbody');
27
+ const id = $props.id();
29
28
  </script>
30
29
 
31
30
  <div
package/dist/components/text-editor/toolbar/insert-link-button.svelte CHANGED
@@ -1,7 +1,6 @@
1
1
  <script>
2
2
  import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
3
3
  import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
4
- import { generateElementId } from '@sveltia/utils/element';
5
4
  import {
6
5
  COMMAND_PRIORITY_NORMAL,
7
6
  KEY_DOWN_COMMAND,
@@ -24,7 +23,7 @@
24
23
  import TextInput from '../../text-field/text-input.svelte';
25
24
  import { focusEditor } from '../core';
26
25
 
27
- const id = generateElementId('insert-link');
26
+ const id = $props.id();
28
27
 
29
28
  /**
30
29
  * Button type.
package/dist/components/text-field/number-input.svelte CHANGED
@@ -5,7 +5,6 @@
5
5
  @see https://w3c.github.io/aria/#textbox
6
6
  -->
7
7
  <script>
8
- import { generateElementId } from '@sveltia/utils/element';
9
8
  import { untrack } from 'svelte';
10
9
  import { _ } from 'svelte-i18n';
11
10
  import Button from '../button/button.svelte';
@@ -48,7 +47,8 @@
48
47
  /* eslint-enable prefer-const */
49
48
  } = $props();
50
49
 
51
- const id = generateElementId('input');
50
+ const id = $props.id();
51
+
52
52
  let edited = $state(false);
53
53
  let inputValue = $state('');
54
54
 
package/dist/components/text-field/password-input.svelte CHANGED
@@ -6,7 +6,6 @@
6
6
  @see https://w3c.github.io/aria/#textbox
7
7
  -->
8
8
  <script>
9
- import { generateElementId } from '@sveltia/utils/element';
10
9
  import { _ } from 'svelte-i18n';
11
10
  import Button from '../button/button.svelte';
12
11
  import Icon from '../icon/icon.svelte';
@@ -38,7 +37,7 @@
38
37
  /* eslint-enable prefer-const */
39
38
  } = $props();
40
39
 
41
- const id = generateElementId('input');
40
+ const id = $props.id();
42
41
 
43
42
  /**
44
43
  * Reference to the `<input>` element.
package/dist/components/text-field/search-bar.svelte CHANGED
@@ -7,7 +7,6 @@
7
7
  -->
8
8
 
9
9
  <script>
10
- import { generateElementId } from '@sveltia/utils/element';
11
10
  import { _ } from 'svelte-i18n';
12
11
  import Button from '../button/button.svelte';
13
12
  import Icon from '../icon/icon.svelte';
@@ -41,7 +40,8 @@
41
40
  /* eslint-enable prefer-const */
42
41
  } = $props();
43
42
 
44
- const id = generateElementId('searchbox');
43
+ const id = $props.id();
44
+
45
45
  /**
46
46
  * Reference to the `<input>` element.
47
47
  * @type {HTMLInputElement | undefined}
package/dist/components/text-field/text-input.svelte CHANGED
@@ -5,7 +5,6 @@
5
5
  @see https://w3c.github.io/aria/#textbox
6
6
  -->
7
7
  <script>
8
- import { generateElementId } from '@sveltia/utils/element';
9
8
  import { activateKeyShortcuts } from '../../services/events.svelte';
10
9
 
11
10
  /**
@@ -39,7 +38,7 @@
39
38
  /* eslint-enable prefer-const */
40
39
  } = $props();
41
40
 
42
- const id = generateElementId('input');
41
+ const id = $props.id();
43
42
  </script>
44
43
 
45
44
  <div
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.25.1",
3
+ "version": "0.25.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -28,27 +28,27 @@
28
28
  "test:unit": "vitest"
29
29
  },
30
30
  "dependencies": {
31
- "@lexical/code": "^0.27.0",
32
- "@lexical/dragon": "^0.27.0",
33
- "@lexical/history": "^0.27.0",
34
- "@lexical/link": "^0.27.0",
35
- "@lexical/list": "^0.27.0",
36
- "@lexical/markdown": "^0.27.0",
37
- "@lexical/rich-text": "^0.27.0",
38
- "@lexical/selection": "^0.27.0",
39
- "@lexical/table": "^0.27.0",
40
- "@lexical/utils": "^0.27.0",
41
- "@sveltia/utils": "^0.6.4",
42
- "lexical": "^0.27.0",
31
+ "@lexical/code": "^0.27.1",
32
+ "@lexical/dragon": "^0.27.1",
33
+ "@lexical/history": "^0.27.1",
34
+ "@lexical/link": "^0.27.1",
35
+ "@lexical/list": "^0.27.1",
36
+ "@lexical/markdown": "^0.27.1",
37
+ "@lexical/rich-text": "^0.27.1",
38
+ "@lexical/selection": "^0.27.1",
39
+ "@lexical/table": "^0.27.1",
40
+ "@lexical/utils": "^0.27.1",
41
+ "@sveltia/utils": "^0.7.0",
42
+ "lexical": "^0.27.1",
43
43
  "prismjs": "^1.29.0"
44
44
  },
45
45
  "peerDependencies": {
46
46
  "svelte": "^5.0.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@playwright/test": "^1.50.1",
49
+ "@playwright/test": "^1.51.0",
50
50
  "@sveltejs/adapter-auto": "^4.0.0",
51
- "@sveltejs/kit": "^2.17.3",
51
+ "@sveltejs/kit": "^2.18.0",
52
52
  "@sveltejs/package": "^2.3.10",
53
53
  "@sveltejs/vite-plugin-svelte": "5.0.3",
54
54
  "cspell": "^8.17.5",
@@ -66,13 +66,13 @@
66
66
  "stylelint": "^16.15.0",
67
67
  "stylelint-config-recommended-scss": "^14.1.0",
68
68
  "stylelint-scss": "^6.11.1",
69
- "svelte": "5.21.0",
70
- "svelte-check": "^4.1.4",
69
+ "svelte": "5.22.5",
70
+ "svelte-check": "^4.1.5",
71
71
  "svelte-i18n": "^4.0.1",
72
72
  "svelte-preprocess": "^6.0.3",
73
73
  "tslib": "^2.8.1",
74
- "vite": "^6.2.0",
75
- "vitest": "^3.0.7"
74
+ "vite": "^6.2.1",
75
+ "vitest": "^3.0.8"
76
76
  },
77
77
  "exports": {
78
78
  ".": {