noph-ui 0.8.0 → 0.8.1
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.
|
@@ -78,8 +78,6 @@
|
|
|
78
78
|
</svg>
|
|
79
79
|
{/snippet}
|
|
80
80
|
|
|
81
|
-
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
82
|
-
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
|
83
81
|
<label
|
|
84
82
|
style={(variant === 'outlined'
|
|
85
83
|
? '--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
|
|
@@ -89,9 +87,6 @@
|
|
|
89
87
|
class={['text-field', attributes.class]}
|
|
90
88
|
bind:this={element}
|
|
91
89
|
bind:clientWidth
|
|
92
|
-
onclick={() => {
|
|
93
|
-
menuElement?.showPopover()
|
|
94
|
-
}}
|
|
95
90
|
>
|
|
96
91
|
<div
|
|
97
92
|
class="field"
|
|
@@ -143,9 +138,13 @@
|
|
|
143
138
|
<select
|
|
144
139
|
aria-label={label}
|
|
145
140
|
{...attributes}
|
|
141
|
+
onclick={(event) => {
|
|
142
|
+
menuElement?.togglePopover(true)
|
|
143
|
+
event.preventDefault()
|
|
144
|
+
}}
|
|
146
145
|
onkeydown={(event) => {
|
|
147
146
|
if (event.key === 'Tab') {
|
|
148
|
-
menuElement?.
|
|
147
|
+
menuElement?.togglePopover(false)
|
|
149
148
|
} else {
|
|
150
149
|
event.preventDefault()
|
|
151
150
|
if (
|
|
@@ -154,6 +153,7 @@
|
|
|
154
153
|
event.key === 'Enter'
|
|
155
154
|
) {
|
|
156
155
|
menuElement?.showPopover()
|
|
156
|
+
;(menuElement?.firstElementChild as HTMLElement)?.focus()
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
159
|
}}
|
|
@@ -196,6 +196,7 @@
|
|
|
196
196
|
style="position-anchor:{menuId};min-width: {clientWidth}px;"
|
|
197
197
|
popover="manual"
|
|
198
198
|
position="bottom-left"
|
|
199
|
+
anchor={element}
|
|
199
200
|
ontoggle={({ newState }) => {
|
|
200
201
|
if (newState === 'open') {
|
|
201
202
|
menuOpen = true
|
|
@@ -228,7 +229,6 @@
|
|
|
228
229
|
event.preventDefault()
|
|
229
230
|
}
|
|
230
231
|
}}
|
|
231
|
-
autofocus={value === option.value}
|
|
232
232
|
variant="button"
|
|
233
233
|
selected={value === option.value}>{option.label}</Item
|
|
234
234
|
>
|
|
@@ -441,12 +441,12 @@
|
|
|
441
441
|
color: var(--np-color-on-surface);
|
|
442
442
|
}
|
|
443
443
|
.field:not(.with-end) .content .input-wrapper,
|
|
444
|
-
.field:not(.with-end) .content
|
|
444
|
+
.field:not(.with-end) .content .input {
|
|
445
445
|
padding-inline-end: 16px;
|
|
446
446
|
}
|
|
447
447
|
.outline-start,
|
|
448
448
|
.field:not(.with-start) .content .input-wrapper,
|
|
449
|
-
.field:not(.with-start) .content
|
|
449
|
+
.field:not(.with-start) .content .input {
|
|
450
450
|
padding-inline-start: 16px;
|
|
451
451
|
}
|
|
452
452
|
|