@otto-de/b2b-core-components 1.16.0 → 1.18.0

package/dist/collection/components/card/card.js

@@ -26,10 +26,10 @@ export class CardComponent {
             return 0;
     }
     render() {
-        return (h(Host, { key: '6a39ac26f49ce2814abb2e2a5f0628d3af9e3ffb', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'f9fd7890d85a2c69fb416cacd1038a3e50ba8ce2', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
                 'b2b-card': true,
                 'b2b-card--disabled': this.disabled,
-            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '19775bd829936bbe3fa1aa8d58dde18f6d602228' })));
+            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '1258394d2cf138a0625c70af043d4590a45262db' })));
     }
     static get is() { return "b2b-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/checkbox/checkbox.js

@@ -65,14 +65,14 @@ export class CheckboxComponent {
         }
     }
     render() {
-        return (h(Host, { key: '15500c41147539bda4b3a5355fbaae206711172e', onClick: this.onClick }, h("div", { key: '285ad6cca81447d099870f0faec211d5cd7111de', class: {
+        return (h(Host, { key: 'f9b0a3ab1446715b218115bb5097d7de57ae71eb', onClick: this.onClick }, h("div", { key: 'da9c2edb1f46996f8e03aedf17a52f4b2c822f0d', class: {
                 'b2b-checkbox': true,
                 'b2b-checkbox--error': this.invalid && !this.disabled,
                 'b2b-checkbox--disabled': this.disabled || this.groupDisabled,
                 'b2b-checkbox--checked': this.checked,
                 'b2b-checkbox--standalone': this.standalone,
                 'b2b-checkbox--indeterminate': this.indeterminate,
-            } }, h("div", { key: '74319860db88f14c2f56b6e7ed4f5e797433dd5b', class: "b2b-checkbox-items" }, this.renderIcon(), h("input", { key: '68a6c2c855731d1e5887bc3cbac14d4ed51468c9', class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: '29a99d41fca9d51aea5ac58feb92910f10d58e46', class: "b2b-checkbox-items" }, this.renderIcon(), h("input", { key: 'a05a1ba84a49d775a887e393ade4a5c2ce993273', class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     static get is() { return "b2b-checkbox"; }

package/dist/collection/components/checkbox-group/checkbox-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/checkbox-group/checkbox-group.js

@@ -65,11 +65,11 @@ export class CheckboxGroupComponent {
         }
     }
     render() {
-        return (h(Host, { key: '3b6da1303cdfd1bdddbc1f31323e50986ac7b087' }, h("div", { key: 'c626a8341b17c86efd58e6c9da73b44257b8cd9a', class: {
+        return (h(Host, { key: 'a13345395b22ac918fcb5b4186f5bb3057af8ea4' }, h("div", { key: 'b388a4b209535c47c07b2720392abeb7191b0809', class: {
                 'b2b-checkbox-group': true,
                 'b2b-checkbox-group--error': this.invalid && !this.disabled,
                 [`b2b-checkbox-group--${this.alignment}`]: true,
-            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '881df0a66e9479f2eab63d0387fc4d4f4ee37295' }, h("div", { key: '936511055623583956fc980f62497cdc01a9dc21', class: "b2b-checkbox-group__options" }, h("slot", { key: 'd096cf78944f253e07d0b852c38db6c486681eb3' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '33ed6a29fc0742e786d7f82c93dea89fdf0127b8' }, h("div", { key: 'da3884cbef485588a36ea6dd6c92f0dc0bdff138', class: "b2b-checkbox-group__options" }, h("slot", { key: 'c4f2ef006d5c8f04e45315526d076ca69a49026e' }))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     static get is() { return "b2b-checkbox-group"; }

package/dist/collection/components/chip/chip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/chip/chip.js

@@ -22,11 +22,11 @@ export class B2bChipComponent {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '2d25f08431074055d7da97f361739e9dbcb19a01' }, h("div", { key: 'b852bebe68a3d80d7264f7212fe220f7ffd3232f', class: {
+        return (h(Host, { key: 'feff4de384d9ae0d55cf1683915bb15e865211a0' }, h("div", { key: '79b6ec48ae1a4c142ca8363670ecee5ddd0703cb', class: {
                 'b2b-chip': true,
                 [`b2b-chip--${this.type}`]: !this.disabled && this.type !== undefined,
                 'b2b-chip--disabled': this.disabled,
-            } }, h("span", { key: '4f5cc17ec7edfad96f8bf7fb2eb3d88368627ede', class: {
+            } }, h("span", { key: 'daa9ee334f78e1b9d3baa363ba7f6e941f3571dc', class: {
                 'b2b-chip__label': true,
                 [`b2b-chip__label--${this.labelStyle}`]: this.labelStyle !== undefined,
                 'b2b-chip__label--close-button': this.hasCloseButton,

package/dist/collection/components/{calendar/calendar-days-header.css → date-picker/date-picker-days-header.css}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -215,14 +215,14 @@
   font-family: ObcIcons;
   src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
 }
-:root .b2b-calendar-days-header,
-:host .b2b-calendar-days-header {
+:root .b2b-date-picker-days-header,
+:host .b2b-date-picker-days-header {
   display: grid;
   grid-template-columns: repeat(7, 1fr); /* Display days in a grid */
   padding: 0 var(--b2b-size-40) 0 var(--b2b-size-40);
 }
-:root .b2b-calendar-days-header .b2b-calendar-day,
-:host .b2b-calendar-days-header .b2b-calendar-day {
+:root .b2b-date-picker-days-header .b2b-date-picker-day,
+:host .b2b-date-picker-days-header .b2b-date-picker-day {
   width: var(--b2b-size-90);
   height: var(--b2b-size-55);
   border-radius: 5px;

package/dist/collection/components/date-picker/date-picker-days-header.js

@@ -0,0 +1,29 @@
+import { h, Host } from "@stencil/core";
+import { Weekdays } from "./date-picker.types";
+export class B2bDatePickerDaysHeader {
+    constructor() {
+        this.displayWeekDays = () => {
+            let renderWeekDays = [];
+            Weekdays.forEach(day => {
+                renderWeekDays.push(h("div", { class: "b2b-date-picker-day" }, day));
+            });
+            return renderWeekDays;
+        };
+    }
+    render() {
+        return (h(Host, { key: 'dd19aa810becf64b496f66534c7e81cff239507a' }, h("div", { key: '75a38a70e3152892458ab53116f9ed44487aaba6', class: "b2b-date-picker-days-header" }, this.displayWeekDays())));
+    }
+    static get is() { return "b2b-date-picker-days-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker-days-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker-days-header.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/{calendar/calendar-days.css → date-picker/date-picker-days.css}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -215,16 +215,15 @@
   font-family: ObcIcons;
   src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
 }
-.b2b-calendar-days {
+.b2b-date-picker-days {
   display: grid;
   grid-template-columns: repeat(7, 1fr); /* Display days in a grid */
   padding: 0 var(--b2b-size-40) 0 var(--b2b-size-40);
 }
-.b2b-calendar-days .b2b-calendar-day {
+.b2b-date-picker-days .b2b-date-picker-day {
   width: var(--b2b-size-90);
   height: var(--b2b-size-90);
   border-radius: 5px;
-  text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -232,30 +231,30 @@
   color: var(--b2b-color-black-100);
   font-size: var(--b2b-size-35);
 }
-.b2b-calendar-days .b2b-calendar-day:hover {
+.b2b-date-picker-days .b2b-date-picker-day:hover {
   cursor: pointer;
 }
-.b2b-calendar-days .b2b-calendar-day:hover, .b2b-calendar-days .b2b-calendar-day:focus {
+.b2b-date-picker-days .b2b-date-picker-day:hover, .b2b-date-picker-days .b2b-date-picker-day:focus {
   background-color: var(--b2b-color-hover);
 }
-.b2b-calendar-days .b2b-calendar-day--disabled {
-  width: var(--b2b-size-90);
-  height: var(--b2b-size-55);
+.b2b-date-picker-days .b2b-date-picker-day--disabled {
   border-radius: 5px;
-  padding: 5px 0;
-  text-align: center;
-  pointer-events: none;
   color: var(--b2b-color-grey-200);
+  pointer-events: none;
 }
-.b2b-calendar-days .b2b-calendar-day--today {
+.b2b-date-picker-days .b2b-date-picker-day--today {
   border: 1px solid var(--b2b-color-black-50);
   box-sizing: border-box;
+  width: 100%;
+  height: 100%;
 }
-.b2b-calendar-days .b2b-calendar-day--selected {
+.b2b-date-picker-days .b2b-date-picker-day--selected {
   background-color: var(--b2b-color-black-100);
   color: var(--b2b-color-white-100);
   pointer-events: none;
+  width: 100%;
+  height: 100%;
 }
-.b2b-calendar-days .b2b-calendar-day--focussed {
+.b2b-date-picker-days .b2b-date-picker-day--focussed {
   background-color: var(--b2b-color-hover);
 }

package/dist/collection/components/{calendar/calendar-days.js → date-picker/date-picker-days.js}

@@ -10,7 +10,7 @@ const keys = {
     TAB: 'Tab',
     ENTER: 'Enter',
 };
-export class B2bCalendarDays {
+export class B2bDatePickerDays {
     constructor() {
         this.today = new Date();
         this.todayWithoutTime = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate());
@@ -19,17 +19,17 @@ export class B2bCalendarDays {
             return dates.find(el => el.getAttribute('tabindex') === '0');
         };
         this.getAllDates = () => {
-            return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-calendar-day'));
+            return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-day'));
         };
         this.focusCurrentDate = (date) => {
             const dates = this.getAllDates();
             dates.forEach(element => {
-                if (date.className.includes('b2b-calendar-day--disabled')) {
+                if (date.className.includes('b2b-date-picker-day--disabled')) {
                     return;
                 }
                 element.setAttribute('tabindex', element === date ? '0' : '-1');
             });
-            if (!date.className.includes('b2b-calendar-day--disabled')) {
+            if (!date.className.includes('b2b-date-picker-day--disabled')) {
                 date.focus();
             }
         };
@@ -54,7 +54,7 @@ export class B2bCalendarDays {
             /** Remove focus from the clicked element */
             event.target.blur();
         };
-        this.renderCalendarDays = () => {
+        this.renderDatePickerDays = () => {
             let daysInMonth = new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate(); /** Get total number of days in the current month */
             let actualFirstDayOfMonth = new Date(this.selectedYear, this.selectedMonth, 1).getDay(); /** Get the day of the week (0-6) of the first day of the month */
             let firstDayOfMonth = actualFirstDayOfMonth == 0 ? 6 : actualFirstDayOfMonth - 1;
@@ -68,10 +68,10 @@ export class B2bCalendarDays {
                 let givenDate = new Date(this.selectedYear, this.selectedMonth, i);
                 let disabled = this.isDisabledDate(givenDate);
                 days.push(h("div", { class: {
-                        'b2b-calendar-day': true,
-                        'b2b-calendar-day--disabled': disabled,
-                        'b2b-calendar-day--today': givenDate.toDateString() === this.todayWithoutTime.toDateString(),
-                        'b2b-calendar-day--selected': new Date(this.selectedYear, this.selectedMonth, this.selectedDay).toDateString() === givenDate.toDateString(),
+                        'b2b-date-picker-day': true,
+                        'b2b-date-picker-day--disabled': disabled,
+                        'b2b-date-picker-day--today': givenDate.toDateString() === this.todayWithoutTime.toDateString(),
+                        'b2b-date-picker-day--selected': new Date(this.selectedYear, this.selectedMonth, this.selectedDay).toDateString() === givenDate.toDateString(),
                     }, onClick: event => {
                         this.b2bDateSelected.emit({
                             selectedDate: new Date(this.selectedYear, this.selectedMonth, i),
@@ -91,6 +91,25 @@ export class B2bCalendarDays {
         this.disableWeekends = false;
         this.disabled = false;
     }
+    componentDidLoad() {
+        this.setFocusOnSelectedDayOrFirstDay();
+    }
+    setFocusOnSelectedDayOrFirstDay() {
+        const dates = this.getAllDates();
+        if (dates.length > 0) {
+            if (this.today.getMonth() !== this.selectedMonth) {
+                if (this.selectedDay !== undefined) {
+                    this.focusCurrentDate(dates[this.selectedDay - 1]);
+                }
+                else {
+                    this.focusCurrentDate(dates[0]);
+                }
+            }
+        }
+    }
+    componentWillLoad() {
+        this.setFocusOnSelectedDayOrFirstDay();
+    }
     handleKeyDown(event) {
         event.preventDefault();
         const dates = this.getAllDates();
@@ -100,9 +119,6 @@ export class B2bCalendarDays {
                 if (this.today.getMonth() === this.selectedMonth) {
                     index = this.today.getDate() - 1;
                 }
-                else {
-                    index = 0;
-                }
                 break;
             case keys.ARROW_LEFT:
                 index = dates.indexOf(this.getCurrentDate()) - 1;
@@ -118,7 +134,7 @@ export class B2bCalendarDays {
                 break;
             case keys.ENTER:
                 index = dates.indexOf(this.getCurrentDate());
-                if (dates[index].classList.contains('b2b-calendar-day--disabled')) {
+                if (dates[index].classList.contains('b2b-date-picker-day--disabled')) {
                     return;
                 }
                 this.b2bDateSelected.emit({
@@ -127,7 +143,7 @@ export class B2bCalendarDays {
                 break;
             case keys.ESC:
                 this.resetAllDates();
-                this.b2bCalendarEscape.emit();
+                this.b2bDatePickerEscape.emit();
                 break;
             default:
                 return;
@@ -147,18 +163,18 @@ export class B2bCalendarDays {
         });
     }
     render() {
-        return (h(Host, { key: 'f20522bb68f1e1363a9706efbe63c95a79e8320d' }, h("div", { key: 'da20afc55bb0a6f511f0d1d316e39e6d3386b345', class: "b2b-calendar-days" }, this.renderCalendarDays())));
+        return (h(Host, { key: '932793a700279c0064a3a36c08d75517861f2420' }, h("div", { key: '98179650a1f3a4e4af1a8ddee3073c48cc46beab', class: "b2b-date-picker-days" }, this.renderDatePickerDays())));
     }
-    static get is() { return "b2b-calendar-days"; }
+    static get is() { return "b2b-date-picker-days"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["calendar-days.scss"]
+            "$": ["date-picker-days.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["calendar-days.css"]
+            "$": ["date-picker-days.css"]
         };
     }
     static get properties() {
@@ -277,8 +293,8 @@ export class B2bCalendarDays {
     }
     static get events() {
         return [{
-                "method": "b2bCalendarEscape",
-                "name": "b2b-calendar-escape",
+                "method": "b2bDatePickerEscape",
+                "name": "b2b-date-picker-escape",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -292,8 +308,8 @@ export class B2bCalendarDays {
                     "references": {
                         "EscapePressed": {
                             "location": "import",
-                            "path": "../../utils/interfaces/interaction.interface",
-                            "id": "src/utils/interfaces/interaction.interface.d.ts::EscapePressed"
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::EscapePressed"
                         }
                     }
                 }

package/dist/collection/components/{calendar/calendar-header.css → date-picker/date-picker-header.css}

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Fri, 08 Nov 2024 12:23:19 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -218,16 +218,16 @@
 :root,
 :host {
 }
-:root .b2b-calendar-header,
-:host .b2b-calendar-header {
+:root .b2b-date-picker-header,
+:host .b2b-date-picker-header {
   display: flex;
   box-sizing: border-box;
   padding: var(--b2b-size-30) var(--b2b-size-60) var(--b2b-size-40) var(--b2b-size-60);
 }
-:root .b2b-calendar-nav--left,
-:root .b2b-calendar-nav--right,
-:host .b2b-calendar-nav--left,
-:host .b2b-calendar-nav--right {
+:root .b2b-date-picker-nav--left,
+:root .b2b-date-picker-nav--right,
+:host .b2b-date-picker-nav--left,
+:host .b2b-date-picker-nav--right {
   height: var(--b2b-size-80);
   width: var(--b2b-size-80);
   background-color: var(--b2b-color-grey-25);
@@ -236,17 +236,17 @@
   cursor: pointer;
   border-radius: var(--b2b-size-7);
 }
-:root .b2b-calendar-nav--left:hover, :root .b2b-calendar-nav--left:focus,
-:root .b2b-calendar-nav--right:hover,
-:root .b2b-calendar-nav--right:focus,
-:host .b2b-calendar-nav--left:hover,
-:host .b2b-calendar-nav--left:focus,
-:host .b2b-calendar-nav--right:hover,
-:host .b2b-calendar-nav--right:focus {
+:root .b2b-date-picker-nav--left:hover, :root .b2b-date-picker-nav--left:focus,
+:root .b2b-date-picker-nav--right:hover,
+:root .b2b-date-picker-nav--right:focus,
+:host .b2b-date-picker-nav--left:hover,
+:host .b2b-date-picker-nav--left:focus,
+:host .b2b-date-picker-nav--right:hover,
+:host .b2b-date-picker-nav--right:focus {
   background-color: var(--b2b-color-hover);
 }
-:root .b2b-calendar-month,
-:host .b2b-calendar-month {
+:root .b2b-date-picker-month,
+:host .b2b-date-picker-month {
   height: var(--b2b-size-80);
   width: 82px;
   padding: var(--b2b-size-10) var(--b2b-size-20);
@@ -257,14 +257,16 @@
   font-weight: var(--b2b-size-headline-100);
   border-radius: var(--b2b-size-7);
   font-size: var(--b2b-size-40);
+  color: var(--b2b-color-black-100);
 }
-:root .b2b-calendar-month:hover, :root .b2b-calendar-month:focus,
-:host .b2b-calendar-month:hover,
-:host .b2b-calendar-month:focus {
+:root .b2b-date-picker-month:hover, :root .b2b-date-picker-month:focus,
+:host .b2b-date-picker-month:hover,
+:host .b2b-date-picker-month:focus {
+  cursor: pointer;
   background-color: var(--b2b-color-hover);
 }
-:root .b2b-calendar-year,
-:host .b2b-calendar-year {
+:root .b2b-date-picker-year,
+:host .b2b-date-picker-year {
   height: var(--b2b-size-80);
   width: 82px;
   padding: var(--b2b-size-10) var(--b2b-size-20);
@@ -275,9 +277,11 @@
   font-weight: var(--b2b-size-headline-100);
   border-radius: var(--b2b-size-7);
   font-size: var(--b2b-size-40);
+  color: var(--b2b-color-black-100);
 }
-:root .b2b-calendar-year:hover, :root .b2b-calendar-year:focus,
-:host .b2b-calendar-year:hover,
-:host .b2b-calendar-year:focus {
+:root .b2b-date-picker-year:hover, :root .b2b-date-picker-year:focus,
+:host .b2b-date-picker-year:hover,
+:host .b2b-date-picker-year:focus {
+  cursor: pointer;
   background-color: var(--b2b-color-hover);
 }

package/dist/collection/components/date-picker/date-picker-header.e2e.js

@@ -0,0 +1,38 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Date-Picker-Header', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-date-picker-header></b2b-date-picker-header>`);
+    });
+    it('should emit previous button click event', async () => {
+        const previousMonthSpy = await page.spyOnEvent('b2b-date-picker-previous-month');
+        const clickableInputComponent = await page.find('b2b-date-picker-header >>> .b2b-date-picker-nav--left');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(previousMonthSpy).toHaveReceivedEvent();
+    });
+    it('should emit next button click event', async () => {
+        const nextMonthSpy = await page.spyOnEvent('b2b-date-picker-next-month');
+        const clickableInputComponent = await page.find('b2b-date-picker-header >>> .b2b-date-picker-nav--right');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(nextMonthSpy).toHaveReceivedEvent();
+    });
+    it('should emit months date picker view selected event', async () => {
+        const viewChangedSpy = await page.spyOnEvent('b2b-date-picker-view-changed');
+        const clickableInputComponent = await page.find('b2b-date-picker-header >>> .b2b-date-picker-month');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(viewChangedSpy).toHaveReceivedEvent();
+        expect(viewChangedSpy).toHaveReceivedEventDetail({ value: 'Months' });
+    });
+    it('should emit years date picker view selected event', async () => {
+        const viewChangedSpy = await page.spyOnEvent('b2b-date-picker-view-changed');
+        const clickableInputComponent = await page.find('b2b-date-picker-header >>> .b2b-date-picker-year');
+        await clickableInputComponent.click();
+        page.waitForChanges();
+        expect(viewChangedSpy).toHaveReceivedEvent();
+        expect(viewChangedSpy).toHaveReceivedEventDetail({ value: 'Years' });
+    });
+});