@navikt/ds-css 7.5.3 → 7.7.0

package/darkside/tabs.darkside.css

@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
+  box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
   width: 100%;
   display: flex;
 }
@@ -9,116 +9,116 @@
   max-width: 100%;
   width: 100%;
   scroll-behavior: smooth;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* for Firefox */
+  -ms-overflow-style: none; /* Internet Explorer, Edge */
+  scrollbar-width: none; /*  Firefox */
   overflow-x: scroll;
-}
 
-.navds-tabs__tablist::-webkit-scrollbar {
-  display: none; /* for Chrome, Safari, and Opera */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, and Opera */
+  }
 }
 
 .navds-tabs__scroll-button {
-  padding: var(--a-spacing-3) var(--a-spacing-4);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
   width: 2.75rem;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-}
 
-.navds-tabs__scroll-button--hidden {
-  visibility: hidden;
-}
+  & svg {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
 
-.navds-tabs__scroll-button svg {
-  font-size: 1.25rem;
-  flex-shrink: 0;
+  .navds-tabs--small & {
+    padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+    width: 2rem;
+  }
 }
 
-.navds-tabs--small .navds-tabs__scroll-button {
-  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
-  width: 2rem;
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
 }
 
 .navds-tabs__tab {
   min-height: 3rem;
-  padding: var(--a-spacing-3) var(--a-spacing-4);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
   display: inline-flex;
   justify-content: center;
   align-items: center;
   background: none;
   border: none;
-  color: var(--ac-tabs-text, var(--a-text-default));
+  color: var(--ax-text-default);
   cursor: pointer;
-}
 
-.navds-tabs__tab:hover {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
-}
+  --__axc-tabs-line-width: 0;
+  --__axc-tabs-line-color: var(--ax-border-neutral-subtle);
 
-.navds-tabs__tab[aria-selected="true"] {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action-selected));
-  color: var(--ac-tabs-selected-text, var(--a-text-default));
-}
+  box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
+  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
 
-.navds-tabs__tab:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  box-shadow: inset var(--a-shadow-focus);
-  color: var(--ac-tabs-focus-text, var(--a-text-default));
-}
+  &:hover {
+    --__axc-tabs-line-width: -4px;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-tabs__tab:focus {
-    outline: 2px solid transparent;
-    box-shadow: inset var(--a-shadow-focus);
-    color: var(--ac-tabs-focus-text, var(--a-text-default));
+  &[data-state="active"] {
+    --__axc-tabs-line-width: -4px;
+    --__axc-tabs-line-color: var(--ax-border-accent-strong);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -2px;
   }
 }
 
 .navds-tabs__tab-inner {
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-1);
-}
+  gap: var(--ax-spacing-1);
 
-.navds-tabs__tab-inner > * {
-  display: inline-flex;
-}
+  & > * {
+    display: inline-flex;
+  }
 
-.navds-tabs__tab-inner svg {
-  flex-shrink: 0;
-}
+  & svg {
+    flex-shrink: 0;
+  }
 
-.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
-  flex-direction: column;
-  gap: 0;
+  .navds-tabs__tab-icon--top > & {
+    flex-direction: column;
+    gap: 0;
+  }
 }
 
 .navds-tabs__tab--small {
   min-height: 2rem;
-  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
+  padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
 }
 
 .navds-tabs__tab-icon--top,
 .navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--a-spacing-1) var(--a-spacing-4);
+  padding: var(--ax-spacing-1) var(--ax-spacing-4);
 }
 
-.navds-tabs__tab svg,
-.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
-  font-size: 1.25rem;
+.navds-tabs__tab,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  & svg {
+    font-size: 1.25rem;
+  }
 }
 
 .navds-tabs__tab--small svg {
   font-size: 1rem;
 }
 
