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

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

@@ -0,0 +1,152 @@
+import { h, Host, } from "@stencil/core";
+import { DatePickerView, Months } from "./date-picker.types";
+export class B2bDatePickerHeader {
+    constructor() {
+        this.selectedMonth = undefined;
+        this.selectedYear = undefined;
+    }
+    render() {
+        return (h(Host, { key: '94e86997d702f0f584d01df3d616375d6b0e1e78' }, h("div", { key: '2f480665affbe91d54b3c1b43ab70b736e74f32f', class: "b2b-date-picker-header" }, h("button", { key: 'a5cac5d8d2d79c27f03b33eff51a83602952c50e', class: "b2b-date-picker-nav--left", onClick: this.b2bDatePickerPreviousMonth.emit, onMouseOut: event => {
+                event.target.blur();
+            }, "aria-label": "previous month" }, h("b2b-icon", { key: '49bb5d17c454536e5bd7752eec149be1d4fb000d', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: 'a8976d272ca701970a2a688c95a1adb0a5477385', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
+                this.b2bDatePickerViewChanged.emit({
+                    value: DatePickerView.Months,
+                });
+            }, onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.b2bDatePickerViewChanged.emit({
+                        value: DatePickerView.Months,
+                    });
+                }
+            } }, Months[this.selectedMonth]), h("b2b-headline", { key: '25919a00e48f4c31684f6f16300e3265bc3d2ccc', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
+                this.b2bDatePickerViewChanged.emit({
+                    value: DatePickerView.Years,
+                });
+            }, onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.b2bDatePickerViewChanged.emit({
+                        value: DatePickerView.Years,
+                    });
+                }
+            } }, this.selectedYear), h("button", { key: '4118ef94bc8f91ce7731efaa973542c90e8125ca', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
+                event.target.blur();
+            }, "aria-label": "next month" }, h("b2b-icon", { key: 'f182b6ef7ab465d12d4821d54d7a346a74df2dce', icon: "b2b_icon-arrow-right", clickable: true })))));
+    }
+    static get is() { return "b2b-date-picker-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedMonth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal selected month"
+                },
+                "attribute": "selected-month",
+                "reflect": false
+            },
+            "selectedYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal selected year"
+                },
+                "attribute": "selected-year",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bDatePickerPreviousMonth",
+                "name": "b2b-date-picker-previous-month",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted for previous month click*"
+                },
+                "complexType": {
+                    "original": "PreviousMonth",
+                    "resolved": "PreviousMonth<any>",
+                    "references": {
+                        "PreviousMonth": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::PreviousMonth"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bDatePickerNextMonth",
+                "name": "b2b-date-picker-next-month",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted for next month click*"
+                },
+                "complexType": {
+                    "original": "NextMonth",
+                    "resolved": "NextMonth<any>",
+                    "references": {
+                        "NextMonth": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::NextMonth"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bDatePickerViewChanged",
+                "name": "b2b-date-picker-view-changed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted for changing the date picker view *"
+                },
+                "complexType": {
+                    "original": "DatePickerViewChangedEventDetail",
+                    "resolved": "DatePickerViewChangedEventDetail<DatePickerView>",
+                    "references": {
+                        "DatePickerViewChangedEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::DatePickerViewChangedEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:06:26 GMT
+ * Generated on Thu, 24 Oct 2024 12:35:00 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 Thu, 24 Oct 2024 12:35:01 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -215,50 +215,35 @@
   font-family: ObcIcons;
   src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
 }
-:host .b2b-calendar {
-  position: relative;
+:host .b2b-date-picker-months {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* Display months in a grid */
+  padding: var(--b2b-size-40) var(--b2b-size-40) 0 var(--b2b-size-40);
+  column-gap: var(--b2b-size-25);
+  row-gap: var(--b2b-size-25);
 }
-:host .b2b-calendar-input-wrapper {
+:host .b2b-date-picker-month {
+  height: var(--b2b-size-80);
+  border-radius: 5px;
+  text-align: center;
   display: flex;
-  box-sizing: border-box;
-  height: var(--b2b-size-90);
-  border: var(--b2b-size-1) solid var(--b2b-color-black-100);
-  justify-content: flex-end;
-  border-radius: var(--b2b-size-7);
-  padding: var(--b2b-size-15) var(--b2b-size-20);
-  max-width: 600px;
-  background-color: var(--b2b-color-white-100);
-}
-:host .b2b-calendar-input-wrapper--opened {
-  border-radius: var(--b2b-size-7) var(--b2b-size-7) 0 0;
-}
-:host .b2b-calendar-selected-date {
-  flex: 1;
-  align-self: center;
-  font-size: var(--b2b-size-35);
-}
-:host .b2b-calendar-label {
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--b2b-font-weight-normal);
+  background-color: var(--b2b-color-grey-25);
   font-size: var(--b2b-size-35);
   color: var(--b2b-color-black-100);
-  line-height: var(--b2b-size-copy-line-height-100);
-  margin-bottom: var(--b2b-size-5);
 }
-:host .b2b-calendar-body {
-  border: var(--b2b-size-1) solid var(--b2b-color-black-100);
-  border-top: none;
-  width: 300px;
-  box-sizing: border-box;
-  padding-bottom: var(--b2b-size-40);
-  background-color: var(--b2b-color-white-100);
+:host .b2b-date-picker-month:hover {
+  cursor: pointer;
 }
-:host .b2b-calendar-body--hidden {
-  display: none;
+:host .b2b-date-picker-month:hover, :host .b2b-date-picker-month:focus {
+  background-color: var(--b2b-color-hover);
 }
-:host .b2b-icons {
-  display: flex;
-  margin-top: var(--b2b-size-5);
-  align-items: center;
+:host .b2b-date-picker-month--selected {
+  background-color: var(--b2b-color-black-100);
+  color: var(--b2b-color-white-100);
 }
-:host .b2b-close-icon {
-  display: block;
+:host .b2b-date-picker-month--selected:hover, :host .b2b-date-picker-month--selected:focus {
+  background-color: var(--b2b-color-black-100);
 }

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

@@ -0,0 +1,39 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { Months } from "./date-picker.types";
+describe('B2B-Date-Picker-Months', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it('should list all months', async () => {
+        await page.setContent(`<b2b-date-picker-months></b2b-date-picker-months>`);
+        const monthElements = (await page.findAll('b2b-date-picker-months >>> .b2b-date-picker-month'));
+        expect(monthElements.length).toBe(12);
+        monthElements.forEach((monthElement, index) => {
+            expect(monthElement.textContent).toBe(Months[index]);
+        });
+    });
+    it('should show the selected month', async () => {
+        await page.setContent(`<b2b-date-picker-months selected-month="4"></b2b-date-picker-months>`);
+        const selectedMonth = await page.find('b2b-date-picker-months >>> .b2b-date-picker-month--selected');
+        expect(selectedMonth.textContent).toBe(Months[4]);
+    });
+    it('should emit month selected event when new month is selected', async () => {
+        await page.setContent(`<b2b-date-picker-months selected-month="10"></b2b-date-picker-months>`);
+        const monthSelectedSpy = await page.spyOnEvent('b2b-date-picker-month-selected');
+        const monthElement = await page.find('b2b-date-picker-months >>> .b2b-date-picker-month:nth-child(4)');
+        await monthElement.click();
+        page.waitForChanges();
+        expect(monthSelectedSpy).toHaveReceivedEvent();
+        expect(monthSelectedSpy).toHaveReceivedEventDetail({ value: 3 });
+    });
+    it('should emit month selected event when selecting the same month', async () => {
+        await page.setContent(`<b2b-date-picker-months selected-month="3"></b2b-date-picker-months>`);
+        const monthSelectedSpy = await page.spyOnEvent('b2b-date-picker-month-selected');
+        const monthElement = await page.find('b2b-date-picker-months >>> .b2b-date-picker-month:nth-child(4)');
+        await monthElement.click();
+        page.waitForChanges();
+        expect(monthSelectedSpy).toHaveReceivedEvent();
+        expect(monthSelectedSpy).toHaveReceivedEventDetail({ value: 3 });
+    });
+});

package/dist/collection/components/date-picker/date-picker-months.js

@@ -0,0 +1,143 @@
+import { h, Host, } from "@stencil/core";
+import { Months } from "./date-picker.types";
+const keys = {
+    ARROW_UP: 'ArrowUp',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_LEFT: 'ArrowLeft',
+    ENTER: 'Enter',
+};
+export class B2bDatePickerMonths {
+    constructor() {
+        this.getAllMonths = () => {
+            return Array.from(this.host.shadowRoot.querySelectorAll('.b2b-date-picker-month'));
+        };
+        this.getCurrentMonth = () => {
+            const months = this.getAllMonths();
+            return months.find(el => el.getAttribute('tabindex') === '0');
+        };
+        this.focusCurrentMonth = (month) => {
+            const months = this.getAllMonths();
+            months.forEach(el => {
+                el.setAttribute('tabindex', el === month ? '0' : '-1');
+            });
+            month.focus();
+        };
+        this.renderDatePickerMonths = () => {
+            let months = [];
+            for (let i = 0; i < 12; i++) {
+                months.push(h("div", { class: {
+                        'b2b-date-picker-month': true,
+                        'b2b-date-picker-month--selected': this.selectedMonth === i,
+                    }, onClick: () => this.b2bDatePickerMonthSelected.emit({ value: i }), tabIndex: this.selectedMonth === i ? 0 : -1, "aria-label": `Month ${i + 1}` }, Months[i]));
+            }
+            return months;
+        };
+        this.selectedMonth = undefined;
+    }
+    handleKeyDown(event) {
+        event.preventDefault();
+        let index = this.selectedMonth;
+        const months = this.getAllMonths();
+        let currentMonth = this.getCurrentMonth();
+        switch (event.key) {
+            case keys.ARROW_LEFT:
+                index = months.indexOf(currentMonth) - 1;
+                break;
+            case keys.ARROW_RIGHT:
+                index = months.indexOf(currentMonth) + 1;
+                break;
+            case keys.ARROW_UP:
+                index = months.indexOf(currentMonth) - 3;
+                break;
+            case keys.ARROW_DOWN:
+                index = months.indexOf(currentMonth) + 3;
+                break;
+            case keys.ENTER:
+                index = months.indexOf(currentMonth);
+                this.b2bDatePickerMonthSelected.emit({
+                    value: index,
+                });
+                break;
+            default:
+                return;
+        }
+        if (index < 0) {
+            index = months.length - 1;
+        }
+        if (index > months.length - 1) {
+            index = 0;
+        }
+        this.focusCurrentMonth(months[index]);
+    }
+    render() {
+        return (h(Host, { key: '7b55c5f9286780dd257cee856bd9cf9354675585' }, h("div", { key: '36efeb799ad77f4e1a56980511ff4caba519a5cb', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+    }
+    static get is() { return "b2b-date-picker-months"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker-months.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker-months.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedMonth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal selected month"
+                },
+                "attribute": "selected-month",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bDatePickerMonthSelected",
+                "name": "b2b-date-picker-month-selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on selecting month*"
+                },
+                "complexType": {
+                    "original": "MonthSelectedEventDetail",
+                    "resolved": "MonthSelectedEventDetail<number>",
+                    "references": {
+                        "MonthSelectedEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::MonthSelectedEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/date-picker/date-picker-years.css

@@ -0,0 +1,252 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 24 Oct 2024 12:35:00 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-hover: #e6f4ff;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Thu, 24 Oct 2024 12:35:01 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-hover: #e6f4ff;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host .b2b-date-picker-years {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* Display years in a grid */
+  padding: var(--b2b-size-30) var(--b2b-size-60) 0 var(--b2b-size-60);
+  column-gap: var(--b2b-size-25);
+  row-gap: var(--b2b-size-25);
+  height: 250px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+:host .b2b-date-picker-year {
+  height: var(--b2b-size-80);
+  border-radius: 5px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--b2b-font-weight-normal);
+  background-color: var(--b2b-color-grey-25);
+  font-size: var(--b2b-size-35);
+  color: var(--b2b-color-black-100);
+}
+:host .b2b-date-picker-year:hover {
+  cursor: pointer;
+}
+:host .b2b-date-picker-year:hover, :host .b2b-date-picker-year:focus {
+  background-color: var(--b2b-color-hover);
+}
+:host .b2b-date-picker-year--selected {
+  background-color: var(--b2b-color-black-100);
+  color: var(--b2b-color-white-100);
+}
+:host .b2b-date-picker-year--selected:hover, :host .b2b-date-picker-year--selected:focus {
+  background-color: var(--b2b-color-black-100);
+}