@norges-domstoler/dds-components 21.18.0 → 21.19.0

package/dist/index.css

@@ -703,6 +703,10 @@
   --dds-r-text-align: var(--dds-r-xs-text-align);
   text-align: var(--dds-r-text-align, initial);
 }
+.layout_dds-word-break {
+  --dds-r-word-break: var(--dds-r-xs-word-break);
+  word-break: var(--dds-r-word-break, initial);
+}
 .layout_dds-flex-dir {
   --dds-r-flex-dir: var(--dds-r-xs-flex-dir);
   flex-direction: var(--dds-r-flex-dir, initial);
@@ -815,6 +819,9 @@
   .layout_dds-text-align {
     --dds-r-text-align: var(--dds-r-xs-text-align);
   }
+  .layout_dds-word-break {
+    --dds-r-word-break: var(--dds-r-xs-word-break);
+  }
   .layout_dds-flex-dir {
     --dds-r-flex-dir: var(--dds-r-xs-flex-dir);
   }
@@ -916,6 +923,9 @@
   .layout_dds-text-align {
     --dds-r-text-align: var(--dds-r-sm-text-align);
   }
+  .layout_dds-word-break {
+    --dds-r-word-break: var(--dds-r-sm-word-break);
+  }
   .layout_dds-flex-dir {
     --dds-r-flex-dir: var(--dds-r-sm-flex-dir);
   }
@@ -1017,6 +1027,9 @@
   .layout_dds-text-align {
     --dds-r-text-align: var(--dds-r-md-text-align);
   }
+  .layout_dds-word-break {
+    --dds-r-word-break: var(--dds-r-md-word-break);
+  }
   .layout_dds-flex-dir {
     --dds-r-flex-dir: var(--dds-r-md-flex-dir);
   }
@@ -1118,6 +1131,9 @@
   .layout_dds-text-align {
     --dds-r-text-align: var(--dds-r-lg-text-align);
   }
+  .layout_dds-word-break {
+    --dds-r-word-break: var(--dds-r-lg-word-break);
+  }
   .layout_dds-flex-dir {
     --dds-r-flex-dir: var(--dds-r-lg-flex-dir);
   }
@@ -1219,6 +1235,9 @@
   .layout_dds-text-align {
     --dds-r-text-align: var(--dds-r-xl-text-align);
   }
+  .layout_dds-word-break {
+    --dds-r-word-break: var(--dds-r-xl-word-break);
+  }
   .layout_dds-flex-dir {
     --dds-r-flex-dir: var(--dds-r-xl-flex-dir);
   }
@@ -1488,6 +1507,10 @@
   --dds-input-default-width: 320px;
   --dds-input-default-width-xsmall: 210px;
   --dds-selection-control-height: 18px;
+  --dds-spacing-xs-icon-text-gap: var(--dds-spacing-x0-25);
+  --dds-spacing-sm-icon-text-gap: var(--dds-spacing-x0-25);
+  --dds-spacing-md-icon-text-gap: var(--dds-spacing-x0-5);
+  --dds-spacing-lg-icon-text-gap: var(--dds-spacing-x0-75);
   --dds-transition-duration-surface-move: 0.5s;
 }
 .ThemeProvider_global-styles {
@@ -1653,7 +1676,7 @@
     padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
   }
   &.Button_with-text-and-icon {
-    gap: var(--dds-spacing-x0-125);
+    gap: var(--dds-spacing-xs-icon-text-gap);
     &.Button_with-icon-left {
       padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
     }
@@ -1674,7 +1697,7 @@
     padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
   }
   &.Button_with-text-and-icon {
-    gap: var(--dds-spacing-x0-25);
+    gap: var(--dds-spacing-sm-icon-text-gap);
     &.Button_with-icon-left {
       padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5);
     }
