@navikt/ds-css 5.18.3 → 6.1.0

package/dropdown.css

@@ -50,6 +50,7 @@
 
 .navds-dropdown__item:hover {
   background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
+  color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
 }
 
 .navds-dropdown__item:active {

package/form/combobox.css

@@ -92,9 +92,6 @@
 }
 
 .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-  box-shadow:
-    0 0 0 1px var(--a-surface-default) inset,
-    var(--a-shadow-focus);
   box-shadow: var(--a-shadow-focus);
   outline: 3px solid transparent;
   outline-offset: 2px;
@@ -113,9 +110,6 @@
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
     outline: 3px solid transparent;
     outline-offset: 2px;
@@ -129,9 +123,6 @@
 
 @supports not selector(:has) {
   .navds-combobox--focused .navds-combobox__wrapper-inner {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
     outline: 3px solid transparent;
     outline-offset: 2px;
@@ -310,7 +301,7 @@
 
 .navds-combobox__list-item--focus,
 .navds-combobox__list--with-hover
-  .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
   background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
   cursor: pointer;
   border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));

package/form/confirmation-panel.css

@@ -25,6 +25,10 @@
   background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
 }
 
+.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
+  color: var(--a-text-default);
+}
+
 @media (forced-colors: active) {
   .navds-confirmation-panel__inner::before {
     content: "";

package/form/error-summary.css

@@ -9,11 +9,17 @@
   padding: var(--a-spacing-3);
 }
 
-.navds-error-summary:focus-visible {
-  box-shadow: var(--a-shadow-focus);
+.navds-error-summary__heading:focus {
   outline: none;
 }
 
+.navds-error-summary:focus-visible,
+.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
+  box-shadow:
+    0 0 0 1px var(--a-border-on-inverted),
+    0 0 0 4px var(--a-border-focus);
+}
+
 @supports not selector(:focus-visible) {
   .navds-error-summary:focus {
     box-shadow: var(--a-shadow-focus);

package/form/radio-checkbox.css

@@ -94,7 +94,7 @@
 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
     0 0 0 4px var(--a-border-focus);
 }
 
@@ -102,16 +102,11 @@
   .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
   .navds-radio__input:hover:focus + .navds-radio__label::before {
     box-shadow:
-      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
       0 0 0 4px var(--a-border-focus);
   }
 }
 
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
-}
-
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   content: "";
   position: absolute;
@@ -128,9 +123,14 @@
   transform: translate(0.25rem, -50%);
 }
 
-.navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
 }
 
 .navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
@@ -166,7 +166,7 @@
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
   box-shadow:
-    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
@@ -175,7 +175,7 @@
   .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
   .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
     box-shadow:
-      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
       0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
       0 0 0 4px var(--a-border-focus);
   }
@@ -183,14 +183,14 @@
 
 .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
 }
 
 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
   box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
     inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
     0 0 0 4px var(--a-border-focus);
 }
@@ -206,19 +206,19 @@
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ac-radio-checkbox-action, var(--a-surface-action));
+  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
 
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
   .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
   }
 }
 

package/form/search.css

@@ -95,7 +95,7 @@
 }
 
 .navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action)));
+  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
 }
 
 .navds-search__button-clear:focus-visible {
@@ -134,12 +134,12 @@
     0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
 }
 
-.navds-search__button-search.navds-button--secondary:hover {
+.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
   box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
   z-index: 1;
 }
 
@@ -155,7 +155,7 @@
 
 .navds-search__button-search.navds-button--secondary:focus-visible:hover {
   box-shadow:
-    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
     var(--a-shadow-focus);
 }
 

package/form/select.css

@@ -29,12 +29,13 @@
 }
 
 .navds-select__input:hover {
-  border-color: var(--ac-select-hover-bg, var(--a-border-action));
+  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
   cursor: pointer;
 }
 
 .navds-select__input:focus-visible {
   outline: none;
+  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
   box-shadow: var(--a-shadow-focus);
 }
 

package/form/text-field.css

@@ -41,13 +41,14 @@
 }
 
 .navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action)));
