noph-ui 0.24.2 → 0.24.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.
@@ -58,6 +58,7 @@
58
58
  element?.focus()
59
59
  onoptionselect(option)
60
60
  }}
61
+ role="option"
61
62
  disabled={option.disabled}
62
63
  onkeydown={(event) => {
63
64
  if (event.key === 'ArrowDown') {
@@ -138,7 +138,7 @@
138
138
  }
139
139
  .np-button {
140
140
  box-sizing: border-box;
141
- font-family: inherit;
141
+ font: inherit;
142
142
  background-color: transparent;
143
143
  border-width: 0;
144
144
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -114,7 +114,7 @@
114
114
 
115
115
  <style>
116
116
  .np-icon-button {
117
- font-family: inherit;
117
+ font: inherit;
118
118
  box-sizing: border-box;
119
119
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
120
120
  background-color: transparent;
@@ -166,7 +166,7 @@
166
166
  --background-color: none;
167
167
  }
168
168
  .np-card-container {
169
- font-family: inherit;
169
+ font: inherit;
170
170
  box-sizing: border-box;
171
171
  text-align: start;
172
172
  display: inline-flex;
@@ -139,7 +139,7 @@
139
139
  }
140
140
 
141
141
  .np-item {
142
- font-family: inherit;
142
+ font: inherit;
143
143
  background-color: transparent;
144
144
  border-width: 0;
145
145
  position: relative;
@@ -57,7 +57,7 @@
57
57
  <style>
58
58
  .np-navigation-drawer-item {
59
59
  cursor: pointer;
60
- font-family: inherit;
60
+ font: inherit;
61
61
  color: var(--np-color-on-surface);
62
62
  text-decoration: none;
63
63
  border: 0;
@@ -42,7 +42,7 @@
42
42
  <style>
43
43
  .np-navigation-action {
44
44
  cursor: pointer;
45
- font-family: inherit;
45
+ font: inherit;
46
46
  border: 0;
47
47
  background: none;
48
48
  align-items: center;
@@ -173,6 +173,7 @@
173
173
  class:disabled
174
174
  class:outlined={variant === 'outlined'}
175
175
  role="combobox"
176
+ aria-haspopup="listbox"
176
177
  tabindex={disabled ? -1 : tabindex}
177
178
  aria-controls="listbox"
178
179
  aria-expanded={menuOpen}
@@ -218,7 +219,7 @@
218
219
  <div class="outline-start"></div>
219
220
  {#if label?.length}
220
221
  <div class="label-wrapper">
221
- <span class="label">{label}{noAsterisk || !required ? '' : '*'} </span>
222
+ <span class={['label', !noAsterisk && required && 'required']}>{label}</span>
222
223
  </div>
223
224
  <div class="outline-notch">
224
225
  <span class="notch np-hidden" aria-hidden="true"
@@ -239,7 +240,7 @@
239
240
  {#if variant === 'filled'}
240
241
  <div class="label-wrapper">
241
242
  {#if label?.length}
242
- <span class="label">{label}{noAsterisk || !required ? '' : '*'} </span>
243
+ <span class={['label', !noAsterisk && required && 'required']}>{label}</span>
243
244
  {/if}
244
245
  </div>
245
246
  {/if}
@@ -341,6 +342,7 @@
341
342
  field?.focus()
342
343
  }}
343
344
  disabled={option.disabled}
345
+ role="option"
344
346
  onkeydown={(event) => {
345
347
  if (event.key === 'ArrowDown') {
346
348
  ;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
@@ -769,6 +771,10 @@
769
771
  opacity: 0;
770
772
  }
771
773
 
774
+ .label.required::after {
775
+ content: '*';
776
+ }
777
+
772
778
  .field:not(.menu-open):not(:focus) .label {
773
779
  position: absolute;
774
780
  top: 1rem;
@@ -121,7 +121,7 @@
121
121
  <style>
122
122
  .np-tab {
123
123
  flex: 1;
124
- font-family: inherit;
124
+ font: inherit;
125
125
  background-color: transparent;
126
126
  border-width: 0;
127
127
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -171,14 +171,16 @@
171
171
  <div class="outline-start"></div>
172
172
  {#if label?.length}
173
173
  <div class="label-wrapper">
174
- <span class="label" aria-disabled={attributes.disabled}
175
- >{label}{noAsterisk || !attributes.required ? '' : '*'}
174
+ <span
175
+ class={['label', !noAsterisk && attributes.required && 'required']}
176
+ aria-disabled={attributes.disabled}
177
+ >{label}
176
178
  </span>
177
179
  </div>
178
180
  <div class="outline-notch">
179
- <span class="notch np-hidden" aria-hidden="true"
180
- >{label}{noAsterisk || !attributes.required ? '' : '*'}</span
181
- >
181
+ <span class="notch np-hidden" aria-hidden="true">
182
+ {label}{noAsterisk || !attributes.required ? '' : '*'}
183
+ </span>
182
184
  </div>
183
185
  {/if}
184
186
  <div class="outline-end"></div>
@@ -194,8 +196,10 @@
194
196
  {#if variant === 'filled'}
195
197
  <div class="label-wrapper">
196
198
  {#if label?.length}
197
- <span class="label" aria-disabled={attributes.disabled}
198
- >{label}{noAsterisk || !attributes.required ? '' : '*'}
199
+ <span
200
+ class={['label', !noAsterisk && attributes.required && 'required']}
201
+ aria-disabled={attributes.disabled}
202
+ >{label}
199
203
  </span>
200
204
  {/if}
201
205
  </div>
@@ -203,7 +207,6 @@
203
207
  <div class="content">
204
208
  {#if attributes.type === 'textarea'}
205
209
  <textarea
206
- aria-label={label}
207
210
  aria-describedby={supportingText || (errorTextRaw && errorRaw)
208
211
  ? `supporting-text-${uid}`
209
212
  : undefined}
@@ -226,7 +229,6 @@
226
229
  {/if}
227
230
  {@render children?.()}
228
231
  <input
229
- aria-label={label}
230
232
  aria-describedby={supportingText || (errorTextRaw && errorRaw)
231
233
  ? `supporting-text-${uid}`
232
234
  : undefined}
@@ -628,6 +630,10 @@
628
630
  opacity: 0;
629
631
  }
630
632
 
633
+ .label.required::after {
634
+ content: '*';
635
+ }
636
+
631
637
  .field:not(.populated) .label {
632
638
  position: absolute;
633
639
  top: 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.24.2",
3
+ "version": "0.24.4",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -54,26 +54,26 @@
54
54
  "svelte": "^5.32.1"
55
55
  },
56
56
  "devDependencies": {
57
- "@eslint/js": "^9.33.0",
57
+ "@eslint/js": "^9.34.0",
58
58
  "@material/material-color-utilities": "^0.3.0",
59
59
  "@playwright/test": "^1.55.0",
60
60
  "@sveltejs/adapter-vercel": "^5.10.2",
61
- "@sveltejs/kit": "^2.36.1",
61
+ "@sveltejs/kit": "^2.37.0",
62
62
  "@sveltejs/package": "^2.5.0",
63
- "@sveltejs/vite-plugin-svelte": "^6.1.3",
63
+ "@sveltejs/vite-plugin-svelte": "^6.1.4",
64
64
  "@types/eslint": "^9.6.1",
65
- "eslint": "^9.33.0",
65
+ "eslint": "^9.34.0",
66
66
  "eslint-config-prettier": "^10.1.8",
67
- "eslint-plugin-svelte": "^3.11.0",
67
+ "eslint-plugin-svelte": "^3.12.1",
68
68
  "globals": "^16.3.0",
69
69
  "prettier": "^3.6.2",
70
70
  "prettier-plugin-svelte": "^3.4.0",
71
71
  "publint": "^0.3.12",
72
- "svelte": "^5.38.2",
72
+ "svelte": "^5.38.6",
73
73
  "svelte-check": "^4.3.1",
74
74
  "typescript": "^5.9.2",
75
- "typescript-eslint": "^8.40.0",
76
- "vite": "^7.1.3",
75
+ "typescript-eslint": "^8.42.0",
76
+ "vite": "^7.1.4",
77
77
  "vitest": "^3.2.4"
78
78
  },
79
79
  "svelte": "./dist/index.js",