@@ -1695,7 +1718,7 @@
     padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
   }
   &.Button_with-text-and-icon {
-    gap: var(--dds-spacing-x0-5);
+    gap: var(--dds-spacing-md-icon-text-gap);
     &.Button_with-icon-left {
       padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
     }
@@ -1716,7 +1739,7 @@
     padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
   }
   &.Button_with-text-and-icon {
-    gap: var(--dds-spacing-x0-75);
+    gap: var(--dds-spacing-lg-icon-text-gap);
     &.Button_with-icon-left {
       padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
     }
@@ -2228,21 +2251,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 
 /* src/components/InputMessage/InputMessage.module.css */
 .InputMessage_container {
-  display: flex;
-  width: -moz-fit-content;
-  width: fit-content;
   word-break: break-word;
-  max-width: 100%;
-}
-.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);
-  }
 }
 .InputMessage_icon {
   margin-top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
@@ -2328,10 +2337,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .DateInput_clear-button--inactive {
   visibility: hidden;
 }
-.DateInput_icon,
-.DateInput_popover-button {
-  margin-block: -3px;
-}
 .DateInput_icon-wrapper--disabled,
 .DateInput_popover-button:disabled {
   color: var(--dds-color-icon-subtle);
@@ -2342,7 +2347,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .DateInput_popover-button {
   padding: 1px;
-  margin-inline-start: -1px;
+  margin-inline-start: -2px;
 }
 .DateInput_popover {
   z-index: var(--dds-zindex-popover);
@@ -2535,6 +2540,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     border-color: 1px solid var(--dds-color-border-default);
   }
 }
+:where(.Input_input--large) {
+  padding: var(--dds-spacing-x1) var(--dds-spacing-x0-75);
+}
 :where(.Input_input--medium) {
   padding: var(--dds-spacing-x0-75);
 }
@@ -2544,16 +2552,52 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 :where(.Input_input--xsmall) {
   padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
 }
+.Input_input-with-icon--large {
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-lg-icon-text-gap));
+}
+.Input_input-with-icon--medium {
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-md-icon-text-gap));
+}
+.Input_input-with-icon--small {
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-sm-icon-text-gap));
+}
+.Input_input-with-icon--xsmall {
+  padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap));
+}
+.Input_input-with-el-right--large {
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+}
+.Input_input-with-el-right--medium {
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+}
+.Input_input-with-el-right--small {
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+}
+.Input_input-with-el-right--xsmall {
+  padding-inline-end: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap));
+}
 :where(.Input_input--with-affix) {
   gap: var(--dds-spacing-x1);
 }
-:where(.Input_input-group__absolute-element) {
+:where(.Input_input-group__absolute-el) {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: var(--dds-zindex-absolute-element);
   color: var(--dds-color-icon-default);
 }
+:where(.Input_input-group__absolute-el--large) {
+  left: var(--dds-spacing-x0-75);
+}
+:where(.Input_input-group__absolute-el--medium) {
+  left: var(--dds-spacing-x0-75);
+}
+:where(.Input_input-group__absolute-el--small) {
+  left: var(--dds-spacing-x0-75);
+}
+:where(.Input_input-group__absolute-el--xsmall) {
+  left: var(--dds-spacing-x0-5);
+}
 
 /* src/components/DescriptionList/DescriptionList.module.css */
 .DescriptionList_list {
@@ -3659,9 +3703,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     -webkit-appearance: none;
   }
 }
-.Search_search-icon {
-  left: var(--dds-spacing-x0-75);
-}
 .Search_clear-button {
   right: var(--dds-spacing-x1);
 }
@@ -3930,11 +3971,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .Tabs_tab--medium--row {
   padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-5);
-  gap: var(--dds-spacing-x0-5);
+  gap: var(--dds-spacing-md-icon-text-gap);
 }
 .Tabs_tab--small--row {
   padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
-  gap: var(--dds-spacing-x0-125);
+  gap: var(--dds-spacing-sm-icon-text-gap);
 }
 .Tabs_tab--medium--column {
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
@@ -4043,17 +4084,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .TextInput_container--disabled {
   color: var(--dds-color-text-subtle);
 }
-.TextInput_input {
-  &.TextInput_with-icon--medium {
-    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-medium) + var(--dds-spacing-x0-5));
-  }
-  &.TextInput_with-icon--xsmall {
-    padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-x0-25));
-  }
-}
 .TextInput_input--extended {
   width: 100%;
 }
@@ -4293,7 +4323,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .ToggleBar_content--large--with-text {
   padding: var(--dds-spacing-x1) var(--dds-spacing-x2);
-  gap: var(--dds-spacing-x0-5);
+  gap: var(--dds-spacing-lg-icon-text-gap);
 }
 .ToggleBar_content--medium--just-icon {
   padding: var(--dds-spacing-x0-75);
@@ -4303,7 +4333,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .ToggleBar_content--medium--with-text {
   padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1-5);
-  gap: var(--dds-spacing-x0-75);
+  gap: var(--dds-spacing-md-icon-text-gap);
 }
 .ToggleBar_content--small--just-icon {
   padding: var(--dds-spacing-x0-5);
@@ -4313,7 +4343,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .ToggleBar_content--small--with-text {
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
-  gap: var(--dds-spacing-x0-5);
+  gap: var(--dds-spacing-sm-icon-text-gap);
 }
 .ToggleBar_content--xsmall--just-icon {
   padding: var(--dds-spacing-x0-25);
@@ -4323,7 +4353,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .ToggleBar_content--xsmall--with-text {
   padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
-  gap: var(--dds-spacing-x0-5);
+  gap: var(--dds-spacing-xs-icon-text-gap);
 }
 .ToggleBar_label {
   &:hover .ToggleBar_content {
@@ -4377,11 +4407,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .ToggleButton_small {
-  gap: var(--dds-spacing-x0-25);
+  gap: var(--dds-spacing-sm-icon-text-gap);
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
 }
 .ToggleButton_xsmall {
-  gap: var(--dds-spacing-x0-125);
+  gap: var(--dds-spacing-xs-icon-text-gap);
   padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
 }
 .ToggleButton_content--with-icon {