@navikt/ds-css 4.7.2 → 4.7.4

package/dist/components.css

@@ -1074,10 +1074,10 @@
   padding: 0 var(--a-spacing-3);
   text-decoration: none;
   border-radius: var(--a-border-radius-full);
-  min-height: 32px;
+  min-height: 2rem;
 }
 .navds-chips--small .navds-chips__chip {
-  min-height: 24px;
+  min-height: 1.5rem;
   padding: 0 var(--a-spacing-2);
 }
 .navds-chips__toggle {
@@ -1239,13 +1239,13 @@
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
-  margin-left: -4px;
+  margin-left: -0.25rem;
 }
 .navds-copybutton__icon:only-child {
   margin: 0;
 }
 :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
-  margin: -2px;
+  margin: -0.125rem;
 }
 .navds-copybutton:focus-visible {
   outline: none;
@@ -1443,7 +1443,7 @@
  * Header/Typography *
  *************************/
 .navds-expansioncard__title--small {
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }
 .navds-expansioncard__title--medium {
   margin-top: var(--a-spacing-2);
@@ -1655,7 +1655,7 @@
   gap: var(--a-spacing-2);
 }
 .navds-form-field__description {
-  margin-top: -6px;
+  margin-top: -0.375rem;
   color: var(--ac-form-description, var(--a-text-subtle));
 }
 .navds-form-field .navds-error-message,
@@ -1750,10 +1750,10 @@
 .navds-checkbox__input,
 .navds-radio__input {
   position: absolute;
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
   top: 0;
-  left: -12px;
+  left: -0.75rem;
   z-index: 1;
   opacity: 0;
   cursor: pointer;
@@ -1789,14 +1789,14 @@
 }
 .navds-checkbox--small > .navds-checkbox__input,
 .navds-radio--small > .navds-radio__input {
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
   top: 0;
-  left: -6px;
+  left: -0.375rem;
 }
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: 6px 0;
+  padding: 0.375rem 0;
 }
 .navds-checkbox--small > .navds-checkbox__label::before,
 .navds-radio--small > .navds-radio__label::before {
@@ -1843,14 +1843,14 @@
 }
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-  background-position: 6px center;
+  background-position: 0.375rem center;
   background-repeat: no-repeat;
-  background-size: 13px;
+  background-size: 0.8125rem;
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-position: 4px center;
+  background-position: 0.25rem center;
 }
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
@@ -2010,7 +2010,7 @@
   color: var(--ac-select-text, var(--a-text-default));
   width: 100%;
   box-sizing: border-box;
-  min-height: 48px;
+  min-height: 3rem;
   display: inline-block;
   position: relative;
   padding: 0.5rem;
@@ -2043,7 +2043,7 @@
   align-self: center;
 }
 .navds-form-field--small .navds-select__input {
-  min-height: 32px;
+  min-height: 2rem;
   padding: 0 2rem 0 0.25rem;
 }
 .navds-form-field--small .navds-select__chevron {
@@ -2080,7 +2080,7 @@
 }
 .navds-switch {
   position: relative;
-  min-height: 48px;
+  min-height: 3rem;
   width: fit-content;
 }
 .navds-switch--right {
@@ -2088,20 +2088,20 @@
 }
 .navds-switch--small {
   position: relative;
-  min-height: 32px;
+  min-height: 2rem;
 }
 /* Input */
 .navds-switch__input {
   cursor: pointer;
   position: absolute;
   z-index: 1;
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
   opacity: 0;
   top: 0;
 }
 .navds-switch--small > .navds-switch__input {
-  height: 32px;
+  height: 2rem;
   top: 0;
 }
 /* Label */
