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); +}