@norges-domstoler/dds-components 21.9.2 → 21.11.0

package/dist/index.css

@@ -347,6 +347,9 @@
 :where(.typographyStyles_legend) {
   padding-inline: 0;
 }
+:where(.typographyStyles_caption) {
+  text-align: left;
+}
 :where(.typographyStyles_caption--withMargins) {
   display: table-caption;
 }
@@ -2223,20 +2226,17 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--dds-spacing-x0-25);
-}
-.DateInput_date-input--medium {
-  padding-inline-start: var(--dds-spacing-x0-5);
-  padding-inline-end: var(--dds-spacing-x1);
+  gap: var(--dds-spacing-x0-5);
 }
-.DateInput_date-input--small {
-  padding-inline-start: var(--dds-spacing-x0-5);
-  padding-inline-end: var(--dds-spacing-x0-75);
+.DateInput_date-input--medium--clearable {
+  padding-inline-end: var(--dds-spacing-x0-5);
 }
-.DateInput_date-input--xsmall {
-  padding-inline-start: var(--dds-spacing-x0-25);
+.DateInput_date-input--small--clearable {
   padding-inline-end: var(--dds-spacing-x0-5);
 }
+.DateInput_date-input--xsmall--clearable {
+  padding-inline-end: var(--dds-spacing-x0-25);
+}
 .DateInput_date-segment-container {
   display: flex;
   flex-direction: row;
@@ -2248,6 +2248,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: max-content;
   font-variant-numeric: tabular-nums;
   outline: none;
+  font-family: var(--dds-font-family-monospace);
   &:focus {
     background-color: var(--dds-color-surface-action-selected);
     color: var(--dds-color-text-on-action);
@@ -2258,6 +2259,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: 100%;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
+  font-family: var(--dds-font-family-monospace);
   .DateInput_segment:focus & {
     color: var(--dds-color-text-on-action);
   }
@@ -2267,45 +2269,27 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   height: 0;
   width: 0;
 }
-.DateInput_icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--dds-spacing-x0-25);
-  color: var(--dds-color-icon-default);
+.DateInput_clear-button {
+  align-self: center;
 }
-.DateInput_icon-wrapper--disabled {
-  color: var(--dds-color-icon-subtle);
+.DateInput_clear-button--inactive {
+  visibility: hidden;
 }
-.DateInput_icon-wrapper--readonly {
-  color: var(--dds-color-icon-medium);
+.DateInput_icon,
+.DateInput_popover-button {
+  margin-block: -3px;
 }
-.DateInput_icon-wrapper--small {
-  margin-block: calc(0px - var(--dds-icon-size-medium));
+.DateInput_icon-wrapper--disabled,
+.DateInput_popover-button:disabled {
+  color: var(--dds-color-icon-subtle);
 }
-.DateInput_icon-wrapper--medium {
-  margin-block: calc(0px - var(--dds-icon-size-small));
+.DateInput_icon-wrapper--readonly,
+.DateInput_popover-button--readonly:disabled {
+  color: var(--dds-color-icon-medium);
 }
 .DateInput_popover-button {
-  cursor: pointer;
-  border: 0;
-  transition: 0.2s;
-  background: transparent;
-  border-radius: var(--dds-border-radius-button);
-  &:not(:disabled):not(.DateInput_disabled):hover,
-  &:not(:disabled):not(.DateInput_disabled):active {
-    background-color: var(--dds-color-surface-hover-default);
-    color: var(--dds-color-icon-action-hover);
-  }
-  &:disabled,
-  &.DateInput_disabled {
-    cursor: not-allowed;
-    outline: none;
-    color: var(--dds-color-text-subtle);
-  }
-}
-.DateInput_popover-button--readonly:disabled {
-  color: var(--dds-color-text-medium);
+  padding: 1px;
+  margin-inline-start: -1px;
 }
 .DateInput_popover {
   z-index: var(--dds-zindex-popover);
@@ -2377,6 +2361,29 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   text-decoration: underline line-through;
 }
 
+/* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
+.InlineIconButton_button {
+  display: inline-flex;
+  border-radius: var(--dds-border-radius-button);
+  color: var(--dds-color-icon-default);
+  &:hover:not(:disabled) {
+    background-color: var(--dds-color-surface-hover-default);
+    color: var(--dds-color-icon-action-hover);
+  }
+  &:not(:focus-visible) {
+    outline: none;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      var(--dds-focus-transition);
+  }
+}
+
 /* src/components/helpers/Input/Input.module.css */
 .Input_container {
   position: relative;
@@ -2493,7 +2500,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 :where(.Input_input-group__absolute-element) {
   position: absolute;
   top: 50%;
-  transform: translate(0, -50%);
+  transform: translateY(-50%);
   z-index: var(--dds-zindex-absolute-element);
   color: var(--dds-color-icon-default);
 }
@@ -2762,23 +2769,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   margin-left: auto;
 }
 
-/* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
-.InlineIconButton_button {
-  display: inline-flex;
-  border-radius: var(--dds-border-radius-button);
-  color: var(--dds-color-icon-default);
-  &:hover {
-    background-color: var(--dds-color-surface-hover-default);
-    color: var(--dds-color-icon-action-hover);
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      background-color 0.2s,
-      color 0.2s,
-      var(--dds-focus-transition);
-  }
-}
-
 /* src/components/Tooltip/Tooltip.module.css */
 .Tooltip_container {
   width: -moz-fit-content;
@@ -3334,17 +3324,15 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   padding-right: var(--dds-spacing-x4);
 }
 .NativeSelect_icon {
-  position: absolute;
-  top: 50%;
-  transform: translate(-150%, -50%);
+  right: var(--dds-spacing-x0-5);
   align-self: center;
   pointer-events: none;
 }
 .NativeSelect_clear-button--small {
-  right: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small));
+  right: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small));
 }
 .NativeSelect_clear-button--medium {
-  right: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium));
+  right: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-medium));
 }
 
 /* src/components/PhoneInput/PhoneInput.module.css */