@@ -2119,10 +2119,10 @@
   padding: 0.75rem 3.25rem 0.75rem 0;
 }
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - 2px) 0 calc(var(--a-spacing-2) - 2px) 3.25rem;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
 }
 .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - 2px) 3.25rem calc(var(--a-spacing-2) - 2px) 0;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
 }
 .navds-switch--with-description,
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
@@ -2137,8 +2137,8 @@
 }
 /* Track */
 .navds-switch__track {
-  width: 44px;
-  height: 24px;
+  width: 2.75rem;
+  height: 1.5rem;
   background-color: var(--ac-switch-bg, var(--a-surface-neutral));
   position: absolute;
   top: var(--a-spacing-3);
@@ -2182,35 +2182,35 @@
   background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
   color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
   border-radius: var(--a-border-radius-full);
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
   position: absolute;
   transform: translateX(0);
-  left: 2px;
-  top: 2px;
+  left: var(--a-spacing-05);
+  top: var(--a-spacing-05);
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(20px);
+  transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
 }
 @media (hover: hover) and (pointer: fine) {
   .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(2px);
+    transform: translateX(0.125rem);
   }
 
   .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(18px);
+    transform: translateX(1.125rem);
   }
 }
 .navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(0);
 }
 .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(20px);
+  transform: translateX(1.25rem);
 }
 /* Loader */
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
@@ -2258,7 +2258,7 @@
   }
 
   .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(20px);
+    transform: translateX(1.25rem);
   }
 }
 .navds-text-field__input {
@@ -2267,7 +2267,7 @@
   background-color: var(--ac-textfield-bg, var(--a-surface-default));
   border-radius: var(--a-border-radius-medium);
   border: 1px solid var(--ac-textfield-border, var(--a-border-default));
-  min-height: 48px;
+  min-height: 3rem;
   width: 100%;
   color: var(--ac-textfield-text, var(--a-text-default));
 }
@@ -2278,8 +2278,8 @@
   color: var(--ac-textfield-placeholder, var(--a-text-subtle));
 }
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 0.5rem;
-  min-height: 32px;
+  padding: 0 var(--a-spacing-2);
+  min-height: 2rem;
 }
 .navds-text-field__input:hover {
   border-color: var(--ac-textfield-hover-border, var(--a-border-action));
@@ -2365,7 +2365,7 @@
   }
 }
 .navds-form-field--small .navds-textarea__input {
-  padding: 6px;
+  padding: 0.375rem;
 }
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
   padding-bottom: var(--a-spacing-7);
@@ -2376,8 +2376,8 @@
   font-style: italic;
   position: absolute;
   text-align: left;
-  left: 1px;
-  bottom: 1px;
+  left: 0.0625rem;
+  bottom: 0.0625rem;
   padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 .navds-textarea__counter--error {
@@ -2492,8 +2492,8 @@
 }
 .navds-search__button-search {
   flex-shrink: 0;
-  min-width: 64px;
-  min-height: 32px;
+  min-width: 4rem;
+  min-height: 2rem;
   border-radius: 0;
   border-top-right-radius: var(--a-border-radius-medium);
   border-bottom-right-radius: var(--a-border-radius-medium);
@@ -2502,7 +2502,7 @@
   font-size: 1rem;
 }
 .navds-form-field--small .navds-search__button-search {
-  min-width: 40px;
+  min-width: 2.5rem;
 }
 .navds-search__button-search.navds-button--secondary {
   box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
@@ -2577,7 +2577,7 @@
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  border: 1px solid black;
+  border: 1px solid var(--a-border-default);
 }
 .navds-combobox__wrapper-inner > :first-child {
   flex: 2;
@@ -2610,7 +2610,7 @@
   letter-spacing: 0;
   line-height: var(--a-font-line-height-large);
   margin: 0;
-  padding-left: calc(0.5rem - 4px);
+  padding-left: 0.25rem;
 }
 .navds-combobox__input-wrapper {
   width: 100%;
@@ -2730,8 +2730,8 @@
   align-items: flex-start;
   padding: 0;
   box-shadow: var(--a-shadow-small);
-  border-radius: 4px;
-  gap: 4px 0;
+  border-radius: var(--a-border-radius-medium);
+  gap: var(--a-spacing-1) 0;
   background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
   color: var(--ac-combobox-list-text, var(--a-text-default));
 }
