@postnord/pn-marketweb-components 2.0.74 → 2.0.76

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

@@ -4,6 +4,8 @@ export class PnCheckbox {
     this.disabled = false;
     this.checked = false;
     this.indeterminate = false;
+    this.ariaLabel = null;
+    this.ariaDescribedby = null;
   }
   handlechange() {
     this.indeterminate = false;
@@ -22,7 +24,7 @@ export class PnCheckbox {
   }
   render() {
     return (h(Host, null,
-      h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }),
+      h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, "aria-describedby": this.ariaDescribedby }),
       h("label", { htmlFor: this.checkboxid, class: "pn-checkbox" },
         h("svg", { 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" }),
@@ -140,6 +142,42 @@ export class PnCheckbox {
       "attribute": "indeterminate",
       "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"
+    },
+    "ariaDescribedby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-describedby",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get elementRef() { return "hostElement"; }

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

@@ -18,8 +18,8 @@ pn-choice-chip input {
 pn-choice-chip label {
   display: block;
   padding: 0.4rem 0.8rem;
-  border: 0.1rem solid #005D92;
-  color: #005D92;
+  border: 0.1rem solid #005d92;
+  color: #005d92;
   border-radius: 0.8rem;
   text-align: center;
   cursor: pointer;
@@ -27,27 +27,27 @@ pn-choice-chip label {
 }
 
 pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip, pn-choice-chip input[type=checkbox]:indeterminate + label.pn-choice-chip {
-  background: #005D92;
+  background: #005d92;
   color: #fff;
 }
 pn-choice-chip input[type=checkbox]:hover + label.pn-choice-chip {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 pn-choice-chip input[type=checkbox]:focus + label.pn-choice-chip, pn-choice-chip input[type=checkbox]:active + label.pn-choice-chip {
-  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-choice-chip input[type=checkbox]:active + label.pn-choice-chip {
-  background: #8EDDF9;
+  background: #8eddf9;
 }
 pn-choice-chip input[type=checkbox]:disabled + label.pn-choice-chip {
-  background-color: #D3CECB;
+  background-color: #d3cecb;
 }
 pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip:hover {
-  background: #0D234B;
+  background: #0d234b;
   color: #fff;
 }
 pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip:active {
-  background: #00A0D6;
-  border: 0.1rem solid #00A0D6;
+  background: #00a0d6;
+  border: 0.1rem solid #00a0d6;
   color: #fff;
 }

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

@@ -10,7 +10,9 @@ export default {
     disableWeekends: false,
     minDate: '2021-01-01',
     maxDate: '2023-12-31',
-    language: 'en'
+    language: 'en',
+    placeholder: 'YYYY-MM-DD',
+    endPlaceholder: 'YYYY-MM-DD'
   },
   argTypes: {
     disableWeekends: {
@@ -33,6 +35,9 @@ export default {
     },
     end: {
       control: 'text'
+    },
+    endPlaceholder: {
+      name: 'end placeholder'
     }
   }
 };

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

@@ -1,18 +1,18 @@
 pn-date-picker {
   position: relative;
-  display: block;
+  display: inline-block;
 }
 pn-date-picker .weekday {
-  color: #5E554A;
+  color: #5e554a;
   font-weight: 500;
 }
 pn-date-picker .calendar-wrapper {
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 0.5em;
   position: absolute;
+  max-width: 22em;
   top: 115%;
   width: 100%;
-  max-width: 22em;
   left: 0;
   overflow: hidden;
   z-index: 5;
@@ -29,7 +29,7 @@ pn-date-picker .calendar-wrapper[data-open] {
   transition-delay: 0s;
 }
 pn-date-picker .calendar-wrapper[data-open] .calendar {
-  max-height: 80vh;
+  max-height: min(30em, 80vh);
   transition-delay: 0s;
 }
 pn-date-picker .calendar {
@@ -50,12 +50,12 @@ pn-date-picker .calendar::-webkit-scrollbar-track {
   background-color: #fff;
 }
 pn-date-picker .calendar::-webkit-scrollbar-thumb {
-  background-color: #005D92;
+  background-color: #005d92;
   border-radius: 1em;
   border: 0.25em solid #fff;
 }
 pn-date-picker .calendar::-webkit-scrollbar-thumb:hover {
-  background-color: #0D234B;
+  background-color: #0d234b;
 }
 pn-date-picker .calendar::-webkit-scrollbar-button {
   display: none;
@@ -110,14 +110,14 @@ pn-date-picker .day[data-today]::after {
   left: 50%;
   transform: translateX(-50%);
   border-radius: 50%;
-  background: #005D92;
+  background: #005d92;
 }
 pn-date-picker .day[data-selected=start][data-today]::after, pn-date-picker .day[data-selected=end][data-today]::after, pn-date-picker .day[data-selected=single][data-today]::after {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 pn-date-picker .day[data-selected=start]::before, pn-date-picker .day[data-selected=end]::before, pn-date-picker .day[data-selected=single]::before {
   border-radius: 50%;
-  background-color: #005D92;
+  background-color: #005d92;
 }
 pn-date-picker .day[data-selected=start]::before {
   border-top-right-radius: 0;
@@ -127,7 +127,7 @@ pn-date-picker .day[data-selected=start], pn-date-picker .day[data-selected=end]
   color: white;
 }
 pn-date-picker .day[data-selected=between]::before {
-  background-color: #E0F8FF;
+  background-color: #e0f8ff;
   border-radius: 0;
 }
 pn-date-picker .day[data-selected=end][data-selected=end]::before {
@@ -135,30 +135,29 @@ pn-date-picker .day[data-selected=end][data-selected=end]::before {
   border-bottom-left-radius: 0;
 }
 pn-date-picker .day:focus, pn-date-picker .day:hover {
-  background-color: #EFFBFF;
+  background-color: #effbff;
 }
 
 /* -----------------INPUT FIELDS------------------ */
 pn-date-picker .pn-date-input-container {
-  background: #FFFFFF;
+  background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1em;
   width: 100%;
-  max-width: 22em;
   padding: 0.5em 0.5em 0.5em 0.75em;
   border-radius: 0.5em;
   border: 0.1rem solid #969087;
   transition: box-shadow 0.15s;
 }
 pn-date-picker .pn-date-input-container:focus-within {
-  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.2em #005D92;
+  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.2em #005d92;
 }
 pn-date-picker .pn-date-input-container .divider {
   width: 0.15em;
   height: 1.15em;
-  background: #005D92;
+  background: #005d92;
   border-radius: 1em;
   flex: 0 0 auto;
 }
@@ -194,11 +193,11 @@ pn-date-picker .pn-date-input-container button.pn-date-calendar {
   padding: 0.2em;
 }
 pn-date-picker .pn-date-input-container button.pn-date-calendar:hover {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 pn-date-picker .pn-date-input-container button.pn-date-calendar:focus {
-  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.2em #005D92;
-  background: #E0F8FF;
+  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.2em #005d92;
+  background: #e0f8ff;
 }
 
 /* -----------------/INPUT FIELDS------------------ */

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

@@ -16,9 +16,9 @@ export class PnDatePicker {
     this.range = false;
     this.disableWeekends = false;
     /** Placeholder for the input field (this will be start date if you have a ranged date picker) */
-    this.placeholder = 'YYYY-MM-DD';
+    this.placeholder = '';
     /** Placeholder for end date */
-    this.endPlaceholder = 'YYYY-MM-DD';
+    this.endPlaceholder = '';
     this.currentState = 'idle';
     this.week = [];
     this.months = [];
@@ -28,6 +28,7 @@ export class PnDatePicker {
     this.selectionMade = false;
     this.years = [];
     this.today = new Date();
+    this.shouldScroll = true;
     /* -----------------STATE MACHINE LOGIC------------------ */
     this.machine = {
       initial: 'idle',
@@ -85,15 +86,15 @@ export class PnDatePicker {
     this.setLanguage();
     this.setYears();
   }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      const date = this.startDate && this.startDate.getTime() ? this.startDate : new Date();
-      const year = date.getFullYear();
-      const month = this.months[date.getMonth()];
-      const monthEl = document.querySelector(`[data-year="${year}"] [data-month="${month}"]`);
-      monthEl.scrollIntoView();
-    });
-  }
+  // componentDidLoad() {
+  //   requestAnimationFrame(() => {
+  //     const date = this.startDate && this.startDate.getTime() ? this.startDate : new Date();
+  //     const year = date.getFullYear();
+  //     const month = this.months[date.getMonth()];
+  //     const monthEl = this.hostElement.querySelector(`[data-year="${year}"] [data-month="${month}"]`);
+  //     monthEl.scrollIntoView();
+  //   });
+  // }
   /* -----------------/LIFE CYCLE HOOKS------------------ */
   /* -----------------UTILS------------------ */
   makeSelection() {
@@ -115,6 +116,8 @@ export class PnDatePicker {
     this.setDateFromOutside();
   }
   openHandler() {
+    if (this.shouldScroll)
+      this.scrollToMonth();
     if (this.open) {
       document.addEventListener('click', this.handleGlobalClick);
       return;
@@ -123,6 +126,14 @@ export class PnDatePicker {
       this.endDate = null;
     document.removeEventListener('click', this.handleGlobalClick);
   }
+  scrollToMonth() {
+    this.shouldScroll = false;
+    const date = this.startDate && this.startDate.getTime() ? this.startDate : new Date();
+    const year = date.getFullYear();
+    const month = this.months[date.getMonth()];
+    const monthEl = this.hostElement.querySelector(`[data-year="${year}"] [data-month="${month}"]`);
+    monthEl.scrollIntoView();
+  }
   clickHandler(e) {
     var _a;
     const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
@@ -450,7 +461,7 @@ export class PnDatePicker {
       },
       "attribute": "placeholder",
       "reflect": false,
-      "defaultValue": "'YYYY-MM-DD'"
+      "defaultValue": "''"
     },
     "endPlaceholder": {
       "type": "string",
@@ -468,7 +479,7 @@ export class PnDatePicker {
       },
       "attribute": "end-placeholder",
       "reflect": false,
-      "defaultValue": "'YYYY-MM-DD'"
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {

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

@@ -72,10 +72,10 @@ export const translations = {
     ],
   },
   WEEK: {
-    en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    sv: ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör'],
-    da: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
-    fi: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
-    no: ['Sø.', 'Ma.', 'Ti.', 'On.', 'To.', 'Fr.', 'Lø.'],
+    en: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    sv: ['Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör', 'Sön'],
+    da: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
+    fi: ['Ma', 'Ti', 'Ke', 'To', 'Pe', 'La', 'Su'],
+    no: ['Ma.', 'Ti.', 'On.', 'To.', 'Fr.', 'Lø.', 'Sø'],
   },
 };

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 {