@norges-domstoler/dds-components 23.1.0 → 23.1.1

package/dist/index.css

@@ -535,11 +535,11 @@
   overflow-y: auto;
 }
 .utilStyles_visibility-transition {
-  --dds-visiblity-transition: visibility 0.4s;
+  --dds-visibility-transition: visibility 0.4s;
   --dds-opacity-transition: opacity var(--dds-motion-surface);
   opacity: 0;
   @media (prefers-reduced-motion: no-preference) {
-    transition: var(--dds-visiblity-transition), var(--dds-opacity-transition);
+    transition: var(--dds-visibility-transition), var(--dds-opacity-transition);
   }
 }
 .utilStyles_visibility-transition--open {
@@ -1887,84 +1887,92 @@
   }
 }
 .Button_button--xsmall {
+  min-height: var(--dds-size-height-input-xsmall);
+  padding-block: var(--dds-spacing-x0-125);
   &.Button_just-text {
-    padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
+    padding-inline: var(--dds-spacing-x0-5);
   }
   &.Button_with-text-and-icon {
     gap: var(--dds-spacing-xs-icon-text-gap);
     &.Button_with-icon-left {
-      padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
+      padding-inline: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
     }
     &.Button_with-icon-right {
-      padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
+      padding-inline: var(--dds-spacing-x0-5) var(--dds-spacing-x0-25);
     }
   }
   &.Button_just-icon,
   &.Button_button--is-loading.Button_no-content {
-    padding: var(--dds-spacing-x0-25);
+    padding-inline: var(--dds-spacing-x0-25);
   }
   &.Button_clear {
     padding: var(--dds-spacing-x0-125);
   }
 }
 .Button_button--small {
+  min-height: var(--dds-size-height-input-small);
+  padding-block: var(--dds-spacing-x0-25);
   &.Button_just-text {
-    padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
+    padding-inline: var(--dds-spacing-x0-75);
   }
   &.Button_with-text-and-icon {
     gap: var(--dds-spacing-sm-icon-text-gap);
     &.Button_with-icon-left {
-      padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5);
+      padding-inline: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
     }
     &.Button_with-icon-right {
-      padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
+      padding-inline: var(--dds-spacing-x0-75) var(--dds-spacing-x0-5);
     }
   }
   &.Button_just-icon,
   &.Button_button--is-loading.Button_no-content {
-    padding: var(--dds-spacing-x0-5);
+    padding-inline: var(--dds-spacing-x0-5);
   }
   &.Button_clear {
     padding: var(--dds-spacing-x0-25);
   }
 }
 .Button_button--medium {
+  min-height: var(--dds-size-height-input-medium);
+  padding-block: var(--dds-spacing-x0-5);
   &.Button_just-text {
-    padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
+    padding-inline: var(--dds-spacing-x1);
   }
   &.Button_with-text-and-icon {
     gap: var(--dds-spacing-md-icon-text-gap);
     &.Button_with-icon-left {
-      padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
+      padding-inline: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
     }
     &.Button_with-icon-right {
-      padding: var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x1);
+      padding-inline: var(--dds-spacing-x1) var(--dds-spacing-x0-75);
     }
   }
   &.Button_just-icon,
   &.Button_button--is-loading.Button_no-content {
-    padding: var(--dds-spacing-x0-75);
+    padding-inline: var(--dds-spacing-x0-75);
   }
   &.Button_clear {
     padding: var(--dds-spacing-x0-5);
   }
 }
 .Button_button--large {
+  min-height: var(--dds-size-height-input-large);
+  padding-block: var(--dds-spacing-x0-75);
   &.Button_just-text {
-    padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
+    padding-inline: var(--dds-spacing-x1-5);
   }
   &.Button_with-text-and-icon {
     gap: var(--dds-spacing-lg-icon-text-gap);
     &.Button_with-icon-left {
-      padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
+      padding-inline: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
     }
     &.Button_with-icon-right {
-      padding: var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1-5);
+      padding-inline: var(--dds-spacing-x1-5) var(--dds-spacing-x1);
     }
   }
   &.Button_just-icon,
   &.Button_button--is-loading.Button_no-content {
-    padding: var(--dds-spacing-x1);
+    padding-inline: var(--dds-spacing-x1);
   }
   &.Button_clear {
     padding: var(--dds-spacing-x0-75);
@@ -2551,10 +2559,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   font-family: var(--dds-font-family-monospace);
 }
 .DateInput_segment {
-  padding: 0 0.05rem;
-  display: block;
-  width: -moz-max-content;
-  width: max-content;
   font-variant-numeric: tabular-nums;
   outline: none;
   font-family: var(--dds-font-family-monospace);
@@ -2577,9 +2581,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   height: 0;
   width: 0;
 }
