@norges-domstoler/dds-components 0.0.0-dev-20260313133054 → 0.0.0-dev-20260313135554

package/dist/index.css

@@ -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) {