granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix select typeahead highlighting

Browse source 
add label prop to items for open-state typeahead, use explicit global selector for data-highlighted
This commit is contained in:
Justin Edmund 2025-12-22 16:26:04 -08:00
parent b1c88ac483
commit 0fef8a69e4
2 changed files with 45 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/lib/components/ui/MultiSelect.svelte
View file

@ -93,17 +93,17 @@
{#each options as option} {#each options as option}
<SelectPrimitive.Item <SelectPrimitive.Item
value={String(option.value)} value={String(option.value)}
label={option.label}
disabled={option.disabled} disabled={option.disabled}
class="multi-item" class="multi-item"
style={option.color ? `--option-color: ${option.color}` : ''} style={option.color ? `--option-color: ${option.color}` : ''}
> >
{#snippet children({ selected })} {#snippet children({ selected })}
<span class="label" class:has-color={!!option.color} class:selected>{option.label}</span> <span class="label" class:has-color={!!option.color} class:selected>{option.label}</span
{#if selected} >
<span class="indicator"> <span class="indicator">
<Icon name="check" size={14} /> <Icon name="check" size={12} class="check-icon {selected ? 'visible' : ''}" />
</span> </span>
{/if}
{/snippet} {/snippet}
</SelectPrimitive.Item> </SelectPrimitive.Item>
{/each} {/each}
@ -149,7 +149,7 @@
} }
&[data-placeholder='true'] .text { &[data-placeholder='true'] .text {
color: var(--text-tertiary); color: var(--text-secondary);
} }
&.has-value { &.has-value {
@ -163,7 +163,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--text-tertiary); color: var(--text-secondary);
} }
:global(.chevron) { :global(.chevron) {
@ -235,7 +235,7 @@
@include smooth-transition($duration-quick, background-color); @include smooth-transition($duration-quick, background-color);
&:hover { &:hover {
background-color: var(--option-bg-hover); background-color: var(--select-contained-bg-hover);
} }
&[data-disabled] { &[data-disabled] {
@ -244,12 +244,29 @@
opacity: 0.5; opacity: 0.5;
} }
&[data-highlighted] { &:first-child {
background-color: var(--option-bg-hover); border-top-left-radius: $item-corner;
border-top-right-radius: $item-corner;
}
&:last-child {
border-bottom-left-radius: $item-corner;
border-bottom-right-radius: $item-corner;
}
:global(.check-icon) {
opacity: 0;
transition: opacity $duration-quick ease;
color: var(--text-tertiary);
}
:global(.check-icon.visible) {
opacity: 1;
} }
.label { .label {
flex: 1; flex: 1;
min-width: $unit-8x;
&.selected { &.selected {
font-weight: $medium; font-weight: $medium;
@ -259,11 +276,11 @@
&::before { &::before {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 8px; width: 10px;
height: 8px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: var(--option-color); background: var(--option-color);
margin-right: $unit-half; margin-right: $unit;
} }
} }
} }
@ -273,4 +290,9 @@
color: var(--accent-color); color: var(--accent-color);
} }
} }
// Highlighted state (separate global selector for typeahead)
:global([data-select-item].multi-item[data-highlighted]) {
background-color: var(--option-bg-hover);
}
</style> </style>

15
src/lib/components/ui/Select.svelte
View file

@ -164,7 +164,8 @@
{#each options as option} {#each options as option}
<SelectPrimitive.Item <SelectPrimitive.Item
value={String(option.value)} value={String(option.value)}
{...option.disabled !== undefined ? { disabled: option.disabled } : {}} label={option.label}
disabled={option.disabled}
class="item" class="item"
> >
{#snippet children({ selected })} {#snippet children({ selected })}
@ -219,7 +220,8 @@
{#each options as option} {#each options as option}
<SelectPrimitive.Item <SelectPrimitive.Item
value={String(option.value)} value={String(option.value)}
{...option.disabled !== undefined ? { disabled: option.disabled } : {}} label={option.label}
disabled={option.disabled}
class="item" class="item"
> >
{#snippet children({ selected })} {#snippet children({ selected })}
@ -456,10 +458,6 @@
opacity: 0.5; opacity: 0.5;
} }
&[data-highlighted] {
background-color: var(--option-bg-hover);
}
&[data-selected] { &[data-selected] {
font-weight: $medium; font-weight: $medium;
} }
@ -495,4 +493,9 @@
color: var(--accent-color); color: var(--accent-color);
} }
} }
// Highlighted state (separate global selector for typeahead)
:global([data-select-item].item[data-highlighted]) {
background-color: var(--option-bg-hover);
}
</style> </style>