chore: restore wrapped chips, trim unused scopes, and complete env docs

This commit is contained in:
Justin Visser 2026-08-11 09:31:39 +02:00
parent 401a0ddea7
commit 5080e9a609
6 changed files with 74 additions and 57 deletions

View file

@ -6,59 +6,27 @@ defineEmits<{ pick: [suggestion: string] }>()
</script>
<template>
<div class="frame">
<div class="chips" role="region" :aria-label="messages.suggestionChipsRegionLabel" tabindex="0">
<button
v-for="suggestion in suggestions"
:key="suggestion"
class="chip"
type="button"
@click="$emit('pick', suggestion)"
>
{{ suggestion }}
</button>
</div>
<div class="chips" role="region" :aria-label="messages.suggestionChipsRegionLabel">
<button
v-for="suggestion in suggestions"
:key="suggestion"
class="chip"
type="button"
@click="$emit('pick', suggestion)"
>
{{ suggestion }}
</button>
</div>
</template>
<style scoped>
.frame {
position: relative;
min-width: 0;
overflow: hidden;
background: var(--c-surface-raised);
border: 1px solid var(--c-line);
border-radius: var(--r-md);
}
.frame::after {
position: absolute;
top: 1px;
right: 1px;
bottom: var(--s-3);
width: var(--s-10);
pointer-events: none;
content: '';
background: linear-gradient(to right, transparent, var(--c-surface-raised));
}
.chips {
display: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
gap: var(--s-3);
padding: var(--s-3) var(--s-10) var(--s-3) var(--s-3);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-color: var(--c-line-strong) transparent;
scrollbar-width: thin;
}
.chips:focus-visible {
outline-offset: -3px;
}
.chip {
flex: none;
padding: var(--s-3) 15px;
color: var(--c-text-chip);
font-size: var(--t-small);