From 06fca1c385b59d3fbe1630960fd5546df7514eb9 Mon Sep 17 00:00:00 2001 From: Nexoniarz Date: Wed, 28 Oct 2026 09:36:26 +0100 Subject: [PATCH] Show the pressed state on button groups 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 --- REFERENCE.md | 2 +- dist/niveus.css | 10 ++++++++++ niveus/components/button.css | 10 ++++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/REFERENCE.md b/REFERENCE.md index 105bb81..28ae7b4 100644 --- a/REFERENCE.md +++ b/REFERENCE.md @@ -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. diff --git a/dist/niveus.css b/dist/niveus.css index 2a76b82..e18d6e0 100644 --- a/dist/niveus.css +++ b/dist/niveus.css @@ -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 { /* ========================================================================== diff --git a/niveus/components/button.css b/niveus/components/button.css index 9c4bb4d..567b962 100644 --- a/niveus/components/button.css +++ b/niveus/components/button.css @@ -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); +}