@navikt/aksel-stylelint 5.18.3 → 6.0.0

package/dist/deprecations.js

@@ -43,4 +43,13 @@ exports.deprecations = [
         ],
         message: "There is no 1:1 replacement for this, the size will depend on the 'poster' prop and the viewport width",
     },
+    {
+        classes: ["navds-grid", "navds-content-container"],
+        deprecatePrefix: true,
+        message: "Components were replaced by `HGrid` and `Page.Block` in version 6",
+    },
+    {
+        classes: ["navds-textarea__wrapper"],
+        message: "Removed in v6.0.0",
+    },
 ];

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Mon, 19 Feb 2024 10:35:33 GMT
+ * Generated on Mon, 19 Feb 2024 14:06:51 GMT
  */
 :root, :host {
   --a-spacing-1-alt: 0.375rem;
@@ -141,7 +141,6 @@
   --a-z-index-tooltip: 3000;
   --a-z-index-focus: 10;
   --a-z-index-popover: 1000;
-  --a-z-index-modal: 2000;
   --a-font-weight-regular: 400;
   --a-font-weight-bold: 600;
   --a-font-size-small: 0.875rem;
@@ -165,6 +164,8 @@
   --a-font-line-height-heading-2xlarge: 3.25rem;
   --a-font-family: 'Source Sans Pro', Arial, sans-serif;
   --a-text-width-max: 576px;
+  --a-breakpoint-2xl-down: 1439px;
+  --a-breakpoint-2xl: 1440px;
   --a-breakpoint-xl-down: 1279px;
   --a-breakpoint-xl: 1280px;
   --a-breakpoint-lg-down: 1023px;
@@ -204,6 +205,7 @@
   --a-text-on-inverted: var(--a-white);
   --a-text-action: var(--a-blue-500);
   --a-text-action-on-action-subtle: var(--a-blue-600);
+  --a-text-action-hover: var(--a-blue-600);
   --a-text-action-selected: var(--a-blue-700);
   --a-text-danger: var(--a-red-500);
   --a-text-visited: var(--a-purple-500);
@@ -278,6 +280,7 @@
   --a-icon-success: var(--a-green-500);
   --a-icon-action: var(--a-blue-500);
   --a-icon-action-on-action-subtle: var(--a-blue-600);
+  --a-icon-action-hover: var(--a-blue-600);
   --a-icon-action-selected: var(--a-blue-700);
   --a-icon-subtle: var(--a-grayalpha-700);
   --a-icon-default: var(--a-gray-900);
@@ -294,6 +297,7 @@
   --a-border-success: var(--a-green-500);
   --a-border-selected: var(--a-blue-500);
   --a-border-action: var(--a-blue-500);
+  --a-border-action-hover: var(--a-blue-600);
   --a-border-action-selected: var(--a-blue-700);
   --a-border-subtle: var(--a-grayalpha-300);
   --a-border-divider: var(--a-grayalpha-300);
@@ -304,7 +308,6 @@
   --a-bg-default: var(--a-white);
   --a-shadow-focus-inverted: 0 0 0 3px var(--a-border-focus-on-inverted);
   --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
-  --navds-content-container-max-width: 79.5rem;
 }
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
@@ -1047,205 +1050,6 @@ body,
 .navds-typo--color-subtle {
   color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
 }
