noph-ui 0.24.3 → 0.24.5
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.
|
@@ -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=
|
|
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=
|
|
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()
|
|
@@ -371,6 +373,7 @@
|
|
|
371
373
|
field?.focus()
|
|
372
374
|
}}
|
|
373
375
|
disabled={option.disabled}
|
|
376
|
+
role="option"
|
|
374
377
|
onkeydown={(event) => {
|
|
375
378
|
if (event.key === 'ArrowDown') {
|
|
376
379
|
;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
|
|
@@ -769,6 +772,10 @@
|
|
|
769
772
|
opacity: 0;
|
|
770
773
|
}
|
|
771
774
|
|
|
775
|
+
.label.required::after {
|
|
776
|
+
content: '*';
|
|
777
|
+
}
|
|
778
|
+
|
|
772
779
|
.field:not(.menu-open):not(:focus) .label {
|
|
773
780
|
position: absolute;
|
|
774
781
|
top: 1rem;
|
|
@@ -171,14 +171,16 @@
|
|
|
171
171
|
<div class="outline-start"></div>
|
|
172
172
|
{#if label?.length}
|
|
173
173
|
<div class="label-wrapper">
|
|
174
|
-
<span
|
|
175
|
-
|
|
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
|
-
|
|
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
|
|
198
|
-
|
|
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>
|
|
@@ -626,6 +630,10 @@
|
|
|
626
630
|
opacity: 0;
|
|
627
631
|
}
|
|
628
632
|
|
|
633
|
+
.label.required::after {
|
|
634
|
+
content: '*';
|
|
635
|
+
}
|
|
636
|
+
|
|
629
637
|
.field:not(.populated) .label {
|
|
630
638
|
position: absolute;
|
|
631
639
|
top: 1rem;
|