mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
369d1cd8f7
Glaze is glass with a dial: --nv-glass-frost (0 clear .. 1 heavy) moves backdrop blur, tint and saturation together, read where the surface is drawn so any subtree or slider can change it. A masked rim and a specular bloom follow the pointer via niveus.js; without it the light sits at its default and the material still reads. Falls back to the elevated solid under reduced transparency or without backdrop-filter. New components: .nv-slider (binds to a token with data-nv-var), .nv-calendar, .nv-timepicker (24-hour by default, optional 24H / AM/PM switch, value always HH:MM), and .nv-picker with .nv-menu--listbox (search, type-ahead, keys). All render without niveus.js except where noted. GUIDELINES.md is the normative rulebook for people and AI agents. check.py, build.py and build.py --check pass. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
69 lines
2.3 KiB
CSS
69 lines
2.3 KiB
CSS
/* ==========================================================================
|
|
Niveus — Picker
|
|
--------------------------------------------------------------------------
|
|
<button class="nv-input nv-picker nv-menu-trigger" popovertarget="fruit"
|
|
style="--nv-anchor: --fruit">
|
|
<span data-nv-picker-label>Choose a fruit</span>
|
|
</button>
|
|
|
|
<div class="nv-menu nv-menu--listbox" popover id="fruit" role="listbox"
|
|
style="--nv-anchor: --fruit">
|
|
<input class="nv-input nv-input--sm nv-menu__search" placeholder="Search…">
|
|
<button class="nv-menu__item" role="option" data-value="apple">Apple</button>
|
|
<button class="nv-menu__item" role="option" data-value="pear" aria-selected="true">Pear</button>
|
|
</div>
|
|
|
|
A popup list is a menu whose items are options: the same frosted surface,
|
|
anchoring and light dismiss, with a selection that stays. A picker is its
|
|
trigger: a field-shaped button that shows the current choice and a chevron
|
|
that turns over while the list is open.
|
|
|
|
niveus.js adds what a native <select> would give for free and a styled
|
|
popover does not: arrow-key movement, type-ahead, Enter or Space to choose,
|
|
filtering when a .nv-menu__search is present, and an `nv:select` event on the
|
|
trigger carrying { value, label }.
|
|
========================================================================== */
|
|
|
|
.nv-picker {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--nv-space-2);
|
|
text-align: start;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nv-picker[data-empty] {
|
|
color: var(--nv-color-text-tertiary);
|
|
}
|
|
|
|
.nv-picker::after {
|
|
content: "";
|
|
flex: none;
|
|
inline-size: 0.4em;
|
|
block-size: 0.4em;
|
|
translate: 0 -0.12em;
|
|
rotate: 45deg;
|
|
border-inline-end: 2px solid var(--nv-color-text-tertiary);
|
|
border-block-end: 2px solid var(--nv-color-text-tertiary);
|
|
transition: rotate var(--nv-duration-quick) var(--nv-ease-standard);
|
|
}
|
|
|
|
.nv-picker:has(+ .nv-menu:popover-open)::after {
|
|
rotate: 225deg;
|
|
translate: 0 0.12em;
|
|
}
|
|
|
|
.nv-menu--listbox {
|
|
min-inline-size: anchor-size(inline);
|
|
}
|
|
|
|
.nv-menu__search {
|
|
inline-size: 100%;
|
|
margin-block-end: var(--nv-space-1);
|
|
}
|
|
|
|
/* display on .nv-menu__item would otherwise win over the hidden attribute. */
|
|
.nv-menu__item[hidden] {
|
|
display: none;
|
|
}
|