@otto-de/b2b-core-components 1.32.3 → 1.34.0

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

@@ -65,15 +65,17 @@ export class CheckboxComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'f9b0a3ab1446715b218115bb5097d7de57ae71eb', onClick: this.onClick }, h("div", { key: 'da9c2edb1f46996f8e03aedf17a52f4b2c822f0d', class: {
+        const hasError = this.invalid && !this.disabled && !this.groupDisabled;
+        const showHint = this.hint && !hasError;
+        const showError = this.error && hasError;
+        return (h(Host, { key: '57bfa6bc2e41794f9b0ead465d82538baafd33a0', onClick: this.onClick }, h("div", { key: '15577f773e6f608a797e19eb45b2b116bb1ab17b', class: {
                 'b2b-checkbox': true,
-                'b2b-checkbox--error': this.invalid && !this.disabled,
+                'b2b-checkbox--error': hasError,
                 '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: 'dab97157c87fbc3a9599355113b930039afeb1d0', class: "b2b-checkbox__items" }, this.renderIcon(), h("input", { key: '253f9206dc69ce6c404c7e4b3c260da6772d2786', 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 }, h("slot", { name: "label" }, 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)) : (''))));
+            } }, h("div", { key: '30fd2e78afcbf126a3a12c61b3467cb04b989d0f', class: "b2b-checkbox__items" }, this.renderIcon(), h("input", { key: '98fc87c0de77356a85181adec5ca151f93be6da2', 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.groupDisabled }, h("slot", { name: "label" }, this.label)))), showHint && h("span", null, this.hint), showError && h("span", null, this.error))));
     }
     static get is() { return "b2b-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,16 +6,9 @@ export class CheckboxGroupComponent {
         };
         this.toggleAllDisabled = () => {
             let nodes = this.getChildNodes();
-            if (this.disabled) {
-                nodes.forEach(node => {
-                    node.disabled = true;
-                });
-            }
-            else {
-                nodes.forEach(node => {
-                    node.groupDisabled = this.disabled;
-                });
-            }
+            nodes.forEach(node => {
+                node.groupDisabled = this.disabled;
+            });
         };
         this.toggleAllError = () => {
             let nodes = this.getChildNodes();
@@ -65,11 +58,11 @@ export class CheckboxGroupComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'a13345395b22ac918fcb5b4186f5bb3057af8ea4' }, h("div", { key: 'b388a4b209535c47c07b2720392abeb7191b0809', class: {
+        return (h(Host, { key: '9a4b62fbdc1783027c0a2a00d2000acf947f905a' }, h("div", { key: '469db8176f63d20fcc9d3c71c73a4fa50fa72a4b', 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: '33ed6a29fc0742e786d7f82c93dea89fdf0127b8' }, h("div", { key: 'da3884cbef485588a36ea6dd6c92f0dc0bdff138', class: "b2b-checkbox-group__options" }, h("slot", { key: 'c4f2ef006d5c8f04e45315526d076ca69a49026e' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: 'be35765e9becc81a018c66802b69ffa294d081a0' }, h("div", { key: '9c57f4dd7f12baa134eca7358fd001c1e73587d4', class: "b2b-checkbox-group__options" }, h("slot", { key: '5ff527c22193448ddcbb630cb8570256cc1289fd' }))), (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/custom-dropdown/custom-dropdown.js

@@ -31,11 +31,11 @@ export class B2bCustomDropdownComponent {
         this.border = false;
         this.autoDisableSearch = true;
         this.opened = false;
+        this.noResultsText = 'Keine Ergebnisse gefunden, überprüfen Sie die Eingabe.';
         this.selectedOption = null;
         this.value = '';
         this.allOptions = [];
         this.hasVisibleOptions = true;
-        this.noResultsText = 'Keine Ergebnisse gefunden, überprüfen Sie die Eingabe.';
     }
     handleOptionSelected(event) {
         event.stopPropagation();
@@ -68,17 +68,17 @@ export class B2bCustomDropdownComponent {
         }
     }
     render() {
-        return (h(Host, { key: '7ab7738ca5e7ffadba43ca8467204214ebc6be53' }, h("div", { key: 'e5cf65c8edc0274318f72813d3476331ef0b4e02', class: "b2b-custom-dropdown__trigger" }, h("slot", { key: '768eb7f46c2e986e09f5d68f6ed558191ed47572', name: "trigger" })), h("div", { key: '52e16035e36d0755c5d9626d50df2bda60f9e454', class: {
+        return (h(Host, { key: '54123c64de9c802cf4dc6c9b5d1a156ffcc3eb33' }, h("div", { key: 'ba04968830ab5302127373b99ea97face360a76c', class: "b2b-custom-dropdown__trigger" }, h("slot", { key: '0d36e4e9299a4b87c97a41db86693b25f720ccca', name: "trigger" })), h("div", { key: 'f4dd9227fc1fc768340531c01f4a93d9a355d978', class: {
                 'b2b-custom-dropdown': true,
                 'b2b-custom-dropdown--on': this.opened && !this.disabled,
                 'b2b-custom-dropdown--drop-shadow': this.dropshadow,
                 'b2b-custom-dropdown--border': this.border,
-            } }, h("b2b-background-box", { key: 'ecc9cf1bc1b1d5730fcaa8dda6495af3844bf67e', noPadding: true, borderTop: "none", borderBottom: "none", borderRight: "none", borderLeft: "none" }, h("div", { key: '0d9a8174b906a56edd77f8c053087f100a4f49da', class: {
+            } }, h("b2b-background-box", { key: '1a2aac422535bb6d99cd9378c742626f535242e7', noPadding: true, borderTop: "none", borderBottom: "none", borderRight: "none", borderLeft: "none" }, h("div", { key: '847f408ef98fff19e3b9c71aeab6fd61c3ed420c', class: {
                 'b2b-custom-dropdown-search': true,
                 'b2b-custom-dropdown-search--enabled': this.allOptions.length > 6 && !this.disabled,
-            } }, h("b2b-input", { key: '007c8cd8c06747284e50f6a2856d0e0f5729e676', placeholder: this.placeholder, "onB2b-input": this.handleInput }, h("b2b-icon-100", { key: '351f6e1ef437ce1e26ae6bd01fd6e382ca24c2f1', icon: "b2b_icon-search", slot: "end" })))), h("div", { key: 'd1c7ebdb248662bab781b9b7e922d41bb5912e62', class: this.allOptions.length > 6
+            } }, h("b2b-input", { key: 'b7edd8aa7b161c1d2a168d3648a5833eb9156997', placeholder: this.placeholder, "onB2b-input": this.handleInput }, h("b2b-icon-100", { key: '5434c47b722df4705fcace1650bce3fe141ec08e', icon: "b2b_icon-search", slot: "end" })))), h("div", { key: '115c76ac508079454c1326c8e5e04d9851979239', class: this.allOptions.length > 6
                 ? 'b2b-custom-dropdown__options-scroll-container'
-                : 'b2b-custom-dropdown__options-container' }, h("slot", { key: 'd99c7cbbfe36cf4751554d6ec2695e133fd693e2', name: "option" })), this.value && !this.hasVisibleOptions && (h("div", { class: "b2b-custom-dropdown__empty", role: "status" }, h("slot", { name: "empty" }, this.noResultsText))))));
+                : 'b2b-custom-dropdown__options-container' }, h("slot", { key: '3e222b38e248bd7bf8cab1c237a474176d43c3bb', name: "option" })), this.value && !this.hasVisibleOptions && (h("div", { class: "b2b-custom-dropdown__empty", role: "status" }, h("slot", { name: "empty" }, this.noResultsText))))));
     }
     static get is() { return "b2b-custom-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -213,7 +213,7 @@ export class B2bCustomDropdownComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The text to show, when no results have been found."
                 },
                 "attribute": "no-results-text",
                 "reflect": false,

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

@@ -1,11 +1,12 @@
 import { h, Host, } from "@stencil/core";
-import { MonthsGerman, MonthsEnglish } from "./date-picker.types";
+import { MonthsEnglish, MonthsGerman } from "./date-picker.types";
 const keys = {
     ARROW_UP: 'ArrowUp',
     ARROW_DOWN: 'ArrowDown',
     ARROW_RIGHT: 'ArrowRight',
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
+    ESC: 'Escape',
 };
 export class B2bDatePickerMonths {
     constructor() {
@@ -39,28 +40,30 @@ export class B2bDatePickerMonths {
     }
     handleKeyDown(event) {
         event.preventDefault();
-        let index = this.selectedMonth;
         const months = this.getAllMonths();
         let currentMonth = this.getCurrentMonth();
+        let index = months.indexOf(currentMonth);
         switch (event.key) {
             case keys.ARROW_LEFT:
-                index = months.indexOf(currentMonth) - 1;
+                index -= 1;
                 break;
             case keys.ARROW_RIGHT:
-                index = months.indexOf(currentMonth) + 1;
+                index += 1;
                 break;
             case keys.ARROW_UP:
-                index = months.indexOf(currentMonth) - 3;
+                index -= 3;
                 break;
             case keys.ARROW_DOWN:
-                index = months.indexOf(currentMonth) + 3;
+                index += 3;
                 break;
             case keys.ENTER:
-                index = months.indexOf(currentMonth);
                 this.b2bDatePickerMonthSelected.emit({
                     value: index,
                 });
-                break;
+                return;
+            case keys.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
             default:
                 return;
         }
@@ -72,8 +75,12 @@ export class B2bDatePickerMonths {
         }
         this.focusCurrentMonth(months[index]);
     }
+    componentDidRender() {
+        var _a;
+        (_a = this.getCurrentMonth()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
-        return (h(Host, { key: '9ddb8ebbb24997435ceca09cc47ba7dc12b39ba7' }, h("div", { key: 'a650207f538786bb680698ffc293fd59a717ea3a', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
+        return (h(Host, { key: '92f546b998c48d274d76db47db997bcda3968033' }, h("div", { key: 'cfd9e12f5d1047d6acf2be7142d070dd64517049', class: "b2b-date-picker-months" }, this.renderDatePickerMonths())));
     }
     static get is() { return "b2b-date-picker-months"; }
     static get encapsulation() { return "shadow"; }
@@ -135,7 +142,7 @@ export class B2bDatePickerMonths {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted on selecting month*"
+                    "text": "Event emitted on selecting month"
                 },
                 "complexType": {
                     "original": "MonthSelectedEventDetail",
@@ -148,6 +155,27 @@ export class B2bDatePickerMonths {
                         }
                     }
                 }
+            }, {
+                "method": "b2bDatePickerEscape",
+                "name": "b2b-date-picker-escape",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on escape press"
+                },
+                "complexType": {
+                    "original": "EscapePressed",
+                    "resolved": "EscapePressed<any>",
+                    "references": {
+                        "EscapePressed": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::EscapePressed"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "host"; }

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

@@ -5,6 +5,7 @@ const keys = {
     ARROW_RIGHT: 'ArrowRight',
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
+    ESC: 'Escape',
 };
 export class B2bDatePickerYears {
     constructor() {
@@ -50,32 +51,34 @@ export class B2bDatePickerYears {
             return years;
         };
         this.selectedYear = undefined;
-        this.yearsRange = [];
+        this.yearsRange = Array.from({ length: 201 }, (_, i) => i + 1900);
     }
     handleKeyDown(event) {
         event.preventDefault();
-        let index = this.yearsRange.indexOf(this.selectedYear);
         const years = this.getAllYears();
         let currentYear = this.getCurrentYear();
+        let index = years.indexOf(currentYear);
         switch (event.key) {
             case keys.ARROW_LEFT:
-                index = years.indexOf(currentYear) - 1;
+                index -= 1;
                 break;
             case keys.ARROW_RIGHT:
-                index = years.indexOf(currentYear) + 1;
+                index += 1;
                 break;
             case keys.ARROW_UP:
-                index = years.indexOf(currentYear) - 3;
+                index -= 3;
                 break;
             case keys.ARROW_DOWN:
-                index = years.indexOf(currentYear) + 3;
+                index += 3;
                 break;
             case keys.ENTER:
-                index = years.indexOf(currentYear);
                 this.b2bDatePickerYearSelected.emit({
                     value: this.yearsRange[index],
                 });
-                break;
+                return;
+            case keys.ESC:
+                this.b2bDatePickerEscape.emit();
+                return;
             default:
                 return;
         }
@@ -87,18 +90,14 @@ export class B2bDatePickerYears {
         }
         this.focusCurrentYear(years[index]);
     }
-    componentWillLoad() {
-        for (let i = 1900; i <= 2100; i++) {
-            this.yearsRange.push(i);
-        }
-    }
     componentDidLoad() {
         if (this.selectedYear > 0) {
             this.scrollToYear(this.selectedYear);
+            this.getCurrentYear().focus();
         }
     }
     render() {
-        return (h(Host, { key: '22394d693b0a966c62b74de49c00d72b346a2e64' }, h("div", { key: 'a2c33dc133169c2cb558e9b92d78b56cf7fb108e', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
+        return (h(Host, { key: '2e9b64e857f36f8623cb13aa5ebd5346e21bdc6f' }, h("div", { key: 'b6a82d5fbfc2f18aab9c2c64efe3c8bbe63cfc19', class: "b2b-date-picker-years" }, this.renderDatePickerYears())));
     }
     static get is() { return "b2b-date-picker-years"; }
     static get encapsulation() { return "shadow"; }
@@ -147,7 +146,7 @@ export class B2bDatePickerYears {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted on selecting year*"
+                    "text": "Event emitted on selecting year"
                 },
                 "complexType": {
                     "original": "YearSelectedEventDetail",
@@ -160,6 +159,27 @@ export class B2bDatePickerYears {
                         }
                     }
                 }
+            }, {
+                "method": "b2bDatePickerEscape",
+                "name": "b2b-date-picker-escape",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on escape press"
+                },
+                "complexType": {
+                    "original": "EscapePressed",
+                    "resolved": "EscapePressed<any>",
+                    "references": {
+                        "EscapePressed": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::EscapePressed"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "host"; }

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

@@ -234,7 +234,6 @@
 }
 .b2b-date-picker {
   position: relative;
-  z-index: 300;
 }
 .b2b-date-picker__backdrop {
   position: fixed;
@@ -242,7 +241,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 0;
+  z-index: 100;
 }
 .b2b-date-picker-input-focus-wrapper {
   width: 100%;
@@ -265,6 +264,7 @@
 .b2b-date-picker-input-wrapper--focused {
   outline: 2px solid -webkit-focus-ring-color;
   outline-offset: -1px;
+  border-radius: var(--b2b-size-7) var(--b2b-size-7) 0 0;
 }
 .b2b-date-picker-input-wrapper--error {
   background-color: var(--b2b-color-error-50);
@@ -322,11 +322,10 @@ b2b-input-label {
   outline-offset: -1px;
   width: 300px;
   box-sizing: border-box;
-  margin-top: 1px;
   padding-bottom: var(--b2b-size-40);
   outline: none;
   background-color: var(--b2b-color-white-100);
-  z-index: 1001;
+  z-index: 101;
 }
 .b2b-date-picker-body--hidden {
   display: none;

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

@@ -137,7 +137,7 @@ export class B2bDatePicker {
         if (this.disableDatesFrom && this.disableDatesFrom !== '') {
             this.normalizedDisableDatesFrom = this.normalizeDisableDatesUntilAndFrom(this.disableDatesFrom);
         }
-        if (this.preSelectedDate) {
+        if (this.preSelectedDate && this.preSelectedDate !== '') {
             const [day, month, year] = this.preSelectedDate.split('.').map(Number);
             this.selectedDay = day;
             this.selectedMonth = month - 1;
@@ -153,7 +153,12 @@ export class B2bDatePicker {
             this.userInputDate = '';
         }
     }
-    handleEscapePress() {
+    handleEscapePress(event) {
+        if (this.datePickerView !== "Days" /* DatePickerView.Days */) {
+            this.datePickerView = "Days" /* DatePickerView.Days */;
+            event.preventDefault();
+            return;
+        }
         this.showDatePicker = false;
     }
     handleDateSelection(event) {
@@ -384,10 +389,10 @@ export class B2bDatePicker {
                 : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { class: {
                 'b2b-date-picker-body': true,
                 'b2b-date-picker-body--hidden': !this.showDatePicker,
-            } }, this.datePickerView === "Days" /* DatePickerView.Days */ && (h("div", null, h("b2b-date-picker-header", { language: this.language, selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-date-picker-days-header", { language: this.language }), h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates, disableDates: this.datesToBeDisabled, disableDatesUntil: this.normalizedDisableDatesUntil, disableEvery: this.normalizedDisableEvery, disableDatesFrom: this.normalizedDisableDatesFrom }))), this.datePickerView === "Months" /* DatePickerView.Months */ && (h("b2b-date-picker-months", { language: this.language, selectedMonth: this.selectedMonth })), this.datePickerView === "Years" /* DatePickerView.Years */ && (h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), !this.showDatePicker && (h("span", { class: {
+            } }, this.datePickerView === "Days" /* DatePickerView.Days */ && (h("div", null, h("b2b-date-picker-header", { language: this.language, selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-date-picker-days-header", { language: this.language }), h("b2b-date-picker-days", { selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates, disableDates: this.datesToBeDisabled, disableDatesUntil: this.normalizedDisableDatesUntil, disableEvery: this.normalizedDisableEvery, disableDatesFrom: this.normalizedDisableDatesFrom }))), this.datePickerView === "Months" /* DatePickerView.Months */ && (h("b2b-date-picker-months", { language: this.language, selectedMonth: this.selectedMonth })), this.datePickerView === "Years" /* DatePickerView.Years */ && (h("b2b-date-picker-years", { selectedYear: this.selectedYear }))), this.showDatePicker && (h("div", { class: "b2b-date-picker__backdrop", onClick: this.handleBackdropDismiss })), h("span", { class: {
                 'b2b-date-picker-hint': true,
                 'b2b-date-picker-hint--error': this.invalid,
-            } }, this.invalid ? this.errorMessage : this.showHint && this.hint))));
+            } }, this.invalid ? this.errorMessage : this.showHint && this.hint)));
     }
     static get is() { return "b2b-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -701,7 +706,7 @@ export class B2bDatePicker {
                 },
                 "complexType": {
                     "original": "DatePickerEventDetail",
-                    "resolved": "DatePickerEventDetail<any>",
+                    "resolved": "DatePickerEventDetail",
                     "references": {
                         "DatePickerEventDetail": {
                             "location": "import",
@@ -722,7 +727,7 @@ export class B2bDatePicker {
                 },
                 "complexType": {
                     "original": "DateClear",
-                    "resolved": "DateClear<any>",
+                    "resolved": "DateClear",
                     "references": {
                         "DateClear": {
                             "location": "import",

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

@@ -83,10 +83,16 @@ export const Default = {
     args: Object.assign(Object.assign({}, meta.args), { preSelectedDate: '01.01.2025' }),
     play: async ({ canvasElement }) => {
         setTimeout(async () => {
-            var _a;
+            var _a, _b, _c;
             const datePicker = canvasElement.querySelector('b2b-date-picker');
-            const b2bDatePickerInputWrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-focus-wrapper');
-            await userEvent.click(b2bDatePickerInputWrapper);
+            const wrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-picker-input-focus-wrapper');
+            const days = (_b = datePicker.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('b2b-date-picker-days');
+            const day = (_c = days.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.b2b-date-picker-day--selected');
+            await userEvent.click(wrapper);
+            setTimeout(async () => {
+                day.focus();
+                await userEvent.keyboard('{arrowright}{arrowright}');
+            }, 500);
         }, 500);
     },
 };