@navikt/ds-css 5.5.0 → 5.6.1

package/dist/components.css

@@ -343,20 +343,20 @@
 
 .navds-box {
   --__ac-box-padding-xs: initial;
-  --__ac-box-padding-sm: initial;
-  --__ac-box-padding-md: initial;
-  --__ac-box-padding-lg: initial;
-  --__ac-box-padding-xl: initial;
-  --__ac-box-padding-block-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-block-sm: initial;
-  --__ac-box-padding-inline-sm: initial;
-  --__ac-box-padding-block-md: initial;
-  --__ac-box-padding-inline-md: initial;
-  --__ac-box-padding-block-lg: initial;
-  --__ac-box-padding-inline-lg: initial;
-  --__ac-box-padding-block-xl: initial;
-  --__ac-box-padding-inline-xl: 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);
@@ -365,10 +365,10 @@
   --__ac-box-shadow: initial;
   --__ac-box-border-width: initial;
   --__ac-box-border-radius-xs: initial;
-  --__ac-box-border-radius-sm: initial;
-  --__ac-box-border-radius-md: initial;
-  --__ac-box-border-radius-lg: initial;
-  --__ac-box-border-radius-xl: 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);
 
   padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
@@ -383,79 +383,125 @@
 
 @media (min-width: 480px) {
   .navds-box {
-    --__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
-    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
-    --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
-    --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
+    --__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, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
-    --__ac-box-padding-inline: var(
-      --__ac-box-padding-inline-md,
-      var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
-    );
-    --__ac-box-padding-block: var(
-      --__ac-box-padding-block-md,
-      var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
-    );
-    --__ac-box-border-radius: var(
-      --__ac-box-border-radius-md,
-      var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
-    );
+    --__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,
-      var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
-    );
-    --__ac-box-padding-inline: var(
-      --__ac-box-padding-inline-lg,
-      var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
-    );
-    --__ac-box-padding-block: var(
-      --__ac-box-padding-block-lg,
-      var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
-    );
-    --__ac-box-border-radius: var(
-      --__ac-box-border-radius-lg,
-      var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
-    );
+    --__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,
-      var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
-    );
-    --__ac-box-padding-inline: var(
-      --__ac-box-padding-inline-xl,
-      var(
-        --__ac-box-padding-inline-lg,
-        var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
-      )
-    );
-    --__ac-box-padding-block: var(
-      --__ac-box-padding-block-xl,
-      var(
-        --__ac-box-padding-block-lg,
-        var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
-      )
-    );
-    --__ac-box-border-radius: var(
-      --__ac-box-border-radius-xl,
-      var(
-        --__ac-box-border-radius-lg,
-        var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
-      )
-    );
+    --__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);
+
+  /** defaults */
+  --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
+
+  margin-inline: var(--__ac-bleed-margin-inline);
+  margin-block: var(--__ac-bleed-margin-block);
+}
+
+.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);
+
+  /** defaults */
+  --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
+
+  padding-inline: var(--__ac-bleed-padding-inline);
+  padding-block: var(--__ac-bleed-padding-block);
+}
+
+@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);
   }
 }
 
@@ -518,16 +564,31 @@
 }
 
 .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-sm: var(--__ac-stack-gap-xs);
+  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
+  --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
+  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
   --__ac-stack-gap: var(--__ac-stack-gap-xs);
+  --__ac-stack-justify-xs: initial;
+  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
+  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
+  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
+  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify: var(--__ac-stack-justify-xs);
+  --__ac-stack-align-xs: initial;
+  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
+  --__ac-stack-align-md: var(--__ac-stack-align-sm);
+  --__ac-stack-align-lg: var(--__ac-stack-align-md);
+  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align: var(--__ac-stack-align-xs);
+  --__ac-stack-direction-xs: initial;
+  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
+  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
+  --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
+  --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction: var(--__ac-stack-direction-xs);
 
   gap: var(--__ac-stack-gap);
   display: flex;
@@ -544,88 +605,90 @@
 
 .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));
+    --__ac-stack-gap: var(--__ac-stack-gap-sm);
+    --__ac-stack-align: var(--__ac-stack-align-sm);
+    --__ac-stack-justify: var(--__ac-stack-justify-sm);
+    --__ac-stack-direction: var(--__ac-stack-direction-sm);
   }
 }
 
 @media (min-width: 768px) {
   .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
+    --__ac-stack-gap: var(--__ac-stack-gap-md);
+    --__ac-stack-align: var(--__ac-stack-align-md);
+    --__ac-stack-justify: var(--__ac-stack-justify-md);
+    --__ac-stack-direction: var(--__ac-stack-direction-md);
   }
 }
 
 @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))));
+    --__ac-stack-gap: var(--__ac-stack-gap-lg);
+    --__ac-stack-align: var(--__ac-stack-align-lg);
+    --__ac-stack-justify: var(--__ac-stack-justify-lg);
+    --__ac-stack-direction: var(--__ac-stack-direction-lg);
   }
 }
 
 @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))))
-    );
+    --__ac-stack-gap: var(--__ac-stack-gap-xl);
+    --__ac-stack-align: var(--__ac-stack-align-xl);
+    --__ac-stack-justify: var(--__ac-stack-justify-xl);
+    --__ac-stack-direction: var(--__ac-stack-direction-xl);
   }
 }
 
