@navikt/aksel-stylelint 5.3.4 → 5.4.0

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Thu, 07 Sep 2023 07:13:58 GMT
+ * Generated on Thu, 07 Sep 2023 12:27:29 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -746,41 +746,48 @@ button,
   --a-shadow-focus: var(--a-shadow-focus-inverted);
 
   color: var(--a-text-on-inverted);
-  --ac-button-primary-text: var(--a-gray-900);
-  --ac-button-primary-bg: var(--a-blue-200);
-  --ac-button-primary-focus-border: var(--a-gray-900);
-  --ac-button-primary-hover-bg: var(--a-blue-300);
-  --ac-button-primary-active-bg: var(--a-blue-400);
-  --ac-button-secondary-text: var(--a-white);
-  --ac-button-secondary-hover-text: var(--a-white);
-  --ac-button-secondary-active-text: var(--a-white);
-  --ac-button-secondary-active-focus-border: var(--a-gray-900);
-  --ac-button-secondary-bg: var(--a-gray-900);
-  --ac-button-secondary-border: var(--a-blue-200);
-  --ac-button-secondary-hover-bg: var(--a-gray-800);
-  --ac-button-secondary-focus-border: var(--a-blue-200);
-  --ac-button-secondary-active-bg: var(--a-gray-700);
-  --ac-form-description: var(--a-text-on-inverted);
-  --ac-form-description: var(--a-text-on-inverted);
-  --ac-textfield-text: var(--a-text-on-inverted);
-  --ac-textfield-bg: var(--a-surface-inverted);
-  --ac-textfield-border: var(--a-border-on-inverted);
-  --ac-textfield-hover-border: var(--a-blue-200);
-  --ac-textfield-placeholder: var(--a-gray-500);
-  --ac-textfield-error-border: var(--a-red-300);
-  --ac-textarea-text: var(--a-text-on-inverted);
-  --ac-textarea-bg: var(--a-transparent);
-  --ac-textarea-border: var(--a-border-on-inverted);
-  --ac-textarea-hover-border: var(--a-blue-200);
-  --ac-textarea-placeholder: var(--a-gray-500);
-  --ac-textarea-error-border: var(--a-red-300);
-  --ac-textarea-counter-text: var(--a-gray-300);
-  --ac-textarea-counter-error-text: var(--a-red-300);
-  --ac-search-button-border: var(--a-border-on-inverted);
-  --ac-search-button-border-hover: var(--a-blue-200);
-  --ac-search-clear-icon: var(--a-white);
-  --ac-search-clear-icon-hover: var(--a-blue-200);
-  --ac-search-error-border: var(--a-red-300);
+  --__ac-typo-error-text: var(--a-red-300);
+  --__ac-typo-text-subtle: var(--a-gray-300);
+  --__ac-button-primary-text: var(--a-gray-900);
+  --__ac-button-primary-bg: var(--a-blue-200);
+  --__ac-button-primary-focus-border: var(--a-gray-900);
+  --__ac-button-primary-hover-bg: var(--a-blue-300);
+  --__ac-button-primary-active-bg: var(--a-blue-400);
+  --__ac-button-secondary-text: var(--a-white);
+  --__ac-button-secondary-hover-text: var(--a-white);
+  --__ac-button-secondary-active-text: var(--a-white);
+  --__ac-button-secondary-active-focus-border: var(--a-gray-900);
+  --__ac-button-secondary-bg: var(--a-gray-900);
+  --__ac-button-secondary-border: var(--a-blue-200);
+  --__ac-button-secondary-hover-bg: var(--a-gray-800);
+  --__ac-button-secondary-focus-border: var(--a-blue-200);
+  --__ac-button-secondary-active-bg: var(--a-gray-700);
+  --__ac-copybutton-action-text: var(--a-blue-300);
+  --__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
+  --__ac-copybutton-icon-success: rgb(51 170 95 /1);
+  --__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
+  --__ac-copybutton-text: rgb(251 252 254 /0.96);
+  --__ac-form-description: var(--a-text-on-inverted);
+  --__ac-form-description: var(--a-text-on-inverted);
+  --__ac-textfield-text: var(--a-text-on-inverted);
+  --__ac-textfield-bg: var(--a-surface-inverted);
+  --__ac-textfield-border: var(--a-border-on-inverted);
+  --__ac-textfield-hover-border: var(--a-blue-200);
+  --__ac-textfield-placeholder: var(--a-gray-500);
+  --__ac-textfield-error-border: var(--a-red-300);
+  --__ac-textarea-text: var(--a-text-on-inverted);
+  --__ac-textarea-bg: var(--a-transparent);
+  --__ac-textarea-border: var(--a-border-on-inverted);
+  --__ac-textarea-hover-border: var(--a-blue-200);
+  --__ac-textarea-placeholder: var(--a-gray-500);
+  --__ac-textarea-error-border: var(--a-red-300);
+  --__ac-textarea-counter-text: var(--a-gray-300);
+  --__ac-textarea-counter-error-text: var(--a-red-300);
+  --__ac-search-button-border: var(--a-border-on-inverted);
+  --__ac-search-button-border-hover: var(--a-blue-200);
+  --__ac-search-clear-icon: var(--a-white);
+  --__ac-search-clear-icon-hover: var(--a-blue-200);
+  --__ac-search-error-border: var(--a-red-300);
 }
 body,
 :host {
@@ -788,6 +795,50 @@ body,
   line-height: 1.333;
   font-size: 1.125rem;
 }
