@navikt/ds-css 8.7.0 → 8.9.0

package/dist/components.css

@@ -3147,8 +3147,8 @@
   }
 
   .aksel-base-alert[data-variant="strong"] {
-    outline: 4px solid var(--ax-border-default);
-    outline-offset: -4px;
+    outline: 2px solid var(--ax-border-default);
+    outline-offset: -2px;
   }
 
   .aksel-base-alert[data-variant="strong"][data-color="neutral"] {
@@ -3220,6 +3220,28 @@
     color: var(--ax-text-neutral-contrast);
   }
 
+  .aksel-base-alert__message {
+    border-radius: var(--ax-radius-12);
+    outline: 1px solid var(--ax-border-default);
+    outline-offset: -1px;
+    background: var(--ax-bg-moderate);
+    height: -webkit-fit-content;
+    height: fit-content;
+    color: var(--ax-text-default);
+    align-items: flex-start;
+    gap: var(--ax-space-8);
+    padding: var(--ax-space-12) var(--ax-space-16);
+    display: flex;
+  }
+
+  .aksel-base-alert__message > .aksel-base-alert__icon {
+    margin-top: var(--ax-space-2);
+  }
+
+  .aksel-base-alert[data-size="small"] .aksel-base-alert__message > .aksel-base-alert__icon {
+    margin-top: 0;
+  }
+
   .aksel-chat {
     align-items: flex-end;
     gap: var(--ax-space-12);
@@ -3581,32 +3603,24 @@
     background-color: var(--ax-bg-strong-pressed);
   }
 
-  .aksel-date__field-input.aksel-text-field__input {
-    padding-right: var(--ax-space-48);
+  .aksel-date__field-input {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  .aksel-form-field--small .aksel-date__field-input {
-    padding-right: var(--ax-space-32);
+  .aksel-date__field-input:focus-visible {
+    outline: none;
+  }
+
+  .aksel-date__field--error .aksel-date__field-input:not(:disabled) {
+    box-shadow: inset -2px 0 0 0 var(--ax-border-danger-strong),
+      inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 
   .aksel-date__field-button {
-    color: var(--ax-text-neutral);
-    cursor: pointer;
-    border-radius: calc(var(--ax-radius-8) - 1px);
-    padding: var(--ax-space-12);
-    background: none;
-    border: none;
-    justify-content: center;
-    align-items: center;
-    height: calc(100% - .125rem);
-    margin: 0;
-    font-size: 1.5rem;
-    text-decoration: none;
-    display: inline-flex;
-    position: absolute;
-    top: 50%;
-    right: .0625rem;
-    transform: translateY(-50%);
+    --__axc-button-border-width: 1px;
+    --__axc-button-border-color: var(--ax-border-neutral);
   }
 
   .aksel-date__field-button:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
@@ -3624,6 +3638,23 @@
     border-bottom-right-radius: 0;
   }
 
+  .aksel-date__field-button:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  .aksel-date__field:not(.aksel-date__field--readonly):has(.aksel-date__field-input:not(:disabled)) .aksel-date__field-button:hover {
+    --__axc-button-border-color: var(--ax-border-strong);
+  }
+
+  .aksel-date__field:not(.aksel-date__field--readonly, .aksel-date__field--error):has(.aksel-date__field-input:-webkit-any(:focus-visible, :hover):not(:disabled)) .aksel-date__field-button {
+    --__axc-button-border-color: var(--ax-border-strong);
+  }
+
+  .aksel-date__field:not(.aksel-date__field--readonly, .aksel-date__field--error):has(.aksel-date__field-input:is(:focus-visible, :hover):not(:disabled)) .aksel-date__field-button {
+    --__axc-button-border-color: var(--ax-border-strong);
+  }
+
   .aksel-form-field--small .aksel-date__field-button {
     padding: var(--ax-space-4);
   }
@@ -3634,19 +3665,23 @@
   }
 
   .aksel-date__field--readonly .aksel-date__field-button {
+    --__axc-button-border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
-  }
-
-  .aksel-date__field-button:focus-visible {
-    outline-color: var(--ax-border-focus);
+    opacity: 1;
+    background-color: var(--ax-bg-neutral-moderate);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .aksel-date__field-wrapper {
-    align-items: center;
+    border-radius: var(--ax-radius-8);
     width: -webkit-fit-content;
     width: fit-content;
     display: inline-flex;
-    position: relative;
+  }
+
+  .aksel-date__field-wrapper:has(.aksel-date__field-input:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   .aksel-date__week-row {
@@ -4705,7 +4740,9 @@
     background: none;
     margin: 0;
     line-height: normal;
+    text-decoration: none;
     display: flex;
+    position: relative;
     overflow: visible;
   }
 
@@ -4713,6 +4750,22 @@
     background: var(--ax-bg-neutral-moderate-hoverA);
   }
 
+  .aksel-internalheader__button[data-active="true"]:after {
+    content: "";
+    background-color: var(--ax-border-strong);
+    width: 100%;
+    height: 6px;
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+  }
+
+  @media (forced-colors: active) {
+    .aksel-internalheader__button[data-active="true"]:after {
+      background-color: highlight;
+    }
+  }
+
   @media (forced-colors: active) {
     .aksel-internalheader__button:hover {
       color: highlight;
@@ -5951,6 +6004,39 @@
     --__axc-read-more-pb: var(--ax-space-4);
   }
 
+  .aksel-read-more[data-variant="ghost"] {
+    --__axc-read-more-radius: var(--ax-radius-4);
+  }
+
+  .aksel-read-more[data-variant="moderate"] {
+    --__axc-read-more-radius: calc((var(--__axc-read-more-pb) * 2 + var(--ax-font-line-height-large)) / 2);
+  }
+
+  .aksel-read-more--large {
+    --__axc-read-more-pb: var(--ax-space-12);
+  }
+
+  .aksel-read-more--large[data-variant="moderate"] {
+    --__axc-read-more-pi-start: var(--ax-space-12);
+    --__axc-read-more-pi-end: var(--ax-space-24);
+  }
+
+  .aksel-read-more--medium[data-variant="moderate"] {
+    --__axc-read-more-pi-start: var(--ax-space-8);
+    --__axc-read-more-pi-end: var(--ax-space-16);
+  }
+
+  .aksel-read-more--small {
+    --__axc-read-more-icon-size: 1.25rem;
+    --__axc-read-more-pb: var(--ax-space-2);
+  }
+
+  .aksel-read-more--small[data-variant="moderate"] {
+    --__axc-read-more-pi-start: var(--ax-space-8);
+    --__axc-read-more-pi-end: var(--ax-space-16);
+    --__axc-read-more-radius: calc((var(--__axc-read-more-pb) * 2 + var(--ax-font-line-height-medium)) / 2);
+  }
+
   .aksel-read-more__button {
     cursor: pointer;
     align-items: flex-start;
@@ -5959,6 +6045,7 @@
     padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
     padding-block: var(--__axc-read-more-pb);
     text-align: start;
+    border-radius: var(--__axc-read-more-radius);
     background: none;
     border: none;
     margin: 0;
@@ -5970,51 +6057,19 @@
     outline-offset: 3px;
   }
 
-  .aksel-read-more__button[data-state="open"] .aksel-read-more__expand-icon {
-    transform: rotateX(-180deg);
-  }
-
-  .aksel-read-more:-webkit-any([data-volume="low"], :not([data-volume])) .aksel-read-more__button {
-    border-radius: var(--ax-radius-4);
-  }
-
-  .aksel-read-more:-webkit-any([data-volume="low"], :not([data-volume])) .aksel-read-more__button:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
-  }
-
-  .aksel-read-more:is([data-volume="low"], :not([data-volume])) .aksel-read-more__button {
-    border-radius: var(--ax-radius-4);
-  }
-
-  .aksel-read-more:is([data-volume="low"], :not([data-volume])) .aksel-read-more__button:hover {
+  .aksel-read-more[data-variant="ghost"] .aksel-read-more__button:hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
-  .aksel-read-more[data-volume="high"] .aksel-read-more__button {
+  .aksel-read-more[data-variant="moderate"] .aksel-read-more__button {
     background-color: var(--ax-bg-moderate);
-    border-radius: var(--ax-radius-full);
   }
 
-  .aksel-read-more[data-volume="high"] .aksel-read-more__button:hover {
-    background-color: var(--ax-bg-moderate-hoverA);
+  .aksel-read-more[data-variant="moderate"] .aksel-read-more__button:hover {
+    background-color: var(--ax-bg-moderate-hover);
     color: var(--ax-text-default);
   }
 
-  .aksel-read-more[data-volume="high"].aksel-read-more--large {
-    --__axc-read-more-pi-start: var(--ax-space-12);
-    --__axc-read-more-pi-end: var(--ax-space-24);
-  }
-
-  .aksel-read-more[data-volume="high"].aksel-read-more--small {
-    --__axc-read-more-pi-start: var(--ax-space-8);
-    --__axc-read-more-pi-end: var(--ax-space-16);
-  }
-
-  .aksel-read-more[data-volume="high"].aksel-read-more--medium {
-    --__axc-read-more-pi-start: var(--ax-space-8);
-    --__axc-read-more-pi-end: var(--ax-space-16);
-  }
-
   .aksel-read-more__content {
     margin-top: var(--ax-space-8);
     border-left: 2px solid var(--ax-border-neutral-subtleA);
@@ -6023,23 +6078,18 @@
     padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
   }
 
-  .aksel-read-more__content[data-state="closed"] {
+  .aksel-read-more[data-state="closed"] .aksel-read-more__content {
     display: none;
   }
 
   .aksel-read-more__expand-icon {
     font-size: var(--__axc-read-more-icon-size);
     flex-shrink: 0;
-    transition: transform .1s cubic-bezier(.2, 0, 0, 1);
-  }
-
-  .aksel-read-more--large {
-    --__axc-read-more-pb: var(--ax-space-12);
+    transition: transform .1s ease-in-out;
   }
 
-  .aksel-read-more--small {
-    --__axc-read-more-icon-size: 1.25rem;
-    --__axc-read-more-pb: var(--ax-space-2);
+  .aksel-read-more[data-state="open"] .aksel-read-more__expand-icon {
+    transform: rotateX(-180deg);
   }
 
   @media (forced-colors: active) {