@norges-domstoler/dds-components 21.3.0 → 21.3.1

package/dist/index.css

@@ -1947,13 +1947,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])):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 +1960,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] {
+    & ~ 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]) {
+    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 +2046,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]):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]):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]) ~ .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] ~ .SelectionControl_selection-control,
+  input[data-indeterminate][aria-readonly] ~ .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]) {
+      &: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 +2096,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 +2116,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]) {
+    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 +2151,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);
@@ -3546,7 +3548,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 */