@postnord/pn-marketweb-components 2.0.73 → 2.0.75

package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker-old/pn-date-picker-old.css

@@ -5,8 +5,8 @@ pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container
 pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container input:focus,
 pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container input:hover {
   outline: none;
-  border: 0.1rem solid #005D92;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+  border: 0.1rem solid #005d92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;
 }
 pn-date-picker.open-datepicker .datepicker-calendar-container {
   display: block;
@@ -19,10 +19,10 @@ pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container
 pn-date-picker.invalid .datepicker-container .datepicker-input-container input,
 pn-date-picker.invalid .datepicker-container .datepicker-input-container input:focus,
 pn-date-picker.invalid .datepicker-container .datepicker-input-container input:hover {
-  border: 0.1rem solid #A70707;
+  border: 0.1rem solid #a70707;
 }
 pn-date-picker.invalid .datepicker-container .datepicker-input-container input:focus {
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707;
 }
 pn-date-picker .datepicker-container {
   position: relative;
@@ -42,7 +42,7 @@ pn-date-picker .datepicker-container .datepicker-input-container span {
 pn-date-picker .datepicker-container .datepicker-input-container input {
   width: 100%;
   box-sizing: border-box;
-  border: 0.1rem solid #5E554A;
+  border: 0.1rem solid #5e554a;
   background-color: #fff;
   padding: 0.75em;
   color: #000000;
@@ -64,11 +64,11 @@ pn-date-picker .datepicker-container .datepicker-input-container input {
   outline: none;
 }
 pn-date-picker .datepicker-container .datepicker-input-container input:hover {
-  border-color: #00A0D6;
+  border-color: #00a0d6;
 }
 pn-date-picker .datepicker-container .datepicker-input-container input:disabled {
-  background-color: #F3F2F2;
-  border-color: #D3CECB;
+  background-color: #f3f2f2;
+  border-color: #d3cecb;
   color: #969087;
 }
 pn-date-picker .datepicker-container .datepicker-input-container > pn-icon,
@@ -107,7 +107,7 @@ pn-date-picker .datepicker-calendar-container {
   left: 0;
   width: 29.6rem;
   padding: 1.6rem 1.6rem 0.735rem 1.6rem;
-  border: 0.1rem solid #D3CECB;
+  border: 0.1rem solid #d3cecb;
   box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);
   background-color: white;
   z-index: 9999;

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

@@ -1,8 +1,8 @@
 pn-file-upload.hover .pn-file-upload-container .pn-dropzone-container {
-  background-color: #E0F8FF;
+  background-color: #e0f8ff;
 }
 pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container {
-  background-color: #D3CECB;
+  background-color: #d3cecb;
 }
 pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container, pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container:after, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container:after {
   background-image: linear-gradient(to right, #969087 50%, transparent 0%);
@@ -16,10 +16,10 @@ pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container a, pn-fi
   cursor: default;
 }
 pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container:hover, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container:hover {
-  background-color: #D3CECB;
+  background-color: #d3cecb;
 }
 pn-file-upload.invalid .pn-file-upload-container .pn-dropzone-container .headline a, pn-file-upload.disabled .pn-file-upload-container .pn-dropzone-container .headline a {
-  color: #5E554A;
+  color: #5e554a;
 }
 pn-file-upload .pn-file-upload-input {
   display: none;
@@ -27,11 +27,11 @@ pn-file-upload .pn-file-upload-input {
 pn-file-upload .pn-file-upload-container .pn-dropzone-container {
   text-align: center;
   position: relative;
-  background-image: linear-gradient(to right, #00A0D6 50%, transparent 0%);
+  background-image: linear-gradient(to right, #00a0d6 50%, transparent 0%);
   background-position: top;
   background-size: 16px 1px;
   background-repeat: repeat-x;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
 }
 pn-file-upload .pn-file-upload-container .pn-dropzone-container:after {
   content: " ";
@@ -40,18 +40,18 @@ pn-file-upload .pn-file-upload-container .pn-dropzone-container:after {
   height: 1px;
   bottom: 0;
   left: 0;
-  background-image: linear-gradient(to right, #00A0D6 50%, transparent 0%);
+  background-image: linear-gradient(to right, #00a0d6 50%, transparent 0%);
   background-position: bottom;
   background-size: 16px 1px;
   background-repeat: repeat-x;
 }
 pn-file-upload .pn-file-upload-container .pn-dropzone-container:hover {
-  background-color: #E0F8FF;
+  background-color: #e0f8ff;
 }
 pn-file-upload .pn-file-upload-container .pn-dropzone-container .pn-dropzone-inner {
   padding: 25px 60px;
   position: relative;
-  background-image: linear-gradient(to bottom, #00A0D6 50%, transparent 0%);
+  background-image: linear-gradient(to bottom, #00a0d6 50%, transparent 0%);
   background-position: left;
   background-size: 1px 16px;
   background-repeat: repeat-y;
@@ -63,7 +63,7 @@ pn-file-upload .pn-file-upload-container .pn-dropzone-container .pn-dropzone-inn
   height: 100%;
   top: 0;
   right: 0;
-  background-image: linear-gradient(to bottom, #00A0D6 50%, transparent 0%);
+  background-image: linear-gradient(to bottom, #00a0d6 50%, transparent 0%);
   background-position: right;
   background-size: 1px 16px;
   background-repeat: repeat-y;
@@ -77,7 +77,7 @@ pn-file-upload .pn-file-upload-container .pn-dropzone-container .headline {
   margin-bottom: 8px;
 }
 pn-file-upload .pn-file-upload-container .pn-dropzone-container .headline a {
-  color: #005D92;
+  color: #005d92;
 }
 pn-file-upload .pn-file-upload-container .pn-dropzone-container .description {
   color: #969087;
@@ -102,7 +102,7 @@ pn-file-upload .files-list .files-list-item > pn-icon {
   cursor: pointer;
 }
 pn-file-upload .files-list .files-list-item-error {
-  color: #5E554A;
+  color: #5e554a;
   font-size: 14px;
   font-weight: 300;
   line-height: 20px;

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

@@ -10,7 +10,7 @@ pn-input input {
   -webkit-font-smoothing: antialiased;
   outline: none;
   border-radius: 0.8rem;
-  border: 0.1rem solid #5E554A;
+  border: 0.1rem solid #5e554a;
   transition: box-shadow 0.15s, border 0.15s;
   color: #000000;
   width: 100%;
@@ -20,14 +20,14 @@ pn-input input::placeholder {
   font-weight: normal;
 }
 pn-input input:focus {
-  border: 0.1rem solid #005D92;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+  border: 0.1rem solid #005d92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;
 }
 pn-input input:hover {
-  border: 0.1rem solid #00A0D6;
+  border: 0.1rem solid #00a0d6;
 }
 pn-input input:disabled {
-  background: #F3F2F2;
+  background: #f3f2f2;
   border: none;
 }
 
@@ -42,7 +42,7 @@ pn-input > .input-container > button {
   background: none;
   border: none;
   cursor: pointer;
-  color: #005D92;
+  color: #005d92;
   padding: 0.6rem;
   border-radius: 0.8rem;
   outline: none;
@@ -50,13 +50,13 @@ pn-input > .input-container > button {
   border: 0.1rem solid transparent;
 }
 pn-input > .input-container > button:focus {
-  border: 0.1rem solid #005D92;
+  border: 0.1rem solid #005d92;
 }
 pn-input > .input-container > button:hover {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 pn-input > .input-container > button:active {
-  background: #005D92;
+  background: #005d92;
   color: white;
 }
 pn-input > .input-container > svg {
@@ -73,14 +73,14 @@ pn-input > .input-container > svg polyline {
   transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);
 }
 pn-input > .input-container > svg.pn-input-checkmark polyline {
-  stroke: #005E41;
+  stroke: #005e41;
   stroke-dashoffset: 23;
   stroke-dasharray: 23;
 }
 
 pn-input .label-container {
   margin-bottom: 0.4rem;
-  color: #5E554A;
+  color: #5e554a;
   font-size: 0.875em;
   display: flex;
   justify-content: space-between;
@@ -101,50 +101,50 @@ pn-input small {
   font-size: max(.6em, 1.2rem);
   transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);
   margin-top: 0.5em;
-  color: #5E554A;
+  color: #5e554a;
 }
 
 pn-input.error {
-  color: #A70707;
+  color: #a70707;
 }
 pn-input.error label {
-  color: #A70707;
+  color: #a70707;
 }
 pn-input.error small {
-  color: #A70707;
+  color: #a70707;
 }
 pn-input.error small > pn-icon {
   margin-right: 0.25em;
 }
 pn-input.error input {
-  border: 0.1rem solid #A70707;
+  border: 0.1rem solid #a70707;
 }
 pn-input.error input:focus {
-  border: 0.1rem solid #A70707;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;
+  border: 0.1rem solid #a70707;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707;
 }
 pn-input.error input:hover {
-  border: 0.1rem solid #F06365;
+  border: 0.1rem solid #f06365;
 }
 
 pn-input.valid {
-  color: #005E41;
+  color: #005e41;
 }
 pn-input.valid .input-container > svg.pn-input-checkmark polyline {
   stroke-dashoffset: 0;
 }
 pn-input.valid label {
-  color: #005E41;
+  color: #005e41;
 }
 pn-input.valid input {
-  border: 0.1rem solid #005E41;
+  border: 0.1rem solid #005e41;
 }
 pn-input.valid input:focus {
-  border: 0.1rem solid #005E41;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41;
+  border: 0.1rem solid #005e41;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41;
 }
 pn-input.valid input:hover {
-  border: 0.1rem solid #5EC584;
+  border: 0.1rem solid #5ec584;
 }
 
 pn-input.password input {

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

@@ -22,6 +22,7 @@ export class Pninput {
     this.maxlength = '';
     this.min = null;
     this.max = null;
+    this.ariaLabel = null;
     this.showText = false;
   }
   getTextMessage() {
@@ -61,7 +62,7 @@ export class Pninput {
         this.label && h("label", { htmlFor: this.inputid }, this.label),
         parseInt(this.maxlength) > 0 && (h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)))),
       h("div", { class: "input-container" },
-        h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength, min: this.min, max: this.max }),
+        h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: e => this.setVal(e), maxlength: this.maxlength, min: this.min, max: this.max, "aria-lavel": this.ariaLabel }),
         h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" },
           h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })),
         this.type === 'password' && !this.disabled && (h("button", { onClick: () => this.toggleTextVisibility() }, "Show"))),
@@ -364,6 +365,24 @@ export class Pninput {
       "attribute": "max",
       "reflect": false,
       "defaultValue": "null"
+    },
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-label",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get states() { return {

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

@@ -16,14 +16,14 @@ pn-nav-dropdown > button {
   overflow: hidden;
   display: flex;
   align-items: center;
-  color: #005D92;
+  color: #005d92;
   font-weight: normal;
 }
 pn-nav-dropdown > button:focus {
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;
 }
 pn-nav-dropdown > button:hover, pn-nav-dropdown > button:focus {
-  background: #EFFBFF;
+  background: #effbff;
 }
 
 .pn-nav-dropdown-label > pn-icon {
@@ -44,7 +44,7 @@ pn-nav-dropdown > button:hover, pn-nav-dropdown > button:focus {
   max-width: min(95vw, 40em);
   max-height: 80vh;
   z-index: 10;
-  background: #FFFFFF;
+  background: #ffffff;
 }
 
 pn-nav-dropdown.nav-dropdown-right .nav-dropdown-content-container {
@@ -76,7 +76,7 @@ pn-nav-dropdown .pn-ripple {
   animation: ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);
   position: absolute;
   border-radius: 50%;
-  background: #005D92;
+  background: #005d92;
   transform: translate(-50%, -50%) scale(0);
   opacity: 0.1;
   pointer-events: none;

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

@@ -13,8 +13,8 @@ pn-option pn-checkbox {
   margin-right: 0.5em;
 }
 pn-option:hover, pn-option:focus {
-  background-color: #E0F8FF;
+  background-color: #e0f8ff;
 }
 pn-option:focus {
-  box-shadow: 0 0.1rem 0 0 #005D92, 0 -0.1rem 0 0 #005D92;
+  box-shadow: 0 0.1rem 0 0 #005d92, 0 -0.1rem 0 0 #005d92;
 }

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

@@ -14,7 +14,7 @@ pn-radio-button input[type=radio] + label {
 }
 pn-radio-button input[type=radio] + label .pn-radio-outer {
   background: #fff;
-  border: 0.1em solid #D3CECB;
+  border: 0.1em solid #d3cecb;
   border-radius: 50%;
   height: 1.5em;
   width: 1.5em;
@@ -28,7 +28,7 @@ pn-radio-button input[type=radio] + label .pn-radio-inner {
   transform: scale(0);
   height: 1em;
   width: 1em;
-  background-color: #005D92;
+  background-color: #005d92;
   border-radius: 50%;
   transform-origin: center center;
   transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);
@@ -37,14 +37,14 @@ pn-radio-button input[type=radio]:checked + label .pn-radio-inner {
   transform: scale(1);
 }
 pn-radio-button input[type=radio]:checked + label .pn-radio-outer {
-  border: 0.1rem solid #005D92;
+  border: 0.1rem solid #005d92;
 }
 pn-radio-button input[type=radio]:focus + label .pn-radio-outer, pn-radio-button input[type=radio]:active + label .pn-radio-outer {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.3rem #005d92;
 }
 pn-radio-button input[type=radio]:hover + label .pn-radio-outer {
-  border: 0.1rem solid #005D92;
-  background: #E0F8FF;
+  border: 0.1rem solid #005d92;
+  background: #e0f8ff;
 }
 pn-radio-button input[type=radio]:disabled + label {
   cursor: not-allowed;
@@ -52,7 +52,7 @@ pn-radio-button input[type=radio]:disabled + label {
 pn-radio-button input[type=radio]:disabled + label .pn-radio-outer {
   cursor: not-allowed;
   border: 0.1rem solid #969087;
-  background-color: #D3CECB;
+  background-color: #d3cecb;
 }
 pn-radio-button input[type=radio]:disabled + label .pn-radio-inner {
   cursor: not-allowed;

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

@@ -16,15 +16,15 @@ pn-radio-tile > label {
   cursor: pointer;
   overflow: hidden;
   position: relative;
-  background: #FFFFFF;
+  background: #ffffff;
   padding: 0.5em 1em;
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   gap: 0.5em;
-  color: #005D92;
+  color: #005d92;
   font-weight: 500;
-  border: 0.1em solid #D3CECB;
+  border: 0.1em solid #d3cecb;
   transition-property: box-shadow, background, border;
   transition-duration: 0.15s;
 }
@@ -34,16 +34,16 @@ pn-radio-tile > label > [slot=illustration] {
   max-height: 2.5em;
 }
 pn-radio-tile > label:hover {
-  background: #EFFBFF;
-  border: 0.1em solid #00A0D6;
+  background: #effbff;
+  border: 0.1em solid #00a0d6;
 }
 
 pn-radio-tile input[type=radio]:focus:checked + label {
-  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem #005D92, 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;
+  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem #005d92, 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;
 }
 
 pn-radio-tile input[type=radio]:checked + label {
-  border: 0.1em solid #005D92;
-  background: #EFFBFF;
+  border: 0.1em solid #005d92;
+  background: #effbff;
   box-shadow: 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;
 }

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

@@ -26,7 +26,7 @@ pn-search-field input {
   -webkit-font-smoothing: antialiased;
   outline: none;
   border-radius: 3em;
-  border: 0.1rem solid #5E554A;
+  border: 0.1rem solid #5e554a;
   transition: box-shadow 0.15s, border 0.15s;
   color: #000000;
   width: 100%;
@@ -39,14 +39,14 @@ pn-search-field input::placeholder {
   font-weight: normal;
 }
 pn-search-field input:focus {
-  border: 0.1rem solid #005D92;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+  border: 0.1rem solid #005d92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;
 }
 pn-search-field input:hover {
-  border: 0.1rem solid #00A0D6;
+  border: 0.1rem solid #00a0d6;
 }
 pn-search-field input:disabled {
-  background: #F3F2F2;
+  background: #f3f2f2;
   border: none;
 }
 
@@ -73,7 +73,7 @@ pn-search-field > .input-container button {
   transform: translate(100%, -50%);
   background: none;
   border: none;
-  color: #005D92;
+  color: #005d92;
   padding: 0.3rem;
   margin: 0;
   font-size: 0.875em;
@@ -87,13 +87,13 @@ pn-search-field > .input-container button.clear, pn-search-field > .input-contai
   cursor: pointer;
 }
 pn-search-field > .input-container button:focus {
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;
 }
 pn-search-field > .input-container button:hover, pn-search-field > .input-container button:focus {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 pn-search-field > .input-container button:active {
-  background: #005D92;
+  background: #005d92;
 }
 pn-search-field > .input-container button:active pn-icon svg,
 pn-search-field > .input-container button:active pn-icon svg path {

package/umd/modules/@postnord/web-components/collection/components/input/pn-search-field/pn-search-field.js

@@ -16,6 +16,7 @@ export class PnSearchField {
     this.button = '';
     /** Light instead of dark search button */
     this.light = false;
+    this.ariaLabel = null;
   }
   inputHandler() {
     this.update.emit(this.value);
@@ -49,14 +50,14 @@ export class PnSearchField {
   render() {
     return (h(Host, { class: this.getClassNames() },
       h("div", { class: "input-container" },
-        h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: (e) => this.emitSearch(e), onInput: (e) => this.setVal(e) }),
+        h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: e => this.emitSearch(e), onInput: e => this.setVal(e), "aria-label": this.ariaLabel }),
         h("div", { class: "button-container" },
-          (this.button === 'none' || this.button === 'icon-inline') && (h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: (e) => this.emitSearch(e), "aria-label": "search", title: "search" },
+          (this.button === 'none' || this.button === 'icon-inline') && (h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: e => this.emitSearch(e), "aria-label": "search", title: "search", type: "button" },
             h("pn-icon", { symbol: "search", color: "blue700" }))),
-          this.button !== 'icon-inline' && (h("button", { class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput() },
+          this.button !== 'icon-inline' && (h("button", { class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput(), type: "button" },
             h("pn-icon", { symbol: "close-small", color: "blue700" }))),
           this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", null)))),
-      this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { onClick: (e) => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label))));
+      this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { onClick: e => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label))));
   }
   static get is() { return "pn-search-field"; }
   static get originalStyleUrls() { return {
@@ -263,6 +264,24 @@ export class PnSearchField {
       "attribute": "light",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-label",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get events() { return [{

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/controller/pn-segmented-control.css

@@ -14,7 +14,7 @@ pn-segmented-control {
   border-radius: 3em;
   min-height: 3em;
   padding: 0.25em;
-  background: #F3F2F2;
+  background: #f3f2f2;
   position: relative;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -34,12 +34,12 @@ pn-segmented-control {
 }
 .pn-segmented-control > .pn-sc-bg.pn-sc-active {
   box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
-  border: 0.1rem solid #005D92;
-  background: #FFFFFF;
+  border: 0.1rem solid #005d92;
+  background: #ffffff;
   z-index: 1;
 }
 .pn-segmented-control > .pn-sc-bg.pn-sc-hover {
-  background: #E0F8FF;
+  background: #e0f8ff;
   opacity: 0;
   border: 0.5rem solid transparent;
   z-index: 0;
@@ -52,7 +52,7 @@ pn-segmented-control {
 }
 pn-segmented-control:focus-within,
 pn-segmented-control:active {
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;
 }
 
 /*---------------------------------------ARROWS-------------------------------------------*/
@@ -73,7 +73,7 @@ pn-segmented-control .pn-sc-arrows svg {
   width: 1.5em;
 }
 pn-segmented-control .pn-sc-arrows svg path {
-  fill: #005D92;
+  fill: #005d92;
 }
 pn-segmented-control .pn-sc-arrows > * {
   transition: transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;