+  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
 }
 
 .navds-text-field__input:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
 }
 
 @supports not selector(:focus-visible) {

package/form/textarea.css

@@ -20,18 +20,9 @@
   --__ac-textarea-counter-error-text: initial;
 }
 
-.navds-textarea__wrapper {
-  --__ac-textarea-height: initial;
-
-  position: relative;
-  min-width: 100%;
-}
-
-.navds-textarea__input:first-child {
-  height: var(--__ac-textarea-height);
-}
-
 .navds-textarea__input {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  height: var(--__ac-textarea-height);
   appearance: none;
   padding: var(--a-spacing-2);
   background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
@@ -48,13 +39,14 @@
 }
 
 .navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action)));
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
 }
 
 .navds-textarea__input:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
 }
 
 @supports not selector(:focus-visible) {
@@ -70,7 +62,7 @@
 }
 
 .navds-textarea__counter {
-  margin-top: var(--a-spacing-05);
+  margin-top: -0.375rem;
   color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
 }
 
@@ -82,7 +74,7 @@
   display: none;
 }
 
-.navds-textarea__wrapper:focus-within .navds-textarea__sr-counter {
+.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
   display: initial;
 }
 

package/help-text.css

@@ -53,6 +53,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
+  color: var(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
+}
+
+.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
 }
 
 @supports not selector(:focus-visible) {

package/index.css

@@ -1,11 +1,9 @@
 @charset "UTF-8";
 @import "baseline/index.css";
 @import "typography.css";
-@import "grid.css";
 @import "accordion.css";
 @import "alert.css";
 @import "button.css";
-@import "content-container.css";
 @import "chat.css";
 @import "chips.css";
 @import "copybutton.css";

package/link-panel.css

@@ -9,12 +9,12 @@
 
 .navds-link-panel:hover .navds-link-panel__title {
   text-decoration: underline;
-  color: var(--ac-link-panel-hover-text, var(--a-text-action));
+  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
 }
 
 .navds-link-panel:hover {
   box-shadow: var(--a-shadow-small);
-  border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
+  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
 }
 
 .navds-link-panel:focus-visible {

package/link.css

@@ -20,6 +20,7 @@
 
 .navds-link:hover {
   text-decoration: none;
+  color: var(--ac-link-hover-text, var(--a-text-action-hover));
 }
 
 .navds-link.navds-link--remove-underline {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.18.3",
+  "version": "6.1.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.18.3",
+    "@navikt/ds-tokens": "^6.1.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

package/primitives/bleed.css

@@ -4,11 +4,13 @@
   --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
   --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
   --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-inline-2xl: var(--__ac-bleed-margin-inline-xl);
   --__ac-bleed-margin-block-xs: initial;
   --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
   --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
   --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
   --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+  --__ac-bleed-margin-block-2xl: var(--__ac-bleed-margin-block-xl);
 
   /** defaults */
   --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
@@ -24,11 +26,13 @@
   --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
   --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
   --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-inline-2xl: var(--__ac-bleed-padding-inline-xl);
   --__ac-bleed-padding-block-xs: initial;
   --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
   --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
   --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
   --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+  --__ac-bleed-padding-block-2xl: var(--__ac-bleed-padding-block-xl);
 
   /** defaults */
   --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
@@ -85,3 +89,15 @@
     --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-2xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-2xl);
+  }
+}

package/primitives/box.css

@@ -4,16 +4,19 @@
   --__ac-box-padding-md: var(--__ac-box-padding-sm);
   --__ac-box-padding-lg: var(--__ac-box-padding-md);
   --__ac-box-padding-xl: var(--__ac-box-padding-lg);
+  --__ac-box-padding-2xl: var(--__ac-box-padding-xl);
   --__ac-box-padding-inline-xs: initial;
   --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
   --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
   --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
+  --__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl);
   --__ac-box-padding-block-xs: initial;
   --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
   --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
   --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
   --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
+  --__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl);
   --__ac-box-padding: var(--__ac-box-padding-xs);
   --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
   --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
@@ -26,6 +29,7 @@
   --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
   --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
   --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
