@navikt/ds-css 7.8.1 → 7.9.1

package/dist/index.css

@@ -5,7 +5,7 @@
  */
 
 :root, :host {
-  --a-version: "7.8.1";
+  --ax-version: "7.9.1";
   --a-spacing-1-alt: 0.375rem;
   --a-spacing-05: 0.125rem;
   --a-spacing-32: 8rem;
@@ -1263,6 +1263,18 @@ body,
   color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
 }
 
+.navds-error-message.navds-error-message--show-icon {
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.navds-error-message.navds-error-message--show-icon svg {
+  margin-top: 0.15em;
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+}
+
 .navds-typo--truncate {
   overflow: hidden;
   white-space: nowrap;
@@ -1696,7 +1708,7 @@ body,
   margin-right: var(--ac-button-icon-margin);
 }
 
-.navds-button__icon:only-child {
+.navds-button--icon-only .navds-button__icon {
   margin: 0;
 }
 
@@ -2085,6 +2097,10 @@ body,
 
 /* Loader overrides */
 
+.navds-button .navds-loader {
+  position: absolute;
+}
+
 .navds-button .navds-loader .navds-loader__foreground {
   stroke: var(--ac-button-loader-stroke, currentColor);
 }
@@ -2094,6 +2110,10 @@ body,
   stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
 }
 
+.navds-button--loading > :not(.navds-loader) {
+  visibility: hidden;
+}
+
 @media (forced-colors: active) {
   .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
     opacity: 1;
@@ -3645,19 +3665,6 @@ li.navds-file-item {
   color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }
 
-.navds-form-field .navds-error-message,
-.navds-fieldset .navds-error-message,
-.navds-file-item .navds-error-message {
-  display: flex;
-  gap: var(--a-spacing-2);
-}
-
-.navds-form-field .navds-error-message::before,
-.navds-fieldset .navds-error-message::before,
-.navds-file-item .navds-error-message::before {
-  content: "•";
-}
-
 .navds-form-field--disabled {
   opacity: 0.3;
   cursor: not-allowed;
@@ -4233,11 +4240,15 @@ li.navds-file-item {
   Error handling
 */
 
-.navds-select--error > * select:not(:hover, :focus, :disabled) {
+.navds-select--error > * .navds-select__input:not(:hover, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
+.navds-select--error .navds-select__input:focus {
+  box-shadow: var(--a-shadow-focus);
+}
+
 /**
   Disabled
 */
@@ -4346,12 +4357,15 @@ li.navds-file-item {
 .navds-switch__track {
   width: 2.75rem;
   height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ac-switch-bg, var(--a-surface-default));
+  border: 2px solid var(--a-border-default);
   position: absolute;
   top: var(--a-spacing-3);
   left: 0;
   border-radius: var(--a-border-radius-full);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: background-color, border-color;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .navds-switch--small > .navds-switch__track {
@@ -4366,18 +4380,20 @@ li.navds-file-item {
 
 .navds-switch__input:checked ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
+  border-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
 }
 
 .navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-subtle));
 }
 
-.navds-switch__input:hover:checked ~ .navds-switch__track {
+.navds-switch__input:hover:checked:not(:disabled) ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
+  border-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
 }
 
 .navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ac-switch-bg, var(--a-surface-default));
 }
 
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
@@ -4404,15 +4420,15 @@ li.navds-file-item {
 /* Thumb */
 
 .navds-switch__thumb {
-  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-neutral));
   color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
   border-radius: var(--a-border-radius-full);
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   position: absolute;
   transform: translateX(0);
-  left: var(--a-spacing-05);
-  top: var(--a-spacing-05);
+  left: 0.0625rem;
+  top: 0.0625rem;
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
@@ -4422,6 +4438,11 @@ li.navds-file-item {
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+  background-color: var(--a-surface-default);
+  width: 1.25rem;
+  height: 1.25rem;
+  left: 0;
+  top: 0;
 }
 
 .navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
@@ -4472,6 +4493,7 @@ li.navds-file-item {
 .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
 .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
   background-color: var(--a-surface-neutral-moderate);
+  border-color: var(--a-border-subtle);
 }
 
 .navds-switch--readonly > .navds-switch__label-wrapper,
@@ -4489,12 +4511,12 @@ li.navds-file-item {
 }
 
 .navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-subtle);
-  box-shadow: 0 0 0 2px var(--a-border-default);
+  background-color: var(--a-surface-neutral);
 }
 
 .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-subtle);
+  color: var(--a-icon-on-neutral);
+  background-color: var(--a-surface-neutral);
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -4514,7 +4536,9 @@ li.navds-file-item {
   }
 
   .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb {
+  .navds-switch--readonly .navds-switch__thumb,
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
     background-color: fieldtext;
   }
 
@@ -4523,11 +4547,8 @@ li.navds-file-item {
     color: field;
   }
 
-  .navds-switch__track {
-    width: calc(2.75rem + 4px);
-    height: calc(1.5rem + 4px);
-    top: var(--a-spacing-3);
-    border: 2px solid fieldtext;
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: graytext;
   }
 
   .navds-switch__input:focus-visible ~ .navds-switch__track {
@@ -4541,6 +4562,7 @@ li.navds-file-item {
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
     background-color: graytext;
+    border-color: graytext;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
@@ -4743,16 +4765,13 @@ li.navds-file-item {
   Error handling
 */
 
-.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
-@supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  }
+.navds-textarea--error .navds-textarea__input:focus-visible {
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-textarea__input:disabled {
@@ -5781,7 +5800,7 @@ button.navds-internalheader__title:active,
   text-decoration: underline;
 }
 
-.navds-alert:not(.navds-alert--inline) .navds-link,
+.navds-alert:not(.navds-alert--inline) .navds-link:not(:active, :focus-visible),
 .navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }