@navikt/ds-css 7.9.2 → 7.10.0

package/dist/darkside/components.css

@@ -273,17 +273,17 @@
   }
 
   .navds-button:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   .navds-button--small, .navds-button--xsmall {
     --__axc-button-icon-margin: -2px;
-    --__axc-button-icon-size: 1.25rem;
   }
 
   .navds-button--small {
     padding: var(--ax-space-4) var(--ax-space-12);
+    gap: var(--ax-space-6);
     min-width: 2rem;
     min-height: 2rem;
   }
@@ -291,6 +291,7 @@
   .navds-button--xsmall {
     padding: var(--ax-space-2) var(--ax-space-8);
     gap: var(--ax-space-4);
+    --__axc-button-icon-size: 1.25rem;
   }
 
   .navds-button--icon-only {
@@ -397,7 +398,7 @@
   }
 
   .navds-button--secondary-neutral {
-    --__axc-button-border-color: var(--ax-border-default);
+    --__axc-button-border-color: var(--ax-border-strong);
     color: var(--ax-text-default);
     background-color: rgba(0, 0, 0, 0);
   }
@@ -414,7 +415,7 @@
   }
 
   .navds-button--secondary-neutral:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-default);
+    --__axc-button-border-color: var(--ax-border-strong);
     color: var(--ax-text-default);
     background-color: rgba(0, 0, 0, 0);
   }
@@ -482,7 +483,7 @@
     opacity: var(--ax-opacity-disabled);
   }
 
-  .navds-button .navds-loader {
+  .navds-button > .navds-loader {
     position: absolute;
   }
 
@@ -599,7 +600,7 @@
   .navds-chips__toggle--action {
     box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
     background-color: var(--ax-bg-accent-moderate);
-    color: var(--ax-text-default);
+    color: var(--ax-text-accent-strong);
   }
 
   .navds-chips__toggle--action:hover {
@@ -831,7 +832,7 @@
   }
 
   .navds-dropzone--error > .navds-dropzone__area {
-    outline: 2px solid var(--ax-border-danger);
+    outline: 2px solid var(--ax-border-danger-strong);
     outline-offset: -1px;
     border-color: rgba(0, 0, 0, 0);
   }
@@ -901,7 +902,7 @@
   }
 
   .navds-file-item--error > .navds-file-item__inner {
-    outline: 2px solid var(--ax-border-danger);
+    outline: 2px solid var(--ax-border-danger-strong);
   }
 
   .navds-file-item__icon {
@@ -1234,7 +1235,7 @@
   }
 
   .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label, .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
   }
 
   .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label:before, .navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label:before {
@@ -1243,12 +1244,11 @@
   }
 
   .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label:before, .navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label:before {
-    border-color: var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
   }
 
   .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label:before, .navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label:before {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    border-color: var(--ax-border-danger-strong);
   }
 
   .navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label:before {
@@ -1418,12 +1418,7 @@
     padding-block: 0;
   }
 
-  .navds-select--error > * select {
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
-    border-color: var(--ax-border-danger);
-  }
-
-  .navds-select--error > * select:hover, .navds-select--error > * select:focus {
+  .navds-select--error > * select, .navds-select--error > * select:hover, .navds-select--error > * select:focus {
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
     border-color: var(--ax-border-danger-strong);
   }
@@ -1519,7 +1514,7 @@
   }
 
   .navds-switch__input:hover ~ .navds-switch__label-wrapper, .navds-switch__label-wrapper:hover {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
   }
 
   .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -1586,7 +1581,7 @@
 
   .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
     background-color: var(--ax-bg-raised);
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     width: 1.25rem;
     height: 1.25rem;
     top: 0;
