@navikt/ds-css 5.12.4 → 5.13.0

package/dist/components.css

@@ -610,16 +610,24 @@
 }
 
 .navds-accordion__item:last-child > :where(.navds-accordion__header) {
-  box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+  box-shadow:
+    var(--__ac-accordion-header-shadow),
+    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
 }
 
 .navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
-  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+  box-shadow:
+    inset 2px 0 0 0 var(--a-transparent),
+    inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--a-transparent),
     inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
 }
 
 .navds-accordion__item:last-child:where(.navds-accordion__item--open) {
-  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+  box-shadow:
+    inset 2px 0 0 0 var(--a-transparent),
+    inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--a-transparent),
     inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
 }
 
@@ -952,15 +960,15 @@
 }
 
 .navds-button--primary:focus-visible {
-  box-shadow: inset 0 0 0 1px
-      var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
+  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(--__ac-button-primary-focus-border, var(--a-surface-default))),
+    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);
   }
 }
@@ -988,12 +996,16 @@
 }
 
 .navds-button--primary-neutral:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--primary-neutral:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -1021,15 +1033,15 @@
 }
 
 .navds-button--secondary:focus-visible {
-  box-shadow: inset 0 0 0 2px
-      var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
+  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(--__ac-button-secondary-focus-border, var(--a-border-action))),
+    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);
   }
 }
@@ -1041,14 +1053,16 @@
 }
 
 .navds-button--secondary:focus-visible:active {
-  box-shadow: inset 0 0 0 1px
+  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
+    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);
   }
@@ -1077,13 +1091,17 @@
 
 .navds-button--secondary-neutral:focus-visible {
   color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--secondary-neutral:focus {
     color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
-    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -1094,13 +1112,15 @@
 }
 
 .navds-button--secondary-neutral:focus-visible:active {
-  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
     var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--secondary-neutral:focus:active {
-    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
       var(--a-shadow-focus);
   }
 }
@@ -1127,12 +1147,16 @@
 }
 
 .navds-button--tertiary:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--tertiary:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -1146,12 +1170,16 @@
 }
 
 .navds-button--tertiary:focus-visible:active {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--tertiary:focus:active {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -1178,12 +1206,16 @@
 }
 
 .navds-button--tertiary-neutral:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--tertiary-neutral:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -1197,12 +1229,16 @@
 }
 
 .navds-button--tertiary-neutral:focus-visible:active {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--tertiary-neutral:focus:active {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -1233,12 +1269,16 @@
 }
 
 .navds-button--danger:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-button--danger:focus {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -1479,7 +1519,9 @@
 
 .navds-chips__toggle[aria-pressed="true"]:focus-visible,
 .navds-chips__toggle:active:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
 
 @supports not selector(:focus-visible) {
@@ -1490,7 +1532,9 @@
 
   .navds-chips__toggle[aria-pressed="true"]:focus,
   .navds-chips__toggle:active:focus {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
   }
 }
 
@@ -1541,7 +1585,9 @@
 }
 
 .navds-chips__removable--action:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    0 0 0 2px var(--a-border-focus);
 }
 
 .navds-chips__removable--neutral:focus-visible {
@@ -1551,7 +1597,9 @@
 @supports not selector(:focus-visible) {
   .navds-chips__removable--action:focus {
     outline: none;
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      0 0 0 2px var(--a-border-focus);
   }
 
   .navds-chips__removable--neutral:focus {
@@ -1913,7 +1961,9 @@
 
 .navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
   background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
     0 -1px 0 0 var(--__ac-expansioncard-border-color);
 }
 
@@ -2045,7 +2095,9 @@
 }
 
 :where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
-  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+  box-shadow:
+    1px 0 0 0 var(--__ac-expansioncard-border-color),
+    -1px 0 0 0 var(--__ac-expansioncard-border-color),
     0 1px 0 0 var(--__ac-expansioncard-border-color);
 }
 
@@ -2400,26 +2452,34 @@
 
 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
-    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:focus + .navds-checkbox__label::before,
   .navds-radio__input:focus + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
 .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 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    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 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -2478,33 +2538,42 @@
 
 .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 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .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 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      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)),
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     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));
 }
 
 .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)),
-    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -2542,7 +2611,9 @@
   > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -2550,7 +2621,9 @@
     > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -2567,7 +2640,9 @@
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -2584,7 +2659,9 @@
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
     background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
@@ -2644,7 +2721,9 @@
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
   background-color: var(--a-icon-subtle);
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow:
+    0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
+    inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
@@ -2865,12 +2944,16 @@
 }
 
 .navds-switch__input:focus-visible ~ .navds-switch__track {
-  box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-switch__input:focus ~ .navds-switch__track {
-    box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -3022,12 +3105,16 @@
 }
 
 .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);
+  box-shadow:
+    0 0 0 1px var(--a-border-danger),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
-    box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
+    box-shadow:
+      0 0 0 1px var(--a-border-danger),
+      var(--a-shadow-focus);
   }
 }
 
@@ -3294,14 +3381,15 @@
 }
 
 .navds-search__button-search.navds-button--secondary {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border, 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(--__ac-search-button-border-hover, var(--a-border-action)))
-      inset,
+  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)));
@@ -3313,33 +3401,40 @@
 }
 
 .navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+  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(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+  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);
+  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(--__ac-search-button-border, var(--a-border-default))) inset,
+    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(--__ac-search-button-border-hover, var(--a-border-action)))
-        inset,
+    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 {
-    box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+      var(--a-shadow-focus);
   }
 }
 
