diff --git a/@navikt/core/css/darkside/toggle-group.darkside.css b/@navikt/core/css/darkside/toggle-group.darkside.css
index 5fbf427d2a..804881c02b 100644
--- a/@navikt/core/css/darkside/toggle-group.darkside.css
+++ b/@navikt/core/css/darkside/toggle-group.darkside.css
@@ -13,11 +13,10 @@
border-radius: var(--ax-border-radius-medium);
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--ax-border-default);
- padding: var(--ax-spacing-1);
- gap: var(--ax-spacing-1);
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
+ gap: 1px;
}
/* Button */
@@ -26,13 +25,14 @@
align-items: center;
justify-content: center;
padding: var(--ax-spacing-1) var(--ax-spacing-3);
- min-height: 2.5rem;
+ min-height: 3rem;
border: none;
cursor: pointer;
background-color: transparent;
color: var(--ax-text-default);
- border-radius: var(--ax-border-radius-small);
+ border-radius: var(--ax-border-radius-medium);
min-width: fit-content;
+ position: relative;
&:hover {
background-color: var(--ax-bg-accent-moderate-hoverA);
@@ -42,12 +42,23 @@
&:focus-visible {
outline: 2px solid var(--ax-border-focus);
outline-offset: 2px;
+ z-index: 1;
}
- &[aria-checked="true"] {
+ &[data-selected="true"] {
background-color: var(--ax-bg-accent-strong-pressed);
color: var(--ax-text-accent-contrast);
}
+
+ &:not([data-selected="true"], :first-child, &[data-selected="true"] + &)::before {
+ content: "";
+ display: block;
+ width: 1px;
+ height: 50%;
+ background-color: var(--ax-border-subtleA);
+ left: -1px;
+ position: absolute;
+ }
}
.navds-toggle-group__button-inner {
@@ -70,7 +81,7 @@
background-color: var(--ax-bg-neutral-moderate-hoverA);
}
- &[aria-checked="true"] {
+ &[data-selected="true"] {
background-color: var(--ax-bg-neutral-strong-pressed);
color: var(--ax-text-neutral-contrast);
}
@@ -80,7 +91,7 @@
.navds-toggle-group--small {
& .navds-toggle-group__button {
padding: var(--ax-spacing-05) var(--ax-spacing-3);
- min-height: 1.5rem;
+ min-height: 2rem;
}
& .navds-toggle-group__button-inner > svg {
@@ -94,14 +105,13 @@
border: 2px solid transparent;
}
- .navds-toggle-group__button[aria-checked="true"]:hover,
.navds-toggle-group__button:hover {
background-color: highlighttext;
color: highlight;
outline: 1px solid highlight;
}
- .navds-toggle-group__button[aria-checked="true"] {
+ .navds-toggle-group__button[data-selected="true"] {
background-color: selecteditem;
color: selecteditemtext;
forced-color-adjust: none;
diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
index 45389279b1..5011530751 100644
--- a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
+++ b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
@@ -4,6 +4,7 @@ import {
EnvelopeClosedIcon,
EnvelopeOpenIcon,
InboxUpIcon,
+ SparklesIcon,
} from "@navikt/aksel-icons";
import { VStack } from "../layout/stack";
import ToggleGroup from "./ToggleGroup";
@@ -44,6 +45,11 @@ const Items = (icon?: boolean, both?: boolean) => {
icon={(both ?? icon) && }
label={hasLabel && "Uleste"}
/>
+ }
+ label={hasLabel && "Ny"}
+ />
}
diff --git a/@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx b/@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx
index 43b8d2998a..514c30ff2a 100644
--- a/@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx
+++ b/@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx
@@ -76,6 +76,7 @@ const ToggleItem = forwardRef(
type="button"
role="radio"
aria-checked={itemCtx.isSelected}
+ data-selected={itemCtx.isSelected}
tabIndex={itemCtx.isFocused ? 0 : -1}
onClick={itemCtx.onClick}
onFocus={itemCtx.onFocus}