-/**************************
- * .navds-grid *
- **************************/
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--a-spacing-4);
-}
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--a-spacing-6);
-  }
-}
-/**************************
- * .navds-grid__cell *
- **************************/
-.navds-grid__cell--xs-1 {
-  grid-column: span 1;
-}
-.navds-grid__cell--xs-2 {
-  grid-column: span 2;
-}
-.navds-grid__cell--xs-3 {
-  grid-column: span 3;
-}
-.navds-grid__cell--xs-4 {
-  grid-column: span 4;
-}
-.navds-grid__cell--xs-5 {
-  grid-column: span 5;
-}
-.navds-grid__cell--xs-6 {
-  grid-column: span 6;
-}
-.navds-grid__cell--xs-7 {
-  grid-column: span 7;
-}
-.navds-grid__cell--xs-8 {
-  grid-column: span 8;
-}
-.navds-grid__cell--xs-9 {
-  grid-column: span 9;
-}
-.navds-grid__cell--xs-10 {
-  grid-column: span 10;
-}
-.navds-grid__cell--xs-11 {
-  grid-column: span 11;
-}
-.navds-grid__cell--xs-12 {
-  grid-column: span 12;
-}
-@media (min-width: 448px) {
-  .navds-grid__cell--sm-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--sm-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--sm-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--sm-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--sm-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--sm-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--sm-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--sm-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--sm-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--sm-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--sm-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--sm-12 {
-    grid-column: span 12;
-  }
-}
-@media (min-width: 648px) {
-  .navds-grid__cell--md-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--md-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--md-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--md-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--md-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--md-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--md-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--md-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--md-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--md-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--md-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--md-12 {
-    grid-column: span 12;
-  }
-}
-@media (min-width: 960px) {
-  .navds-grid__cell--lg-1 {
-    grid-column: span 1;
-  }
-
-  .navds-grid__cell--lg-2 {
-    grid-column: span 2;
-  }
-
-  .navds-grid__cell--lg-3 {
-    grid-column: span 3;
-  }
-
-  .navds-grid__cell--lg-4 {
-    grid-column: span 4;
-  }
-
-  .navds-grid__cell--lg-5 {
-    grid-column: span 5;
-  }
-
-  .navds-grid__cell--lg-6 {
-    grid-column: span 6;
-  }
-
-  .navds-grid__cell--lg-7 {
-    grid-column: span 7;
-  }
-
-  .navds-grid__cell--lg-8 {
-    grid-column: span 8;
-  }
-
-  .navds-grid__cell--lg-9 {
-    grid-column: span 9;
-  }
-
-  .navds-grid__cell--lg-10 {
-    grid-column: span 10;
-  }
-
-  .navds-grid__cell--lg-11 {
-    grid-column: span 11;
-  }
-
-  .navds-grid__cell--lg-12 {
-    grid-column: span 12;
-  }
-}
 .navds-accordion {
   --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
 }
@@ -1674,6 +1478,7 @@ body,
     --ac-button-secondary-hover-bg,
     var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
   );
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-hover-border, var(--a-border-action-hover));
 }
 .navds-button--secondary:focus-visible {
   box-shadow:
@@ -1937,17 +1742,6 @@ body,
     stroke: canvastext;
   }
 }
-.navds-content-container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--navds-content-container-max-width);
-  padding: var(--a-spacing-4);
-}
-@media (min-width: 448px) {
-  .navds-content-container {
-    padding: var(--a-spacing-6);
-  }
-}
 .navds-chat {
   display: flex;
   align-items: flex-end;
@@ -2363,7 +2157,7 @@ body,
   background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
 }
 .navds-copybutton--action:hover {
-  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
+  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
   background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
 }
 .navds-copybutton--action:where(:disabled),
@@ -2473,6 +2267,7 @@ body,
 }
 .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 {
   background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
@@ -2881,10 +2676,15 @@ body,
 .navds-error-summary--small {
   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);
@@ -2930,6 +2730,9 @@ body,
   border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
   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: "";
@@ -3037,21 +2840,17 @@ body,
 .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);
 }
 @supports not selector(:focus-visible) {
   .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;
@@ -3066,9 +2865,13 @@ body,
 .navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   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 {
   display: none;
@@ -3098,7 +2901,7 @@ body,
 .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);
 }
@@ -3106,20 +2909,20 @@ body,
   .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);
   }
 }
 .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);
 }
@@ -3133,17 +2936,17 @@ body,
 }
 .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));
   }
 }
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
@@ -3372,11 +3175,12 @@ body,
   }
 }
 .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);
 }
 @supports not selector(:focus-visible) {
@@ -3692,12 +3496,13 @@ body,
   min-height: 2rem;
 }
 .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) {
   .navds-text-field__input:focus {
@@ -3751,16 +3556,9 @@ body,
     color: fieldtext;
   }
 }
-.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)));
@@ -3775,12 +3573,13 @@ body,
   color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
 }
 .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) {
   .navds-textarea__input:focus {
@@ -3793,7 +3592,7 @@ body,
   padding: var(--a-spacing-1-alt);
 }
 .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)));
 }
 .navds-textarea__counter--error {
@@ -3802,7 +3601,7 @@ body,
 .navds-textarea__sr-counter {
   display: none;
 }
-.navds-textarea__wrapper:focus-within .navds-textarea__sr-counter {
+.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
   display: initial;
 }
 .navds-textarea--resize-both .navds-textarea__input {
@@ -3928,7 +3727,7 @@ body,
   width: 24px;
 }
 .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 {
   outline: 2px solid transparent;
@@ -3960,12 +3759,12 @@ body,
     0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
     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;
 }
 .navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
@@ -3978,7 +3777,7 @@ body,
 }
 .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);
 }
 .navds-search__button-search.navds-button--secondary:focus-visible:active {
@@ -4122,9 +3921,6 @@ body,
   box-shadow: none;
 }
 .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;
@@ -4141,9 +3937,6 @@ body,
   }
 
   .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;
