Skip to content

Commit 947a619

Browse files
Copilotargyleink
Copilot
and
argyleink
authored
Add CSS appearance: base-select support for customizable select dropdowns (#123)
* Initial plan * Add CSS appearance: base-select styling for customizable select elements Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Add 1px gap between option elements in base-select dropdown Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Fix overflow: hidden blocking base-select anchor positioning Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Add button and selectedcontent elements for base-select activation Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Add appearance: base-select to ::picker(select) pseudo-element Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Fix text wrapping regression in base-select dropdown buttons Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Fix picker styling: hr margins, remove optgroup::before, restore checkmark Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Fix picker styling: checkmark position, shadow, hide picker-icon, button icons Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Add order: 2 to checkmark for correct inline-end positioning Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Fix action button icons visibility and select sizing in base-select mode Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Remove background-image: none from base-select styling Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Remove HR elements from selects and hide disabled options in base-select mode Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Fix Svelte reactivity with base-select by adding explicit oninput handlers Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Add meaningful icons to action menu options with accessibility support Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Fix Move to top/bottom icons to use vertical align icons Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> * Update option spacing and add padding: 0 for selects inside buttons Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: argyleink <1134620+argyleink@users.noreply.github.com>
1 parent f29dd75 commit 947a619

11 files changed

Lines changed: 216 additions & 41 deletions

‎src/components/ColorPicker.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,9 @@ let gamut = $derived(whatsTheGamutDamnit($picker_value))
259259
<div class="hd-color-picker" style="accent-color: {$picker_value}; --contrast-color: {bg_overlay}; --counter-contrast-color: {text_overlay}">
260260
<div class="preview" style={`--user-color:${$picker_value}`}>
261261
<select class="colorspace" onchange={spaceChange} title="Colorspace" style="--icon-arrow-up: url(https://api.iconify.design/ic:keyboard-arrow-up.svg?color={text_overlay}); --icon-arrow-down: url(https://api.iconify.design/ic:keyboard-arrow-down.svg?color={text_overlay});">
262+
<button>
263+
<selectedcontent></selectedcontent>
264+
</button>
262265
<optgroup label="Standard">
263266
<option value="srgb">rgb</option>
264267
<option>srgb-linear</option>

‎src/components/ConicPosition.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@
2828
<div class="label-select-combo">
2929
<label>Position</label>
3030
<NamedDirections id="conic-position" bind:selected={$conic_named_position} mode="position" />
31-
<select name="conic-position" bind:value={$conic_named_position}>
31+
<select name="conic-position" bind:value={$conic_named_position} oninput={(e) => $conic_named_position = e.currentTarget.value}>
32+
<button>
33+
<selectedcontent></selectedcontent>
34+
</button>
3235
<option disabled>--</option>
3336
{#each gradient_positions as pos}
3437
<option value={pos}>{pos}</option>

‎src/components/Gradient.svelte‎

Lines changed: 166 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -560,17 +560,15 @@ let user_gradient = $derived(gensyntax[$gradient_type](
560560
<button class="global-actions">
561561
<select tabindex="-1" onchange={globalAction}>
562562
<option disabled selected>Global Actions</option>
563-
<hr>
564-
<option>Start new</option>
565-
<option>Import gradient</option>
566-
<option>Copy modern CSS</option>
567-
<option>Copy classic CSS</option>
563+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg> Start new</option>
564+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3h-7z"/></svg> Import gradient</option>
565+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg> Copy modern CSS</option>
566+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg> Copy classic CSS</option>
568567
<!-- <option disabled>Reset all stops to auto</option> -->
569-
<hr>
570568
<!-- <option disabled>Toggle light & dark</option> -->
571-
<option>Tips & tricks</option>
572-
<option>Help & feedback</option>
573-
<option>GitHub</option>
569+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg> Tips & tricks</option>
570+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z"/></svg> Help & feedback</option>
571+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"/></svg> GitHub</option>
574572
</select>
575573
</button>
576574
</div>
@@ -622,7 +620,7 @@ let user_gradient = $derived(gensyntax[$gradient_type](
622620
display: grid;
623621
border-radius: var(--radius-3);
624622
box-shadow: var(--shadow-3);
625-
overflow: hidden;
623+
overflow: clip;
626624
}
627625
628626
@media (prefers-color-scheme: light) {
@@ -743,7 +741,7 @@ let user_gradient = $derived(gensyntax[$gradient_type](
743741
display: grid;
744742
place-content: center;
745743
inline-size: 100cqi;
746-
overflow: hidden;
744+
overflow: clip;
747745
position: relative;
748746
}
749747
@@ -997,6 +995,161 @@ let user_gradient = $derived(gensyntax[$gradient_type](
997995
cursor: not-allowed;
998996
}
999997
998+
/* -----------------------------------------------
999+
* Customizable Select (base-select) Styles
1000+
* ----------------------------------------------- */
1001+
@supports (appearance: base-select) {
1002+
:global(select) {
1003+
appearance: base-select;
1004+
}
1005+
1006+
/* Style the button that activates the picker */
1007+
:global(select > button) {
1008+
all: unset;
1009+
display: flex;
1010+
align-items: center;
1011+
gap: 0.5ch;
1012+
cursor: pointer;
1013+
white-space: nowrap;
1014+
}
1015+
1016+
/* Style the selected content display */
1017+
:global(select selectedcontent) {
1018+
display: inline;
1019+
white-space: nowrap;
1020+
}
1021+
1022+
/* Hide the picker icon */
1023+
:global(select::picker-icon) {
1024+
display: none;
1025+
}
1026+
1027+
/* Action button selects: fit to parent and hide content so parent icon shows */
1028+
:global(.global-actions > select),
1029+
:global(.layer-actions > select),
1030+
:global(.stop-actions > select) {
1031+
position: absolute;
1032+
inset: 0;
1033+
inline-size: 100%;
1034+
block-size: 100%;
1035+
opacity: 0;
1036+
}
1037+
1038+
/* Selects inside buttons should have no padding */
1039+
:global(button > select) {
1040+
padding: 0;
1041+
}
1042+
1043+
:global(select::picker(select)) {
1044+
appearance: base-select;
1045+
--_picker-bg-light: #fff;
1046+
--_picker-bg-dark: var(--surface-3);
1047+
--_picker-bg: var(--_picker-bg-light);
1048+
1049+
background: var(--_picker-bg);
1050+
border: 1px solid var(--surface-4);
1051+
border-radius: var(--radius-2);
1052+
box-shadow: var(--shadow-6);
1053+
padding: var(--size-1);
1054+
margin-block-start: var(--size-1);
1055+
1056+
/* Transitions */
1057+
opacity: 0;
1058+
transform: translateY(-8px) scale(0.96);
1059+
transition:
1060+
opacity 150ms var(--ease-3),
1061+
transform 150ms var(--ease-3),
1062+
overlay 150ms var(--ease-3) allow-discrete,
1063+
display 150ms var(--ease-3) allow-discrete;
1064+
}
1065+
1066+
:global(select:open::picker(select)) {
1067+
opacity: 1;
1068+
transform: translateY(0) scale(1);
1069+
}
1070+
1071+
@starting-style {
1072+
:global(select:open::picker(select)) {
1073+
opacity: 0;
1074+
transform: translateY(-8px) scale(0.96);
1075+
}
1076+
}
1077+
1078+
/* Hide disabled options in base-select mode */
1079+
:global(select option[disabled]) {
1080+
display: none;
1081+
}
1082+
1083+
:global(select option) {
1084+
display: flex;
1085+
align-items: center;
1086+
gap: var(--size-3);
1087+
padding: var(--size-2) var(--size-2);
1088+
border-radius: var(--radius-2);
1089+
cursor: pointer;
1090+
transition:
1091+
background-color 100ms var(--ease-2),
1092+
color 100ms var(--ease-2);
1093+
}
1094+
1095+
/* Style icons inside options */
1096+
:global(select option > svg) {
1097+
inline-size: 1.25em;
1098+
block-size: 1.25em;
1099+
flex-shrink: 0;
1100+
}
1101+
1102+
:global(select option:not(:last-child)) {
1103+
margin-block-end: 1px;
1104+
}
1105+
1106+
:global(select option:hover) {
1107+
background-color: var(--surface-2);
1108+
}
1109+
1110+
:global(select option:checked),
1111+
:global(select option:focus) {
1112+
background-color: var(--link);
1113+
color: white;
1114+
}
1115+
1116+
/* Position checkmark on inline-end */
1117+
:global(select option::checkmark) {
1118+
order: 2;
1119+
margin-inline-start: auto;
1120+
padding-inline-start: var(--size-2);
1121+
}
1122+
1123+
:global(select optgroup) {
1124+
padding-block: var(--size-1);
1125+
}
1126+
1127+
:global(select optgroup:last-of-type) {
1128+
padding-block-end: 0;
1129+
}
1130+
1131+
:global(select optgroup:not(:first-of-type)) {
1132+
border-block-start: 1px solid var(--surface-3);
1133+
margin-block-start: var(--size-1);
1134+
padding-block-start: var(--size-2);
1135+
}
1136+
1137+
@media (prefers-color-scheme: dark) {
1138+
:global(select::picker(select)) {
1139+
--_picker-bg: var(--_picker-bg-dark);
1140+
border-color: var(--surface-4);
1141+
}
1142+
1143+
:global(select option:hover) {
1144+
background-color: var(--surface-4);
1145+
}
1146+
1147+
:global(select optgroup:not(:first-of-type)) {
1148+
border-block-start-color: var(--surface-4);
1149+
}
1150+
}
1151+
}
1152+
10001153
:global(.sr-only) {
10011154
inline-size: 0;
10021155
block-size: 0;
@@ -1062,7 +1215,7 @@ let user_gradient = $derived(gensyntax[$gradient_type](
10621215
.global-actions {
10631216
position: relative;
10641217
inline-size: var(--size-7);
1065-
overflow: hidden;
1218+
overflow: clip;
10661219
border-radius: var(--radius-round);
10671220
padding-inline: 0;
10681221
aspect-ratio: 1;
@@ -1078,11 +1231,8 @@ let user_gradient = $derived(gensyntax[$gradient_type](
10781231
--_bg: transparent;
10791232
}
10801233
1081-
.global-actions:not(:active,:focus) select {
1082-
opacity: 0;
1083-
}
1084-
10851234
.global-actions > select {
10861235
position: absolute;
1236+
inset: 0;
10871237
}
10881238
</style>

‎src/components/GradientColorSpace.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@
1616
</a>
1717
Color Space
1818
</label>
19-
<select name="colorspace" id="in-colorspace" bind:value={$gradient_space}>
19+
<select name="colorspace" id="in-colorspace" bind:value={$gradient_space} oninput={(e) => $gradient_space = e.currentTarget.value}>
20+
<button>
21+
<selectedcontent></selectedcontent>
22+
</button>
2023
<optgroup label="Default">
2124
<option selected>oklab</option>
2225
</optgroup>

‎src/components/GradientStops.svelte‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -330,13 +330,11 @@
330330
<button class="stop-actions" use:tooltip={{content: "Actions", offset: 15}}>
331331
<select tabindex="-1" onchange={(e) => colorAction(e,i)}>
332332
<option disabled selected>Color Stop Actions</option>
333-
<hr>
334-
<option>Duplicate</option>
335-
<option>Copy CSS color</option>
336-
<option>Random color</option>
337-
<hr>
338-
<option>Reset</option>
339-
<option disabled={colorStopCount() <= 1}>Remove</option>
333+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg> Duplicate</option>
334+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg> Copy CSS color</option>
335+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg> Random color</option>
336+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/></svg> Reset</option>
337+
<option disabled={colorStopCount() <= 1}><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg> Remove</option>
340338
</select>
341339
</button>
342340
<div class="drag-handle" use:tooltip={{content: 'Drag to reorder'}} draggable="true" ondragstart={(e) => beginDrag(e, i)} role="button" aria-label="Drag to reorder" tabindex="0"></div>
@@ -438,6 +436,10 @@
438436
aspect-ratio: 1;
439437
border: none;
440438
box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
439+
background-image: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd);
440+
background-position: center;
441+
background-repeat: no-repeat;
442+
background-size: 75%;
441443
}
442444
443445
/* Drag handle to initiate reordering */
@@ -477,7 +479,7 @@
477479
--icon-arrow-down: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd);
478480
--icon-arrow-up: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd);
479481
position: absolute;
480-
inset-inline-end: -1.1ch;
482+
inset: 0;
481483
}
482484
483485
.chip {

‎src/components/HueInterpolation.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
</svg>
1212
Hue Path
1313
</label>
14-
<select name="colorspace" id="in-colorspace" bind:value={$gradient_interpolation}>
14+
<select name="colorspace" id="in-colorspace" bind:value={$gradient_interpolation} oninput={(e) => $gradient_interpolation = e.currentTarget.value}>
15+
<button>
16+
<selectedcontent></selectedcontent>
17+
</button>
1518
<optgroup label="Default interpolation">
1619
<option selected>shorter</option>
1720
</optgroup>

‎src/components/LayersPanel.svelte‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,12 @@
5858
<button class="layer-actions" aria-label="Layer actions" use:tooltip={{content: "Layer Actions"}}>
5959
<select tabindex="-1" onchange={(e)=>{ const v=e.currentTarget.value; e.currentTarget.selectedIndex=0; if(v==='Move up') moveLayerUp(i); else if(v==='Move down') moveLayerDown(i); else if(v==='Move to top') moveLayerToTop(i); else if(v==='Move to bottom') moveLayerToBottom(i); else if(v==='Toggle visibility') onToggleVisibility(i); else if(v==='Remove') onDelete(i); }}>
6060
<option disabled selected>Layer Actions</option>
61-
<hr>
62-
<option>Move up</option>
63-
<option>Move down</option>
64-
<option>Move to top</option>
65-
<option>Move to bottom</option>
66-
<hr>
67-
<option>Toggle visibility</option>
68-
<option disabled={$layers.length<=1}>Remove</option>
61+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41z"/></svg> Move up</option>
62+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg> Move down</option>
63+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M8 11h3v10h2V11h3l-4-4l-4 4zM4 3v2h16V3H4z"/></svg> Move to top</option>
64+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M16 13h-3V3h-2v10H8l4 4l4-4zM4 19v2h16v-2H4z"/></svg> Move to bottom</option>
65+
<option><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3z"/></svg> Toggle visibility</option>
66+
<option disabled={$layers.length<=1}><svg aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg> Remove</option>
6967
</select>
7068
</button>
7169
</div>
@@ -193,19 +191,23 @@
193191
.layer-actions {
194192
position: relative;
195193
inline-size: var(--size-5);
196-
overflow: hidden;
194+
overflow: clip;
197195
border-radius: var(--radius-round);
198196
padding-inline: 0;
199197
aspect-ratio: 1;
200198
border: none;
201199
box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
200+
background-image: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd);
201+
background-position: center;
202+
background-repeat: no-repeat;
203+
background-size: 75%;
202204
}
203205
204206
.layer-actions > select {
205207
--icon-arrow-down: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd);
206208
--icon-arrow-up: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd);
207209
position: absolute;
208-
inset-inline-end: -1.1ch;
210+
inset: 0;
209211
}
210212
211213
.end-of-layers {

‎src/components/LinearAngle.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,10 @@
3131
</label>
3232
<NamedDirections id="linear-angle" bind:selected={$linear_named_angle} mode="angle" />
3333
<div class="select-wrap">
34-
<select name="named-directions" bind:value={$linear_named_angle}>
34+
<select name="named-directions" bind:value={$linear_named_angle} oninput={(e) => $linear_named_angle = e.currentTarget.value}>
35+
<button>
36+
<selectedcontent></selectedcontent>
37+
</button>
3538
<option disabled>--</option>
3639
{#each linear_directions as dir}
3740
<option value={dir}>{dir}</option>

‎src/components/RadialPosition.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@
2828
<div class="label-select-combo">
2929
<label>Position</label>
3030
<NamedDirections id="radial-position" bind:selected={$radial_named_position} mode="position" />
31-
<select name="radial-position" bind:value={$radial_named_position}>
31+
<select name="radial-position" bind:value={$radial_named_position} oninput={(e) => $radial_named_position = e.currentTarget.value}>
32+
<button>
33+
<selectedcontent></selectedcontent>
34+
</button>
3235
<option disabled>--</option>
3336
{#each gradient_positions as pos}
3437
<option value={pos}>{pos}</option>

‎src/components/RadialSize.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@
6363
<fieldset class="control-set">
6464
<div class="label-select-combo">
6565
<label>Size</label>
66-
<select name="radial-size" bind:value={$radial_size}>
66+
<select name="radial-size" bind:value={$radial_size} oninput={(e) => $radial_size = e.currentTarget.value}>
67+
<button>
68+
<selectedcontent></selectedcontent>
69+
</button>
6770
{#if !optionExists($radial_size)}
6871
<option value={$radial_size}>{$radial_size}</option>
6972
{/if}

0 commit comments

Comments
 (0)