@norges-domstoler/dds-components 21.12.0 → 21.14.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;
@@ -2816,9 +2824,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-color: var(--dds-color-border-action-hover);
   background-color: var(--dds-color-surface-hover-default);
 }
-.FileUploader_input-container--no-drag-zone {
-  padding: var(--dds-spacing-x0-5) 0;
-}
 .FileUploader_file--invalid {
   box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
 }
@@ -2832,6 +2837,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   word-break: break-all;
   width: 100%;
 }
+.FileUploader_readonly--file-list {
+  @media (prefers-reduced-motion: no-preference) {
+    transition: var(--dds-focus-transition);
+  }
+}
 
 /* src/components/Footer/Footer.module.css */
 .Footer_container {
@@ -4016,10 +4026,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 +4042,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Toggle_thumb {
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4040,6 +4052,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 +4077,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 +4096,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);