-.DateInput_clear-button--inactive {
-  visibility: hidden;
-}
 .DateInput_icon-wrapper--disabled,
 .DateInput_popover-button:disabled {
   color: var(--dds-color-icon-subtle);
@@ -2648,20 +2649,23 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     color: var(--dds-color-text-default);
   }
 }
-.DateInput_calendar__cell-button--selected {
-  background-color: var(--dds-color-surface-action-selected);
-  border-color: var(--dds-color-surface-action-selected);
-  color: var(--dds-color-text-on-action);
-}
-.DateInput_calendar__cell-button--unavailable {
+.DateInput_calendar__cell-button--unavailable,
+.DateInput_calendar__cell-button--unavailable:hover {
   background-color: var(--dds-color-surface-field-disabled);
   border-color: var(--dds-color-surface-field-disabled);
   color: var(--dds-color-text-subtle);
   cursor: not-allowed;
   text-decoration: line-through;
 }
+.DateInput_calendar__cell-button--selected,
+.DateInput_calendar__cell-button--selected:hover {
+  background-color: var(--dds-color-surface-action-selected);
+  border-color: var(--dds-color-surface-action-selected);
+  color: var(--dds-color-text-on-action);
+  font-weight: var(--dds-font-weight-bold);
+}
 .DateInput_calendar__cell-button--unavailable--today {
-  border-color: var(--dds-color-surface-field-disabled);
+  border-color: var(--dds-color-border-default);
   text-decoration: underline line-through;
 }
 
@@ -2803,16 +2807,20 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 :where(.Input_input--large) {
-  padding: var(--dds-spacing-x1) var(--dds-spacing-x0-75);
+  padding: var(--dds-spacing-x0-75);
+  height: var(--dds-size-height-input-large);
 }
 :where(.Input_input--medium) {
-  padding: var(--dds-spacing-x0-75);
+  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
+  height: var(--dds-size-height-input-medium);
 }
 :where(.Input_input--small) {
-  padding: var(--dds-spacing-x0-5);
+  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
+  height: var(--dds-size-height-input-small);
 }
 :where(.Input_input--xsmall) {
-  padding: var(--dds-spacing-x0-25);
+  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25);
+  height: var(--dds-size-height-input-xsmall);
 }
 :where(.Input_input-with-icon--large) {
   padding-left: calc(var(--dds-input-absolute-el-left-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
@@ -3566,6 +3574,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .InlineEdit_inline-textarea {
   resize: vertical;
+  height: initial;
 }
 .InlineEdit_edit-icon-textarea {
   position: absolute;
@@ -3752,9 +3761,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   display: inline-grid;
   align-content: center;
 }
-.Pagination_list__item--hidden {
-  visibility: hidden;
-}
 .Pagination_indicators {
   grid-auto-flow: column;
 }
@@ -3806,6 +3812,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     }
   }
   &:disabled {
+    opacity: 1;
     cursor: not-allowed;
     color: var(--dds-color-text-subtle);
     background-color: var(--dds-color-surface-field-disabled);
@@ -3927,6 +3934,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .PhoneInput_calling-code {
   left: var(--dds-spacing-x0-5);
 }
+.PhoneInput_calling-code--disabled {
+  color: var(--dds-color-text-subtle);
+}
 
 /* src/components/Popover/Popover.module.css */
 .Popover_container {
@@ -4359,15 +4369,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   grid-auto-columns: 1fr;
 }
 .ToggleBar_content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   word-break: break-word;
-  height: 100%;
   box-sizing: border-box;
   cursor: pointer;
   background-color: var(--dds-color-surface-default);
   border: 1px solid;
+  height: 100%;
   @media (prefers-reduced-motion: no-preference) {
     transition:
       border-color var(--dds-motion-micro-state),
@@ -4426,18 +4433,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 
 /* src/components/ToggleButton/ToggleButton.module.css */
 .ToggleButton_content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
   box-sizing: border-box;
   cursor: pointer;
-  width: -moz-fit-content;
-  width: fit-content;
-  border: 1px solid var(--dds-color-border-default);
-  border-radius: var(--dds-border-radius-rounded);
-  background-color: var(--dds-color-surface-default);
-  color: var(--dds-color-text-default);
   @media (prefers-reduced-motion: no-preference) {
     transition:
       border-color var(--dds-motion-micro-state),
@@ -4449,22 +4446,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     background-color: var(--dds-color-surface-hover-default);
   }
 }
-.ToggleButton_small {
-  gap: var(--dds-spacing-sm-icon-text-gap);
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
-}
-.ToggleButton_xsmall {
-  gap: var(--dds-spacing-xs-icon-text-gap);
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
-}
-.ToggleButton_content--with-icon {
-  &.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);
   background-color: var(--dds-color-surface-action-resting);