"Også valgt": the chips hidden behind "+n"
search, listbox of options, footer (multi)
The panel unfolds from the top (clip-path), the options slide in staggered, chips pop / shrink / glide in select.js.
Boundaries use --kb-control-edge (>= 3:1); small link text uses --kb-status-new-ink (primary itself is < 4.5:1 on the dark card).
The few !important are on purpose: unlayered legacy page CSS styles plain `button`, `input` and `select` and would win. */
@layer kb.components {
/* ---------- the native select: hidden but still a real, form-participating control ---------- */
select.kb-select__native {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
clip-path: inset(50%) !important;
}
.kb-select {
--kb-select-list-max: 250px;
position: relative;
display: block;
width: 100%;
max-width: var(--kb-select-max, 420px);
min-width: 0;
font: inherit;
color: var(--kb-text);
}
.kb-select[hidden] { display: none; }
/* ---------- the trigger (a combobox, not a button: it holds chips with buttons of their own) ---------- */
.kb-select__trigger {
position: relative;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
width: 100%;
min-height: 40px;
padding: 4px 36px 4px 10px;
border: 1px solid var(--kb-control-edge);
border-radius: var(--kb-radius);
background: var(--kb-card);
color: var(--kb-text);
font: inherit;
line-height: 1.35;
text-align: start;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
.kb-select--single .kb-select__trigger { flex-wrap: nowrap; }
.kb-select__trigger:hover { border-color: var(--kb-primary); }
.kb-select__trigger:focus-visible,
.kb-select.is-open > .kb-select__trigger {
border-color: var(--kb-focus-ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-primary) 18%, transparent);
}
.kb-select.is-disabled > .kb-select__trigger {
opacity: .6;
cursor: not-allowed;
background: var(--kb-hover);
}
.kb-select.is-disabled > .kb-select__trigger:hover { border-color: var(--kb-control-edge); }
.kb-select__value {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kb-select__ph { color: var(--kb-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-select__value.is-placeholder { color: var(--kb-text-muted); }
.kb-select__chev {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 10px;
width: 16px;
height: 16px;
margin-top: -8px;
color: var(--kb-text-muted);
pointer-events: none;
transition: transform .3s var(--kb-ease-out);
}
.kb-select.is-open > .kb-select__trigger .kb-select__chev { transform: rotate(180deg); }
/* ---------- chips ---------- */
.kb-select__chip {
display: inline-flex;
align-items: center;
gap: 4px;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
padding: 3px 4px 3px 8px;
border-radius: var(--kb-radius);
background: var(--kb-chip);
color: var(--kb-text);
font-size: 13px;
font-weight: 600;
line-height: 18px;
}
.kb-select__chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-select__chip-x,
.kb-select__more-chip {
appearance: none !important;
-webkit-appearance: none !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
font: inherit !important;
text-transform: none !important;
cursor: pointer;
}
.kb-select__chip-x {
flex: none;
display: grid !important;
place-items: center;
width: 20px !important;
height: 20px !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
border-radius: var(--kb-radius) !important;
background: transparent !important;
color: var(--kb-text-muted) !important;
transition: background .15s, color .15s;
}
.kb-select__chip-x:hover { background: color-mix(in srgb, var(--kb-text) 12%, transparent) !important; color: var(--kb-text) !important; }
.kb-select__chip-x:focus-visible { outline: 2px solid var(--kb-focus-ring); outline-offset: 1px; }
.kb-select__chip-x svg { width: 13px; height: 13px; pointer-events: none; }
.kb-select__more-chip {
flex: none;
padding: 3px 8px !important;
border-radius: var(--kb-radius) !important;
background: color-mix(in srgb, var(--kb-primary) 14%, var(--kb-chip)) !important;
color: var(--kb-text) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 18px !important;
transition: background .2s;
}
.kb-select__more-chip:hover,
.kb-select.is-more-open .kb-select__more-chip { background: color-mix(in srgb, var(--kb-primary) 26%, var(--kb-chip)) !important; }
.kb-select__more-chip:focus-visible { outline: 2px solid var(--kb-focus-ring); outline-offset: 1px; }
/* ---------- panel and popover: fold down from the top ---------- */
.kb-select__panel,
.kb-select__more {
position: absolute;
inset-inline: 0;
inset-block-start: calc(100% + 6px);
z-index: 30;
box-sizing: border-box;
border: 1px solid var(--kb-line);
border-radius: var(--kb-radius-card);
background: var(--kb-card);
color: var(--kb-text);
box-shadow: var(--kb-shadow-pop);
visibility: hidden;
opacity: 0;
pointer-events: none;
clip-path: inset(0 -48px 100% -48px);
transition: clip-path .32s var(--kb-ease-out), opacity .2s, visibility 0s .32s;
}
.kb-select.is-open > .kb-select__panel,
.kb-select.is-more-open > .kb-select__more {
visibility: visible;
opacity: 1;
pointer-events: auto;
clip-path: inset(0 -48px -48px -48px);
transition: clip-path .32s var(--kb-ease-out), opacity .2s, visibility 0s;
}
.kb-select.is-up > .kb-select__panel,
.kb-select.is-up > .kb-select__more { /* no room below: open upwards, fold up from the bottom */
inset-block-start: auto;
inset-block-end: calc(100% + 6px);
clip-path: inset(100% -48px 0 -48px);
}
.kb-select.is-up.is-open > .kb-select__panel,
.kb-select.is-up.is-more-open > .kb-select__more { clip-path: inset(-48px -48px 0 -48px); }
.kb-select__more {
inset-inline: auto;
z-index: 31;
min-width: min(200px, 100%);
max-width: min(320px, 100%);
padding: 8px;
}
.kb-select__more-head {
margin: 0 2px 6px;
color: var(--kb-text-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.kb-select__more-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-select.is-more-open .kb-select__more-list .kb-select__chip {
animation: kb-select-in .28s var(--kb-ease-out) both;
animation-delay: calc(var(--i, 0) * 30ms + 40ms);
}
/* ---------- search ---------- */
.kb-select__search {
display: flex;
align-items: center;
gap: 8px;
margin: 8px;
padding: 0 10px;
height: 36px;
border-radius: var(--kb-radius);
background: var(--kb-hover);
color: var(--kb-text-muted);
border: 1px solid transparent;
}
.kb-select__search[hidden] { display: none; }
.kb-select__search:focus-within { border-color: var(--kb-focus-ring); }
.kb-select__search svg { flex: none; width: 16px; height: 16px; }
.kb-select .kb-select__panel .kb-select__search input.kb-select__input {
flex: 1 1 auto;
width: auto !important;
min-width: 0;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--kb-text) !important;
font: inherit;
outline: none !important;
-webkit-appearance: none;
appearance: none;
}
.kb-select__input::placeholder { color: var(--kb-text-muted); opacity: 1; }
.kb-select__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* ---------- options ---------- */
.kb-select__list {
max-height: var(--kb-select-list-max);
overflow-y: auto;
padding: 0 6px 6px;
outline: none;
overscroll-behavior: contain;
}
.kb-select__list:empty { display: none; }
.kb-select__panel:not(.has-search) .kb-select__list { padding-top: 6px; }
.kb-select__opt {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 6px 8px;
border-radius: var(--kb-radius);
cursor: pointer;
}
.kb-select.is-open .kb-select__opt {
animation: kb-select-in .3s var(--kb-ease-out) both;
animation-delay: calc(var(--i, 0) * 28ms + 60ms);
}
@keyframes kb-select-in { from { opacity: 0; transform: translateX(-10px); } }
.kb-select__opt:hover,
.kb-select__opt.is-active { background: var(--kb-hover); }
.kb-select__opt.is-active { outline: 2px solid var(--kb-focus-ring); outline-offset: -2px; }
.kb-select__opt[aria-selected="true"]:not(.is-multi) { background: color-mix(in srgb, var(--kb-primary) 10%, transparent); }
.kb-select__opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* data-kb-tone on the