@norges-domstoler/dds-components 21.7.0 → 21.9.0

package/dist/index.css

@@ -531,12 +531,12 @@
 .utilStyles_center-absolute-y {
   position: absolute;
   top: 50%;
-  transform: translate(0, -50%);
+  transform: translateY(-50%);
 }
 .utilStyles_center-absolute-x {
   position: absolute;
   left: 50%;
-  transform: translate(-50%, 0);
+  transform: translateX(-50%);
 }
 
 /* src/components/helpers/Backdrop/Backdrop.module.css */
@@ -612,185 +612,6 @@
   transform: rotate(0) translateY(0);
 }
 
-/* src/components/helpers/CharCounter/CharCounter.module.css */
-:where(.CharCounter_container) {
-  margin-left: auto;
-}
-
-/* src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css */
-.TextOverflowEllipsis_wrapper {
-  max-width: 100%;
-}
-.TextOverflowEllipsis_inner {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* src/components/Typography/Typography/Typography.module.css */
-.Typography_container {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-}
-
-/* src/components/helpers/styling/focus.module.css */
-.focus_focused,
-.focus_focusable:focus-visible,
-.focus_focusable-focus:focus,
-.focus_focusable-within:focus-within,
-.focus_has-focusable-input:has(input:focus-visible),
-.focus_focusable-sibling:focus-visible + .focus_focus-styled-sibling {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-offset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-.focus_focusable--inset:focus-visible {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-inset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-
-/* src/components/Icon/Icon.module.css */
-.Icon_svg {
-  display: inline-block;
-  transition: fill 0.2s;
-  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/Input/Input.module.css */
-.Input_container {
-  position: relative;
-}
-.Input_input-group {
-  position: relative;
-}
-:where(.Input_input) {
-  position: relative;
-  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-input);
-  margin: 0;
-  box-sizing: border-box;
-  box-shadow: none;
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      box-shadow 0.2s,
-      border-color 0.2s,
-      background-color 0.2s,
-      var(--dds-focus-transition);
-  }
-  &[type=text],
-  &[type=password],
-  &[type=number],
-  &[type=tel],
-  &[type=date],
-  &[type=url],
-  &[type=email],
-  &[type=search],
-  &[type=datetime-local] {
-    -webkit-appearance: none;
-  }
-  &: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);
-  }
-  &: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);
-  }
-}
-: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;
-  }
-}
-: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);
-}
-: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) {
-    border-color: var(--dds-color-border-danger);
-    box-shadow: 0 0 0 1px var(--dds-color-border-danger);
-  }
-  &:not(.Input_disabled):hover:not(:focus-within),
-  &:hover:enabled:read-write:not(:focus-within) {
-    border-color: var(--dds-color-border-danger);
-    box-shadow: 0 0 0 1px var(--dds-color-border-danger);
-  }
-  &:focus-within:enabled:-moz-read-write,
-  &:hover:focus-within:enabled:-moz-read-write,
-  &:active:enabled:-moz-read-write {
-    border-color: 1px solid var(--dds-color-border-default);
-  }
-  &:not(.Input_disabled):focus-within,
-  &:focus-within:enabled:read-write,
-  &:hover:focus-within:enabled:read-write,
-  &:active:enabled:read-write {
-    border-color: 1px solid var(--dds-color-border-default);
-  }
-}
-:where(.Input_input--medium) {
-  padding: var(--dds-spacing-x0-75);
-}
-:where(.Input_input--small) {
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
-}
-:where(.Input_input--xsmall) {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
-}
-:where(.Input_input--with-affix) {
-  gap: var(--dds-spacing-x1);
-}
-:where(.Input_label) {
-  display: block;
-}
-:where(.Input_input-group__absolute-element) {
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-  z-index: var(--dds-zindex-absolute-element);
-  color: var(--dds-color-icon-default);
-}
-
 /* src/components/layout/common/layout.module.css */
 .layout_dds-p {
   --dds-r-p: var(--dds-r-xs-p);
@@ -1629,6 +1450,13 @@
   border-radius: 0;
 }
 
+/* src/components/Icon/Icon.module.css */
+.Icon_svg {
+  display: inline-block;
+  transition: fill 0.2s;
+  flex-shrink: 0;
+}
+
 /* src/components/ThemeProvider/ThemeProvider.module.css */
 .ThemeProvider_global-variables {
   --dds-color-text-body: var(--dds-color-text-default);
@@ -1723,6 +1551,52 @@
   display: none;
 }
 
