@norges-domstoler/dds-components 16.0.0 → 16.1.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);
   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,48 @@
   &[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: 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);
   }
 }
-.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 +685,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 {
@@ -1045,6 +1048,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 +1273,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;
@@ -1769,15 +1765,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 +1818,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 +1842,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 */
@@ -2355,6 +2364,71 @@
   }
 }
 
+/* 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-medium);
+    background-color: var(--dds-color-surface-field-disabled);
+  }
+  option {
+    background-color: var(--dds-color-surface-default);
+    &:hover {
+      background-color: var(--dds-color-surface-hover-default);
+    }
+  }
+  optgroup {
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+.NativeSelect_select--readonly {
+  box-shadow: none;
+  pointer-events: none;
+  border: none;
+  outline: none;
+  cursor: default;
+  background-color: transparent;
+  padding-left: 0;
+  padding-top: var(--dds-spacing-x0-125);
+}
+.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_icon {
+  position: absolute;
+  top: 50%;
+  transform: translate(-150%, -50%);
+  align-self: center;
+  pointer-events: none;
+}
+
 /* src/components/Popover/Popover.module.css */
 .Popover_container {
   position: absolute;
@@ -2516,7 +2590,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 +2600,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 +2623,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);
 }
@@ -3048,7 +3120,6 @@
 
 /* src/components/TextInput/TextInput.module.css */
 .TextInput_container--medium {
-  width: var(--dds-input-default-width);
 }
 .TextInput_container--tiny {
   width: 210px;
@@ -3058,6 +3129,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,6 +3143,9 @@
     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;
@@ -3086,6 +3163,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%;
@@ -3121,9 +3201,7 @@
 .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 */