@norges-domstoler/dds-components 17.3.0 → 17.4.0

package/dist/index.css

@@ -560,6 +560,35 @@
   visibility: hidden;
 }
 
+/* src/components/helpers/Backdrop/Backdrop.module.css */
+.Backdrop_backdrop {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 200;
+  background-color: var(--dds-color-surface-backdrop-default);
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 0.2s;
+  }
+}
+.Backdrop_backdrop--visible {
+  opacity: 1;
+}
+.Backdrop_backdrop--hidden {
+  opacity: 0;
+}
+
+/* src/utils/RequiredMarker/RequiredMarker.module.css */
+.RequiredMarker_wrapper {
+  color: var(--dds-color-text-requiredfield);
+}
+
 /* src/components/helpers/Chevron/Chevron.module.css */
 :root {
   --dds-chevron-transition: transform 0.2s linear;
@@ -601,11 +630,6 @@
   transform: rotate(0) translateY(0);
 }
 
-/* src/utils/RequiredMarker/RequiredMarker.module.css */
-.RequiredMarker_wrapper {
-  color: var(--dds-color-text-requiredfield);
-}
-
 /* src/components/helpers/Input/Input.module.css */
 :root {
   --dds-input-default-width: 320px;
@@ -1282,52 +1306,28 @@
 .ButtonGroup_group--column > *:first-child {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  margin-block-end: -1px;
 }
 .ButtonGroup_group--column > *:last-child {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  &:not(:active) {
-    border-top-color: transparent;
-  }
 }
 .ButtonGroup_group--column > *:not(:first-child):not(:last-child) {
   border-radius: 0;
-  &:not(:active) {
-    border-top-color: transparent;
-  }
-  &:active + * {
-    border-top-color: initial;
-  }
-}
-.ButtonGroup_group--column > *:first-child:not(:last-child) {
-  &:active + * {
-    border-top-color: initial;
-  }
-}
-.ButtonGroup_group--row > *:not(:first-child):not(:last-child) {
-  border-radius: 0;
-  &:not(:active) {
-    border-left-color: transparent;
-  }
-  &:active + * {
-    border-left-color: initial;
-  }
+  margin-block-end: -1px;
 }
 .ButtonGroup_group--row > *:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-}
-.ButtonGroup_group--row > *:first-child:not(:last-child) {
-  &:active + * {
-    border-left-color: initial;
-  }
+  margin-inline-end: -1px;
 }
 .ButtonGroup_group--row > *:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  &:not(:active) {
-    border-left-color: transparent;
-  }
+}
+.ButtonGroup_group--row > *:not(:first-child):not(:last-child) {
+  border-radius: 0;
+  margin-inline-end: -1px;
 }
 
 /* src/components/Card/Card.module.css */
@@ -1501,6 +1501,7 @@
   border: 1px solid var(--dds-color-border-default);
   padding: var(--dds-spacing-x0-5);
   box-shadow: var(--dds-shadow-2);
+  height: 347px;
 }
 .DateInput_calendar {
   display: flex;
@@ -1839,7 +1840,7 @@
 }
 .Feedback_button {
   border-radius: var(--dds-border-radius-button);
-  color: var(--dds-color-text-default);
+  color: var(--dds-color-icon-medium);
   &:hover {
     background-color: var(--dds-color-surface-hover-default);
     color: var(--dds-color-icon-action-hover);
@@ -2504,7 +2505,7 @@
   }
 }
 .List_li {
-  line-height: 2.5em;
+  line-height: var(--dds-font-lineheight-list);
 }
 
 /* src/components/LocalMessage/LocalMessage.module.css */
@@ -2581,28 +2582,6 @@
 }
 
 /* src/components/Modal/Modal.module.css */
-.Modal_backdrop {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow-y: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 200;
-  background-color: var(--dds-color-surface-backdrop-default);
-  @media (prefers-reduced-motion: no-preference) {
-    transition: opacity 0.2s;
-  }
-}
-.Modal_backdrop--visible {
-  opacity: 1;
-}
-.Modal_backdrop--hidden {
-  opacity: 0;
-}
 .Modal_container {
   --dds-modal-content-padding: var(--dds-spacing-x0-25);
   --dds-modal-container-padding: calc( var(--dds-spacing-x1) - var(--dds-modal-content-padding) ) calc(var(--dds-spacing-x1) - var(--dds-modal-content-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-modal-content-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-modal-content-padding));
@@ -3008,6 +2987,53 @@
   text-decoration-color: var(--dds-color-text-medium);
 }
 
+/* src/components/ProgressBar/ProgressBar.module.css */
+.ProgressBar_container {
+  width: 100%;
+}
+.ProgressBar_progress {
+  width: var(--dds-progressbar-width);
+  height: 48px;
+  background-color: var(--dds-color-surface-medium);
+  border: 1px solid var(--dds-color-border-default);
+  border-radius: var(--dds-border-radius-surface);
+}
+.ProgressBar_progress--small {
+  height: var(--dds-spacing-x0-75);
+}
+.ProgressBar_progress--medium {
+  height: var(--dds-spacing-x1-5);
+}
+.ProgressBar_fill {
+  height: 100%;
+  width: var(--dds-progressbar-fill-width);
+  background-color: var(--dds-color-surface-action-resting);
+  @media (prefers-reduced-motion: no-preference) {
+    transition: width 0.2s, background-color 0.2s;
+  }
+}
+.ProgressBar_fill--done {
+  background-color: var(--dds-color-surface-success-strong);
+}
+.ProgressBar_fill--error {
+  background-color: var(--dds-color-surface-action-danger-resting);
+}
+.ProgressBar_fill--indeterminate {
+  width: 25%;
+  animation: ProgressBar_indeterminate 2s infinite linear;
+}
+@keyframes ProgressBar_indeterminate {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(300%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 /* src/components/Search/Search.module.css */
 .Search_container {
   display: flex;
@@ -3488,9 +3514,6 @@
 .Tabs_tab-panel {
   padding: var(--dds-spacing-x0-25);
 }
-.Tabs_tab-panel--inactive {
-  display: none;
-}
 
 /* src/components/Tag/Tag.module.css */
 .Tag_container {
@@ -3777,9 +3800,9 @@
   cursor: pointer;
   width: -moz-fit-content;
   width: fit-content;
-  border: 1px solid;
+  border: 1px solid var(--dds-color-border-default);
   border-radius: var(--dds-border-radius-rounded);
-  gap: var(--dds-spacing-x0-5);
+  gap: var(--dds-spacing-x0-25);
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
   background-color: var(--dds-color-surface-default);
   color: var(--dds-color-text-default);
@@ -3794,6 +3817,9 @@
     background-color: var(--dds-color-surface-hover-default);
   }
 }
+.ToggleButton_content--with-icon {
+  padding-inline-start: var(--dds-spacing-x0-75);
+}
 input:checked + .ToggleButton_content {
   color: var(--dds-color-text-on-action);
   background-color: var(--dds-color-surface-action-resting);