@norges-domstoler/dds-components 21.3.0 → 21.4.0

package/dist/index.css

@@ -144,9 +144,20 @@
   --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-inverse );
   --dds-color-text-label: var(--dds-color-text-on-inverse);
   --dds-color-text-helper: var(--dds-color-text-on-inverse);
-  --dds-color-text-placeholder: var(--dds-color-text-subtle);
+  --dds-color-text-placeholder: var(--dds-color-text-on-inverse);
   --dds-color-icon-link: var(--dds-color-text-on-inverse);
+  --dds-color-text-default-inversable: var(--dds-color-text-on-inverse);
+  --dds-color-text-subtle-inversable: var(--dds-color-text-on-inverse);
+  --dds-color-text-medium-inversable: var(--dds-color-text-on-inverse);
+  --dds-color-text-action-resting-inversable: var(--dds-color-text-on-inverse);
+  --dds-color-text-action-hover-inversable: var(--dds-color-text-on-inverse);
+  --dds-color-text-requiredfield-inversable: var(--dds-color-text-on-inverse);
   color: var(--dds-color-text-on-inverse);
+  --dds-color-icon-default-inversable: var(--dds-color-text-on-inverse);
+  --dds-color-icon-subtle-inversable: var(--dds-color-text-on-inverse);
+  --dds-color-icon-medium-inversable: var(--dds-color-text-on-inverse);
+  --dds-color-icon-action-resting-inversable: var(--dds-color-icon-on-inverse);
+  --dds-color-icon-action-hover-inversable: var(--dds-color-icon-on-inverse);
 }
 :where(.typographyStyles_a) {
   font: inherit;
@@ -181,7 +192,7 @@
   }
 }
 .typographyStyles_a--visited:visited {
-  color: var(--dds-color-text-action-visited);
+  color: var(--dds-color-text-link-visited);
 }
 :where(.typographyStyles_body-xsmall) {
   margin: 0;
@@ -349,17 +360,89 @@
   text-decoration: underline;
 }
 .typographyStyles_text-color--default {
-  color: var(--dds-color-text-default);
+  color: var(--dds-color-text-default-inversable);
 }
 .typographyStyles_text-color--medium {
-  color: var(--dds-color-text-medium);
+  color: var(--dds-color-text-medium-inversable);
 }
 .typographyStyles_text-color--subtle {
-  color: var(--dds-color-text-subtle);
+  color: var(--dds-color-text-subtle-inversable);
+}
+.typographyStyles_text-color--requiredfield {
+  color: var(--dds-color-text-requiredfield-inversable);
+}
+.typographyStyles_text-color--action-resting {
+  color: var(--dds-color-text-action-resting-inversable);
+}
+.typographyStyles_text-color--action-hover:hover {
+  color: var(--dds-color-text-action-hover-inversable);
+}
+.typographyStyles_text-color--action-visited:visited {
+  color: var(--dds-color-text-link-visited);
+}
+.typographyStyles_text-color--on-action {
+  color: var(--dds-color-text-on-action);
+}
+.typographyStyles_text-color--on-status-default {
+  color: var(--dds-color-text-on-status-default);
+}
+.typographyStyles_text-color--on-status-strong {
+  color: var(--dds-color-text-on-status-strong);
+}
+.typographyStyles_text-color--on-notification {
+  color: var(--dds-color-text-on-notification);
 }
 .typographyStyles_text-color--on-inverse {
   color: var(--dds-color-text-on-inverse);
 }
+.typographyStyles_icon-color--default {
+  color: var(--dds-color-icon-default-inversable);
+}
+.typographyStyles_icon-color--medium {
+  color: var(--dds-color-icon-medium-inversable);
+}
+.typographyStyles_icon-color--subtle {
+  color: var(--dds-color-icon-subtle-inversable);
+}
+.typographyStyles_icon-color--on-action {
+  color: var(--dds-color-icon-on-action);
+}
+.typographyStyles_icon-color--action-resting {
+  color: var(--dds-color-icon-action-resting-inversable);
+}
+.typographyStyles_icon-color--action-hover:hover {
+  color: var(--dds-color-icon-action-hover-inversable);
+}
+.typographyStyles_icon-color--on-action {
+  color: var(--dds-color-icon-on-action);
+}
+.typographyStyles_icon-color--on-info-default {
+  color: var(--dds-color-icon-on-info-default);
+}
+.typographyStyles_icon-color--on-info-strong {
+  color: var(--dds-color-icon-on-info-strong);
+}
+.typographyStyles_icon-color--on-success-default {
+  color: var(--dds-color-icon-on-success-default);
+}
+.typographyStyles_icon-color--on-success-strong {
+  color: var(--dds-color-icon-on-success-strong);
+}
+.typographyStyles_icon-color--on-danger-default {
+  color: var(--dds-color-icon-on-danger-default);
+}
+.typographyStyles_icon-color--on-danger-strong {
+  color: var(--dds-color-icon-on-danger-strong);
+}
+.typographyStyles_icon-color--on-warning-default {
+  color: var(--dds-color-icon-on-warning-default);
+}
+.typographyStyles_icon-color--on-warning-strong {
+  color: var(--dds-color-icon-on-warning-strong);
+}
+.typographyStyles_icon-color--on-inverse {
+  color: var(--dds-color-icon-on-inverse);
+}
 
 /* src/components/helpers/styling/utilStyles.module.css */
 :where(.utilStyles_remove-list-styling) {
@@ -1947,13 +2030,10 @@
   background-color: var(--dds-color-surface-default);
   border-color: var(--dds-color-border-subtle);
 }