+[data-theme="light"] {
+  --__ac-typo-error-text: initial;
+  --__ac-typo-text-subtle: initial;
+  --__ac-button-primary-text: initial;
+  --__ac-button-primary-bg: initial;
+  --__ac-button-primary-focus-border: initial;
+  --__ac-button-primary-hover-bg: initial;
+  --__ac-button-primary-active-bg: initial;
+  --__ac-button-secondary-text: initial;
+  --__ac-button-secondary-hover-text: initial;
+  --__ac-button-secondary-active-text: initial;
+  --__ac-button-secondary-active-focus-border: initial;
+  --__ac-button-secondary-bg: initial;
+  --__ac-button-secondary-border: initial;
+  --__ac-button-secondary-hover-bg: initial;
+  --__ac-button-secondary-focus-border: initial;
+  --__ac-button-secondary-active-bg: initial;
+  --__ac-copybutton-action-text: initial;
+  --__ac-copybutton-bg-hover: initial;
+  --__ac-copybutton-icon-success: initial;
+  --__ac-copybutton-neutral-text: initial;
+  --__ac-copybutton-text: initial;
+  --__ac-form-description: initial;
+  --__ac-form-description: initial;
+  --__ac-textfield-text: initial;
+  --__ac-textfield-bg: initial;
+  --__ac-textfield-border: initial;
+  --__ac-textfield-hover-border: initial;
+  --__ac-textfield-placeholder: initial;
+  --__ac-textfield-error-border: initial;
+  --__ac-textarea-text: initial;
+  --__ac-textarea-bg: initial;
+  --__ac-textarea-border: initial;
+  --__ac-textarea-hover-border: initial;
+  --__ac-textarea-placeholder: initial;
+  --__ac-textarea-error-border: initial;
+  --__ac-textarea-counter-text: initial;
+  --__ac-textarea-counter-error-text: initial;
+  --__ac-search-button-border: initial;
+  --__ac-search-button-border-hover: initial;
+  --__ac-search-clear-icon: initial;
+  --__ac-search-clear-icon-hover: initial;
+  --__ac-search-error-border: initial;
+}
 /* Heading */
 .navds-heading {
   font-weight: var(--a-font-weight-bold);
@@ -957,12 +1008,8 @@ body,
 .navds-detail--small.navds-typo--spacing {
   margin-bottom: var(--a-spacing-2);
 }
-[data-theme="dark"].navds-error-message,
-[data-theme="dark"] .navds-error-message {
-  --a-text-danger: var(--a-red-300);
-}
 .navds-error-message {
-  color: var(--ac-typo-error-text, var(--a-text-danger));
+  color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
 }
 .navds-typo--truncate {
   overflow: hidden;
@@ -994,11 +1041,155 @@ body,
   width: 1px !important;
 }
 .navds-typo--color-subtle {
-  color: var(--a-text-subtle);
+  color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
+}
+.navds-hgrid {
+  --__ac-hgrid-columns-xs: initial;
+  --__ac-hgrid-columns-sm: initial;
+  --__ac-hgrid-columns-md: initial;
+  --__ac-hgrid-columns-lg: initial;
+  --__ac-hgrid-columns-xl: 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: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-align: initial;
+
+  display: grid;
+  grid-template-columns: var(--__ac-hgrid-columns);
+  gap: var(--__ac-hgrid-gap);
+  align-items: var(--__ac-hgrid-align);
+}
+@media (min-width: 480px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
+  }
+}
+@media (min-width: 768px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
+    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
+  }
+}
+@media (min-width: 1024px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: 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-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
+  }
+}
+@media (min-width: 1280px) {
+  .navds-hgrid {
+    --__ac-hgrid-columns: 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-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-align: initial;
+  --__ac-stack-justify: initial;
+  --__ac-stack-direction: initial;
+  --__ac-stack-wrap: initial;
+  --__ac-stack-gap-xs: initial;
+  --__ac-stack-gap-sm: initial;
+  --__ac-stack-gap-md: initial;
+  --__ac-stack-gap-lg: initial;
+  --__ac-stack-gap-xl: initial;
+  --__ac-stack-gap: var(--__ac-stack-gap-xs);
+
+  gap: var(--__ac-stack-gap);
+  display: flex;
+  align-items: var(--__ac-stack-align);
+  justify-content: var(--__ac-stack-justify);
+  flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
+}
+.navds-stack__spacer {
+  flex: 1;
+  justify-self: stretch;
+  align-self: stretch;
+}
+.navds-stack > .navds-stack__spacer {
+  margin-block-start: calc(var(--__ac-stack-gap) * -1);
+}
+.navds-hstack > .navds-stack__spacer {
+  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
+}
+@media (min-width: 480px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
+  }
+}
+@media (min-width: 768px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
+  }
+}
+@media (min-width: 1024px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
+  }
+}
+@media (min-width: 1280px) {
+  .navds-stack {
+    --__ac-stack-gap: var(
+      --__ac-stack-gap-xl,
+      var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))))
+    );
+  }
+}
+.navds-responsive {
+  display: none;
+}
+@media (min-width: 480px) {
+  .navds-responsive__above--sm {
+    display: revert;
+  }
+}
+@media (max-width: 479px) {
+  .navds-responsive__below--sm {
+    display: revert;
+  }
+}
+@media (min-width: 768px) {
+  .navds-responsive__above--md {
+    display: revert;
+  }
+}
+@media (max-width: 767px) {
+  .navds-responsive__below--md {
+    display: revert;
+  }
+}
+@media (min-width: 1024px) {
+  .navds-responsive__above--lg {
+    display: revert;
+  }
+}
+@media (max-width: 1023px) {
+  .navds-responsive__below--lg {
+    display: revert;
+  }
+}
+@media (min-width: 1280px) {
+  .navds-responsive__above--xl {
+    display: revert;
+  }
 }
