@norges-domstoler/dds-components 22.4.1 → 22.5.0

package/dist/index.css

@@ -654,6 +654,39 @@
   transform: translateX(-50%);
 }
 
+/* src/components/helpers/AccordionBase/AccordionBase.module.css */
+:where(.AccordionBase_header-button) {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  user-select: text;
+  position: relative;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  border-radius: inherit;
+}
+.AccordionBase_header__content {
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+.AccordionBase_body {
+  overflow: hidden;
+}
+.AccordionBase_body--animated {
+  @media (prefers-reduced-motion: no-preference) {
+    transition: height var(--dds-motion-surface);
+  }
+}
+.AccordionBase_body--hidden {
+  display: none;
+}
+
+/* src/utils/RequiredMarker/RequiredMarker.module.css */
+.RequiredMarker_wrapper {
+  color: var(--dds-color-text-requiredfield);
+}
+
 /* src/components/helpers/Backdrop/Backdrop.module.css */
 .Backdrop_backdrop {
   position: fixed;
@@ -683,11 +716,6 @@
   opacity: 0;
 }
 
-/* src/utils/RequiredMarker/RequiredMarker.module.css */
-.RequiredMarker_wrapper {
-  color: var(--dds-color-text-requiredfield);
-}
-
 /* src/components/helpers/Dropdown/DropdownItem.module.css */
 .DropdownItem_item {
   box-sizing: border-box;
@@ -1791,34 +1819,6 @@
   margin-inline-end: var(--dds-spacing-x0-5);
 }
 
-/* src/components/helpers/AccordionBase/AccordionBase.module.css */
-:where(.AccordionBase_header-button) {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-  position: relative;
-  cursor: pointer;
-  display: block;
-  width: 100%;
-  border-radius: inherit;
-}
-.AccordionBase_header__content {
-  text-align: left;
-  display: flex;
-  align-items: center;
-}
-.AccordionBase_body {
-  overflow: hidden;
-}
-.AccordionBase_body--animated {
-  @media (prefers-reduced-motion: no-preference) {
-    transition: height var(--dds-motion-surface);
-  }
-}
-.AccordionBase_body--hidden {
-  display: none;
-}
-
 /* src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css */
 .TextOverflowEllipsis_wrapper {
   max-width: 100%;
@@ -2030,6 +2030,7 @@
 
 /* src/components/Toggle/Toggle.module.css */
 :where(.Toggle_label) {
+  cursor: pointer;
   display: flex;
   align-items: center;
   width: -moz-fit-content;
@@ -2069,10 +2070,38 @@
 }
 .Toggle_thumb .Toggle_checkmark {
   opacity: 0;
+  color: var(--dds-color-icon-action-resting);
   @media (prefers-reduced-motion: no-preference) {
     transition: opacity var(--dds-motion-micro-state);
   }
 }
+.Toggle_thumb .Toggle_unchecked-icon {
+  opacity: 1;
+  position: absolute;
+  color: var(--dds-color-icon-medium);
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity var(--dds-motion-micro-state);
+  }
+}
+.Toggle_thumb .Toggle_checked-icon {
+  opacity: 0;
+  position: absolute;
+  color: var(--dds-color-icon-medium);
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity var(--dds-motion-micro-state);
+  }
+}
+.Toggle_label input:checked ~ .Toggle_track > .Toggle_thumb {
+  .Toggle_checkmark {
+    opacity: 1;
+  }
+  .Toggle_checked-icon {
+    opacity: 1;
+  }
+  .Toggle_unchecked-icon {
+    opacity: 0;
+  }
+}
 .Toggle_labeltext--readonly {
   display: flex;
   .Toggle_icon--read-only {
@@ -2126,23 +2155,18 @@
     border-color: var(--dds-color-border-action-default);
     & > .Toggle_thumb {
       border-color: var(--dds-color-border-action-default);
-      .Toggle_checkmark {
-        color: var(--dds-color-icon-action-resting);
-        opacity: 1;
-      }
     }
   }
 }
-.Toggle_label {
-  cursor: pointer;
-  &:hover input:enabled:checked:not([aria-readonly=true]) ~ .Toggle_track {
+.Toggle_label:hover {
+  input:enabled:checked:not([aria-readonly=true]) ~ .Toggle_track {
     background-color: var(--dds-color-surface-action-hover);
     border-color: var(--dds-color-border-action-hover);
     .Toggle_thumb {
       border-color: var(--dds-color-border-action-hover);
     }
   }
-  &:hover input:enabled:not([aria-readonly=true]) ~ .Toggle_track {
+  input:enabled:not([aria-readonly=true]) ~ .Toggle_track {
     background-color: var(--dds-color-surface-hover-default);
     border-color: var(--dds-color-border-action-hover);
     .Toggle_thumb {
@@ -2153,6 +2177,17 @@
     }
   }
 }
+.Toggle_label--color-scheme,
+.Toggle_label--color-scheme:hover {
+  input:enabled:not([aria-readonly=true]) ~ .Toggle_track,
+  input:checked:enabled:not([aria-readonly=true]) ~ .Toggle_track {
+    background-color: var(--dds-color-surface-medium);
+    border-color: var(--dds-color-border-default);
+    .Toggle_thumb {
+      border-color: var(--dds-color-border-default);
+    }
+  }
+}
 .Toggle_label--disabled {
   cursor: not-allowed;
   color: var(--dds-color-text-subtle);
@@ -2167,7 +2202,12 @@
     border-color: var(--dds-color-surface-action-selected-disabled);
     .Toggle_checkmark {
       color: var(--dds-color-icon-subtle);
-      opacity: 1;
+    }
+    .Toggle_checked-icon {
+      color: var(--dds-color-icon-subtle);
+    }
+    .Toggle_unchecked-icon {
+      color: var(--dds-color-icon-subtle);
     }
   }
 }
@@ -2185,7 +2225,6 @@
     border-color: var(--dds-color-surface-inverse-default);
     .Toggle_checkmark {
       color: var(--dds-color-icon-medium);
-      opacity: 1;
     }
   }
 }
@@ -4010,6 +4049,16 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     z-index: var(--dds-zindex-sticky);
   }
 }
+.Table_table--with-stripes {
+  .Table_row--body {
+    &:nth-of-type(even) {
+      background-color: var(--dds-color-surface-subtle);
+    }
+    &:nth-of-type(odd) {
+      background-color: var(--dds-color-surface-default);
+    }
+  }
+}
 .Table_table--small {
   td,
   th {
@@ -4020,6 +4069,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     letter-spacing: var(--dds-font-heading-xsmall-letter-spacing);
     background-color: var(--dds-color-surface-default);
   }
+}
+.Table_table--with-stripes.Table_table--small {
   .Table_row--body {
     &:nth-of-type(odd) {
       background-color: var(--dds-color-surface-subtle);
@@ -4056,12 +4107,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Table_row--body {
-  &:nth-of-type(even) {
-    background-color: var(--dds-color-surface-subtle);
-  }
-  &:nth-of-type(odd) {
-    background-color: var(--dds-color-surface-default);
-  }
+  background-color: var(--dds-color-surface-default);
   &.Table_row--sum,
   &.Table_row--sum:nth-of-type(even),
   &.Table_row--sum:nth-of-type(odd) {