@@ -4156,9 +3949,6 @@ body,
 }
 @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;
@@ -4314,7 +4104,7 @@ body,
 }
 .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));
@@ -4465,6 +4255,10 @@ body,
 }
 .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) {
   .navds-help-text__button:where(:focus) > .navds-help-text__icon {
@@ -4603,6 +4397,7 @@ button.navds-internalheader__title:active,
 }
 .navds-link:hover {
   text-decoration: none;
+  color: var(--ac-link-hover-text, var(--a-text-action-hover));
 }
 .navds-link.navds-link--remove-underline {
   text-decoration: none;
@@ -6129,11 +5924,11 @@ button.navds-internalheader__title:active,
 }
 .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 {
   outline: 3px solid transparent;
@@ -6191,6 +5986,7 @@ button.navds-internalheader__title:active,
 }
 .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 {
   background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
@@ -6485,6 +6281,9 @@ button.navds-stepper__step {
 :where(.navds-stepper__step--active) .navds-stepper__content {
   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;
 }
@@ -6500,8 +6299,7 @@ button.navds-stepper__step {
   background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
 }
 :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 */
 :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
@@ -6839,7 +6637,7 @@ button.navds-stepper__step {
   box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
 }
 .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));
 }
 .navds-tabs__tab:focus-visible {
@@ -7001,16 +6799,19 @@ button.navds-stepper__step {
   --__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);
@@ -7023,6 +6824,7 @@ button.navds-stepper__step {
   --__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));
@@ -7066,17 +6868,27 @@ button.navds-stepper__step {
     --__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);
+  }
+}
 .navds-bleed {
   --__ac-bleed-margin-inline-xs: initial;
   --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
   --__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);
@@ -7091,11 +6903,13 @@ button.navds-stepper__step {
   --__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);
@@ -7148,6 +6962,17 @@ button.navds-stepper__step {
     --__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);
+  }
+}
 .navds-page {
   display: flex;
   flex-direction: column;
@@ -7206,12 +7031,14 @@ button.navds-stepper__step {
   --__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;
 
@@ -7253,6 +7080,24 @@ button.navds-stepper__step {
     );
   }
 }