-[data-theme="dark"].navds-typo--color-subtle,
-[data-theme="dark"] .navds-typo--color-subtle {
-  --a-text-subtle: var(--a-gray-300);
+@media (max-width: 1279px) {
+  .navds-responsive__below--xl {
+    display: revert;
+  }
 }
 /**************************
  * .navds-grid *
@@ -1512,21 +1703,25 @@ body,
  * .navds-button--primary *
  *************************/
 .navds-button--primary {
-  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
-  color: var(--ac-button-primary-text, var(--a-text-on-action));
+  background-color: var(--ac-button-primary-bg, var(--__ac-button-primary-bg, var(--a-surface-action)));
+  color: var(--ac-button-primary-text, var(--__ac-button-primary-text, var(--a-text-on-action)));
 }
 .navds-button--primary:hover {
-  background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
+  background-color: var(--ac-button-primary-hover-bg, var(--__ac-button-primary-hover-bg, var(--a-surface-action-hover)));
 }
 .navds-button--primary:active {
-  background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
+  background-color: var(--ac-button-primary-active-bg, var(--__ac-button-primary-active-bg, var(--a-surface-action-active)));
 }
 .navds-button--primary:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 1px
+      var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
+    var(--a-shadow-focus);
 }
 @supports not selector(:focus-visible) {
   .navds-button--primary:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 1px
+        var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
+      var(--a-shadow-focus);
   }
 }
 .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
