@norges-domstoler/dds-components 16.1.0 → 16.3.0

package/README.md

@@ -12,6 +12,12 @@ Sjekk ut [Elsa - domstolenes designsystem](https://design.domstol.no/) og [ Elsa
 pnpm add @norges-domstoler/dds-components
 ```
 
+Importer styling av komponentene i CSS:
+
+```css
+@import '@norges-domstoler/dds-components/index.css';
+```
+
 ## 🔨 Bruk
 
 ```js
@@ -42,6 +48,7 @@ Tilgjengelige komponenter:
 
 - Breadcrumbs
 - Button
+- ButtonGroup
 - Card (inkludert CardAccordion)
 - Checkbox
 - Chip
@@ -56,6 +63,7 @@ Tilgjengelige komponenter:
 - GlobalMessage
 - Grid
 - Icon
+- InlineButton
 - InputMessage
 - InternaHeader
 - List
@@ -91,7 +99,3 @@ Tilgjengelige komponenter:
   - Paragraph
   - Typography
 - VisuallyHidden
-
-## ⌨️ For bidragsytere
-
-Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).

package/dist/index.css

@@ -594,7 +594,7 @@
 }
 :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);
@@ -633,28 +633,26 @@
   -webkit-appearance: textfield;
   &:enabled:-moz-read-only {
     box-shadow: none;
-    border: none;
-    outline: 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;
-    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;
+    border: 1px solid var(--dds-color-border-default);
+    background-color: var(--dds-color-surface-field-disabled);
+    color: var(--dds-color-text-medium);
     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);
+    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) {
@@ -778,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;
@@ -1049,9 +1059,6 @@
   min-width: 180px;
   max-width: 300px;
   box-shadow: var(--dds-shadow-1-onlight);
-  .OverflowMenu_divider {
-    margin-block: var(--dds-spacing-x0-75);
-  }
 }
 .OverflowMenu_list {
   display: flex;
@@ -1064,7 +1071,7 @@
   color: var(--dds-color-text-default);
   background-color: var(--dds-color-surface-default);
   text-decoration: none;
-  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
+  padding: var(--dds-spacing-x0-75);
   gap: var(--dds-spacing-x0-25);
 }
 .OverflowMenu_list__item--link {
@@ -1090,11 +1097,16 @@
   font-size: var(--dds-font-body-sans-01-line-height);
 }
 .OverflowMenu_divider {
-  margin-inline: var(--dds-spacing-x1);
+  margin-inline: var(--dds-spacing-x0-5);
+  margin-block: var(--dds-spacing-x0);
+}
+.OverflowMenu_group-header {
+  padding-inline: var(--dds-spacing-x0-75);
+  padding-block-start: var(--dds-spacing-x0-75);
 }
 
 /* src/components/Divider/Divider.module.css */
-.Divider_divider {
+:where(.Divider_divider) {
   border: 0;
   background-color: transparent;
   border-top: 1px solid;
@@ -1191,6 +1203,7 @@
 }
 .Card_container--navigation {
   text-decoration: none;
+  display: block;
   &:hover {
     border-color: var(--dds-color-border-action-hover);
     box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
@@ -1300,7 +1313,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);
   }
@@ -1310,7 +1323,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);
   }
 }
@@ -1325,7 +1338,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));
@@ -1352,6 +1371,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);
@@ -1403,11 +1425,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 {
@@ -2340,6 +2362,9 @@
 .Select_container--disabled {
   cursor: not-allowed;
 }
+.Select_container--readonly {
+  cursor: default;
+}
 .Select_inner-single-value {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2352,16 +2377,16 @@
   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--disabled .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 */
@@ -2385,14 +2410,21 @@
   }
   &:disabled {
     cursor: not-allowed;
-    color: var(--dds-color-text-medium);
+    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;
@@ -2401,13 +2433,13 @@
 }
 .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);
+  color: var(--dds-color-text-subtle);
+  background-color: var(--dds-color-surface-field-disabled);
+  + svg {
+    color: var(--dds-color-icon-subtle);
+  }
 }
 .NativeSelect_select--medium {
   height: calc(1.5em + var(--dds-spacing-x0-75) + var(--dds-spacing-x0-75) + 2px);
@@ -2421,6 +2453,12 @@
   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%;
@@ -2677,7 +2715,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);
@@ -2687,8 +2725,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);
   }
@@ -2740,6 +2783,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);
@@ -3119,7 +3163,14 @@
 }
 
 /* src/components/TextInput/TextInput.module.css */
-.TextInput_container--medium {
+.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;
@@ -3149,7 +3200,6 @@
 .TextInput_icon {
   position: absolute;
   z-index: 1;
-  color: var(--dds-color-icon-default);
 }
 .TextInput_icon--medium {
   left: var(--dds-spacing-x0-75);
@@ -3175,28 +3225,21 @@
   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;