@@ -2868,7 +2868,7 @@
   display: flex;
   align-self: stretch;
   background: var(--ac-internalheader-bg, var(--a-surface-inverted));
-  min-height: var(--a-spacing-12);
+  min-height: 3rem;
 
   --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
 }
@@ -3432,7 +3432,7 @@ button.navds-internalheader__title:active,
 }
 .navds-date__field-button {
   position: absolute;
-  right: 1px;
+  right: 0.0625rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--ac-date-input-button-text, var(--a-text-default));
@@ -3447,7 +3447,7 @@ button.navds-internalheader__title:active,
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
-  height: calc(100% - 2px);
+  height: calc(100% - 0.125rem);
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
@@ -3494,15 +3494,15 @@ button.navds-internalheader__title:active,
   align-items: center;
   justify-content: center;
   padding: var(--a-spacing-05) var(--a-spacing-2);
-  min-height: 32px;
+  min-height: 2rem;
   line-height: 1;
 }
 .navds-tag--small {
-  min-height: 24px;
+  min-height: 1.5rem;
   padding: 0 0.375rem;
 }
 .navds-tag--xsmall {
-  min-height: 20px;
+  min-height: 1.25rem;
   padding: 0 var(--a-spacing-1);
 }
 .navds-tag--error {
@@ -3638,6 +3638,7 @@ button.navds-internalheader__title:active,
   height: 1rem;
   box-sizing: content-box;
   grid-column: 2;
+  margin-bottom: var(--a-spacing-1);
 }
 .navds-timeline__row-label {
   white-space: nowrap;
@@ -3778,7 +3779,7 @@ button.navds-internalheader__title:active,
     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: 3.5px;
+  padding: var(--a-spacing-1);
   position: relative;
 }
 .navds-timeline__pin-button::before {
@@ -3823,7 +3824,7 @@ button.navds-internalheader__title:active,
 .navds-timeline__pin-wrapper::before {
   content: "";
   top: var(--navdsc-timeline-pin-size);
-  height: calc(94% - var(--navdsc-timeline-pin-size));
+  height: calc(88% - var(--navdsc-timeline-pin-size));
   width: 1px;
   margin: 0 auto;
   background: var(--a-surface-inverted);
@@ -3971,8 +3972,8 @@ button.navds-internalheader__title:active,
   text-align: center;
 }
 .navds-tooltip__arrow {
-  height: 7px;
-  width: 7px;
+  height: 0.4375rem;
+  width: 0.4375rem;
   transform: rotate(45deg);
   z-index: -1;
   background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
@@ -3989,8 +3990,8 @@ button.navds-internalheader__title:active,
   color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
   border-radius: var(--a-border-radius-small);
   padding: 0 var(--a-spacing-1);
-  min-width: 18px;
-  height: 18px;
+  min-width: 1.125rem;
+  height: 1.125rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4004,14 +4005,14 @@ button.navds-internalheader__title:active,
   border-radius: var(--a-border-radius-medium);
   background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
-  padding: calc(var(--a-spacing-1) + 1px);
+  padding: calc(var(--a-spacing-1) + 0.0625rem);
   gap: var(--a-spacing-1);
   display: inline-grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
 }
 .navds-toggle-group--small {
-  padding: calc(var(--a-spacing-05) + 1px);
+  padding: calc(var(--a-spacing-05) + 0.0625rem);
 }
 .navds-toggle-group--neutral {
   background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
@@ -4022,7 +4023,7 @@ button.navds-internalheader__title:active,
   align-items: center;
   justify-content: center;
   padding: var(--a-spacing-1) var(--a-spacing-3);
-  min-height: 38px;
+  min-height: 2.375rem;
   border: none;
   cursor: pointer;
   background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
@@ -4101,7 +4102,7 @@ button.navds-internalheader__title:active,
 }
 .navds-toggle-group--small > .navds-toggle-group__button {
   padding: var(--a-spacing-05) var(--a-spacing-3);
-  min-height: 26px;
+  min-height: 1.625rem;
   min-width: fit-content;
 }
 .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
@@ -4167,11 +4168,11 @@ button.navds-internalheader__title:active,
   gap: var(--a-spacing-05);
   color: var(--ac-read-more-text, var(--a-text-action));
   border-radius: var(--a-border-radius-small);
-  padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) 2px;
+  padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-05);
   text-align: start;
 }
 .navds-read-more--small .navds-read-more__button {
-  padding: 2px var(--a-spacing-1) 2px 2px;
+  padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-05);
 }
 .navds-read-more__button:hover {
   background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
@@ -4192,13 +4193,13 @@ button.navds-internalheader__title:active,
 .navds-read-more__content {
   margin-top: var(--a-spacing-1);
   border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
-  margin-left: 13px;
-  padding-left: 13px;
+  margin-left: 0.8125rem;
+  padding-left: 0.8125rem;
   color: var(--a-text-default);
 }
 .navds-read-more--small .navds-read-more__content {
-  margin-left: 11px;
-  padding-left: 11px;
+  margin-left: 0.6875rem;
+  padding-left: 0.6875rem;
 }
 .navds-read-more__content--closed {
   display: none;
@@ -4365,7 +4366,7 @@ button.navds-stepper__step {
 .navds-stepper__circle--success {
   border: none;
   background: none;
-  font-size: 28px;
+  font-size: 1.75rem;
   color: var(--a-text-on-action);
   background-color: var(--ac-stepper-text, var(--a-surface-action));
 }
@@ -4555,10 +4556,10 @@ button.navds-stepper__step {
   padding: var(--a-spacing-2) var(--a-spacing-3);
 }
 .navds-table .navds-checkbox .navds-checkbox__input {
-  top: -12px;
+  top: -0.75rem;
 }
 .navds-table .navds-checkbox--small .navds-checkbox__input {
-  top: -6px;
+  top: -0.375rem;
 }
 .navds-table .navds-checkbox .navds-checkbox__label {
   padding: 0;
@@ -4626,11 +4627,11 @@ button.navds-stepper__step {
 }
 .navds-table__toggle-expand-cell {
   padding: 0;
-  width: 56px;
+  width: 3.5rem;
 }
 .navds-table--small .navds-table__toggle-expand-cell {
   padding: 0;
-  width: 36px;
+  width: 2.25rem;
 }
 .navds-table__toggle-expand-button {
   all: unset;
@@ -4699,7 +4700,7 @@ button.navds-stepper__step {
 }
 .navds-tabs__scroll-button {
   padding: var(--a-spacing-3) var(--a-spacing-4);
-  width: 44px;
+  width: 2.75rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -4714,10 +4715,10 @@ button.navds-stepper__step {
 }
 .navds-tabs--small .navds-tabs__scroll-button {
   padding: 0.375rem var(--a-spacing-4);
-  width: 32px;
+  width: 2rem;
 }
 .navds-tabs__tab {
-  min-height: 48px;
+  min-height: 3rem;
   padding: var(--a-spacing-3) var(--a-spacing-4);
   display: inline-flex;
   justify-content: center;
@@ -4759,7 +4760,7 @@ button.navds-stepper__step {
   gap: 0;
 }
 .navds-tabs__tab--small {
-  min-height: 32px;
+  min-height: 2rem;
   padding: 0.375rem var(--a-spacing-4);
 }
 .navds-tabs__tab-icon--top,
@@ -4817,7 +4818,7 @@ button.navds-stepper__step {
 }
 .navds-list .navds-list__item-marker--bullet {
   display: flex;
-  margin-top: 6px;
+  margin-top: 0.375rem;
   grid-column: 1 / 2;
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));