noph-ui 0.32.7 → 0.32.8

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.
@@ -3,6 +3,7 @@
3
3
  </script>
4
4
 
5
5
  <div
6
+ aria-hidden="true"
6
7
  class={[
7
8
  'np-badge-container',
8
9
  label === undefined ? 'np-badge-container-no-label' : 'np-badge-container-label',
@@ -21,16 +21,15 @@
21
21
  let focused = $state(false)
22
22
 
23
23
  $effect(() => {
24
- if (disabled && element) {
25
- // eslint-disable-next-line no-undef
26
- const formElements: NodeListOf<
27
- HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
28
- > = element.querySelectorAll('input, button, select, textarea')
24
+ if (!element) return
25
+ // eslint-disable-next-line no-undef
26
+ const formElements: NodeListOf<
27
+ HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
28
+ > = element.querySelectorAll('input, button, select, textarea')
29
29
 
30
- formElements.forEach((element) => {
31
- element.disabled = disabled
32
- })
33
- }
30
+ formElements.forEach((el) => {
31
+ el.disabled = disabled
32
+ })
34
33
  })
35
34
  </script>
36
35
 
@@ -167,7 +166,6 @@
167
166
  }
168
167
  .np-card-container {
169
168
  font: inherit;
170
- box-sizing: border-box;
171
169
  text-align: start;
172
170
  display: inline-flex;
173
171
  flex-direction: column;
@@ -210,10 +208,8 @@
210
208
  width: 100%;
211
209
  height: 200px;
212
210
  overflow: hidden;
213
- justify-content: center;
214
211
  background-size: cover;
215
212
  background-position: 50%;
216
- align-items: center;
217
213
  border-radius: var(--border-radius);
218
214
  }
219
215
  .np-card-content {
@@ -25,25 +25,14 @@
25
25
  let chipLabel: HTMLLabelElement | undefined = $state()
26
26
 
27
27
  $effect(() => {
28
- if (group && value) {
29
- selected = group.includes(value)
30
- }
31
- })
32
-
33
- $effect(() => {
34
- if (value && group) {
35
- const index = group.indexOf(value)
36
- if (selected) {
37
- if (index < 0) {
38
- group?.push(value)
39
- group = group
40
- }
41
- } else {
42
- if (index >= 0) {
43
- group.splice(index, 1)
44
- group = group
45
- }
46
- }
28
+ if (!group || !value) return
29
+ const included = group.includes(value)
30
+ if (selected && !included) {
31
+ group = [...group, value]
32
+ } else if (!selected && included) {
33
+ group = group.filter((v) => v !== value)
34
+ } else if (included !== selected) {
35
+ selected = included
47
36
  }
48
37
  })
49
38
  </script>
@@ -59,17 +59,6 @@
59
59
  </div>
60
60
 
61
61
  <style>
62
- .np-skeleton {
63
- height: 2rem;
64
- line-height: 1.25rem;
65
- font-size: 0.875rem;
66
- font-weight: 500;
67
- opacity: 0;
68
- display: flex;
69
- align-items: center;
70
- padding-inline-start: 1rem;
71
- padding-inline-end: 2rem;
72
- }
73
62
  .np-input-chip {
74
63
  position: relative;
75
64
  display: inline-flex;
@@ -45,7 +45,7 @@
45
45
  role="dialog"
46
46
  aria-modal="true"
47
47
  aria-labelledby="{uid}-dialog-headline"
48
- aria-describedby="{uid}-dialog-supporting-text"
48
+ aria-describedby={supportingText ? '{uid}-dialog-supporting-text' : undefined}
49
49
  >
50
50
  {#if icon}
51
51
  <div class="np-dialog-icon">
@@ -20,6 +20,7 @@
20
20
  <a
21
21
  {...attributes}
22
22
  class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
23
+ aria-current={selected ? 'page' : undefined}
23
24
  >
24
25
  {@render content()}
25
26
  </a>
@@ -27,6 +28,7 @@
27
28
  <button
28
29
  {...attributes as HTMLButtonAttributes}
29
30
  class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
31
+ aria-pressed={selected ? 'true' : undefined}
30
32
  >
31
33
  {@render content()}
32
34
  </button>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.32.7",
3
+ "version": "0.32.8",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -72,23 +72,23 @@
72
72
  "@materialx/material-color-utilities": "^0.4.8",
73
73
  "@playwright/test": "^1.58.2",
74
74
  "@sveltejs/adapter-auto": "^7.0.1",
75
- "@sveltejs/kit": "^2.53.4",
75
+ "@sveltejs/kit": "^2.55.0",
76
76
  "@sveltejs/package": "^2.5.7",
77
77
  "@sveltejs/vite-plugin-svelte": "^7.0.0",
78
78
  "@types/eslint": "^9.6.1",
79
- "eslint": "^10.0.2",
79
+ "eslint": "^10.1.0",
80
80
  "eslint-config-prettier": "^10.1.8",
81
- "eslint-plugin-svelte": "^3.15.0",
81
+ "eslint-plugin-svelte": "^3.16.0",
82
82
  "globals": "^17.4.0",
83
83
  "prettier": "^3.8.1",
84
84
  "prettier-plugin-svelte": "^3.5.1",
85
85
  "publint": "^0.3.18",
86
- "svelte": "^5.53.7",
87
- "svelte-check": "^4.4.4",
88
- "typescript": "^5.9.3",
89
- "typescript-eslint": "^8.56.1",
90
- "vite": "8.0.0-beta.16",
91
- "vitest": "^4.0.18"
86
+ "svelte": "^5.55.0",
87
+ "svelte-check": "^4.4.5",
88
+ "typescript": "^6.0.2",
89
+ "typescript-eslint": "^8.57.2",
90
+ "vite": "8.0.3",
91
+ "vitest": "^4.1.2"
92
92
  },
93
93
  "svelte": "./dist/index.js",
94
94
  "types": "./dist/index.d.ts",