-.Card_container--navigation,
-.Card_container--selection-control:not(.Card_container--selection-control--disabled):not(.Card_container--selection-control--readonly) {
-  display: block;
-  &:hover {
-    border-color: var(--dds-color-border-action-hover);
-    box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
-  }
+.Card_container--navigation:hover,
+.Card_container--selection-control:has(input:enabled:not([aria-readonly=true])):hover {
+  border-color: var(--dds-color-border-action-hover);
+  box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
 }
 .Card_container--selection-control {
   padding: var(--dds-selection-control-card-padding);
@@ -1963,26 +2043,29 @@
   & > span {
     left: var(--dds-selection-control-card-control-left);
     top: var(--dds-selection-control-card-control-top);
-    &:focus-visible {
-      outline: none;
+  }
+  input:disabled,
+  input[aria-readonly=true] {
+    & ~ span {
+      background-color: var(--dds-color-surface-field-disabled);
     }
   }
   &:has(input:checked) {
     border-color: var(--dds-color-surface-action-selected);
     box-shadow: inset 0 0 0 1px var(--dds-color-surface-action-selected);
+    background-color: var(--dds-color-surface-selected-default);
+  }
+  &:has(input[aria-invalid]) {
+    border-color: var(--dds-color-border-danger);
+    box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
+  }
+  &:has(input:disabled),
+  &:has(input[aria-readonly=true]) {
+    box-shadow: none;
+    background-color: var(--dds-color-surface-selected-default);
+    background-color: var(--dds-color-surface-field-disabled);
+    border-color: var(--dds-color-surface-field-disabled);
   }
-}
-.Card_container--selection-control--error {
-  border-color: var(--dds-color-border-danger);
-  box-shadow: 0 0 0 1px var(--dds-color-border-danger);
-}
-.Card_container--selection-control--disabled {
-  background-color: var(--dds-color-surface-field-disabled);
-  border-color: var(--dds-color-surface-field-disabled);
-}
-.Card_container--selection-control--readonly {
-  background-color: var(--dds-color-surface-field-disabled);
-  border-color: var(--dds-color-surface-field-disabled);
 }
 .Card_container--navigation {
   text-decoration: none;
@@ -2046,40 +2129,46 @@
   -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);
-    }
+  &:not(:hover) input[aria-invalid]:enabled:not([aria-readonly=true]):not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
+    background-color: var(--dds-color-surface-danger-default);
+  }
+}
+.SelectionControl_label:has(input:enabled) {
+  input[aria-invalid]:not([aria-readonly=true]):not(:focus-visible) ~ .SelectionControl_selection-control {
+    border-color: var(--dds-color-border-danger);
+    box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
   }
-  &:hover:not(.SelectionControl_label--readonly) input:enabled:not(:checked) ~ .SelectionControl_selection-control {
+  &:hover input:not(:checked):not([aria-readonly=true]) ~ .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 {
+  input:checked ~ .SelectionControl_selection-control,
+  input[data-indeterminate] ~ .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 {
+  input:checked[aria-readonly=true] ~ .SelectionControl_selection-control,
+  input[data-indeterminate][aria-readonly=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;
+  &:hover {
+    input:enabled:not([aria-readonly=true]) {
+      &:checked[type=checkbox],
+      &[data-indeterminate] {
+        ~ .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] ~ .SelectionControl_selection-control:after {
+  display: block;
+}
 .SelectionControl_label--checkbox {
   .SelectionControl_selection-control:after {
     border: solid var(--dds-color-icon-on-action);
@@ -2090,7 +2179,7 @@
     height: 10px;
     transform: rotate(45deg);
   }
-  input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
+  input[data-indeterminate] ~ .SelectionControl_selection-control:after {
     border-width: 1px 0 0 0;
     left: 25%;
     top: 50%;
@@ -2110,40 +2199,28 @@
     transform: translate(-50%, -50%);
   }
 }
-.SelectionControl_label--disabled {
+.SelectionControl_label:has(input:disabled) {
   cursor: not-allowed;
-  input:disabled ~ .SelectionControl_selection-control {
-    border-color: var(--dds-color-border-subtle);
-  }
-  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);
+    border-color: var(--dds-color-border-subtle);
   }
   input:checked ~ .SelectionControl_selection-control,
-  input[data-indeterminate=true] ~ .SelectionControl_selection-control {
+  input[data-indeterminate] ~ .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:has(input[aria-readonly=true]) {
+    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] ~ .SelectionControl_selection-control {
+      border-color: var(--dds-color-surface-action-selected-disabled);
+      background-color: var(--dds-color-surface-action-selected-disabled);
+    }
   }
 }
 .SelectionControl_label--no-text {
@@ -2157,14 +2234,22 @@
   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;
+  height: var(--dds-selection-control-height);
+  width: var(--dds-selection-control-height);
   &:after {
     content: "";
     position: absolute;
     display: none;
     box-sizing: border-box;
   }
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      box-shadow 0.2s,
+      background-color 0.2s,
+      border 0.2s,
+      border-color 0.2s,
+      var(--dds-focus-transition);
+  }
 }
 .SelectionControl_selection-control--radio {
   border-radius: var(--dds-border-radius-rounded);
@@ -2388,6 +2473,17 @@
   --dds-color-text-placeholder: var(--dds-color-text-subtle);
   --dds-color-text-helper: var(--dds-color-text-subtle);
   --dds-color-icon-link: var(--dds-color-text-action-resting);
+  --dds-color-text-subtle-inversable: var(--dds-color-text-subtle);
+  --dds-color-text-default-inversable: var(--dds-color-text-default);
+  --dds-color-text-medium-inversable: var(--dds-color-text-medium);
+  --dds-color-text-action-resting-inversable: var( --dds-color-text-action-resting );
+  --dds-color-text-action-hover-inversable: var(--dds-color-text-action-hover);
+  --dds-color-text-requiredfield-inversable: var( --dds-color-text-requiredfield );
+  --dds-color-icon-subtle-inversable: var(--dds-color-icon-subtle);
+  --dds-color-icon-default-inversable: var(--dds-color-icon-default);
+  --dds-color-icon-medium-inversable: var(--dds-color-icon-medium);
+  --dds-color-icon-action-resting-inversable: var( --dds-color-icon-action-resting );
+  --dds-color-icon-action-hover-inversable: var(--dds-color-icon-action-hover);
   --dds-focus-outline: var(--dds-color-focus-outside) 2px solid;
   --dds-focus-outline-offset: var(--dds-spacing-x0-125);
   --dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
@@ -3546,7 +3642,7 @@ select:hover {
 }
 .SplitButton_option--primary,
 .SplitButton_option--primary:hover {
-  border-left: 1px solid var(--dds-color-border-on-action);
+  border-left: 1px solid var(--dds-color-border-on-action) !important;
 }
 
 /* src/components/Table/normal/Table.module.css */
@@ -3975,10 +4071,10 @@ select:hover {
   input:checked ~ .Toggle_track > .Toggle_thumb {
     transform: translateX(1.25rem);
   }
-  input:checked:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
+  input:checked:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
     transform: translateX(var(--dds-spacing-x1));
   }
-  input:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
+  input:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
     width: 1.5rem;
   }
 }
@@ -3995,16 +4091,16 @@ select:hover {
   input:checked ~ .Toggle_track > .Toggle_thumb {
     transform: translateX(var(--dds-spacing-x1));
   }
-  input:checked:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
+  input:checked:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
     transform: translateX(var(--dds-spacing-x0-75));
   }
-  input:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
+  input:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
     width: var(--dds-spacing-x2);
   }
 }
 .Toggle_label,
 .Toggle_label--is-loading {
-  input:checked:enabled:not([aria-readonly]) ~ .Toggle_track {
+  input:checked:enabled:not([aria-readonly=true]) ~ .Toggle_track {
     background-color: var(--dds-color-surface-action-selected);
     border-color: var(--dds-color-border-action-default);
     & > .Toggle_thumb {
@@ -4018,14 +4114,14 @@ select:hover {
 }
 .Toggle_label {
   cursor: pointer;
-  &:hover input:enabled:checked:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track {
+  &:hover input:enabled:checked:not([aria-disabled]):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-disabled]):not([aria-readonly]) ~ .Toggle_track {
+  &:hover input:enabled:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track {
     background-color: var(--dds-color-surface-hover-default);
     border-color: var(--dds-color-border-action-hover);
     .Toggle_thumb {