@norges-domstoler/dds-components 21.12.0 → 21.13.0

package/dist/index.css

@@ -342,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;
@@ -2495,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%;
@@ -2587,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);
   }
@@ -2612,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;
@@ -4016,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);
@@ -4031,6 +4040,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Toggle_thumb {
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4040,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;
   }
@@ -4064,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;
@@ -4084,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);