@norges-domstoler/dds-components 21.6.0 → 21.7.0

package/dist/index.css

@@ -637,6 +637,7 @@
 /* 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 {
@@ -2765,6 +2766,23 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   padding-bottom: var(--dds-spacing-x0-5);
 }
 
+/* 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;
@@ -2913,6 +2931,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .InlineEdit_inline-input {
   width: 100%;
   padding: var(--dds-spacing-x0-25);
+  border-width: 1px;
   border-color: transparent;
   background-color: transparent;
   border-radius: var(--dds-border-radius-input);
@@ -2922,20 +2941,36 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
       border-color 0.2s,
       var(--dds-focus-transition);
   }
-  &:hover:enabled:-moz-read-write:not(:focus) {
-    border-color: transparent;
-    box-shadow: none;
-    background-color: var(--dds-color-surface-hover-default);
-  }
-  &:hover:enabled:read-write:not(:focus) {
-    border-color: transparent;
-    box-shadow: none;
-    background-color: var(--dds-color-surface-hover-default);
-  }
   &:focus {
     background-color: var(--dds-color-surface-default);
   }
 }
+.InlineEdit_inline-select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-overflow: ellipsis;
+  width: 100%;
+  padding-right: var(--dds-spacing-x1-5);
+}
+.InlineEdit_inline-select--with-clear-button {
+  padding-right: var(--dds-spacing-x3);
+}
+.InlineEdit_inline-input:hover:enabled:-moz-read-write:not(:focus) {
+  border-color: transparent;
+  box-shadow: none;
+  background-color: var(--dds-color-surface-hover-default);
+}
+.InlineEdit_inline-input:hover:enabled:read-write:not(:focus),
+.InlineEdit_inline-select:hover:enabled:not(:focus) {
+  border-color: transparent;
+  box-shadow: none;
+  background-color: var(--dds-color-surface-hover-default);
+}
+.InlineEdit_inline-input--danger {
+  border-color: var(--dds-color-border-danger);
+  box-shadow: 0 0 0 1px var(--dds-color-border-danger);
+}
 .InlineEdit_inline-input--with-icon {
   padding-left: var(--dds-spacing-x2);
 }
@@ -2951,6 +2986,17 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     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 */
 .InternalHeader_bar {
@@ -3574,8 +3620,6 @@ select:hover {
   top: 50%;
   transform: translate(0, -50%);
   right: var(--dds-spacing-x1);
-  width: var(--dds-icon-size-medium);
-  height: var(--dds-icon-size-medium);
 }
 .Search_suggestions {
   z-index: var(--dds-zindex-dropdown);