-.navds-tabs__tab--icon-only svg,
-.navds-tabs__tab-icon--top svg {
-  font-size: 1.5rem;
+.navds-tabs__tab--icon-only,
+.navds-tabs__tab-icon--top {
+  & svg {
+    font-size: 1.5rem;
+  }
 }
 
 .navds-tabs__tab--fill {
@@ -126,29 +126,22 @@
 }
 
 .navds-tabs__tabpanel:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-tabs__tabpanel:focus {
-    outline: 2px solid transparent;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
-  }
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -2px;
 }
 
 @media (forced-colors: active) {
-  .navds-tabs__tab[aria-selected="true"] {
+  .navds-tabs__tab[data-state="active"] {
     border-bottom: 3px solid canvastext;
-    padding-block-end: calc(var(--a-spacing-3) - 3px);
+    padding-block-end: calc(var(--ax-spacing-3) - 3px);
   }
 
-  .navds-tabs__tab--small[aria-selected="true"] {
-    padding-block-end: calc(var(--a-spacing-1-alt) - 3px);
+  .navds-tabs__tab--small[data-state="active"] {
+    padding-block-end: calc(var(--ax-spacing-1-alt) - 3px);
   }
 
-  .navds-tabs__tab-icon--top[aria-selected="true"],
-  .navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected="true"] {
-    padding-block-end: calc(var(--a-spacing-1) - 3px);
+  .navds-tabs__tab-icon--top[data-state="active"],
+  .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
+    padding-block-end: calc(var(--ax-spacing-1) - 3px);
   }
 }

package/darkside/toggle-group.darkside.css

@@ -1,180 +1,112 @@
 .navds-toggle-group__wrapper {
   display: grid;
   justify-items: start;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }
 
 .navds-toggle-group__wrapper--fill {
   justify-items: initial;
 }
 
+/* Main Togglegroup */
 .navds-toggle-group {
-  border-radius: var(--a-border-radius-medium);
-  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
-  padding: calc(var(--a-spacing-1) + 0.0625rem);
-  gap: var(--a-spacing-1);
+  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;
 }
 
-.navds-toggle-group--small {
-  padding: calc(var(--a-spacing-05) + 0.0625rem);
-}
-
-.navds-toggle-group--neutral {
-  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
-}
-
+/* Button */
 .navds-toggle-group__button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--a-spacing-1) var(--a-spacing-3);
-  min-height: 2.375rem;
+  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  min-height: 2.5rem;
   border: none;
   cursor: pointer;
-  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
-  color: var(--ac-toggle-group-button-text, var(--a-text-default));
-  border-radius: var(--a-border-radius-small);
+  background-color: transparent;
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-small);
   min-width: fit-content;
-  font-weight: var(--a-font-weight-regular);
-}
-
-.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
-  border-start-start-radius: 1px;
-  border-end-start-radius: 1px;
-}
-
-.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
-  border-start-end-radius: 1px;
-  border-end-end-radius: 1px;
-}
 
-.navds-toggle-group--neutral > .navds-toggle-group__button {
-  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
-  color: var(--ac-toggle-group-button-neutral-text, var(--a-text-default));
-}
-
-.navds-toggle-group__button:hover {
-  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
-  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
-}
-
-.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
-  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
-}
-
-.navds-toggle-group__button:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 1px;
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    0 0 0 4px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-toggle-group__button:focus {
-    outline: 2px solid transparent;
-    outline-offset: 1px;
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      0 0 0 4px var(--a-border-focus);
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-default);
   }
-}
-
-.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-  box-shadow:
-    0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
-    0 0 0 4px var(--a-border-focus);
-}
 
-@supports not selector(:focus-visible) {
-  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-    box-shadow:
-      0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
-      0 0 0 4px var(--a-border-focus);
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
   }
-}
 
-.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-  box-shadow:
-    0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-    box-shadow:
-      0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
-      0 0 0 4px var(--a-border-focus);
+  &[aria-checked="true"] {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
   }
 }
 
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-2);
-  font-weight: inherit;
-}
+  gap: var(--ax-spacing-2);
 
-.navds-toggle-group__button-inner > * {
-  flex-shrink: 0;
-}
+  > * {
+    flex-shrink: 0;
+  }
 
-.navds-toggle-group__button[aria-pressed="true"],
-.navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
-  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
+  > svg {
+    font-size: var(--ax-font-size-heading-medium);
+  }
 }
 
