@norges-domstoler/dds-components 16.0.0 → 16.2.0

package/dist/index.css

@@ -1,5 +1,4 @@
 @import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens.css";
-@import "@norges-domstoler/dds-design-tokens/dist/css/spacing.css";
 
 /* src/styles/dds-tokens.css */
 
@@ -593,14 +592,13 @@
 .Input_input-group {
   position: relative;
 }
-.Input_input {
+:where(.Input_input) {
   position: relative;
-  color: var(--dds-text-color--default);
+  color: var(--dds-color-text-default);
   border: 1px solid var(--dds-color-border-default);
   background-color: var(--dds-color-surface-default);
   padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
   border-radius: var(--dds-border-radius-1);
-  width: 100%;
   margin: 0;
   box-sizing: border-box;
   box-shadow: none;
@@ -622,49 +620,46 @@
   &[type=datetime-local] {
     -webkit-appearance: none;
   }
-  &:hover:enabled:-moz-read-write:not(:focus-visible) {
+  &:hover:enabled:-moz-read-write:not(:focus-visible):not(.Input_disabled):not(.Input_read-only) {
     border-color: var(--dds-color-border-action-hover);
     box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
   }
-  &:not(input):not(textarea):not(.Input_disabled):not(.Input_read-only):not(.Input_active):hover,
-  &:hover:enabled:read-write:not(:focus-visible) {
+  &:hover:enabled:read-write:not(:focus-visible):not(.Input_disabled):not(.Input_read-only) {
     border-color: var(--dds-color-border-action-hover);
     box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
   }
-  &.Input_input--stateful {
-    -webkit-appearance: textfield;
-    &:enabled:-moz-read-only {
-      box-shadow: none;
-      border: none;
-      outline: none;
-      cursor: default;
-      background-color: transparent;
-      padding-left: 0;
-      padding-top: var(--dds-spacing-x0-125);
-    }
-    &:not(.Input_disabled).Input_read-only,
-    &:enabled:read-only {
-      box-shadow: none;
-      border: none;
-      outline: none;
-      cursor: default;
-      background-color: transparent;
-      padding-left: 0;
-      padding-top: var(--dds-spacing-x0-125);
-    }
-    &.Input_disabled,
-    &:disabled {
-      cursor: not-allowed;
-      color: var(--dds-color-text-medium);
-      background-color: var(--dds-color-surface-field-disabled);
-    }
+}
+:where(.Input_input--stateful) {
+  -webkit-appearance: textfield;
+  &:enabled:-moz-read-only {
+    box-shadow: none;
+    border: 1px solid var(--dds-color-border-default);
+    background-color: var(--dds-color-surface-field-disabled);
+    color: var(--dds-color-text-medium);
+    cursor: default;
+  }
+  &:not(.Input_disabled).Input_read-only,
+  &:enabled:read-only {
+    box-shadow: none;
+    border: 1px solid var(--dds-color-border-default);
+    background-color: var(--dds-color-surface-field-disabled);
+    color: var(--dds-color-text-medium);
+    cursor: default;
+  }
+  &.Input_disabled,
+  &:disabled {
+    box-shadow: none;
+    border: 1px solid var(--dds-color-border-subtle);
+    background-color: var(--dds-color-surface-field-disabled);
+    color: var(--dds-color-text-subtle);
+    cursor: not-allowed;
   }
 }
-.Input_input--hover:hover {
+:where(.Input_input--hover:hover) {
   border-color: var(--dds-color-border-action-hover);
   box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
 }
-.Input_input--stateful-danger {
+:where(.Input_input--stateful-danger) {
   border-color: var(--dds-color-border-danger);
   box-shadow: 0 0 0 1px var(--dds-color-border-danger);
   &:hover:enabled:-moz-read-write:not(:focus-within) {
@@ -688,18 +683,24 @@
     border-color: 1px solid var(--dds-color-border-default);
   }
 }
-.Input_input--medium {
+:where(.Input_input--medium) {
   padding: var(--dds-spacing-x0-75);
 }
-.Input_input--small {
+:where(.Input_input--small) {
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
 }
-.Input_input--tiny {
+:where(.Input_input--tiny) {
   padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
 }
-.Input_input--with-affix {
+:where(.Input_input--with-affix) {
   gap: var(--dds-spacing-x1);
 }
+:where(.Input_label) {
+  display: block;
+}
+:where(.Input_char-counter) {
+  margin-left: auto;
+}
 
 /* src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css */
 .TextOverflowEllipsis_wrapper {
@@ -775,6 +776,18 @@
   flex-shrink: 0;
 }
 
+/* src/components/Typography/Label/Label.module.css */
+.Label_read-only {
+  display: flex;
+}
+.Label_read-only__icon {
+  align-self: center;
+  flex-shrink: 0;
+  margin-inline-end: var(--dds-spacing-x0-125);
+  width: 1.25em;
+  height: 1.25em;
+}
+
 /* src/components/helpers/Paper/Paper.module.css */
 .Paper_container {
   box-sizing: border-box;
@@ -1045,6 +1058,7 @@
   overflow-y: auto;
   min-width: 180px;
   max-width: 300px;
+  box-shadow: var(--dds-shadow-1-onlight);
   .OverflowMenu_divider {
     margin-block: var(--dds-spacing-x0-75);
   }
@@ -1269,29 +1283,21 @@
 }
 
 /* src/components/date-inputs/common/DateInput.module.css */
-.DateInput_container--medium {
-  width: 160px;
-}
-.DateInput_container--small {
-  width: 148px;
-}
-.DateInput_container--tiny {
-  width: 125px;
-}
 .DateInput_date-input {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   gap: var(--dds-spacing-x0-25);
+  width: var(--dds-date-input-width);
 }
 .DateInput_date-input--medium {
-  padding-inline: var(--dds-spacing-x0-5) !important;
+  padding-inline: var(--dds-spacing-x0-5);
 }
 .DateInput_date-input--small {
-  padding-inline: var(--dds-spacing-x0-5) !important;
+  padding-inline: var(--dds-spacing-x0-5);
 }
 .DateInput_date-input--tiny {
-  padding-inline: var(--dds-spacing-x0-25) !important;
+  padding-inline: var(--dds-spacing-x0-25);
 }
 .DateInput_date-segment-container {
   display: flex;
@@ -1304,7 +1310,7 @@
   width: max-content;
   font-variant-numeric: tabular-nums;
   outline: none;
-  &:focus:not([aria-readonly]) {
+  &:focus {
     background-color: var(--dds-color-surface-action-selected);
     color: var(--dds-color-text-on-action);
   }
@@ -1314,7 +1320,7 @@
   width: 100%;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
-  .DateInput_segment:focus:not([aria-readonly]) & {
+  .DateInput_segment:focus & {
     color: var(--dds-color-text-on-action);
   }
 }
@@ -1329,7 +1335,13 @@
   justify-content: center;
   margin-inline: -1px 0;
   padding: var(--dds-spacing-x0-25);
-  color: var(--dds-color-text-default);
+  color: var(--dds-color-icon-default);
+}
+.DateInput_icon-wrapper--disabled {
+  color: var(--dds-color-icon-subtle);
+}
+.DateInput_icon-wrapper--readonly {
+  color: var(--dds-color-icon-medium);
 }
 .DateInput_icon-wrapper--small {
   margin-block: calc(0px - var(--dds-icon-size-medium));
@@ -1356,6 +1368,9 @@
     color: var(--dds-color-text-subtle);
   }
 }
+.DateInput_popover-button--readonly:disabled {
+  color: var(--dds-color-text-medium);
+}
 .DateInput_popover {
   z-index: 100;
   border-radius: var(--dds-border-radius-1);
@@ -1407,11 +1422,11 @@
 }
 .DateInput_calendar__cell-button--default {
   background-color: transparent;
-  color: var(--dds-text-color--default);
+  color: var(--dds-color-text-default);
   &:hover {
     background-color: var(--dds-color-surface-hover-default);
     border-color: var(--dds-color-border-action-hover);
-    color: var(--dds-text-color--default);
+    color: var(--dds-color-text-default);
   }
 }
 .DateInput_calendar__cell-button--selected {
@@ -1769,15 +1784,17 @@
 }
 
 /* src/components/TextArea/TextArea.module.css */
-.TextArea_container {
-  width: var(--dds-input-default-width);
-}
 .TextArea_textarea {
+  width: var(--dds-text-area-width);
   height: auto;
   resize: vertical;
   vertical-align: bottom;
   padding-bottom: var(--dds-spacing-x0-5);
 }
+.TextArea_message-container {
+  display: flex;
+  justify-content: space-between;
+}
 
 /* src/components/Tooltip/Tooltip.module.css */
 .Tooltip_container {
@@ -1820,7 +1837,8 @@
   gap: var(--dds-spacing-x1);
   border-color: var(--dds-color-border-default);
   background-color: var(--dds-color-surface-default);
-  padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1-5);
+  border-radius: var(--dds-border-radius-1);
+  padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1-5);
   @media (prefers-reduced-motion: no-preference) {
     transition: background-color 0.2s, border-color 0.2s;
   }
@@ -1843,12 +1861,22 @@
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
   margin-top: var(--dds-spacing-x0-5);
   background-color: var(--dds-color-surface-subtle);
+  border-radius: var(--dds-border-radius-1);
+  border: 1px solid var(--dds-color-border-default);
 }
 .FileUploader_file--invalid {
-  box-shadow: inset 0 0 0 2px var(--dds-color-border-danger);
+  border: 1px solid var(--dds-color-border-danger);
+  box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
+}
+.FileUploader_file__icon--invalid {
+  color: var(--dds-color-icon-on-danger-default);
+}
+.FileUploader_file__icon--valid {
+  color: var(--dds-color-icon-on-success-default);
 }
 .FileUploader_file__name {
   word-break: break-all;
+  width: 100%;
 }
 
 /* src/components/GlobalMessage/GlobalMessage.module.css */
@@ -2331,6 +2359,9 @@
 .Select_container--disabled {
   cursor: not-allowed;
 }
+.Select_container--readonly {
+  cursor: default;
+}
 .Select_inner-single-value {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2343,17 +2374,95 @@
   margin-left: -1px;
 }
 .Select_control {
-  &:hover .Select_dropdown-indicator,
+  &:hover:not(.Select_control--readonly) .Select_dropdown-indicator,
   &:focus-within .Select_dropdown-indicator {
     color: var(--dds-color-icon-action-hover);
   }
-  &.Select_control--readonly .Select_dropdown-indicator {
-    color: transparent;
+}
+.Select_control--readonly .Select_dropdown-indicator {
+  pointer-events: none;
+}
+.Select_control--disabled .Select_dropdown-indicator {
+  pointer-events: none;
+}
+
+/* src/components/Select/NativeSelect/NativeSelect.module.css */
+.NativeSelect_container {
+  position: relative;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.NativeSelect_select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: var(--dds-native-select-width);
+  text-overflow: ellipsis;
+  &:hover:not(:disabled):not(.NativeSelect_select--readonly) {
+    border-color: var(--dds-color-border-action-hover);
+    box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
+    & + svg {
+      color: var(--dds-color-icon-action-hover);
+    }
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--dds-color-text-subtle);
+    background-color: var(--dds-color-surface-field-disabled);
+    border-color: var(--dds-color-border-subtle);
+    + svg {
+      color: var(--dds-color-icon-subtle);
+    }
+  }
+  option {
+    background-color: var(--dds-color-surface-default);
+    &:hover {
+      background-color: var(--dds-color-surface-hover-default);
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color 0.2s;
+    }
+  }
+  optgroup {
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+.NativeSelect_select--readonly {
+  box-shadow: none;
+  outline: none;
+  cursor: default;
+  color: var(--dds-color-text-subtle);
+  background-color: var(--dds-color-surface-field-disabled);
+  + svg {
+    color: var(--dds-color-icon-subtle);
   }
-  &.Select_control--disabled .Select_dropdown-indicator {
-    color: transparent;
+}
+.NativeSelect_select--medium {
+  height: calc(1.5em + var(--dds-spacing-x0-75) + var(--dds-spacing-x0-75) + 2px);
+  padding-right: var(--dds-spacing-x2);
+}
+.NativeSelect_select--small {
+  height: calc(1.5em + var(--dds-spacing-x0-5) + var(--dds-spacing-x0-5) + 2px);
+  padding-right: var(--dds-spacing-x2);
+}
+.NativeSelect_select--tiny {
+  height: calc(1.5em + var(--dds-spacing-x0-25) + var(--dds-spacing-x0-25) + 2px);
+  padding-right: var(--dds-spacing-x1);
+}
+.NativeSelect_select--multiple {
+  padding-right: 0;
+  &.NativeSelect_select--readonly option {
+    background-color: var(--dds-color-surface-field-disabled);
   }
 }
+.NativeSelect_icon {
+  position: absolute;
+  top: 50%;
+  transform: translate(-150%, -50%);
+  align-self: center;
+  pointer-events: none;
+}
 
 /* src/components/Popover/Popover.module.css */
 .Popover_container {
@@ -2516,7 +2625,8 @@
   gap: var(--dds-spacing-x0-5);
 }
 .Search_input {
-  padding-right: var(--dds-spacing-x0-25);
+  width: 100%;
+  padding-right: calc(var(--dds-spacing-x1) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-25));
   &[type=search]::-webkit-search-decoration,
   &[type=search]::-webkit-search-cancel-button,
   &[type=search]::-webkit-search-results-button,
@@ -2525,18 +2635,15 @@
   }
 }
 .Search_input--small {
-  padding-top: var(--dds-spacing-x0-5);
-  padding-bottom: var(--dds-spacing-x0-5);
+  padding-block: var(--dds-spacing-x0-5);
   padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small) + var(--dds-spacing-x0-5));
 }
 .Search_input--medium {
-  padding-top: var(--dds-spacing-x0-75);
-  padding-bottom: var(--dds-spacing-x0-75);
+  padding-block: var(--dds-spacing-x0-75);
   padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
 }
 .Search_input--large {
-  padding-top: var(--dds-spacing-x1);
-  padding-bottom: var(--dds-spacing-x1);
+  padding-block: var(--dds-spacing-x1);
   padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
 }
 .Search_search-icon {
@@ -2551,7 +2658,7 @@
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
-  right: var(--dds-spacing-x0-75);
+  right: var(--dds-spacing-x1);
   width: var(--dds-icon-size-medium);
   height: var(--dds-icon-size-medium);
 }
@@ -2605,7 +2712,7 @@
         var(--dds-focus-transition);
     }
   }
-  &:hover input:enabled:not(:checked) ~ .SelectionControl_selection-control {
+  &:hover:not(.SelectionControl_label--readonly) input:enabled:not(:checked) ~ .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);
@@ -2615,8 +2722,13 @@
     border-color: var(--dds-color-surface-action-selected);
     background-color: var(--dds-color-surface-action-selected);
   }
-  &:hover input:checked:enabled[type=checkbox] ~ .SelectionControl_selection-control,
-  &:hover input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
+  &.SelectionControl_label--readonly input:checked:enabled ~ .SelectionControl_selection-control,
+  &.SelectionControl_label--readonly input:enabled[data-indeterminate=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);
   }
@@ -2668,6 +2780,7 @@
 }
 .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);
@@ -3047,8 +3160,14 @@
 }
 
 /* src/components/TextInput/TextInput.module.css */