@@ -1748,8 +1743,8 @@
   }
 
   .navds-text-field--error .navds-text-field__input:not(:disabled) {
-    border-color: var(--ax-border-danger);
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
   }
 
   .navds-text-field--readonly .navds-text-field__input {
@@ -1869,8 +1864,8 @@
   }
 
   .navds-textarea--error .navds-textarea__input:not(:disabled) {
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
-    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
   }
 
   @media (forced-colors: active) {
@@ -1994,12 +1989,12 @@
   }
 
   .navds-search--error .navds-search__input:not(:disabled) {
-    border-color: var(--ax-border-danger);
-    box-shadow: inset -2px 0 0 0 var(--ax-border-danger), inset 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: inset -2px 0 0 0 var(--ax-border-danger-strong), inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 
   .navds-search--error .navds-search__input:not(:disabled).navds-search__input--simple {
-    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 
   .navds-search__input:focus-visible, .navds-search__button-search:focus-visible {
@@ -2026,7 +2021,7 @@
   }
 
   .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) .navds-combobox__wrapper:hover {
-    border-color: var(--ax-border-focus);
+    border-color: var(--ax-border-accent-strong);
   }
 
   .navds-form-field--small .navds-combobox__wrapper {
@@ -2041,6 +2036,10 @@
     opacity: var(--ax-opacity-disabled);
   }
 
+  .navds-combobox--disabled .navds-combobox__wrapper:hover {
+    border-color: var(--ax-border-default);
+  }
+
   .navds-combobox--disabled .navds-combobox__wrapper :hover {
     cursor: not-allowed;
   }
@@ -2081,9 +2080,9 @@
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-    border-color: var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-accent-strong);
   }
 
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
@@ -2115,13 +2114,17 @@
     cursor: text;
   }
 
+  .navds-combobox--disabled .navds-combobox__wrapper-inner:hover {
+    border-color: var(--ax-border-default);
+  }
+
   .navds-combobox--error .navds-combobox__wrapper-inner {
-    border-color: var(--ax-border-danger);
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
   }
 
   .navds-combobox--error .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-    border-color: var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
   }
 
   .navds-combobox__selected-options {
@@ -2219,7 +2222,7 @@
 
   .navds-combobox__list {
     z-index: 10;
-    max-height: 290px;
+    max-height: 316px;
     left: 0;
     right: 0;
     top: calc(100% + var(--ax-space-8));
@@ -2248,7 +2251,7 @@
     padding-inline: var(--__axc-combobox-list-item-padding-inline);
     border-radius: var(--ax-border-radius-medium);
     margin-inline: var(--ax-space-8);
-    margin-block: var(--ax-space-4);
+    margin-block: var(--ax-space-2);
     border: 0;
     justify-content: space-between;
     align-items: center;
@@ -2289,7 +2292,6 @@
   .navds-combobox__list-item--focus {
     cursor: pointer;
     outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
   }
 
   .navds-combobox__list-item {
@@ -2304,11 +2306,12 @@
 
   .navds-combobox__list-item mark {
     font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-default);
     background-color: rgba(0, 0, 0, 0);
   }
 
   .navds-combobox__list-item svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 
   .navds-combobox__list-item--selected {
@@ -2324,11 +2327,10 @@
     background: var(--ax-bg-accent-moderateA);
     cursor: pointer;
     margin: 0;
-    margin-block: calc(var(--ax-space-4) * -1);
-    padding-block: var(--ax-space-16);
     border-radius: 0;
     justify-content: flex-start;
     gap: .25rem;
+    margin-block-start: calc(var(--ax-space-4) * -1);
   }
 
   .navds-combobox__list-item--new-option svg {
@@ -2336,6 +2338,7 @@
   }
 
   .navds-combobox__list-item--new-option:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
     border: none;
   }
 
@@ -2659,7 +2662,7 @@
     background-color: var(--ax-bg-accent-moderateA);
     width: 22px;
     height: 22px;
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     align-self: center;
   }
 
