@norges-domstoler/dds-components 21.2.1 → 21.3.0

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,
+.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--selection-control {
+  padding: var(--dds-selection-control-card-padding);
+  display: block;
+  width: 100%;
+  height: 100%;
+  & > span {
+    left: var(--dds-selection-control-card-control-left);
+    top: var(--dds-selection-control-card-control-top);
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  &:has(input:checked) {
+    border-color: var(--dds-color-surface-action-selected);
+    box-shadow: inset 0 0 0 1px var(--dds-color-surface-action-selected);
+  }
+}
+.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;
+}
 .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;
@@ -2095,7 +2113,7 @@
 .SelectionControl_label--disabled {
   cursor: not-allowed;
   input:disabled ~ .SelectionControl_selection-control {
-    border-color: var(--dds-color-border-default);
+    border-color: var(--dds-color-border-subtle);
   }
   input:checked:disabled ~ .SelectionControl_selection-control,
   input:disabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
@@ -2174,9 +2192,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);
@@ -2258,7 +2293,6 @@
   transition: 0.2s;
   background: transparent;
   border-radius: var(--dds-border-radius-button);
-  color: var(--dds-color-icon-default);
   &:not(:disabled):not(.DateInput_disabled):hover,
   &:not(:disabled):not(.DateInput_disabled):active {
     background-color: var(--dds-color-surface-hover-default);
@@ -2284,13 +2318,8 @@
 .DateInput_calendar {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  height: 327px;
-}
-.DateInput_calendar__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  gap: var(--dds-spacing-x0-25);
+  height: 337px;
 }
 .DateInput_calendar__header__month {
   text-transform: capitalize;
@@ -2300,16 +2329,16 @@
   -moz-user-select: none;
   user-select: none;
 }
-.DateInput_calendar__week-number {
+.DateInput_calendar__grid-element {
   width: 40px;
   height: 40px;
+}
+.DateInput_calendar__week-number {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .DateInput_calendar__cell-button {
-  width: 40px;
-  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2366,6 +2395,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 {