@norges-domstoler/dds-components 22.1.0 → 22.3.0

package/dist/index.css

@@ -2540,21 +2540,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 
 /* src/components/date-inputs/common/DateInput.module.css */
-.DateInput_date-input {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--dds-spacing-x0-5);
-}
-.DateInput_date-input--medium--clearable {
-  padding-inline-end: var(--dds-spacing-x0-5);
-}
-.DateInput_date-input--small--clearable {
-  padding-inline-end: var(--dds-spacing-x0-5);
-}
-.DateInput_date-input--xsmall--clearable {
-  padding-inline-end: var(--dds-spacing-x0-25);
-}
 .DateInput_date-segment-container {
   display: flex;
   flex-direction: row;
@@ -2587,9 +2572,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   height: 0;
   width: 0;
 }
-.DateInput_clear-button {
-  align-self: center;
-}
 .DateInput_clear-button--inactive {
   visibility: hidden;
 }
@@ -2684,6 +2666,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .Input_input-group {
   position: relative;
+  --dds-input-absolute-el-left-xsmall: var(--dds-spacing-x0-25);
+  --dds-input-absolute-el-left-small: var(--dds-spacing-x0-5);
+  --dds-input-absolute-el-left-medium: var(--dds-spacing-x0-75);
+  --dds-input-absolute-el-left-large: var(--dds-spacing-x0-75);
+  --dds-input-absolute-el-right-xsmall: var(--dds-spacing-x0-25);
+  --dds-input-absolute-el-right-small: var(--dds-spacing-x0-5);
+  --dds-input-absolute-el-right-medium: var(--dds-spacing-x0-75);
+  --dds-input-absolute-el-right-large: var(--dds-spacing-x0-75);
 }
 :where(.Input_input) {
   position: relative;
@@ -2789,40 +2779,40 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   padding: var(--dds-spacing-x0-25);
 }
 .Input_input-with-icon--large {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
+  padding-left: calc(var(--dds-input-absolute-el-left-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
 }
 .Input_input-with-icon--medium {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
+  padding-left: calc(var(--dds-input-absolute-el-left-medium) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
 }
 .Input_input-with-icon--small {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
+  padding-left: calc(var(--dds-input-absolute-el-left-small) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
 }
 .Input_input-with-icon--xsmall {
-  padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
+  padding-left: calc(var(--dds-input-absolute-el-left-xsmall) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
 }
 .Input_input-with-el-right--large {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
 }
 .Input_input-with-el-right--medium {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-medium) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
 }
 .Input_input-with-el-right--small {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-small) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
 }
 .Input_input-with-el-right--xsmall {
-  padding-inline-end: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-xsmall) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
 }
-.Input_el-right--large {
-  right: var(--dds-spacing-x0-75);
+.Input_input-group__absolute-el-right--large {
+  right: var(--dds-input-absolute-el-left-large);
 }
-.Input_el-right--medium {
-  right: var(--dds-spacing-x0-75);
+.Input_input-group__absolute-el-right--medium {
+  right: var(--dds-input-absolute-el-left-medium);
 }
-.Input_el-right--small {
-  right: var(--dds-spacing-x0-5);
+.Input_input-group__absolute-el-right--small {
+  right: var(--dds-input-absolute-el-left-small);
 }
-.Input_el-right--xsmall {
-  right: var(--dds-spacing-x0-25);
+.Input_input-group__absolute-el-right--xsmall {
+  right: var(--dds-input-absolute-el-left-xsmall);
 }
 :where(.Input_input--with-affix) {
   gap: var(--dds-spacing-x1);
@@ -2835,16 +2825,16 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   color: var(--dds-color-icon-default);
 }
 :where(.Input_input-group__absolute-el--large) {
-  left: var(--dds-spacing-x0-75);
+  left: var(--dds-input-absolute-el-left-large);
 }
 :where(.Input_input-group__absolute-el--medium) {
-  left: var(--dds-spacing-x0-75);
+  left: var(--dds-input-absolute-el-left-medium);
 }
 :where(.Input_input-group__absolute-el--small) {
-  left: var(--dds-spacing-x0-5);
+  left: var(--dds-input-absolute-el-left-small);
 }
 :where(.Input_input-group__absolute-el--xsmall) {
-  left: var(--dds-spacing-x0-25);
+  left: var(--dds-input-absolute-el-left-xsmall);
 }
 
 /* src/components/DescriptionList/DescriptionList.module.css */
@@ -3007,6 +2997,70 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   margin-top: calc(-1 * var(--dds-spacing-x0-125));
 }
 
+/* src/components/ErrorSummary/ErrorSummary.module.css */
+.ErrorSummary_container {
+  border: 2px solid var(--dds-color-border-danger);
+}
+
+/* src/components/List/List.module.css */
+.List_list {
+  color: var(--dds-color-text-body);
+  margin: var(--dds-spacing-x1) 0;
+  ul,
+  ol {
+    margin: 0;
+  }
+}
+.List_list--inherit {
+  font: inherit;
+}
+.List_list--unordered {
+  --dds-list-ul-li-padding-left: 1em + var(--dds-spacing-x0-25);
+  list-style: none;
+  padding-left: calc(var(--dds-spacing-x2) - (var(--dds-list-ul-li-padding-left)));
+  --dds-list-bullet-size: 1em;
+  li {
+    position: relative;
+    padding-left: calc(var(--dds-list-ul-li-padding-left));
+    &:before {
+      content: "";
+      display: inline-block;
+      height: var(--dds-list-bullet-size);
+      width: var(--dds-list-bullet-size);
+      position: absolute;
+      top: calc((var(--dds-font-lineheight-list) * 1em) / 2 - var(--dds-list-bullet-size) / 2);
+      left: 0;
+      background: var(--dds-color-text-body);
+      -webkit-mask-size: 100%;
+      mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
+      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
+    }
+    ul > li:before {
+      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
+      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
+    }
+    ul > li > ul > li:before {
+      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
+      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
+    }
+  }
+}
+.List_list--ordered {
+  padding-left: var(--dds-spacing-x2);
+  & > li > ol {
+    list-style-type: lower-alpha;
+  }
+  & > li > ol > li > ol {
+    list-style-type: lower-roman;
+  }
+}
+.List_li {
+  line-height: var(--dds-font-lineheight-list);
+}
+
 /* src/components/FavStar/FavStar.module.css */
 .FavStar_container {
   position: relative;
@@ -3395,65 +3449,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   max-height: calc(100vh - 110px);
 }
 
-/* src/components/List/List.module.css */
-.List_list {
-  color: var(--dds-color-text-body);
-  margin: var(--dds-spacing-x1) 0;
-  ul,
-  ol {
-    margin: 0;
-  }
-}
-.List_list--inherit {
-  font: inherit;
-}
-.List_list--unordered {
-  --dds-list-ul-li-padding-left: 1em + var(--dds-spacing-x0-25);
-  list-style: none;
-  padding-left: calc(var(--dds-spacing-x2) - (var(--dds-list-ul-li-padding-left)));
-  --dds-list-bullet-size: 1em;
-  li {
-    position: relative;
-    padding-left: calc(var(--dds-list-ul-li-padding-left));
-    &:before {
-      content: "";
-      display: inline-block;
-      height: var(--dds-list-bullet-size);
-      width: var(--dds-list-bullet-size);
-      position: absolute;
-      top: calc((var(--dds-font-lineheight-list) * 1em) / 2 - var(--dds-list-bullet-size) / 2);
-      left: 0;
-      background: var(--dds-color-text-body);
-      -webkit-mask-size: 100%;
-      mask-size: 100%;
-      -webkit-mask-repeat: no-repeat;
-      mask-repeat: no-repeat;
-      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
-      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
-    }
-    ul > li:before {
-      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
-      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
-    }
-    ul > li > ul > li:before {
-      -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
-      mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
-    }
-  }
-}
-.List_list--ordered {
-  padding-left: var(--dds-spacing-x2);
-  & > li > ol {
-    list-style-type: lower-alpha;
-  }
-  & > li > ol > li > ol {
-    list-style-type: lower-roman;
-  }
-}
-.List_li {
-  line-height: var(--dds-font-lineheight-list);
-}
-
 /* src/components/LocalMessage/LocalMessage.module.css */
 .LocalMessage_container {
   border: 1px solid;