mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: dropdowns open a themed list of their own instead of the browser's

Browse source 
SelectField and the refresh-interval picker are built on a new Listbox, a
select-only combobox: a button that keeps focus and a listbox in the top
layer, so it works the same in every current browser, is not clipped by a
scrolling ancestor and shows above a modal dialog. Keys, type-ahead and
placement are pure functions with tests. required becomes aria-required, as a
button has no native form validation.
This commit is contained in:
iris 2026-10-25 17:15:04 +01:00
commit a2e8a2bda0
1 changed files with 653 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/packages/swarm-ui/src/ui/refresh-interval/RefreshInterval.css
View file

@ -13,7 +13,6 @@
border-radius: 0.4em;
color: var(--muted);
font-size: 0.9em;
cursor: pointer;
}
.ui-refresh-picker:hover,
.ui-refresh-picker:focus-within {
@ -21,22 +20,21 @@
background: var(--bg);
color: var(--fg);
}
/* The select drives the interaction (native listbox, keyboard, a11y) but
contributes no chrome of its own — its own box is invisible, sized to
just its selected option's text, and its default arrow is stripped
since the chevron span stands in for it. */
.ui-refresh-picker-select {
appearance: none;
/* The Listbox contributes only its value and chevron: its own box is
invisible and as wide as the value, so the picker's border is the one
that shows. */
.ui-refresh-picker .ui-listbox {
width: auto;
}
.ui-refresh-picker-select.ui-form-control {
width: auto;
min-height: 2.5em;
padding: 0;
border: none;
background: none;
color: inherit;
font: inherit;
padding: 0;
margin: 0;
cursor: pointer;
}
.ui-refresh-picker-icon,
.ui-refresh-picker-chevron {
.ui-refresh-picker-icon {
font-size: 0.85em;
line-height: 1;
}