@norges-domstoler/dds-components 21.2.2 → 21.3.1

package/dist/index.css

@@ -1933,7 +1933,10 @@
   border: 1px solid;
   border-radius: var(--dds-border-radius-surface);
   @media (prefers-reduced-motion: no-preference) {
-    transition: box-shadow 0.2s, border-color 0.2s;
+    transition:
+      box-shadow 0.2s,
+      border-color 0.2s,
+      var(--dds-focus-transition);
   }
 }
 .Card_container--filled {
@@ -1944,14 +1947,46 @@
   background-color: var(--dds-color-surface-default);
   border-color: var(--dds-color-border-subtle);
 }
-.Card_container--navigation {
-  text-decoration: none;
+.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);
   display: block;
-  &:hover {
-    border-color: var(--dds-color-border-action-hover);
-    box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
+  width: 100%;
+  height: 100%;
+  & > span {
+    left: var(--dds-selection-control-card-control-left);
+    top: var(--dds-selection-control-card-control-top);
+  }
+  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--navigation {
+  text-decoration: none;
+}
 .Card_container--expandable {
   width: 100%;
   box-sizing: border-box;
@@ -1989,23 +2024,6 @@
   padding: var(--dds-card-accordion-body-content-padding);
 }
 
-/* src/components/Chip/Chip.module.css */
-.Chip_container {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  gap: var(--dds-spacing-x0-25);
-  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
-  border: 1px solid var(--dds-color-border-subtle);
-  border-radius: var(--dds-border-radius-chip);
-  background-color: var(--dds-color-surface-subtle);
-}
-
-/* src/components/Contrast/Contrast.module.css */
-:where(.Contrast_container) {
-  background-color: var(--dds-color-surface-inverse-default);
-}
-
 /* src/components/SelectionControl/SelectionControl.module.css */
 .SelectionControl_container {
   display: flex;
@@ -2028,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);
@@ -2072,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%;
@@ -2092,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-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);
+    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 {
@@ -2139,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);
@@ -2174,9 +2194,26 @@
   margin-top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
 }
 
+/* src/components/Chip/Chip.module.css */
+.Chip_container {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  gap: var(--dds-spacing-x0-25);
+  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
+  border: 1px solid var(--dds-color-border-subtle);
+  border-radius: var(--dds-border-radius-chip);
+  background-color: var(--dds-color-surface-subtle);
+}
+
+/* src/components/Contrast/Contrast.module.css */
+:where(.Contrast_container) {
+  background-color: var(--dds-color-surface-inverse-default);
+}
+
 /* src/components/CookieBanner/CookieBanner.module.css */
 .CookieBanner_checkbox-label {
-  padding: 0 0 0 calc(18px + var(--dds-spacing-x0-5));
+  padding: 0 0 0 calc(var(--dds-selection-control-height) + 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);
@@ -2360,6 +2397,7 @@
   --dds-focus-transition: outline-offset 0.2s;
   --dds-input-default-width: 320px;
   --dds-input-default-width-xsmall: 210px;
+  --dds-selection-control-height: 18px;
   --dds-transition-duration-surface-move: 0.5s;
 }
 .ThemeProvider_global-styles {
@@ -3510,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 */