@navikt/ds-css 5.12.5 → 5.14.0

package/expansioncard.css

@@ -60,7 +60,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);
 }
 
@@ -190,7 +192,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);
 }
 

package/form/combobox.css

@@ -39,7 +39,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 {
@@ -89,7 +91,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);
 }
 
@@ -105,7 +109,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);
   }
 
@@ -116,7 +122,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);
   }
 
@@ -171,14 +179,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;
   }
@@ -297,7 +309,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);
 }
 

package/form/radio-checkbox.css

@@ -72,26 +72,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);
   }
 }
 
@@ -149,33 +157,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);
   }
 }
 
@@ -213,7 +230,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) {
@@ -221,7 +240,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);
   }
 }
 
@@ -238,7 +259,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) {
@@ -255,7 +278,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);
   }
 }
 
@@ -314,7 +339,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 {

package/form/search.css

@@ -128,14 +128,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)));
@@ -147,33 +148,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);
   }
 }
 
@@ -184,7 +192,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);
 }
 
@@ -197,7 +206,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);
   }
 

package/form/switch.css

@@ -111,12 +111,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);
   }
 }
 

package/form/text-field.css

@@ -65,12 +65,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);
   }
 }
 

package/help-text.css

@@ -14,13 +14,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);
   }
 }
 

package/package.json

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

package/pagination.css

@@ -36,12 +36,16 @@
 }
 
 .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);
   }
 }
 

package/primitives/page.css

@@ -10,6 +10,9 @@
 
 /* Page.Block */
 .navds-pageblock {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --__ac-page-padding-inline: 0px;
+
   margin-inline: auto;
   width: 100%;
 }
@@ -27,6 +30,10 @@
   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;
 }
@@ -44,11 +51,13 @@
 }
 
 .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);
   }
 }

package/table.css

@@ -84,15 +84,15 @@
   padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 
-.navds-table .navds-checkbox .navds-checkbox__input {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
 }
 
-.navds-table .navds-checkbox--small .navds-checkbox__input {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
   top: -0.375rem;
 }
 
-.navds-table .navds-checkbox .navds-checkbox__label {
+.navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
   padding: 0;
 }
 

package/tag.css

@@ -1,4 +1,7 @@
 .navds-tag {
+  --__ac-tag-icon-size: 1.5rem;
+  --__ac-tag-icon-margin: -2px;
+
   border: 1px solid;
   border-radius: var(--a-border-radius-small);
   display: inline-flex;
@@ -12,11 +15,26 @@
 .navds-tag--small {
   min-height: 1.5rem;
   padding: 0 var(--a-spacing-1-alt);
+
+  --__ac-tag-icon-size: 1.25rem;
 }
 
 .navds-tag--xsmall {
   min-height: 1.25rem;
   padding: 0 var(--a-spacing-1);
+
+  --__ac-tag-icon-size: 1rem;
+  --__ac-tag-icon-margin: -1px;
+}
+
+.navds-tag:has(.navds-tag__icon--left) {
+  gap: var(--a-spacing-05);
+}
+
+.navds-tag__icon--left {
+  font-size: var(--__ac-tag-icon-size);
+  margin-inline-start: var(--__ac-tag-icon-margin);
+  display: flex;
 }
 
 .navds-tag--error {

package/timeline.css

@@ -178,8 +178,10 @@
   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);
@@ -198,34 +200,44 @@
 }
 
 .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);
   }
 }
@@ -284,7 +296,8 @@
 }
 
 .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;
 }
@@ -294,7 +307,9 @@
 }
 
 .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;
 }
 
@@ -311,13 +326,16 @@
   }
 
   .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;
   }