@navikt/ds-css 5.12.4 → 5.13.0

package/dist/component/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/dist/component/primitives.css

@@ -175,6 +175,9 @@
 /* Page.Block */
 
 .navds-pageblock {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --__ac-page-padding-inline: 0px;
+
   margin-inline: auto;
   width: 100%;
 }
@@ -192,6 +195,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;
 }
@@ -209,12 +216,14 @@
 }
 
 .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/dist/component/primitives.min.css

@@ -1,4 +1,4 @@
-.navds-box{--__ac-box-padding-xs:initial;--__ac-box-padding-sm:var(--__ac-box-padding-xs);--__ac-box-padding-md:var(--__ac-box-padding-sm);--__ac-box-padding-lg:var(--__ac-box-padding-md);--__ac-box-padding-xl:var(--__ac-box-padding-lg);--__ac-box-padding-inline-xs:initial;--__ac-box-padding-inline-sm:var(--__ac-box-padding-inline-xs);--__ac-box-padding-inline-md:var(--__ac-box-padding-inline-sm);--__ac-box-padding-inline-lg:var(--__ac-box-padding-inline-md);--__ac-box-padding-inline-xl:var(--__ac-box-padding-inline-lg);--__ac-box-padding-block-xs:initial;--__ac-box-padding-block-sm:var(--__ac-box-padding-block-xs);--__ac-box-padding-block-md:var(--__ac-box-padding-block-sm);--__ac-box-padding-block-lg:var(--__ac-box-padding-block-md);--__ac-box-padding-block-xl:var(--__ac-box-padding-block-lg);--__ac-box-padding:var(--__ac-box-padding-xs);--__ac-box-padding-inline:var(--__ac-box-padding-inline-xs);--__ac-box-padding-block:var(--__ac-box-padding-block-xs);--__ac-box-background:initial;--__ac-box-border-color:initial;--__ac-box-shadow:initial;--__ac-box-border-width:initial;--__ac-box-border-radius-xs:initial;--__ac-box-border-radius-sm:var(--__ac-box-border-radius-xs);--__ac-box-border-radius-md:var(--__ac-box-border-radius-sm);--__ac-box-border-radius-lg:var(--__ac-box-border-radius-md);--__ac-box-border-radius-xl:var(--__ac-box-border-radius-lg);--__ac-box-border-radius:var(--__ac-box-border-radius-xs);background-color:var(--__ac-box-background);border-color:var(--__ac-box-border-color);border-radius:var(--__ac-box-border-radius);border-style:solid;border-width:var(--__ac-box-border-width,0);box-shadow:var(--__ac-box-shadow);padding-block:var(--__ac-box-padding-block,var(--__ac-box-padding));padding-inline:var(--__ac-box-padding-inline,var(--__ac-box-padding))}@media (min-width:480px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-sm);--__ac-box-padding-inline:var(--__ac-box-padding-inline-sm);--__ac-box-padding-block:var(--__ac-box-padding-block-sm);--__ac-box-border-radius:var(--__ac-box-border-radius-sm)}}@media (min-width:768px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-md);--__ac-box-padding-inline:var(--__ac-box-padding-inline-md);--__ac-box-padding-block:var(--__ac-box-padding-block-md);--__ac-box-border-radius:var(--__ac-box-border-radius-md)}}@media (min-width:1024px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-lg);--__ac-box-padding-inline:var(--__ac-box-padding-inline-lg);--__ac-box-padding-block:var(--__ac-box-padding-block-lg);--__ac-box-border-radius:var(--__ac-box-border-radius-lg)}}@media (min-width:1280px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-xl);--__ac-box-padding-inline:var(--__ac-box-padding-inline-xl);--__ac-box-padding-block:var(--__ac-box-padding-block-xl);--__ac-box-border-radius:var(--__ac-box-border-radius-xl)}}.navds-bleed{--__ac-bleed-margin-inline-xs:initial;--__ac-bleed-margin-inline-sm:var(--__ac-bleed-margin-inline-xs);--__ac-bleed-margin-inline-md:var(--__ac-bleed-margin-inline-sm);--__ac-bleed-margin-inline-lg:var(--__ac-bleed-margin-inline-md);--__ac-bleed-margin-inline-xl:var(--__ac-bleed-margin-inline-lg);--__ac-bleed-margin-block-xs:initial;--__ac-bleed-margin-block-sm:var(--__ac-bleed-margin-block-xs);--__ac-bleed-margin-block-md:var(--__ac-bleed-margin-block-sm);--__ac-bleed-margin-block-lg:var(--__ac-bleed-margin-block-md);--__ac-bleed-margin-block-xl:var(--__ac-bleed-margin-block-lg);--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-xs);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-xs);margin-block:var(--__ac-bleed-margin-block);margin-inline:var(--__ac-bleed-margin-inline)}.navds-bleed--padding{--__ac-bleed-padding-inline-xs:initial;--__ac-bleed-padding-inline-sm:var(--__ac-bleed-padding-inline-xs);--__ac-bleed-padding-inline-md:var(--__ac-bleed-padding-inline-sm);--__ac-bleed-padding-inline-lg:var(--__ac-bleed-padding-inline-md);--__ac-bleed-padding-inline-xl:var(--__ac-bleed-padding-inline-lg);--__ac-bleed-padding-block-xs:initial;--__ac-bleed-padding-block-sm:var(--__ac-bleed-padding-block-xs);--__ac-bleed-padding-block-md:var(--__ac-bleed-padding-block-sm);--__ac-bleed-padding-block-lg:var(--__ac-bleed-padding-block-md);--__ac-bleed-padding-block-xl:var(--__ac-bleed-padding-block-lg);--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-xs);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-xs);padding-block:var(--__ac-bleed-padding-block);padding-inline:var(--__ac-bleed-padding-inline)}@media (min-width:480px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-sm);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-sm)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-sm);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-sm)}}@media (min-width:768px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-md);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-md)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-md);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-md)}}@media (min-width:1024px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-lg);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-lg)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-lg);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-lg)}}@media (min-width:1280px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-xl);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-xl)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-xl);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-xl)}}.navds-page{background-color:var(--__ac-page-background);display:flex;flex-direction:column;min-height:100vh;min-height:100lvh}.navds-pageblock{margin-inline:auto;width:100%}.navds-page__content--grow{flex-grow:1}.navds-page__content--fullheight{min-height:100vh;min-height:100lvh}.navds-page__content--padding{padding-block-end:var(--a-spacing-8)}.navds-pageblock--md{max-width:768px}.navds-pageblock--lg{max-width:1024px}.navds-pageblock--xl{max-width:1280px}.navds-pageblock--2xl{max-width:1440px}.navds-pageblock--gutters{padding-inline:var(--a-spacing-4)}@media (min-width:1024px){.navds-pageblock--gutters{padding-inline:var(--a-spacing-12)}}.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;align-items:var(--__ac-hgrid-align);display:grid;gap:var(--__ac-hgrid-gap);grid-template-columns:var(--__ac-hgrid-columns)}@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(
+.navds-box{--__ac-box-padding-xs:initial;--__ac-box-padding-sm:var(--__ac-box-padding-xs);--__ac-box-padding-md:var(--__ac-box-padding-sm);--__ac-box-padding-lg:var(--__ac-box-padding-md);--__ac-box-padding-xl:var(--__ac-box-padding-lg);--__ac-box-padding-inline-xs:initial;--__ac-box-padding-inline-sm:var(--__ac-box-padding-inline-xs);--__ac-box-padding-inline-md:var(--__ac-box-padding-inline-sm);--__ac-box-padding-inline-lg:var(--__ac-box-padding-inline-md);--__ac-box-padding-inline-xl:var(--__ac-box-padding-inline-lg);--__ac-box-padding-block-xs:initial;--__ac-box-padding-block-sm:var(--__ac-box-padding-block-xs);--__ac-box-padding-block-md:var(--__ac-box-padding-block-sm);--__ac-box-padding-block-lg:var(--__ac-box-padding-block-md);--__ac-box-padding-block-xl:var(--__ac-box-padding-block-lg);--__ac-box-padding:var(--__ac-box-padding-xs);--__ac-box-padding-inline:var(--__ac-box-padding-inline-xs);--__ac-box-padding-block:var(--__ac-box-padding-block-xs);--__ac-box-background:initial;--__ac-box-border-color:initial;--__ac-box-shadow:initial;--__ac-box-border-width:initial;--__ac-box-border-radius-xs:initial;--__ac-box-border-radius-sm:var(--__ac-box-border-radius-xs);--__ac-box-border-radius-md:var(--__ac-box-border-radius-sm);--__ac-box-border-radius-lg:var(--__ac-box-border-radius-md);--__ac-box-border-radius-xl:var(--__ac-box-border-radius-lg);--__ac-box-border-radius:var(--__ac-box-border-radius-xs);background-color:var(--__ac-box-background);border-color:var(--__ac-box-border-color);border-radius:var(--__ac-box-border-radius);border-style:solid;border-width:var(--__ac-box-border-width,0);box-shadow:var(--__ac-box-shadow);padding-block:var(--__ac-box-padding-block,var(--__ac-box-padding));padding-inline:var(--__ac-box-padding-inline,var(--__ac-box-padding))}@media (min-width:480px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-sm);--__ac-box-padding-inline:var(--__ac-box-padding-inline-sm);--__ac-box-padding-block:var(--__ac-box-padding-block-sm);--__ac-box-border-radius:var(--__ac-box-border-radius-sm)}}@media (min-width:768px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-md);--__ac-box-padding-inline:var(--__ac-box-padding-inline-md);--__ac-box-padding-block:var(--__ac-box-padding-block-md);--__ac-box-border-radius:var(--__ac-box-border-radius-md)}}@media (min-width:1024px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-lg);--__ac-box-padding-inline:var(--__ac-box-padding-inline-lg);--__ac-box-padding-block:var(--__ac-box-padding-block-lg);--__ac-box-border-radius:var(--__ac-box-border-radius-lg)}}@media (min-width:1280px){.navds-box{--__ac-box-padding:var(--__ac-box-padding-xl);--__ac-box-padding-inline:var(--__ac-box-padding-inline-xl);--__ac-box-padding-block:var(--__ac-box-padding-block-xl);--__ac-box-border-radius:var(--__ac-box-border-radius-xl)}}.navds-bleed{--__ac-bleed-margin-inline-xs:initial;--__ac-bleed-margin-inline-sm:var(--__ac-bleed-margin-inline-xs);--__ac-bleed-margin-inline-md:var(--__ac-bleed-margin-inline-sm);--__ac-bleed-margin-inline-lg:var(--__ac-bleed-margin-inline-md);--__ac-bleed-margin-inline-xl:var(--__ac-bleed-margin-inline-lg);--__ac-bleed-margin-block-xs:initial;--__ac-bleed-margin-block-sm:var(--__ac-bleed-margin-block-xs);--__ac-bleed-margin-block-md:var(--__ac-bleed-margin-block-sm);--__ac-bleed-margin-block-lg:var(--__ac-bleed-margin-block-md);--__ac-bleed-margin-block-xl:var(--__ac-bleed-margin-block-lg);--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-xs);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-xs);margin-block:var(--__ac-bleed-margin-block);margin-inline:var(--__ac-bleed-margin-inline)}.navds-bleed--padding{--__ac-bleed-padding-inline-xs:initial;--__ac-bleed-padding-inline-sm:var(--__ac-bleed-padding-inline-xs);--__ac-bleed-padding-inline-md:var(--__ac-bleed-padding-inline-sm);--__ac-bleed-padding-inline-lg:var(--__ac-bleed-padding-inline-md);--__ac-bleed-padding-inline-xl:var(--__ac-bleed-padding-inline-lg);--__ac-bleed-padding-block-xs:initial;--__ac-bleed-padding-block-sm:var(--__ac-bleed-padding-block-xs);--__ac-bleed-padding-block-md:var(--__ac-bleed-padding-block-sm);--__ac-bleed-padding-block-lg:var(--__ac-bleed-padding-block-md);--__ac-bleed-padding-block-xl:var(--__ac-bleed-padding-block-lg);--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-xs);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-xs);padding-block:var(--__ac-bleed-padding-block);padding-inline:var(--__ac-bleed-padding-inline)}@media (min-width:480px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-sm);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-sm)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-sm);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-sm)}}@media (min-width:768px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-md);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-md)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-md);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-md)}}@media (min-width:1024px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-lg);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-lg)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-lg);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-lg)}}@media (min-width:1280px){.navds-bleed{--__ac-bleed-margin-inline:var(--__ac-bleed-margin-inline-xl);--__ac-bleed-margin-block:var(--__ac-bleed-margin-block-xl)}.navds-bleed--padding{--__ac-bleed-padding-inline:var(--__ac-bleed-padding-inline-xl);--__ac-bleed-padding-block:var(--__ac-bleed-padding-block-xl)}}.navds-page{background-color:var(--__ac-page-background);display:flex;flex-direction:column;min-height:100vh;min-height:100lvh}.navds-pageblock{--__ac-page-padding-inline:0px;margin-inline:auto;width:100%}.navds-page__content--grow{flex-grow:1}.navds-page__content--fullheight{min-height:100vh;min-height:100lvh}.navds-page__content--padding{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}.navds-pageblock--lg{max-width:1024px}.navds-pageblock--xl{max-width:1280px}.navds-pageblock--2xl{max-width:1440px}.navds-pageblock--gutters{--__ac-page-padding-inline:var(--a-spacing-4);padding-inline:var(--__ac-page-padding-inline)}@media (min-width:1024px){.navds-pageblock--gutters{--__ac-page-padding-inline:var(--a-spacing-12)}}.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;align-items:var(--__ac-hgrid-align);display:grid;gap:var(--__ac-hgrid-gap);grid-template-columns:var(--__ac-hgrid-columns)}@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))))

package/dist/component/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;
   }
 

package/dist/component/togglegroup.css

@@ -66,34 +66,44 @@
 
 .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);
   }
 }