@@ -2912,11 +2915,11 @@
   }
 
   .navds-chat--info .navds-chat__bubble, .navds-chat--info .navds-chat__avatar {
-    background-color: var(--ax-bg-info-raised);
+    background-color: var(--ax-bg-info-moderate);
   }
 
   .navds-chat--neutral .navds-chat__bubble, .navds-chat--neutral .navds-chat__avatar {
-    background-color: var(--ax-bg-raised);
+    background-color: var(--ax-bg-moderateA);
   }
 
   .navds-chat__top-text {
@@ -3011,12 +3014,8 @@
     --__axc-copybutton-padding: var(--ax-space-4);
   }
 
-  .navds-copybutton--small .navds-copybutton__icon {
-    font-size: 1.25rem;
-  }
-
   .navds-copybutton--small > .navds-copybutton__content {
-    gap: var(--ax-space-6);
+    gap: var(--ax-space-4);
   }
 
   .navds-copybutton--xsmall {
@@ -3038,7 +3037,7 @@
   }
 
   .navds-copybutton--xsmall > .navds-copybutton__content {
-    gap: var(--ax-space-4);
+    gap: var(--ax-space-2);
   }
 
   .navds-copybutton__icon {
@@ -3046,18 +3045,6 @@
     display: flex;
   }
 
-  .navds-copybutton__icon:first-of-type {
-    margin-left: -.25rem;
-  }
-
-  .navds-copybutton__icon:last-of-type {
-    margin-right: -.25rem;
-  }
-
-  .navds-copybutton__icon:only-child {
-    margin: 0;
-  }
-
   .navds-copybutton--active .navds-copybutton__icon {
     animation: 2s cubic-bezier(.05, .7, .1, 1) akselCopyButtonIconAnimation;
   }
@@ -3088,14 +3075,6 @@
     color: var(--ax-text-success);
   }
 
-  .navds-copybutton--action.navds-copybutton--active:hover {
-    color: var(--ax-text-success-strong);
-  }
-
-  .navds-copybutton--action:hover {
-    color: var(--ax-text-accent-strong);
-  }
-
   .navds-copybutton--action:disabled {
     color: var(--ax-text-accent);
   }
@@ -3104,10 +3083,6 @@
     color: var(--ax-text-subtle);
   }
 
-  .navds-copybutton--neutral:hover, .navds-copybutton--neutral.navds-copybutton--active {
-    color: var(--ax-text-default);
-  }
-
   .navds-copybutton--neutral:disabled {
     color: var(--ax-text-subtle);
   }
@@ -3115,7 +3090,7 @@
   .navds-copybutton__content {
     justify-content: center;
     align-items: center;
-    gap: var(--ax-space-8);
+    gap: var(--ax-space-6);
     display: inline-flex;
   }
 
@@ -3574,7 +3549,7 @@
 
   .navds-action-menu__item--danger:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger-strong);
+    color: var(--ax-text-danger);
   }
 
   .navds-action-menu__marker {
@@ -5257,8 +5232,8 @@
   }
 
   .navds-read-more__button:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   .navds-read-more__button[data-state="open"] .navds-read-more__expand-icon {
@@ -5945,11 +5920,28 @@
   }
 
   .navds-table__expanded-row-content {
-    padding: var(--ax-space-16) calc(var(--ax-space-8)  + 3rem);
+    --__ac-table-expanded-row-pi: calc(var(--ax-space-8)  + 3rem);
+    padding-block: var(--ax-space-16);
   }
 
   .navds-table--small .navds-table__expanded-row-content {
-    padding: var(--ax-space-8) calc(var(--ax-space-8)  + 3rem);
+    padding-block: var(--ax-space-8);
+  }
+
+  .navds-table__expanded-row-content--gutter-both {
+    padding-inline: var(--__ac-table-expanded-row-pi);
+  }
+
+  .navds-table__expanded-row-content--gutter-left {
+    padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
+  }
+
+  .navds-table__expanded-row-content--gutter-right {
+    padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
+  }
+
+  .navds-table__expanded-row-content--gutter-none {
+    padding-inline: var(--ax-space-8);
   }
 
   .navds-tabs__tablist-wrapper {