-.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
-.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
-  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
-}
+/* Modifier neutral variant */
+:where(.navds-toggle-group--neutral) .navds-toggle-group__button {
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
 
-.navds-toggle-group--small > .navds-toggle-group__button {
-  padding: var(--a-spacing-05) var(--a-spacing-3);
-  min-height: 1.625rem;
-  min-width: fit-content;
+  &[aria-checked="true"] {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+  }
 }
 
-.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
-  font-size: 1.5rem;
-}
+/* Modifier small size */
+.navds-toggle-group--small {
+  & .navds-toggle-group__button {
+    padding: var(--ax-spacing-05) var(--ax-spacing-3);
+    min-height: 1.5rem;
+  }
 
-.navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
-  font-size: 1.125rem;
+  & .navds-toggle-group__button-inner > svg {
+    font-size: var(--ax-font-size-xlarge);
+  }
 }
 
+/* High contrast */
 @media (forced-colors: active) {
   .navds-toggle-group {
     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[aria-pressed="true"] {
+  .navds-toggle-group__button[aria-checked="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
-  }
-
-  .navds-toggle-group__button[aria-checked="true"] > *,
-  .navds-toggle-group__button[aria-pressed="true"] > * {
     forced-color-adjust: none;
   }
 
-  .navds-toggle-group__button:active {
-    background-color: unset !important;
-  }
-
   .navds-toggle-group__button:focus-visible {
     outline-color: highlight;
   }

package/dist/component/form.css

@@ -82,14 +82,6 @@
     opacity: 1;
   }
 }
-/**
-* Makes it easier for user to use FileItem in semantic lists
-*/
-.navds-file-upload :is(ul, li) {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
 /**
  * FileUpload.Dropzone
  */
@@ -228,6 +220,13 @@
 /**
  * FileUpload.Item
  */
+.navds-file-upload :is(ul, li),
+ul:has(> li.navds-file-item),
+li.navds-file-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 .navds-file-item__inner {
   outline: 1px solid var(--a-border-subtle);
   outline-offset: -1px;
@@ -758,7 +757,7 @@
     box-shadow: none;
   }
 
-  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
+  .navds-select__input.navds-select__input.navds-select__input:focus {
     outline: 2px solid highlight;
     outline-offset: 2px;
   }
@@ -767,17 +766,11 @@
   border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
   cursor: pointer;
 }
-.navds-select__input:focus-visible {
+.navds-select__input:focus {
   outline: none;
   border-color: var(--ac-select-active-border, var(--a-border-action-selected));
   box-shadow: var(--a-shadow-focus);
 }
-@supports not selector(:focus-visible) {
-  .navds-select__input:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
 .navds-select__container {
   position: relative;
   display: flex;
@@ -962,6 +955,12 @@
   transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
 }
+.navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
+  visibility: visible;
+}
+.navds-switch__checkmark {
+  visibility: hidden;
+}
 @media (hover: hover) and (pointer: fine) {
   .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
     transform: translateX(0.125rem);
@@ -1515,7 +1514,7 @@
     var(--a-shadow-focus);
 }
 .navds-combobox__selected-options {
-  gap: var(--__ac-combobox-wrapper-inner-padding);
+  gap: 0;
   align-items: center;
 }
 .navds-combobox__selected-options > li {
@@ -1535,6 +1534,12 @@
   margin: 0;
   padding-left: 0.25rem;
 }
+.navds-combobox__selected-options[data-type="multiple"] {
+  gap: var(--__ac-combobox-wrapper-inner-padding);
+}
+.navds-combobox__selected-options > li:only-child > .navds-combobox__input {
+  margin-left: var(--a-spacing-1);
+}
 .navds-combobox__input-wrapper {
   width: 100%;
 }
@@ -1543,7 +1548,6 @@
   border: none;
   padding: 0;
   margin: 0;
-  margin-left: var(--a-spacing-1);
   min-width: 10ch;
   width: 100%;
   height: var(--__ac-combobox-input-height);