@@ -1562,40 +1757,51 @@ body,
 * .navds-button--secondary *
  **************************/
 .navds-button--secondary {
-  color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
+  color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
+  background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
 }
 .navds-button--secondary:hover {
-  color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
+  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
+  background-color: var(
+    --ac-button-secondary-hover-bg,
+    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
+  );
 }
 .navds-button--secondary:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 2px
+      var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
+    var(--a-shadow-focus);
 }
 @supports not selector(:focus-visible) {
   .navds-button--secondary:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 2px
+        var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
+      var(--a-shadow-focus);
   }
 }
 .navds-button--secondary:active {
-  color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
-  background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
+  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
+  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
   box-shadow: none;
 }
 .navds-button--secondary:focus-visible:active {
-  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 1px
+      var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
+    var(--a-shadow-focus);
 }
 @supports not selector(:focus-visible) {
   .navds-button--secondary:focus:active {
-    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 1px
+        var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
+      var(--a-shadow-focus);
   }
 }
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
+  color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
+  background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
 }
 /**************************
 * .navds-button--secondary-neutral *
@@ -2009,14 +2215,6 @@ body,
 .navds-chips--small .navds-chips--icon-right {
   padding-right: var(--a-spacing-05);
 }
-[data-theme="dark"] .navds-copybutton,
-[data-theme="dark"].navds-copybutton {
-  --a-text-action: var(--a-blue-300);
-  --a-surface-hover: rgb(214 231 255 /0.13);
-  --a-icon-success: rgb(51 170 95 /1);
-  --a-text-subtle: rgb(231 240 254 /0.69);
-  --a-text-default: rgb(251 252 254 /0.96);
-}
 .navds-copybutton {
   --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
 
@@ -2080,39 +2278,39 @@ body,
 }
 /* Variant/action */
 .navds-copybutton--action {
-  color: var(--ac-copybutton-action-text, var(--a-text-action));
+  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
   background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
 }
 .navds-copybutton--action:hover {
-  color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
-  background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
+  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
+  background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
 }
 .navds-copybutton--action:where(:disabled),
 .navds-copybutton--action:hover:where(:disabled) {
-  color: var(--ac-copybutton-action-text, var(--a-text-action));
+  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
   background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
   box-shadow: none;
 }
 .navds-copybutton--active.navds-copybutton--action {
-  color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
+  color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
 }
 /* Variant/neutral */
 .navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
+  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
   background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
 }
 .navds-copybutton--neutral:hover {
-  color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
-  background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
+  color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
+  background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
 }
 .navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
 .navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
-  color: var(--ac-copybutton-neutral-text, var(--a-text-default));
+  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
   background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
   box-shadow: none;
 }
 .navds-copybutton--active.navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
