@postnord/pn-marketweb-components 4.3.6 → 4.3.7

package/umd/modules/@postnord/web-components/collection/components/input/pn-multiselect/pn-multiselect.css

@@ -147,18 +147,7 @@ pn-multiselect .pn-multiselect-button:focus-visible {
   background-color: #ffffff;
   border-color: #005d92;
 }
-pn-multiselect .pn-multiselect-button > pn-icon > svg > path {
-  transition-property: transform;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-}
-@media (prefers-reduced-motion: reduce) {
-  pn-multiselect .pn-multiselect-button > pn-icon > svg > path {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-pn-multiselect .pn-multiselect-button > pn-icon > svg > path {
+pn-multiselect .pn-multiselect-button > pn-icon svg > path {
   transition-delay: 0.2s;
   transform-origin: center;
   transform: rotate(0deg);
@@ -169,7 +158,7 @@ pn-multiselect .pn-multiselect-button:hover {
 pn-multiselect .pn-multiselect-button[aria-expanded=true] {
   background-color: #effbff;
 }
-pn-multiselect .pn-multiselect-button[aria-expanded=true] > pn-icon > svg > path {
+pn-multiselect .pn-multiselect-button[aria-expanded=true] > pn-icon svg > path {
   transform: rotate(180deg);
   transition-delay: 0s;
 }
@@ -291,7 +280,7 @@ pn-multiselect .pn-multiselect-options {
   list-style: none;
   margin: 0;
   padding: 0;
-  width: var(--pn-select-options-width);
+  width: clamp(100%, 95vw, 20em);
   max-height: var(--pn-select-max-height);
   overflow-y: auto;
   overflow-x: hidden;
@@ -299,6 +288,7 @@ pn-multiselect .pn-multiselect-options {
   flex-direction: column;
   visibility: hidden;
   transform-origin: top left;
+  transform: translateX(var(--pn-select-options-offset, 0));
 }
 pn-multiselect .pn-multiselect-options[data-open] {
   visibility: visible;
@@ -405,6 +395,7 @@ pn-multiselect .pn-multiselect-chip-button {
   border: 0;
   background-color: unset;
   border-radius: 50%;
+  -webkit-tap-highlight-color: transparent;
   transition-property: background-color;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
@@ -415,9 +406,6 @@ pn-multiselect .pn-multiselect-chip-button {
     transition-delay: 0s;
   }
 }
-pn-multiselect .pn-multiselect-chip-button {
-  -webkit-tap-highlight-color: transparent;
-}
 pn-multiselect .pn-multiselect-chip-button:hover {
   background-color: #8eddf9;
 }
@@ -428,7 +416,7 @@ pn-multiselect .pn-multiselect-no-results {
   margin: 0;
   padding: 0.75em;
 }
-pn-multiselect .pn-multiselect-description {
+pn-multiselect .pn-multiselect-text {
   color: #5e554a;
   font-size: 0.875em;
   font-weight: 400;
@@ -437,7 +425,10 @@ pn-multiselect .pn-multiselect-description {
   flex-direction: column;
   gap: 0.25em;
 }
-pn-multiselect .pn-multiselect-description[role=alert] {
+pn-multiselect .pn-multiselect-text[hidden] {
+  display: none;
+}
+pn-multiselect .pn-multiselect-text[role=alert] {
   color: #a70707;
 }
 
@@ -486,7 +477,7 @@ pn-multiselect .pn-multiselect-option-input:disabled + .pn-multiselect-option-co
   background-color: #f3f2f2;
   border-color: #969087;
 }
-pn-multiselect .pn-multiselect-option-input:disabled + .pn-multiselect-option-content path {
+pn-multiselect .pn-multiselect-option-input:disabled + .pn-multiselect-option-content .pn-icon-svg path {
   fill: #5e554a;
 }
 pn-multiselect .pn-multiselect-option-input:disabled:checked + .pn-multiselect-option-content {
@@ -498,7 +489,7 @@ pn-multiselect .pn-multiselect-option-input:disabled:checked + .pn-multiselect-o
   background-color: #969087;
   border-color: #969087;
 }
-pn-multiselect .pn-multiselect-option-input:disabled:checked + .pn-multiselect-option-content path {
+pn-multiselect .pn-multiselect-option-input:disabled:checked + .pn-multiselect-option-content .pn-icon-svg path {
   fill: #5e554a;
 }
 pn-multiselect .pn-multiselect-option-input[aria-invalid=true] + .pn-multiselect-option-content .pn-multiselect-option-checkbox {
@@ -642,6 +633,7 @@ pn-multiselect .pn-multiselect-option-checkbox svg polyline {
   stroke: #ffffff;
   stroke-linecap: round;
   stroke-dasharray: 23;
+  transition-delay: 0s;
   transition-property: stroke-dashoffset;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
@@ -652,9 +644,6 @@ pn-multiselect .pn-multiselect-option-checkbox svg polyline {
     transition-delay: 0s;
   }
 }
-pn-multiselect .pn-multiselect-option-checkbox svg polyline {
-  transition-delay: 0s;
-}
 pn-multiselect .pn-multiselect-option-checkbox svg polyline.pn-multiselect-option-checkbox-checkmark-path {
   stroke-dashoffset: 23;
 }