@norges-domstoler/dds-components 17.5.2 → 17.5.4

package/dist/index.css

@@ -844,31 +844,31 @@
 }
 
 /* src/components/helpers/Paper/Paper.module.css */
-.Paper_container {
+:where(.Paper_container) {
   box-sizing: border-box;
   background-color: var(--dds-color-surface-default);
   border-radius: var(--dds-border-radius-surface);
   margin: 0;
 }
-.Paper_shadow--1 {
+:where(.Paper_shadow--1) {
   box-shadow: var(--dds-shadow-1);
 }
-.Paper_shadow--2 {
+:where(.Paper_shadow--2) {
   box-shadow: var(--dds-shadow-2);
 }
-.Paper_shadow--3 {
+:where(.Paper_shadow--3) {
   box-shadow: var(--dds-shadow-3);
 }
-.Paper_shadow--4 {
+:where(.Paper_shadow--4) {
   box-shadow: var(--dds-shadow-4);
 }
-.Paper_border--default {
+:where(.Paper_border--default) {
   border: 1px solid var(--dds-color-border-default);
 }
-.Paper_border--subtle {
+:where(.Paper_border--subtle) {
   border: 1px solid var(--dds-color-border-subtle);
 }
-.Paper_border--on-inverse {
+:where(.Paper_border--on-inverse) {
   border: 1px solid var(--dds-color-border-inverse);
 }
 
@@ -1585,6 +1585,8 @@
 .InputMessage_container--error {
   padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
   background-color: var(--dds-color-surface-danger-default);
+  border-bottom-left-radius: var(--dds-border-radius-surface);
+  border-bottom-right-radius: var(--dds-border-radius-surface);
   gap: var(--dds-spacing-x0-25);
   .InputMessage_icon {
     color: var(--dds-color-icon-on-danger-default);
@@ -1695,6 +1697,7 @@
 
 /* src/components/Drawer/Drawer.module.css */
 .Drawer_container {
+  --dds-transition-duration-drawer-move: 0.2s;
   --dds-drawer-content-container-padding: var(--dds-spacing-x0-25);
   --dds-drawer-container-padding: calc( var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding) ) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-drawer-content-container-padding));
   position: fixed;
@@ -1705,9 +1708,10 @@
   justify-content: flex-end;
   min-width: 300px;
   z-index: 100;
+  border-radius: 0;
   padding: var(--dds-drawer-container-padding);
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform var(--dds-transition-duration-surface-move);
+    transition: transform var(--dds-transition-duration-drawer-move);
   }
 }
 .Drawer_container--small {
@@ -2590,10 +2594,14 @@
   --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));
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   min-width: 200px;
   padding: var(--dds-modal-container-padding);
 }
+.Modal_container-scrollable {
+  max-height: calc(100vh - var(--dds-spacing-x1));
+  overflow: auto;
+}
 .Modal_content {
   display: grid;
   padding-right: calc(var(--dds-spacing-x1) - var(--dds-modal-content-padding));
@@ -2731,7 +2739,7 @@
 .Select_container {
   margin: 0;
   position: relative;
-  width: var(--dds-input-default-width);
+  width: var(--dds-select-width);
 }
 .Select_container--disabled {
   cursor: not-allowed;
@@ -2821,15 +2829,12 @@
   }
 }
 .NativeSelect_select--medium {
-  height: calc(1.5em + var(--dds-spacing-x0-75) + var(--dds-spacing-x0-75) + 2px);
   padding-right: var(--dds-spacing-x2);
 }
 .NativeSelect_select--small {
-  height: calc(1.5em + var(--dds-spacing-x0-5) + var(--dds-spacing-x0-5) + 2px);
   padding-right: var(--dds-spacing-x2);
 }
 .NativeSelect_select--tiny {
-  height: calc(1.5em + var(--dds-spacing-x0-25) + var(--dds-spacing-x0-25) + 2px);
   padding-right: var(--dds-spacing-x1-5);
 }
 .NativeSelect_select--multiple {
@@ -3720,9 +3725,6 @@
 .TextInput_container--disabled {
   color: var(--dds-color-text-subtle);
 }
-.TextInput_container--tiny {
-  width: 210px;
-}
 .TextInput_affix-container {
   position: relative;
   display: flex;