-.TextInput_container--medium {
-  width: var(--dds-input-default-width);
+.TextInput_container {
+  color: var(--dds-color-text-default);
+}
+.TextInput_container--readonly {
+  color: var(--dds-color-text-medium);
+}
+.TextInput_container--disabled {
+  color: var(--dds-color-text-subtle);
 }
 .TextInput_container--tiny {
   width: 210px;
@@ -3058,6 +3177,9 @@
   display: flex;
   align-items: center;
 }
+.TextInput_input-width {
+  width: var(--dds-textinput-width);
+}
 .TextInput_input {
   &.TextInput_with-icon--medium {
     padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
@@ -3069,10 +3191,12 @@
     padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-25));
   }
 }
+.TextInput_input--extended {
+  width: 100%;
+}
 .TextInput_icon {
   position: absolute;
   z-index: 1;
-  color: var(--dds-color-icon-default);
 }
 .TextInput_icon--medium {
   left: var(--dds-spacing-x0-75);
@@ -3086,6 +3210,9 @@
   left: var(--dds-spacing-x0-5);
   top: calc(50% - (var(--dds-icon-size-small) / 2));
 }
+.TextInput_label {
+  display: block;
+}
 .TextInput_affix {
   position: absolute;
   height: 100%;
@@ -3095,35 +3222,26 @@
   align-items: center;
   pointer-events: none;
   z-index: 1;
-  &.TextInput_prefix {
-    left: 0;
-    margin-left: 8px;
-    padding-right: 8px;
-    border-right: 1px solid var(--dds-color-border-default);
-  }
-  &.TextInput_suffix {
-    right: 0;
-    margin-right: 8px;
-    padding-left: 8px;
-    border-left: 1px solid var(--dds-color-border-default);
-  }
-  &.TextInput_prefix--readonly {
-    margin-left: 0;
-    padding-right: 0.5ch;
-    border-right: none;
-  }
-  &.TextInput_suffix--readonly {
-    margin-right: 0;
-    padding-left: 0.5ch;
-    border-left: none;
-  }
+}
+.TextInput_prefix {
+  left: 0;
+  margin-left: 8px;
+  padding-right: 8px;
+  border-right: 1px solid var(--dds-color-border-default);
+}
+.TextInput_suffix {
+  right: 0;
+  margin-right: 8px;
+  padding-left: 8px;
+  border-left: 1px solid var(--dds-color-border-default);
+}
+.TextInput_affix--disabled {
+  border-color: var(--dds-color-border-subtle);
 }
 .TextInput_message-container {
   display: flex;
   justify-content: space-between;
-}
-.TextInput_char-counter {
-  margin-left: auto;
+  gap: var(--dds-spacing-x0-5);
 }
 
 /* src/components/ToggleBar/ToggleBar.module.css */