+  color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
 }
 .navds-copybutton__content {
   display: inline-flex;
@@ -2474,7 +2672,7 @@ body,
   margin-top: var(--a-spacing-2);
 }
 .navds-fieldset__description {
-  color: var(--ac-form-description, var(--a-text-subtle));
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
   margin-top: 0.125rem;
@@ -2500,7 +2698,7 @@ body,
 }
 .navds-form-field__description {
   margin-top: -0.375rem;
-  color: var(--ac-form-description, var(--a-text-subtle));
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message {
@@ -2534,6 +2732,7 @@ body,
   background-color: var(--ac-error-summary-bg, var(--a-surface-default));
   padding: var(--a-spacing-5);
   border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
+  border-radius: var(--a-border-radius-large);
 }
 .navds-error-summary--small {
   padding: var(--a-spacing-3);
@@ -3124,25 +3323,25 @@ body,
 .navds-text-field__input {
   appearance: none;
   padding: var(--a-spacing-2);
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
   border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textfield-border, var(--a-border-default));
+  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
   min-height: 3rem;
   width: 100%;
-  color: var(--ac-textfield-text, var(--a-text-default));
+  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
 }
 .navds-text-field__input[size] {
   width: auto;
 }
 .navds-text-field__input::placeholder {
-  color: var(--ac-textfield-placeholder, var(--a-text-subtle));
+  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
 }
 .navds-form-field--small .navds-text-field__input {
   padding: 0 var(--a-spacing-2);
   min-height: 2rem;
 }
 .navds-text-field__input:hover {
-  border-color: 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)));
 }
 .navds-text-field__input:focus-visible {
   outline: none;
@@ -3158,8 +3357,8 @@ body,
   Error handling
 */
 .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
-  border-color: var(--ac-textfield-error-border, var(--a-border-danger));
-  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
+  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
 }
 .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
@@ -3171,8 +3370,8 @@ body,
 }
 /* Disabled handling */
 .navds-text-field__input:disabled {
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
-  border-color: var(--ac-textfield-border, var(--a-border-default));
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
   box-shadow: none;
   cursor: not-allowed;
 }
@@ -3197,22 +3396,22 @@ body,
 .navds-textarea__input {
   appearance: none;
   padding: var(--a-spacing-2);
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
   border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textarea-border, var(--a-border-default));
+  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
   resize: none;
   width: 100%;
   display: block;
-  color: var(--ac-textarea-text, var(--a-text-default));
+  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
 }
 .navds-textarea--counter {
   padding-bottom: var(--a-spacing-8);
 }
 .navds-textarea__input::placeholder {
-  color: var(--ac-textarea-placeholder, var(--a-text-subtle));
+  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(--a-border-action));
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action)));
 }
 .navds-textarea__input:focus-visible {
   outline: none;
@@ -3232,7 +3431,7 @@ body,
 }
 .navds-textarea__counter {
   pointer-events: none;
-  color: var(--ac-textarea-counter-text, var(--a-text-subtle));
+  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
   font-style: italic;
   position: absolute;
   text-align: left;
@@ -3241,7 +3440,7 @@ body,
   padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
+  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
 }
 .navds-textarea--resize .navds-textarea__input {
   resize: both;
@@ -3250,18 +3449,18 @@ body,
   Error handling
 */
 .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
-  border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 @supports not selector(:focus-visible) {
   .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
-    border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   }
 }
 .navds-textarea__input:disabled {
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
-  border-color: var(--ac-textarea-border, var(--a-border-default));
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
   box-shadow: none;
   cursor: not-allowed;
 }
@@ -3318,7 +3517,7 @@ body,
   position: absolute;
   right: 0.75rem;
   border-radius: var(--a-border-radius-medium);
-  color: var(--ac-search-clear-icon, var(--a-text-default));
+  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
   height: 32px;
   width: 32px;
   top: 50%;
@@ -3338,7 +3537,7 @@ body,
   width: 24px;
 }
 .navds-search__button-clear:hover {
-  color: 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)));
 }
 .navds-search__button-clear:focus-visible {
   box-shadow: var(--a-shadow-focus);
@@ -3365,36 +3564,42 @@ body,
   min-width: 2.5rem;
 }
 .navds-search__button-search.navds-button--secondary {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
-    0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
-    0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
+  box-shadow: -1px 0 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,
+    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 {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
+  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)));
   z-index: 1;
 }
 .navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
   z-index: auto;
 }
 .navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    var(--a-shadow-focus);
 }
 .navds-search__button-search.navds-button--secondary:focus-visible:hover {
-  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    var(--a-shadow-focus);
 }
 .navds-search__button-search.navds-button--secondary:focus-visible:active {
   box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
 }
 @supports not selector(:focus-visible) {
   .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+      var(--a-shadow-focus);
   }
 
   .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