+/* src/components/helpers/styling/focus.module.css */
+.focus_focused,
+.focus_focusable:focus-visible,
+.focus_focusable-focus:focus,
+.focus_focusable-within:focus-within,
+.focus_has-focusable-input:has(input:focus-visible),
+.focus_focusable-sibling:focus-visible + .focus_focus-styled-sibling {
+  outline: var(--dds-focus-outline);
+  outline-offset: var(--dds-focus-outline-offset);
+  box-shadow: var(--dds-focus-box-shadow);
+}
+.focus_focusable--inset:focus-visible {
+  outline: var(--dds-focus-outline);
+  outline-offset: var(--dds-focus-outline-inset);
+  box-shadow: var(--dds-focus-box-shadow);
+}
+
+/* src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css */
+.TextOverflowEllipsis_wrapper {
+  max-width: 100%;
+}
+.TextOverflowEllipsis_inner {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* src/components/Typography/Typography/Typography.module.css */
+.Typography_container {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  user-select: text;
+}
+
+/* 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/BackLink/BackLink.module.css */
 .BackLink_icon {
   display: inline;
@@ -2109,6 +1983,7 @@
 }
 .Card_container--navigation {
   text-decoration: none;
+  display: block;
 }
 .Card_container--expandable {
   width: 100%;
@@ -2502,6 +2377,127 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   text-decoration: underline line-through;
 }
 
+/* src/components/helpers/Input/Input.module.css */
+.Input_container {
+  position: relative;
+}
+.Input_input-group {
+  position: relative;
+}
+:where(.Input_input) {
+  position: relative;
+  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-input);
+  margin: 0;
+  box-sizing: border-box;
+  box-shadow: none;
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      box-shadow 0.2s,
+      border-color 0.2s,
+      background-color 0.2s,
+      var(--dds-focus-transition);
+  }
+  &[type=text],
+  &[type=password],
+  &[type=number],
+  &[type=tel],
+  &[type=date],
+  &[type=url],
+  &[type=email],
+  &[type=search],
+  &[type=datetime-local] {
+    -webkit-appearance: none;
+  }
+  &: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);
+  }
+  &: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);
+  }
+}
+: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;
+  }
+}
+: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);
+}
+: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) {
+    border-color: var(--dds-color-border-danger);
+    box-shadow: 0 0 0 1px var(--dds-color-border-danger);
+  }
+  &:not(.Input_disabled):hover:not(:focus-within),
+  &:hover:enabled:read-write:not(:focus-within) {
+    border-color: var(--dds-color-border-danger);
+    box-shadow: 0 0 0 1px var(--dds-color-border-danger);
+  }
+  &:focus-within:enabled:-moz-read-write,
+  &:hover:focus-within:enabled:-moz-read-write,
+  &:active:enabled:-moz-read-write {
+    border-color: 1px solid var(--dds-color-border-default);
+  }
+  &:not(.Input_disabled):focus-within,
+  &:focus-within:enabled:read-write,
+  &:hover:focus-within:enabled:read-write,
+  &:active:enabled:read-write {
+    border-color: 1px solid var(--dds-color-border-default);
+  }
+}
+:where(.Input_input--medium) {
+  padding: var(--dds-spacing-x0-75);
+}
+:where(.Input_input--small) {
+  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
+}
+:where(.Input_input--xsmall) {
+  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
+}
+:where(.Input_input--with-affix) {
+  gap: var(--dds-spacing-x1);
+}
+:where(.Input_label) {
+  display: block;
+}
+:where(.Input_input-group__absolute-element) {
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  z-index: var(--dds-zindex-absolute-element);
+  color: var(--dds-color-icon-default);
+}
+
 /* src/components/DescriptionList/DescriptionList.module.css */
 .DescriptionList_list {
   & > dt:first-of-type {
@@ -2657,11 +2653,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   margin-top: calc(-1 * var(--dds-spacing-x0-125));
 }
 
-/* src/components/EmptyContent/EmptyContent.module.css */
-.EmptyContent_message {
-  color: var(--dds-text-color--subtle);
-}
-
 /* src/components/FavStar/FavStar.module.css */
 .FavStar_container {
   position: relative;
@@ -2766,6 +2757,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   padding-bottom: var(--dds-spacing-x0-5);
 }
 
+/* src/components/helpers/CharCounter/CharCounter.module.css */
+:where(.CharCounter_container) {
+  margin-left: auto;
+}
+
 /* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
 .InlineIconButton_button {
   display: inline-flex;
@@ -2952,6 +2948,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   text-overflow: ellipsis;
   width: 100%;
   padding-right: var(--dds-spacing-x1-5);
+  cursor: pointer;
 }
 .InlineEdit_inline-select--with-clear-button {
   padding-right: var(--dds-spacing-x3);
@@ -2977,25 +2974,17 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .InlineEdit_inline-textarea {
   resize: vertical;
 }
-.InlineEdit_icon-wrapper {
-  position: absolute;
-  top: var(--dds-spacing-x0-5);
+.InlineEdit_edit-icon {
   left: var(--dds-spacing-x0-5);
+  pointer-events: none;
   z-index: var(--dds-zindex-absolute-element);
-  &:hover {
-    cursor: text;
-  }
 }
 .InlineEdit_chevron {
-  position: absolute;
   right: var(--dds-spacing-x0-25);
-  transform: translateY(50%);
   pointer-events: none;
 }
 .InlineEdit_clear-button {
-  position: absolute;
   right: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small));
-  transform: translateY(50%);
 }
 
 /* src/components/InternalHeader/InternalHeader.module.css */
@@ -3333,6 +3322,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     background-color: var(--dds-color-surface-field-disabled);
   }
 }
+.NativeSelect_select--with-clear-button-small {
+  padding-right: var(--dds-spacing-x3);
+}
+.NativeSelect_select--with-clear-button-medium {
+  padding-right: var(--dds-spacing-x4);
+}
 .NativeSelect_icon {
   position: absolute;
   top: 50%;
@@ -3340,6 +3335,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   align-self: center;
   pointer-events: none;
 }
+.NativeSelect_clear-button--small {
+  right: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small));
+}
+.NativeSelect_clear-button--medium {
+  right: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium));
+}
 
 /* src/components/PhoneInput/PhoneInput.module.css */
 .PhoneInput_inputs-container {
@@ -3413,8 +3414,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     margin-bottom: -1px;
   }
 }
-select:focus-visible,
-select:hover {
+.PhoneInput_select:focus-visible,
+.PhoneInput_select:hover {
   z-index: var(--dds-zindex-absolute-element);
   & ~ svg {
     z-index: var(--dds-zindex-absolute-element);
@@ -3616,9 +3617,6 @@ select:hover {
   left: var(--dds-spacing-x0-75);
 }
 .Search_clear-button {
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
   right: var(--dds-spacing-x1);
 }
 .Search_suggestions {