@norges-domstoler/dds-components 0.0.0-dev-20250423104601 → 0.0.0-dev-20250425135658

package/dist/index.css

@@ -992,7 +992,7 @@
     --dds-r-t: var(--dds-r-sm-t);
   }
   .layout_dds-b {
-    --dds-r-t: var(--dds-r-sm-t);
+    --dds-r-b: var(--dds-r-sm-b);
   }
   .layout_dds-o {
     --dds-r-o: var(--dds-r-sm-o);
@@ -1093,7 +1093,7 @@
     --dds-r-t: var(--dds-r-md-t);
   }
   .layout_dds-b {
-    --dds-r-t: var(--dds-r-md-t);
+    --dds-r-b: var(--dds-r-md-b);
   }
   .layout_dds-o {
     --dds-r-o: var(--dds-r-md-o);
@@ -1194,7 +1194,7 @@
     --dds-r-t: var(--dds-r-lg-t);
   }
   .layout_dds-b {
-    --dds-r-t: var(--dds-r-lg-t);
+    --dds-r-b: var(--dds-r-lg-b);
   }
   .layout_dds-o {
     --dds-r-o: var(--dds-r-lg-o);
@@ -2008,6 +2008,183 @@
   background-color: var(--dds-color-surface-inverse-default);
 }
 
+/* src/components/SelectionControl/SelectionControl.module.css */
+.SelectionControl_container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dds-spacing-x0-125);
+}
+.SelectionControl_group {
+  display: flex;
+}
+.SelectionControl_group--row {
+  flex-direction: row;
+  gap: var(--dds-spacing-x0-75);
+}
+.SelectionControl_group--column {
+  flex-direction: column;
+  gap: var(--dds-spacing-x0-5);
+}
+.SelectionControl_label {
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  input ~ .SelectionControl_selection-control {
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        box-shadow 0.2s,
+        background-color 0.2s,
+        border 0.2s,
+        var(--dds-focus-transition);
+    }
+  }
+  &:hover:not(.SelectionControl_label--readonly) input:enabled:not(:checked) ~ .SelectionControl_selection-control {
+    background-color: var(--dds-color-surface-hover-default);
+    box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
+    border-color: var(--dds-color-border-action-hover);
+  }
+  input:checked:enabled ~ .SelectionControl_selection-control,
+  input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
+    border-color: var(--dds-color-surface-action-selected);
+    background-color: var(--dds-color-surface-action-selected);
+  }
+  &.SelectionControl_label--readonly input:checked:enabled ~ .SelectionControl_selection-control,
+  &.SelectionControl_label--readonly input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
+    border-color: var(--dds-color-surface-action-selected-disabled);
+    background-color: var(--dds-color-surface-action-selected-disabled);
+  }
+  &:hover:not(.SelectionControl_label--readonly) input:checked:enabled[type=checkbox] ~ .SelectionControl_selection-control,
+  &:hover:not(.SelectionControl_label--readonly) input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
+    background-color: var(--dds-color-surface-action-hover);
+    border-color: var(--dds-color-surface-action-hover);
+  }
+  input:checked ~ .SelectionControl_selection-control:after,
+  input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
+    display: block;
+  }
+}
+.SelectionControl_label--checkbox {
+  .SelectionControl_selection-control:after {
+    border: solid var(--dds-color-icon-on-action);
+    border-width: 0 1px 1px 0;
+    left: 6px;
+    top: 1px;
+    width: 5px;
+    height: 10px;
+    transform: rotate(45deg);
+  }
+  input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
+    border-width: 1px 0 0 0;
+    left: 25%;
+    top: 50%;
+    width: 50%;
+    height: 1px;
+    transform: none;
+  }
+}
+.SelectionControl_label--radio {
+  .SelectionControl_selection-control:after {
+    border-radius: var(--dds-border-radius-rounded);
+    background-color: var(--dds-color-icon-on-action);
+    height: 8px;
+    width: 8px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.SelectionControl_label--disabled {
+  cursor: not-allowed;
+  input:disabled ~ .SelectionControl_selection-control {
+    border-color: var(--dds-color-border-default);
+  }
+  input:checked:disabled ~ .SelectionControl_selection-control,
+  input:disabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
+    border-color: var(--dds-color-surface-action-selected-disabled);
+    background-color: var(--dds-color-surface-action-selected-disabled);
+  }
+}
+.SelectionControl_label--readonly {
+  cursor: default;
+  color: var(--dds-color-text-medium);
+  input ~ .SelectionControl_selection-control {
+    border-color: var(--dds-color-border-default);
+    background-color: var(--dds-color-surface-field-disabled);
+  }
+  input:checked ~ .SelectionControl_selection-control,
+  input[data-indeterminate=true] ~ .SelectionControl_selection-control {
+    border-color: var(--dds-color-surface-action-selected-disabled);
+    background-color: var(--dds-color-surface-action-selected-disabled);
+  }
+}
+.SelectionControl_label--error {
+  &:hover input:enabled:not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
+    background-color: var(--dds-color-surface-danger-default);
+    border-color: var(--dds-color-border-danger);
+    box-shadow: 0 0 0 1px var(--dds-c-tic-border-danger);
+  }
+  input:not(:focus-visible) ~ .SelectionControl_selection-control,
+  input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control &:hover input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control {
+    border-color: var(--dds-color-border-danger);
+    box-shadow: 0 0 0 1px var(--dds-color-border-danger);
+  }
+}
+.SelectionControl_label--no-text {
+  padding: 9px;
+}
+.SelectionControl_selection-control {
+  position: absolute;
+  left: 0;
+  box-sizing: border-box;
+  border: 1px solid;
+  border-color: var(--dds-color-border-default);
+  background-color: var(--dds-color-surface-field-default);
+  border-radius: var(--dds-border-radius-input);
+  height: 18px;
+  width: 18px;
+  &:after {
+    content: "";
+    position: absolute;
+    display: none;
+    box-sizing: border-box;
+  }
+}
+.SelectionControl_selection-control--radio {
+  border-radius: var(--dds-border-radius-rounded);
+}
+
+/* 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);
+}
+
+/* src/components/CookieBanner/CookieBanner.module.css */
+.CookieBanner_checkbox-label {
+  padding: 0 0 0 calc(18px + var(--dds-spacing-x0-5));
+  align-items: flex-start;
+  & > span {
+    top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
+  }
+}
+
 /* src/components/date-inputs/common/DateInput.module.css */
 .DateInput_date-input {
   display: inline-flex;
@@ -2199,28 +2376,6 @@
   color: var(--dds-color-text-default);
 }
 
