@sveltia/ui 0.25.0 → 0.25.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.
@@ -40,7 +40,7 @@
40
40
  iconic
41
41
  size="small"
42
42
  variant="ghost"
43
- aria-label={$_('dismiss')}
43
+ aria-label={$_('_sui.dismiss')}
44
44
  onclick={() => {
45
45
  show = false;
46
46
  }}
@@ -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.
@@ -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}
@@ -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
@@ -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}
@@ -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
@@ -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
@@ -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
@@ -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.
@@ -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
 
@@ -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
@@ -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.
@@ -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
 
@@ -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.
@@ -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}
@@ -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
@@ -8,6 +8,7 @@ export namespace strings {
8
8
  let remove: string;
9
9
  let collapse: string;
10
10
  let expand: string;
11
+ let dismiss: string;
11
12
  namespace calendar {
12
13
  let year: string;
13
14
  let previous_decade: string;
@@ -8,6 +8,7 @@ export const strings = {
8
8
  remove: 'Remove',
9
9
  collapse: 'Collapse',
10
10
  expand: 'Expand',
11
+ dismiss: 'Dismiss',
11
12
  calendar: {
12
13
  year: 'Year',
13
14
  previous_decade: 'Previous Decade',
@@ -8,6 +8,7 @@ export namespace strings {
8
8
  let remove: string;
9
9
  let collapse: string;
10
10
  let expand: string;
11
+ let dismiss: string;
11
12
  namespace calendar {
12
13
  let year: string;
13
14
  let previous_decade: string;
@@ -8,6 +8,7 @@ export const strings = {
8
8
  remove: '削除',
9
9
  collapse: '折り畳む',
10
10
  expand: '広げる',
11
+ dismiss: '閉じる',
11
12
  calendar: {
12
13
  year: '年',
13
14
  previous_decade: '前の 10 年',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.25.0",
3
+ "version": "0.25.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -28,18 +28,18 @@
28
28
  "test:unit": "vitest"
29
29
  },
30
30
  "dependencies": {
31
- "@lexical/code": "^0.25.0",
32
- "@lexical/dragon": "^0.25.0",
33
- "@lexical/history": "^0.25.0",
34
- "@lexical/link": "^0.25.0",
35
- "@lexical/list": "^0.25.0",
36
- "@lexical/markdown": "^0.25.0",
37
- "@lexical/rich-text": "^0.25.0",
38
- "@lexical/selection": "^0.25.0",
39
- "@lexical/table": "^0.25.0",
40
- "@lexical/utils": "^0.25.0",
41
- "@sveltia/utils": "^0.6.3",
42
- "lexical": "^0.25.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": {
@@ -48,31 +48,31 @@
48
48
  "devDependencies": {
49
49
  "@playwright/test": "^1.50.1",
50
50
  "@sveltejs/adapter-auto": "^4.0.0",
51
- "@sveltejs/kit": "^2.17.2",
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",
55
55
  "eslint": "^8.57.1",
56
56
  "eslint-config-airbnb-base": "^15.0.0",
57
- "eslint-config-prettier": "^10.0.1",
57
+ "eslint-config-prettier": "^10.0.2",
58
58
  "eslint-plugin-import": "^2.31.0",
59
59
  "eslint-plugin-jsdoc": "^50.6.3",
60
60
  "eslint-plugin-svelte": "^2.46.1",
61
61
  "postcss": "^8.5.3",
62
62
  "postcss-html": "^1.8.0",
63
- "prettier": "^3.5.2",
63
+ "prettier": "^3.5.3",
64
64
  "prettier-plugin-svelte": "^3.3.3",
65
- "sass": "^1.85.0",
66
- "stylelint": "^16.14.1",
65
+ "sass": "^1.85.1",
66
+ "stylelint": "^16.15.0",
67
67
  "stylelint-config-recommended-scss": "^14.1.0",
68
68
  "stylelint-scss": "^6.11.1",
69
- "svelte": "5.20.2",
69
+ "svelte": "5.22.5",
70
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.1.1",
75
- "vitest": "^3.0.6"
74
+ "vite": "^6.2.0",
75
+ "vitest": "^3.0.7"
76
76
  },
77
77
  "exports": {
78
78
  ".": {
@@ -96,6 +96,9 @@
96
96
  "overrides": {
97
97
  "cookie@<0.7.0": ">=0.7.0",
98
98
  "esbuild@<=0.24.2": ">=0.25.0"
99
- }
99
+ },
100
+ "onlyBuiltDependencies": [
101
+ "svelte-preprocess"
102
+ ]
100
103
  }
101
104
  }