+        inset,
+      var(--a-shadow-focus);
   }
 
   .navds-search__button-search.navds-button--secondary:focus:active {
@@ -3403,11 +3608,12 @@ body,
 }
 /* Error-handling */
 .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
-  border-color: var(--ac-search-error-border, var(--a-border-danger));
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
+  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
 }
 .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+    var(--a-shadow-focus);
 }
 /* Focus layering */
 .navds-search__input:focus-visible,
@@ -3417,7 +3623,8 @@ body,
 }
 @supports not selector(:focus-visible) {
   .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
-    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+      var(--a-shadow-focus);
   }
 
   .navds-search__input:focus,
@@ -3752,59 +3959,6 @@ body,
     display: inherit;
   }
 }
-.navds-hgrid {
-  --__ac-hgrid-columns-xs: initial;
-  --__ac-hgrid-columns-sm: initial;
-  --__ac-hgrid-columns-md: initial;
-  --__ac-hgrid-columns-lg: initial;
-  --__ac-hgrid-columns-xl: 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: var(--__ac-hgrid-gap-xs);
-  --__ac-hgrid-align: initial;
-
-  display: grid;
-  grid-template-columns: var(--__ac-hgrid-columns);
-  gap: var(--__ac-hgrid-gap);
-  align-items: var(--__ac-hgrid-align);
-}
-@media (min-width: 480px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
-  }
-}
-@media (min-width: 768px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
-  }
-}
-@media (min-width: 1024px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: 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-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
-  }
-}
-@media (min-width: 1280px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: 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-xl,
-      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-    );
-  }
-}
 .navds-internalheader {
   display: flex;
   align-self: stretch;
@@ -5302,58 +5456,6 @@ button.navds-internalheader__title:active,
     opacity: 0.4;
   }
 }
-.navds-stack {
-  --__ac-stack-align: initial;
-  --__ac-stack-justify: initial;
-  --__ac-stack-direction: initial;
-  --__ac-stack-wrap: initial;
-  --__ac-stack-gap-xs: initial;
-  --__ac-stack-gap-sm: initial;
-  --__ac-stack-gap-md: initial;
-  --__ac-stack-gap-lg: initial;
-  --__ac-stack-gap-xl: initial;
-  --__ac-stack-gap: var(--__ac-stack-gap-xs);
-
-  gap: var(--__ac-stack-gap);
-  display: flex;
-  align-items: var(--__ac-stack-align);
-  justify-content: var(--__ac-stack-justify);
-  flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
-}
-.navds-stack__spacer {
-  flex: 1;
-  justify-self: stretch;
-  align-self: stretch;
-}
-.navds-stack > .navds-stack__spacer {
-  margin-block-start: calc(var(--__ac-stack-gap) * -1);
-}
-.navds-hstack > .navds-stack__spacer {
-  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
-}
-@media (min-width: 480px) {
-  .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
-  }
-}
-@media (min-width: 768px) {
-  .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
-  }
-}
-@media (min-width: 1024px) {
-  .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
-  }
-}
-@media (min-width: 1280px) {
-  .navds-stack {
-    --__ac-stack-gap: var(
-      --__ac-stack-gap-xl,
-      var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))))
-    );
-  }
-}
 .navds-stepper {
   --navds-stepper-circle-size: 1.75rem;
   --navds-stepper-border-width: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.3.4",
+  "version": "5.4.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.3.4",
-    "@navikt/ds-tokens": "^5.3.4",
+    "@navikt/ds-css": "^5.4.0",
+    "@navikt/ds-tokens": "^5.4.0",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",