@norges-domstoler/dds-components 18.2.0 → 19.0.0

package/README.md

@@ -1,10 +1,10 @@
 # @norges-domstoler/dds-components
 
-![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components) [![License](https://img.shields.io/npm/l/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components) ![Checks](https://github.com/domstolene/designsystem/actions/workflows/release.yml/badge.svg)
+[![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components) ![License](https://img.shields.io/npm/l/@norges-domstoler/dds-components)
 
 React UI komponenter til bruk i domstolenes tjenester.
 
-Sjekk ut [Elsa - domstolenes designsystem](https://design.domstol.no/) og [Elsa Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
+Sjekk ut [Elsa - domstolenes designsystem](https://design.domstol.no/) og [Elsa Storybook](https://domstolene.github.io/designsystem) for dokumentasjon og demoer.
 
 ## 📦 Installasjon
 

package/dist/index.css

@@ -48,6 +48,28 @@
     url("./IBMPlexSans-LightItalic-HGYKQIYJ.woff2") format("woff2"),
     url("./IBMPlexSans-LightItalic-DGDYT5M4.woff") format("woff");
 }
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("IBM Plex Sans Medium"),
+    local("IBMPlexSans-Medium"),
+    url("./IBMPlexSans-Medium-GPYSN6WY.woff2") format("woff2"),
+    url("./IBMPlexSans-Medium-F6RY5FT3.woff") format("woff");
+}
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("IBM Plex Sans Medium Italic"),
+    local("IBMPlexSans-MediumItalic"),
+    url("./IBMPlexSans-MediumItalic-NOK4NVHM.woff2") format("woff2"),
+    url("./IBMPlexSans-MediumItalic-HYTLJOHM.woff") format("woff");
+}
 @font-face {
   font-family: IBM Plex Sans;
   font-style: normal;
@@ -434,12 +456,17 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 200;
   background-color: var(--dds-color-surface-backdrop-default);
   @media (prefers-reduced-motion: no-preference) {
     transition: opacity 0.2s;
   }
 }
+.Backdrop_drawer {
+  z-index: var(--dds-zindex-drawer-backdrop);
+}
+.Backdrop_modal {
+  z-index: var(--dds-zindex-modal-backdrop);
+}
 .Backdrop_backdrop--visible {
   opacity: 1;
 }
@@ -611,7 +638,7 @@
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
-  z-index: 1;
+  z-index: var(--dds-zindex-absolute-element);
   color: var(--dds-color-icon-default);
 }
 
@@ -1049,7 +1076,7 @@
 /* src/components/OverflowMenu/OverflowMenu.module.css */
 .OverflowMenu_container {
   box-sizing: border-box;
-  z-index: 100;
+  z-index: var(--dds-zindex-overflowmenu);
   overflow-y: auto;
   min-width: 180px;
   max-width: 300px;
@@ -1062,11 +1089,16 @@
   display: flex;
   box-sizing: border-box;
   align-items: center;
-  color: var(--dds-color-text-default);
   background-color: var(--dds-color-surface-default);
   text-decoration: none;
   padding: var(--dds-spacing-x0-75);
   gap: var(--dds-spacing-x0-25);
+  &.OverflowMenu_default {
+    color: var(--dds-color-text-default);
+  }
+  &.OverflowMenu_danger {
+    color: var(--dds-color-text-danger);
+  }
 }
 .OverflowMenu_list__item--link {
   text-align: left;
@@ -1120,7 +1152,7 @@
 /* src/components/ButtonGroup/ButtonGroup.module.css */
 .ButtonGroup_group > *:focus-visible {
   position: relative;
-  z-index: 1;
+  z-index: var(--dds-zindex-absolute-element);
 }
 .ButtonGroup_group--column {
   display: flex;
@@ -1330,18 +1362,67 @@
   color: var(--dds-color-text-medium);
 }
 .DateInput_popover {
-  z-index: 100;
-  border-radius: var(--dds-border-radius-surface);
-  background-color: var(--dds-color-surface-default);
-  border: 1px solid var(--dds-color-border-default);
+  z-index: var(--dds-zindex-popover);
   padding: var(--dds-spacing-x0-5);
-  box-shadow: var(--dds-shadow-2);
-  height: 347px;
+}
+.DateInput_popover--large-screen-hide-xs {
+  @media only screen and (max-width: 600px) {
+    display: none;
+  }
+}
+.DateInput_popover--large-screen-hide-sm {
+  @media only screen and (max-width: 960px) {
+    display: none;
+  }
+}
+.DateInput_popover--large-screen-hide-md {
+  @media only screen and (max-width: 1280px) {
+    display: none;
+  }
+}
+.DateInput_popover--large-screen-hide-lg {
+  @media only screen and (max-width: 1920px) {
+    display: none;
+  }
+}
+.DateInput_popover--large-screen-hide-xl {
+  display: none;
+}
+.DateInput_modal {
+  display: none;
+}
+.DateInput_modal--small-screen-show-xs {
+  @media only screen and (max-width: 600px) {
+    display: block;
+  }
+}
+.DateInput_modal--small-screen-show-sm {
+  @media only screen and (max-width: 960px) {
+    display: block;
+  }
+}
+.DateInput_modal--small-screen-show-md {
+  @media only screen and (max-width: 1280px) {
+    display: block;
+  }
+}
+.DateInput_modal--small-screen-show-lg {
+  @media only screen and (max-width: 1920px) {
+    display: block;
+  }
+}
+.DateInput_modal--small-screen-show-xl {
+  display: block;
+}
+.DateInput_modal-close-button-wrapper {
+  display: flex;
+  justify-content: right;
 }
 .DateInput_calendar {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  height: 327px;
 }
 .DateInput_calendar__header {
   display: flex;
@@ -1405,6 +1486,30 @@
   text-decoration: underline line-through;
 }
 
+/* src/components/ThemeProvider/ThemeProvider.module.css */
+.ThemeProvider_global-variables {
+  --dds-color-text-body: var(--dds-color-text-default);
+  --dds-color-text-body-subtle: var(--dds-color-text-subtle);
+  --dds-color-text-link: var(--dds-color-text-action-resting);
+  --dds-color-text-link-visited: var(--dds-color-text-action-visited);
+  --dds-color-text-label: var(--dds-color-text-medium);
+  --dds-color-text-placeholder: var(--dds-color-text-subtle);
+  --dds-color-text-helper: var(--dds-color-text-subtle);
+  --dds-color-icon-link: var(--dds-color-text-action-resting);
+  --dds-focus-outline: var(--dds-color-focus-outside) 2px solid;
+  --dds-focus-outline-offset: var(--dds-spacing-x0-125);
+  --dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
+  --dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
+  --dds-focus-transition: outline-offset 0.2s;
+  --dds-input-default-width: 320px;
+  --dds-transition-duration-surface-move: 0.5s;
+}
+.ThemeProvider_global-styles {
+  font: var(--dds-font-body-medium);
+  letter-spacing: var(--dds-font-body-medium-letter-spacing);
+  color: var(--dds-color-text-default);
+}
+
 /* src/components/InputMessage/InputMessage.module.css */
 .InputMessage_container {
   display: flex;
@@ -1544,7 +1649,7 @@
   flex-direction: column-reverse;
   justify-content: flex-end;
   min-width: 300px;
-  z-index: 100;
+  z-index: var(--dds-zindex-drawer);
   border-radius: 0;
   padding: var(--dds-drawer-container-padding);
   @media (prefers-reduced-motion: no-preference) {
@@ -1588,30 +1693,6 @@
   align-self: flex-end;
 }
 
-/* src/components/ThemeProvider/ThemeProvider.module.css */
-.ThemeProvider_global-variables {
-  --dds-color-text-body: var(--dds-color-text-default);
-  --dds-color-text-body-subtle: var(--dds-color-text-subtle);
-  --dds-color-text-link: var(--dds-color-text-action-resting);
-  --dds-color-text-link-visited: var(--dds-color-text-action-visited);
-  --dds-color-text-label: var(--dds-color-text-medium);
-  --dds-color-text-placeholder: var(--dds-color-text-subtle);
-  --dds-color-text-helper: var(--dds-color-text-subtle);
-  --dds-color-icon-link: var(--dds-color-text-action-resting);
-  --dds-focus-outline: var(--dds-color-focus-outside) 2px solid;
-  --dds-focus-outline-offset: var(--dds-spacing-x0-125);
-  --dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
-  --dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
-  --dds-focus-transition: outline-offset 0.2s;
-  --dds-input-default-width: 320px;
-  --dds-transition-duration-surface-move: 0.5s;
-}
-.ThemeProvider_global-styles {
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
-  color: var(--dds-color-text-default);
-}
-
 /* src/components/EmptyContent/EmptyContent.module.css */
 .EmptyContent_containter {
   display: flex;
@@ -1849,7 +1930,7 @@
   width: -moz-fit-content;
   width: fit-content;
   position: absolute;
-  z-index: 80;
+  z-index: var(--dds-zindex-tooltip);
   text-align: center;
   padding: var(--dds-spacing-x0-75);
 }
@@ -2140,7 +2221,7 @@
   position: absolute;
   top: var(--dds-spacing-x0-5);
   left: var(--dds-spacing-x0-5);
-  z-index: 1;
+  z-index: var(--dds-zindex-absolute-element);
   &:hover {
     cursor: text;
   }
@@ -2816,9 +2897,9 @@
 }
 .PhoneInput_select:focus-visible,
 .PhoneInput_select:hover {
-  z-index: 1;
+  z-index: var(--dds-zindex-absolute-element);
   & ~ svg {
-    z-index: 1;
+    z-index: var(--dds-zindex-absolute-element);
   }
 }
 .PhoneInput_calling-code {
@@ -2830,13 +2911,13 @@
   position: absolute;
   width: -moz-fit-content;
   width: fit-content;
-  z-index: 100;
+  z-index: var(--dds-zindex-popover);
   padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1);
 }
-.Popover_content--closable--no-title {
+.Popover_content--closable--no-header {
   margin-top: var(--dds-spacing-x2);
 }
-.Popover_title {
+.Popover_header {
   margin-right: var(--dds-spacing-x2);
 }
 .Popover_close-button {
@@ -2921,7 +3002,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 2;
+  z-index: var(--dds-zindex-absolute-element);
   font-weight: 600;
   border: 2px solid;
   height: var(--dds-progress-tracker-item-number-size);
@@ -3070,7 +3151,7 @@
   top: 100%;
   width: 100%;
   max-height: 300px;
-  z-index: 80;
+  z-index: var(--dds-zindex-dropdown);
   overflow-y: scroll;
   margin-top: var(--dds-spacing-x0-25);
 }
@@ -3265,7 +3346,7 @@
   height: auto;
   overflow: auto;
   width: 100%;
-  z-index: 250;
+  z-index: var(--dds-zindex-skiptocontent);
   opacity: 1;
 }
 
@@ -3319,7 +3400,7 @@
   tr th {
     position: sticky;
     top: 0;
-    z-index: 50;
+    z-index: var(--dds-zindex-sticky);
   }
 }
 .Table_table--small {
@@ -3640,7 +3721,7 @@
   display: flex;
   align-items: center;
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--dds-zindex-absolute-element);
 }
 .TextInput_prefix {
   left: 0;
@@ -3957,8 +4038,6 @@
   width: fit-content;
   border: 1px solid var(--dds-color-border-default);
   border-radius: var(--dds-border-radius-rounded);
-  gap: var(--dds-spacing-x0-25);
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
   background-color: var(--dds-color-surface-default);
   color: var(--dds-color-text-default);
   @media (prefers-reduced-motion: no-preference) {
@@ -3972,8 +4051,21 @@
     background-color: var(--dds-color-surface-hover-default);
   }
 }
+.ToggleButton_small {
+  gap: var(--dds-spacing-x0-25);
+  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
+}
+.ToggleButton_xsmall {
+  gap: var(--dds-spacing-x0-125);
+  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
+}
 .ToggleButton_content--with-icon {
-  padding-inline-start: var(--dds-spacing-x0-75);
+  &.ToggleButton_small {
+    padding-inline-start: var(--dds-spacing-x0-75);
+  }
+  &.ToggleButton_xsmall {
+    padding-inline-start: var(--dds-spacing-x0-25);
+  }
 }
 input:checked + .ToggleButton_content {
   color: var(--dds-color-text-on-action);