@@ -3351,7 +3446,8 @@
 }
 
 .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(--__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))),
     var(--a-shadow-focus);
 }
 
@@ -3365,7 +3461,8 @@
 
 @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(--__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))),
       var(--a-shadow-focus);
   }
 
@@ -3416,7 +3513,9 @@
 
 .navds-combobox--error
   .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
-  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow:
+    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
 }
 
 .navds-combobox__selected-options {
@@ -3466,7 +3565,9 @@
 }
 
 .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:
+    0 0 0 1px var(--a-surface-default) inset,
+    var(--a-shadow-focus);
   box-shadow: var(--a-shadow-focus);
 }
 
@@ -3482,7 +3583,9 @@
   }
 
   .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:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
   }
 
@@ -3493,7 +3596,9 @@
 
 @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:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
   }
 
@@ -3548,14 +3653,18 @@
 }
 
 .navds-combobox__button-toggle-list:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default) inset,
+    var(--a-shadow-focus);
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
 @supports not selector(:focus-visible) {
   .navds-combobox__button-toggle-list:focus {
-    box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
     box-shadow: var(--a-shadow-focus);
     outline: none;
   }
@@ -3674,7 +3783,9 @@
 }
 
 .navds-combobox__list-item__new-option--focus {
-  box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
+  box-shadow:
+    var(--a-shadow-focus) inset,
+    var(--a-border-action) 0 0 0 5px inset;
   border-radius: calc(var(--a-border-radius-medium) - 1px);
 }
 
@@ -3712,13 +3823,17 @@
 
 .navds-help-text__button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--a-border-focus),
+    inset 0 0 0 1px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-help-text__button:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--a-border-focus),
+      inset 0 0 0 1px var(--a-border-focus);
   }
 }
 
@@ -4249,12 +4364,16 @@ button.navds-internalheader__title:active,
 }
 
 .navds-pagination__item[aria-current="true"]:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-pagination__item[aria-current="true"]:focus {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -4431,13 +4550,17 @@ button.navds-internalheader__title:active,
 
 .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
 .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
-  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
   .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
   }
 }
 
@@ -4547,12 +4670,16 @@ button.navds-internalheader__title:active,
 }
 
 .navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
-    box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+      var(--a-shadow-focus);
   }
 }
 
@@ -5024,8 +5151,10 @@ button.navds-internalheader__title:active,
   border: none;
   cursor: pointer;
   background: var(--a-surface-default);
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 5px var(--a-surface-default);
   z-index: 2;
   border-radius: var(--a-border-radius-full);
   padding: var(--a-spacing-1);
@@ -5044,34 +5173,44 @@ button.navds-internalheader__title:active,
 }
 
 .navds-timeline__pin-button:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
   outline: none;
 }
 
 .navds-timeline__pin-button:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 5px var(--a-surface-default);
 }
 
 .navds-timeline__pin-button:hover:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+  box-shadow:
+    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-timeline__pin-button:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 4px var(--a-surface-default),
       0 0 0 6px var(--a-border-focus);
     outline: none;
   }
 
   .navds-timeline__pin-button:hover:focus {
-    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+    box-shadow:
+      inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 4px var(--a-surface-default),
       0 0 0 6px var(--a-border-focus);
   }
 }
@@ -5130,7 +5269,8 @@ button.navds-internalheader__title:active,
 }
 
 .navds-timeline__period--selected:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+  box-shadow:
+    inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
     0 0 0 2px var(--a-border-focus);
   z-index: 3;
 }
@@ -5140,7 +5280,9 @@ button.navds-internalheader__title:active,
 }
 
 .navds-timeline__zoom-button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 3px var(--a-border-focus);
   border-width: 1px;
 }
 
@@ -5157,13 +5299,16 @@ button.navds-internalheader__title:active,
   }
 
   .navds-timeline__period--selected:focus {
-    box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+    box-shadow:
+      inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
       0 0 0 2px var(--a-border-focus);
     z-index: 3;
   }
 
   .navds-timeline__zoom-button:focus {
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 3px var(--a-border-focus);
     border-width: 1px;
   }
 
@@ -5344,34 +5489,44 @@ button.navds-internalheader__title:active,
 
 .navds-toggle-group__button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-toggle-group__button:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
+  box-shadow:
+    0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
+    0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-    box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
+    box-shadow:
+      0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
+      0 0 0 4px var(--a-border-focus);
   }
 }
 
 .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+  box-shadow:
+    0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
     0 0 0 4px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-    box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    box-shadow:
+      0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
       0 0 0 4px var(--a-border-focus);
   }
 }
@@ -6554,6 +6709,9 @@ button.navds-stepper__step {
 /* Page.Block */
 
 .navds-pageblock {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --__ac-page-padding-inline: 0px;
+
   margin-inline: auto;
   width: 100%;
 }
@@ -6571,6 +6729,10 @@ button.navds-stepper__step {
   padding-block-end: var(--a-spacing-8);
 }
 
+.navds-pageblock--text {
+  max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-page-padding-inline));
+}
+
 .navds-pageblock--md {
   max-width: 768px;
 }
@@ -6588,12 +6750,14 @@ button.navds-stepper__step {
 }
 
 .navds-pageblock--gutters {
-  padding-inline: var(--a-spacing-4);
+  --__ac-page-padding-inline: var(--a-spacing-4);
+
+  padding-inline: var(--__ac-page-padding-inline);
 }
 
 @media (min-width: 1024px) {
   .navds-pageblock--gutters {
-    padding-inline: var(--a-spacing-12);
+    --__ac-page-padding-inline: var(--a-spacing-12);
   }
 }