@norges-domstoler/dds-components 21.11.0 → 21.13.0

package/dist/index.css

@@ -159,7 +159,8 @@
   --dds-color-icon-action-resting-inversable: var(--dds-color-icon-on-inverse);
   --dds-color-icon-action-hover-inversable: var(--dds-color-icon-on-inverse);
 }
-:where(.typographyStyles_a) {
+:where(.typographyStyles_a),
+:where(.typographyStyles_a--nested__parent .typographyStyles_a--nested__child) {
   font: inherit;
   color: var(--dds-color-text-link);
   width: -moz-fit-content;
@@ -341,8 +342,7 @@
 }
 :where(.typographyStyles_label-medium--margins) {
   display: block;
-  margin-top: var(--dds-font-label-medium-paragraph-spacing);
-  margin-bottom: var(--dds-font-label-medium-paragraph-spacing);
+  margin-bottom: var(--dds-spacing-x0-125);
 }
 :where(.typographyStyles_legend) {
   padding-inline: 0;
@@ -2494,9 +2494,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 :where(.Input_input--with-affix) {
   gap: var(--dds-spacing-x1);
 }
-:where(.Input_label) {
-  display: block;
-}
 :where(.Input_input-group__absolute-element) {
   position: absolute;
   top: 50%;
@@ -2586,21 +2583,24 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .DetailList_list--small {
   font: var(--dds-font-body-small);
   letter-spacing: var(--dds-font-body-small-letter-spacing);
-  .DetailList_cell {
+  dt,
+  dd {
     padding: var(--dds-spacing-x0-5);
   }
 }
 .DetailList_list--medium {
   font: var(--dds-font-body-medium);
   letter-spacing: var(--dds-font-body-medium-letter-spacing);
-  .DetailList_cell {
+  dt,
+  dd {
     padding: var(--dds-spacing-x0-75);
   }
 }
 .DetailList_list--large {
   font: var(--dds-font-body-medium);
   letter-spacing: var(--dds-font-body-medium-letter-spacing);
-  .DetailList_cell {
+  dt,
+  dd {
     padding-block: var(--dds-spacing-x1-5);
     padding-inline: var(--dds-spacing-x0-75);
   }
@@ -2611,6 +2611,15 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     margin-inline-start: 0;
     text-align: left;
   }
+  dt {
+    padding-block-end: var(--dds-spacing-x0-125);
+  }
+  dd:not(:last-of-type) {
+    padding-block: var(--dds-spacing-x0-125);
+  }
+  dd:last-of-type {
+    padding-block-start: var(--dds-spacing-x0-125);
+  }
 }
 .DetailList_cell {
   display: table-cell;
@@ -3442,6 +3451,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .ProgressTracker_list {
   --dds-progress-tracker-connector-width: 1px;
   --dds-progress-tracker-item-number-size: 1.75rem;
+  --dds-progress-tracker-item-margin: calc( (var(--dds-progress-tracker-item-number-size) / 2) - (var(--dds-progress-tracker-connector-width) / 2) );
 }
 .ProgressTracker_list-item:not(:first-child)::before {
   content: "";
@@ -3451,27 +3461,18 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-right: var(--dds-progress-tracker-connector-width) solid var(--dds-color-border-default);
   width: var(--dds-progress-tracker-connector-width);
   height: 1.125rem;
-  margin-left: calc((var(--dds-progress-tracker-item-number-size) / 2) - (var(--dds-progress-tracker-connector-width) / 2));
+  margin-left: var(--dds-progress-tracker-item-margin);
   margin-bottom: var(--dds-spacing-x0-125);
 }
 .ProgressTracker_list-item--row:not(:first-child)::before {
   border-top: var(--dds-progress-tracker-connector-width) solid var(--dds-color-border-default);
   height: var(--dds-progress-tracker-connector-width);
   width: 1.875rem;
-  margin-top: calc((var(--dds-progress-tracker-item-number-size) / 2) - (var(--dds-progress-tracker-connector-width) / 2));
+  margin-top: var(--dds-progress-tracker-item-margin);
   margin-right: var(--dds-spacing-x0-5);
 }
 .ProgressTracker_item-button {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
   grid-template-columns: var(--dds-progress-tracker-item-number-size) 1fr;
-  justify-content: flex-start;
-  align-items: center;
-  font-family: inherit;
-  gap: var(--dds-spacing-x0-5);
   cursor: pointer;
   @media (prefers-reduced-motion: no-preference) {
     transition: all 0.2s;
@@ -3492,16 +3493,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     border-color: var(--dds-color-border-action-hover);
     color: var(--dds-color-icon-on-action);
   }
-  &:hover > .ProgressTracker_item-text--active-completed,
-  &:hover > .ProgressTracker_item-text--active-incomplete {
-    color: var(--dds-color-text-action-resting);
-    text-decoration-color: transparent;
-  }
-  &:hover > .ProgressTracker_item-text--inactive-completed,
-  &:hover > .ProgressTracker_item-text--inactive-incomplete {
-    color: var(--dds-color-text-action-hover);
-    text-decoration-color: var(--dds-color-text-action-hover);
-  }
   &:disabled {
     cursor: not-allowed;
   }
@@ -3541,24 +3532,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   color: var(--dds-color-text-action-resting);
 }
 .ProgressTracker_item-text {
-  text-decoration: underline;
   text-align: start;
-  transition: text-decoration-color 0.2s;
 }
-.ProgressTracker_item-text--disabled {
-  color: var(--dds-color-text-subtle);
+.ProgressTracker_item-text--inactive-link {
   text-decoration-color: transparent;
 }
-.ProgressTracker_item-text--active-completed,
-.ProgressTracker_item-text--active-incomplete {
-  color: var(--dds-color-text-action-resting);
-  text-decoration-color: transparent;
-}
-.ProgressTracker_item-text--inactive-completed,
-.ProgressTracker_item-text--inactive-incomplete {
-  color: var(--dds-color-text-medium);
-  text-decoration-color: var(--dds-color-text-medium);
-}
 
 /* src/components/ProgressBar/ProgressBar.module.css */
 .ProgressBar_progress {
@@ -3995,10 +3973,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
   }
   &.TextInput_with-icon--small {
-    padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small) + var(--dds-spacing-x0-5));
+    padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
   }
   &.TextInput_with-icon--xsmall {
-    padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-25));
+    padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-x0-25));
   }
 }
 .TextInput_input--extended {
@@ -4046,10 +4024,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: -moz-fit-content;
   width: fit-content;
   gap: var(--dds-spacing-x0-75);
+  --dds-toggle-medium-thumb-spacing-inline: var(--dds-spacing-x0-125);
+  --dds-toggle-large-thumb-spacing-inline: var(--dds-spacing-x0-25);
 }
 .Toggle_track {
-  display: flex;
-  align-items: center;
+  position: relative;
   background-color: var(--dds-color-surface-medium);
   border-radius: var(--dds-border-radius-rounded);
   border: 1px solid var(--dds-color-border-default);
@@ -4061,6 +4040,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Toggle_thumb {
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4070,6 +4050,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   @media (prefers-reduced-motion: no-preference) {
     transition:
       transform 0.2s,
+      left 0.2s,
       border 0.2s,
       width 0.2s;
   }
@@ -4094,15 +4075,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     width: 2.8125rem;
   }
   .Toggle_thumb {
-    margin-inline-start: var(--dds-spacing-x0-125);
+    left: var(--dds-toggle-medium-thumb-spacing-inline);
+    top: 1px;
     height: 1.25rem;
     width: 1.25rem;
   }
   input:checked ~ .Toggle_track > .Toggle_thumb {
-    transform: translateX(1.25rem);
-  }
-  input:checked:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
-    transform: translateX(var(--dds-spacing-x1));
+    left: calc(100% - var(--dds-toggle-medium-thumb-spacing-inline));
+    transform: translateX(-100%);
   }
   input:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
     width: 1.5rem;
@@ -4114,15 +4094,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     width: 3.25rem;
   }
   .Toggle_thumb {
-    margin-inline-start: var(--dds-spacing-x0-25);
+    left: var(--dds-toggle-large-thumb-spacing-inline);
+    top: var(--dds-spacing-x0-125);
     height: 1.75rem;
     width: 1.75rem;
   }
   input:checked ~ .Toggle_track > .Toggle_thumb {
-    transform: translateX(var(--dds-spacing-x1));
-  }
-  input:checked:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
-    transform: translateX(var(--dds-spacing-x0-75));
+    left: calc(100% - var(--dds-toggle-large-thumb-spacing-inline));
+    transform: translateX(-100%);
   }
   input:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
     width: var(--dds-spacing-x2);