-.navds-responsive {
-  display: none;
-}
-
 @media (min-width: 480px) {
-  .navds-responsive__above--sm {
-    display: revert;
+  .navds-responsive__below--sm {
+    display: none !important;
   }
 }
 
 @media (max-width: 479px) {
-  .navds-responsive__below--sm {
-    display: revert;
+  .navds-responsive__above--sm {
+    display: none !important;
   }
 }
 
 @media (min-width: 768px) {
-  .navds-responsive__above--md {
-    display: revert;
+  .navds-responsive__below--md {
+    display: none !important;
   }
 }
 
 @media (max-width: 767px) {
-  .navds-responsive__below--md {
-    display: revert;
+  .navds-responsive__above--md {
+    display: none !important;
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-responsive__above--lg {
-    display: revert;
+  .navds-responsive__below--lg {
+    display: none !important;
   }
 }
 
 @media (max-width: 1023px) {
-  .navds-responsive__below--lg {
-    display: revert;
+  .navds-responsive__above--lg {
+    display: none !important;
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-responsive__above--xl {
-    display: revert;
+  .navds-responsive__below--xl {
+    display: none !important;
   }
 }
 
 @media (max-width: 1279px) {
-  .navds-responsive__below--xl {
-    display: revert;
+  .navds-responsive__above--xl {
+    display: none !important;
   }
 }
 
@@ -999,12 +1062,12 @@
  *************************/
 
 .navds-accordion__content {
-  padding: 0 var(--a-spacing-3) var(--a-spacing-5);
+  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
   animation: fadeAccordionContent 250ms ease;
 }
 
 .navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
-  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
 }
 
 .navds-accordion__content--closed {
@@ -2889,6 +2952,7 @@
 
 .navds-select__input:hover {
   border-color: var(--ac-select-hover-bg, var(--a-border-action));
+  cursor: pointer;
 }
 
 .navds-select__input:focus-visible {
@@ -4516,7 +4580,7 @@ button.navds-internalheader__title:active,
 }
 
 .navds-date {
-  padding: var(--a-spacing-3);
+  padding: var(--a-spacing-4) var(--a-spacing-3);
 }
 
 .navds-date .rdp-day_range_middle.rdp-day_disabled {
@@ -4540,28 +4604,29 @@ button.navds-internalheader__title:active,
 }
 
 .navds-date .rdp-weeknumber {
-  color: var(--ac-date-week-text, var(--a-text-on-neutral));
-  background: var(--ac-date-week-bg, var(--a-surface-neutral));
   font-size: var(--a-font-size-small);
   display: flex;
-  justify-content: center;
   align-items: center;
-  padding: var(--a-spacing-05) var(--a-spacing-1);
-  border-radius: var(--a-border-radius-small);
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--a-border-radius-medium);
+  margin: var(--a-spacing-2);
+  color: var(--a-text-subtle);
 }
 
-.navds-date__caption-dropdown {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--a-spacing-2);
-  align-items: center;
+.navds-date .rdp-weeknumber.rdp-button {
+  width: 2rem;
+  height: 2rem;
+  box-shadow: 0 0 0 1px var(--a-border-default);
+  color: var(--a-text-subtle);
+  font-size: var(--a-font-size-small);
 }
 
-.navds-date__caption__month-wrapper {
-  display: flex;
-  justify-content: center;
-  gap: var(--a-spacing-2);
-  align-items: center;
+.navds-date .rdp-weeknumber.rdp-button:active {
+  background-color: var(--a-surface-action-active);
+  color: var(--a-text-on-action);
+  box-shadow: none;
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -4570,6 +4635,7 @@ button.navds-internalheader__title:active,
 
 .navds-date .rdp-button {
   all: unset;
+  display: block;
   width: 2.5rem;
   height: 2.5rem;
   text-align: center;
@@ -4577,13 +4643,13 @@ button.navds-internalheader__title:active,
 }
 
 .navds-date .rdp-day_range_start {
-  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small)
+  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
     var(--a-border-radius-xlarge);
 }
 
 .navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
-    var(--a-border-radius-small);
+  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
+    var(--a-border-radius-medium);
 }
 
 .navds-date .rdp-day_range_start.rdp-day_range_end {
@@ -4620,7 +4686,7 @@ button.navds-internalheader__title:active,
   all: unset;
   text-align: center;
   width: 3rem;
-  height: 2.75rem;
+  height: 3rem;
   text-transform: capitalize;
   border-radius: var(--a-border-radius-medium);
   cursor: pointer;
@@ -4707,7 +4773,8 @@ button.navds-internalheader__title:active,
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--a-spacing-2);
+  gap: var(--a-spacing-1);
+  padding-inline: var(--a-spacing-1);
 }
 
 .navds-date__caption-button,
@@ -4809,6 +4876,41 @@ button.navds-internalheader__title:active,
   cursor: default;
 }
 
+.navds-date__caption-button {
+  width: 2rem;
+  height: 2rem;
+}
+
+.navds-date__week-row {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-05);
+}
+
+.navds-date__week-wrapper {
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+@media (min-width: 480px) {
+  .navds-date {
+    padding: var(--a-spacing-5) var(--a-spacing-4);
+  }
+
+  .navds-date__caption {
+    gap: var(--a-spacing-2);
+  }
+
+  .navds-date .rdp-button,
+  .navds-date__caption-button {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
 .navds-tag {
   border: 1px solid;
   border-radius: var(--a-border-radius-small);
@@ -5313,17 +5415,14 @@ button.navds-internalheader__title:active,
   box-shadow: var(--a-shadow-medium);
   border: 1px solid;
   border-color: var(--ac-popover-border, var(--a-border-default));
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-3);
 }
 
 .navds-timeline__popover:focus {
   outline: none;
 }
 
-.navds-timeline__popover-content {
-  padding: var(--a-spacing-3);
-}
-
 .navds-timeline__popover-arrow {
   position: absolute;
   z-index: -1;