+@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))))
+      )
+    );
+  }
+}
 .navds-stack {
   --__ac-stack-wrap: initial;
   --__ac-stack-gap-xs: initial;
@@ -7260,24 +7105,28 @@ button.navds-stepper__step {
   --__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);
@@ -7327,6 +7176,14 @@ button.navds-stepper__step {
     --__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);
+  }
+}
 @media (min-width: 480px) {
   .navds-responsive__below--sm {
     display: none !important;
@@ -7367,3 +7224,13 @@ button.navds-stepper__step {
     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/dist/tokens.json

@@ -40,6 +40,7 @@
     "--ac-button-secondary-border": "--a-border-action",
     "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
     "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-button-secondary-hover-border": "--a-border-action-hover",
     "--ac-button-secondary-focus-border": "--a-border-action",
     "--ac-button-secondary-active-text": "--a-text-on-action",
     "--ac-button-secondary-active-bg": "--a-surface-action-active",
@@ -117,7 +118,7 @@
     "--ac-copybutton-border-radius": "--a-border-radius-medium",
     "--ac-copybutton-action-text": "--a-text-action",
     "--ac-copybutton-action-bg": "--a-surface-transparent",
-    "--ac-copybutton-action-hover-text": "--a-text-action",
+    "--ac-copybutton-action-hover-text": "--a-text-action-hover",
     "--ac-copybutton-action-hover-bg": "--a-surface-hover",
     "--ac-copybutton-action-active-text": "--a-icon-success",
     "--ac-copybutton-neutral-text": "--a-text-subtle",
@@ -161,16 +162,19 @@
     "--ac-guide-panel-illustration-bg": "--a-surface-alt-3-subtle"
   },
   "helptext": {
+    "--ac-help-text-popover-bg": "--a-surface-info-subtle",
     "--ac-help-text-button-color": "--a-surface-action",
-    "--ac-help-text-popover-bg": "--a-surface-info-subtle"
+    "--ac-help-text-button-hover-color": "--a-surface-action-hover",
+    "--ac-help-text-button-active-color": "--a-surface-action-active"
   },
   "linkpanel": {
     "--ac-link-panel-text": "--a-text-default",
-    "--ac-link-panel-hover-text": "--a-text-action",
-    "--ac-link-panel-hover-border": "--a-border-action"
+    "--ac-link-panel-hover-text": "--a-text-action-hover",
+    "--ac-link-panel-hover-border": "--a-border-action-hover"
   },
   "link": {
     "--ac-link-text": "--a-text-action",
+    "--ac-link-hover-text": "--a-text-action-hover",
     "--ac-link-focus-text": "--a-text-on-action",
     "--ac-link-focus-bg": "--a-border-focus",
     "--ac-link-focus-border": "--a-border-focus",
@@ -217,6 +221,7 @@
   "readmore": {
     "--ac-read-more-text": "--a-text-action",
     "--ac-read-more-hover-bg": "--a-surface-hover",
+    "--ac-read-more-hover-text": "--a-text-action-hover",
     "--ac-read-more-active-bg": "--a-surface-active",
     "--ac-read-more-line": "--a-border-divider"
   },
@@ -232,6 +237,7 @@
     "--ac-stepper-active-bg": "--a-surface-action-selected",
     "--ac-stepper-active-border": "--a-border-action-selected",
     "--ac-stepper-active-text": "--a-text-on-action",
+    "--ac-stepper-hover-active": "--a-text-action-hover",
     "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
     "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
@@ -258,7 +264,7 @@
     "--ac-tabs-border": "--a-border-divider",
     "--ac-tabs-text": "--a-text-default",
     "--ac-tabs-hover-border": "--a-border-subtle-hover",
-    "--ac-tabs-selected-border": "--a-border-action",
+    "--ac-tabs-selected-border": "--a-border-action-selected",
     "--ac-tabs-selected-text": "--a-text-default",
     "--ac-tabs-focus-text": "--a-text-default"
   },
@@ -361,7 +367,7 @@
   "checkbox-radio": {
     "--ac-radio-checkbox-bg": "--a-surface-default",
     "--ac-radio-checkbox-border": "--a-border-default",
-    "--ac-radio-checkbox-action": "--a-surface-action",
+    "--ac-radio-checkbox-action": "--a-surface-action-selected",
     "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
     "--ac-radio-checkbox-error-border": "--a-border-danger",
     "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
@@ -372,9 +378,9 @@
   },
   "search": {
     "--ac-search-button-border": "--a-border-default",
-    "--ac-search-button-border-hover": "--a-border-action",
+    "--ac-search-button-border-hover": "--a-border-action-hover",
     "--ac-search-clear-icon": "--a-text-default",
-    "--ac-search-clear-icon-hover": "--a-text-action",
+    "--ac-search-clear-icon-hover": "--a-text-action-hover",
     "--ac-search-button-focus-active-border": "--a-surface-default",
     "--ac-search-error-border": "--a-border-danger"
   },
@@ -400,7 +406,8 @@
     "--ac-select-bg": "--a-surface-default",
     "--ac-select-text": "--a-text-default",
     "--ac-select-border": "--a-border-default",
-    "--ac-select-hover-bg": "--a-border-action",
+    "--ac-select-hover-border": "--a-border-action-hover",
+    "--ac-select-active-border": "--a-border-action-selected",
     "--ac-select-error-border": "--a-surface-danger"
   },
   "switch": {
@@ -418,7 +425,8 @@
     "--ac-textfield-border": "--a-border-default",
     "--ac-textfield-text": "--a-text-default",
     "--ac-textfield-placeholder": "--a-text-subtle",
-    "--ac-textfield-hover-border": "--a-border-action",
+    "--ac-textfield-hover-border": "--a-border-action-hover",
+    "--ac-textfield-active-border": "--a-border-action-selected",
     "--ac-textfield-error-border": "--a-border-danger"
   },
   "textarea": {
@@ -426,7 +434,8 @@
     "--ac-textarea-border": "--a-border-default",
     "--ac-textarea-text": "--a-text-default",
     "--ac-textarea-placeholder": "--a-text-subtle",
-    "--ac-textarea-hover-border": "--a-border-action",
+    "--ac-textarea-hover-border": "--a-border-action-hover",
+    "--ac-textarea-active-border": "--a-border-action-selected",
     "--ac-textarea-counter-text": "--a-text-subtle",
     "--ac-textarea-counter-error-text": "--a-text-danger",
     "--ac-textarea-error-border": "--a-border-danger"
@@ -435,6 +444,7 @@
     "--ac-dropdown-text": "--a-text-default",
     "--ac-dropdown-item-text": "--a-text-action",
     "--ac-dropdown-item-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-dropdown-item-hover-text": "--a-text-action-hover",
     "--ac-dropdown-item-active-bg": "--a-surface-action-active",
     "--ac-dropdown-item-active-text": "--a-text-on-active"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.18.3",
+  "version": "6.0.0",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^5.18.3",
-    "@navikt/ds-tokens": "^5.18.3",
+    "@navikt/ds-css": "^6.0.0",
+    "@navikt/ds-tokens": "^6.0.0",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",