nexoniarz/Niveus
Watch
1
0
Fork
You've already forked Niveus
 0
mirror of https://github.com/Nexoniarz/Niveus.git synced 2026-11-03 04:34:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add Glaze material, pickers, slider and design guidelines

Browse source 
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>
This commit is contained in:
Nexoniarz 2026-10-28 09:24:24 +01:00
commit 369d1cd8f7
17 changed files with 2679 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

69
niveus/components/picker.css Normal file
View file

@ -0,0 +1,69 @@
/* ==========================================================================
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;
}