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

Show the pressed state on button groups

Browse source 
A button with aria-pressed="true" inside .nv-button-group is now drawn
pressed into the surface in the brand colour, so the appearance toggle and
any segmented choice show which option is in use. Previously no state was
visible.

Checked the four example apps in the reworked light theme.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Nexoniarz 2026-10-28 09:36:26 +01:00
commit 06fca1c385
3 changed files with 21 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
REFERENCE.md
View file

@ -41,7 +41,7 @@ styles win without `!important`.
| `.nv-button--pill` | pill button | Fully rounded. |
| `.nv-button--block` | full-width button | Fills its container. |
| `.nv-button__icon` | button icon slot | Sizes an inline SVG to the label. |
| `.nv-button-group` | segmented control, button group | Buttons sharing edges; only outer corners round. |
| `.nv-button-group` | segmented control, button group | Buttons sharing edges; only outer corners round. A button with `aria-pressed="true"` is drawn pressed in, in the brand colour. |
States come from the element: `disabled`, `aria-disabled`, `aria-busy="true"`
(shows a spinner and keeps the width), `aria-pressed` for toggles.

10
dist/niveus.css vendored
View file

@ -2283,6 +2283,16 @@
z-index: 1;
translate: none;
}
/* The chosen segment is a key held down: pressed into the surface, in the
brand colour, rather than a flat wash. This is what makes the appearance
toggle (and any segmented choice) show which option is in use. */
.nv-button-group > .nv-button[aria-pressed="true"] {
background-color: var(--nv-color-accent-subtle);
background-image: none;
color: var(--nv-color-accent-text);
box-shadow: var(--nv-elevation-inset-sm), var(--nv-ledge);
}
}
@layer niveus.components {
/* ==========================================================================

10
niveus/components/button.css
View file

@ -312,3 +312,13 @@
z-index: 1;
translate: none;
}
/* The chosen segment is a key held down: pressed into the surface, in the
brand colour, rather than a flat wash. This is what makes the appearance
toggle (and any segmented choice) show which option is in use. */
.nv-button-group > .nv-button[aria-pressed="true"] {
background-color: var(--nv-color-accent-subtle);
background-image: none;
color: var(--nv-color-accent-text);
box-shadow: var(--nv-elevation-inset-sm), var(--nv-ledge);
}