+  --__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
   --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
 
   padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
@@ -73,3 +77,12 @@
     --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-2xl);
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl);
+    --__ac-box-padding-block: var(--__ac-box-padding-block-2xl);
+    --__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
+  }
+}

package/primitives/hgrid.css

@@ -4,12 +4,14 @@
   --__ac-hgrid-columns-md: initial;
   --__ac-hgrid-columns-lg: initial;
   --__ac-hgrid-columns-xl: initial;
+  --__ac-hgrid-columns-2xl: initial;
   --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
   --__ac-hgrid-gap-xs: initial;
   --__ac-hgrid-gap-sm: initial;
   --__ac-hgrid-gap-md: initial;
   --__ac-hgrid-gap-lg: initial;
   --__ac-hgrid-gap-xl: initial;
+  --__ac-hgrid-gap-2xl: initial;
   --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
   --__ac-hgrid-align: initial;
 
@@ -55,3 +57,22 @@
     );
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(
+      --__ac-hgrid-columns-2xl,
+      var(
+        --__ac-hgrid-columns-xl,
+        var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
+      )
+    );
+    --__ac-hgrid-gap: var(
+      --__ac-hgrid-gap-2xl,
+      var(
+        --__ac-hgrid-gap-xl,
+        var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
+      )
+    );
+  }
+}

package/primitives/responsive.css

@@ -45,3 +45,15 @@
     display: none !important;
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-responsive__below--2xl {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1439px) {
+  .navds-responsive__above--2xl {
+    display: none !important;
+  }
+}

package/primitives/stack.css

@@ -5,24 +5,28 @@
   --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
   --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
   --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
+  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
   --__ac-stack-gap: var(--__ac-stack-gap-xs);
   --__ac-stack-justify-xs: initial;
   --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
   --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
   --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
   --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
   --__ac-stack-justify: var(--__ac-stack-justify-xs);
   --__ac-stack-align-xs: initial;
   --__ac-stack-align-sm: var(--__ac-stack-align-xs);
   --__ac-stack-align-md: var(--__ac-stack-align-sm);
   --__ac-stack-align-lg: var(--__ac-stack-align-md);
   --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
   --__ac-stack-align: var(--__ac-stack-align-xs);
   --__ac-stack-direction-xs: initial;
   --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
   --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
   --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
   --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
   --__ac-stack-direction: var(--__ac-stack-direction-xs);
 
   gap: var(--__ac-stack-gap);
@@ -78,3 +82,12 @@
     --__ac-stack-direction: var(--__ac-stack-direction-xl);
   }
 }
+
+@media (min-width: 1440px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-2xl);
+    --__ac-stack-align: var(--__ac-stack-align-2xl);
+    --__ac-stack-justify: var(--__ac-stack-justify-2xl);
+    --__ac-stack-direction: var(--__ac-stack-direction-2xl);
+  }
+}

package/read-more.css

@@ -33,6 +33,7 @@
 
 .navds-read-more__button:hover {
   background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
+  color: var(--ac-read-more-hover-text, var(--a-text-action-hover));
 }
 
 .navds-read-more__button:active {

package/stepper.css

@@ -220,6 +220,10 @@ button.navds-stepper__step {
   color: var(--ac-stepper-active, var(--a-text-action-selected));
 }
 
+.navds-stepper__step:hover:where(:not(.navds-stepper__step--non-interactive)) {
+  color: var(--ac-stepper-hover-active, var(--a-text-action-hover));
+}
+
 :where(.navds-stepper__step:hover) .navds-stepper__content {
   text-decoration: underline;
 }
@@ -239,8 +243,7 @@ button.navds-stepper__step {
 }
 
 :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
-  color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
-  background-color: var(--ac-stepper-text, var(--a-surface-action));
+  background-color: var(--ac-stepper-text, var(--a-surface-action-hover));
 }
 
 /* Non-interactive */

package/tabs.css

@@ -58,7 +58,7 @@
 }
 
 .navds-tabs__tab[aria-selected="true"] {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action));
+  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));
 }