-/* 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);
-}
-
 /* src/components/DescriptionList/DescriptionList.module.css */
 .DescriptionList_list {
   & > dt:first-of-type {
@@ -2279,10 +2434,12 @@
 }
 .DetailList_list--striped {
   .DetailList_row {
-    &:nth-of-type(even) {
+    &:nth-of-type(4n-1),
+    &:nth-of-type(4n) {
       background-color: var(--dds-color-surface-default);
     }
-    &:nth-of-type(odd) {
+    &:nth-of-type(4n-3),
+    &:nth-of-type(4n-2) {
       background-color: var(--dds-color-surface-subtle);
     }
   }
@@ -2309,8 +2466,12 @@
     padding-inline: var(--dds-spacing-x0-75);
   }
 }
-.DetailList_row {
-  display: table-row;
+.DetailList_column {
+  dt,
+  dd {
+    margin-inline-start: 0;
+    text-align: left;
+  }
 }
 .DetailList_cell {
   display: table-cell;
@@ -3323,158 +3484,6 @@ select:hover {
   padding-left: var(--dds-spacing-x1);
 }
 
-/* src/components/SelectionControl/SelectionControl.module.css */
-.SelectionControl_container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dds-spacing-x0-125);
-}
-.SelectionControl_group {
-  display: flex;
-}
-.SelectionControl_group--row {
-  flex-direction: row;
-  gap: var(--dds-spacing-x0-75);
-}
-.SelectionControl_group--column {
-  flex-direction: column;
-  gap: var(--dds-spacing-x0-5);
-}
-.SelectionControl_label {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  width: -moz-fit-content;
-  width: fit-content;
-  padding-left: calc(18px + var(--dds-spacing-x0-5));
-  input ~ .SelectionControl_selection-control {
-    @media (prefers-reduced-motion: no-preference) {
-      transition:
-        box-shadow 0.2s,
-        background-color 0.2s,
-        border 0.2s,
-        var(--dds-focus-transition);
-    }
-  }
-  &:hover:not(.SelectionControl_label--readonly) input:enabled:not(:checked) ~ .SelectionControl_selection-control {
-    background-color: var(--dds-color-surface-hover-default);
-    box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
-    border-color: var(--dds-color-border-action-hover);
-  }
-  input:checked:enabled ~ .SelectionControl_selection-control,
-  input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
-    border-color: var(--dds-color-surface-action-selected);
-    background-color: var(--dds-color-surface-action-selected);
-  }
-  &.SelectionControl_label--readonly input:checked:enabled ~ .SelectionControl_selection-control,
-  &.SelectionControl_label--readonly input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
-    border-color: var(--dds-color-surface-action-selected-disabled);
-    background-color: var(--dds-color-surface-action-selected-disabled);
-  }
-  &:hover:not(.SelectionControl_label--readonly) input:checked:enabled[type=checkbox] ~ .SelectionControl_selection-control,
-  &:hover:not(.SelectionControl_label--readonly) input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
-    background-color: var(--dds-color-surface-action-hover);
-    border-color: var(--dds-color-surface-action-hover);
-  }
-  input:checked ~ .SelectionControl_selection-control:after,
-  input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
-    display: block;
-  }
-}
-.SelectionControl_label--checkbox {
-  .SelectionControl_selection-control:after {
-    border: solid var(--dds-color-icon-on-action);
-    border-width: 0 1px 1px 0;
-    left: 6px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
-    transform: rotate(45deg);
-  }
-  input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
-    border-width: 1px 0 0 0;
-    left: 25%;
-    top: 50%;
-    width: 50%;
-    height: 1px;
-    transform: none;
-  }
-}
-.SelectionControl_label--radio {
-  .SelectionControl_selection-control:after {
-    border-radius: var(--dds-border-radius-rounded);
-    background-color: var(--dds-color-icon-on-action);
-    height: 8px;
-    width: 8px;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-.SelectionControl_label--disabled {
-  cursor: not-allowed;
-  input:disabled ~ .SelectionControl_selection-control {
-    border-color: var(--dds-color-border-default);
-  }
-  input:checked:disabled ~ .SelectionControl_selection-control,
-  input:disabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
-    border-color: var(--dds-color-surface-action-selected-disabled);
-    background-color: var(--dds-color-surface-action-selected-disabled);
-  }
-}
-.SelectionControl_label--readonly {
-  cursor: default;
-  color: var(--dds-color-text-medium);
-  input ~ .SelectionControl_selection-control {
-    border-color: var(--dds-color-border-default);
-    background-color: var(--dds-color-surface-field-disabled);
-  }
-  input:checked ~ .SelectionControl_selection-control,
-  input[data-indeterminate=true] ~ .SelectionControl_selection-control {
-    border-color: var(--dds-color-surface-action-selected-disabled);
-    background-color: var(--dds-color-surface-action-selected-disabled);
-  }
-}
-.SelectionControl_label--error {
-  &:hover input:enabled:not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
-    background-color: var(--dds-color-surface-danger-default);
-    border-color: var(--dds-color-border-danger);
-    box-shadow: 0 0 0 1px var(--dds-c-tic-border-danger);
-  }
-  input:not(:focus-visible) ~ .SelectionControl_selection-control,
-  input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control &:hover input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control {
-    border-color: var(--dds-color-border-danger);
-    box-shadow: 0 0 0 1px var(--dds-color-border-danger);
-  }
-}
-.SelectionControl_label--no-text {
-  padding: 9px;
-}
-.SelectionControl_selection-control {
-  position: absolute;
-  left: 0;
-  box-sizing: border-box;
-  border: 1px solid;
-  border-color: var(--dds-color-border-default);
-  background-color: var(--dds-color-surface-field-default);
-  border-radius: var(--dds-border-radius-input);
-  height: 18px;
-  width: 18px;
-  &:after {
-    content: "";
-    position: absolute;
-    display: none;
-    box-sizing: border-box;
-  }
-}
-.SelectionControl_selection-control--radio {
-  border-radius: var(--dds-border-radius-rounded);
-}
-
 /* src/components/Skeleton/Skeleton.module.css */
 @keyframes Skeleton_ddsSkeletonAnimation {
   0% {