feat(datepicker): add css variables to wrapper class

src/components/calendar/bl-calendar.css

@@ -5,10 +5,10 @@
 
 .calendar-content {
   display: flex;
-  padding: var(--bl-size-s);
+  padding: var(--bl-size-m);
   flex-direction: column;
   align-items: center;
-  gap: var(--bl-size-s);
+  gap: var(--bl-size-m);
   border-radius: var(--bl-border-radius-s);
   width: fit-content;
   background: var(--bl-color-neutral-full);

src/components/calendar/bl-calendar.test.ts

@@ -403,13 +403,13 @@ describe("bl-calendar", () => {
 
 
   it("should add range-start-day class to the start date element", async () => {
-    element._selectedDates = [new Date(2024, 10, 1),
-      new Date(2024, 10, 5)
+    element._selectedDates = [new Date(element.today.getFullYear(), element.today.getMonth(), 1),
+      new Date(element.today.getFullYear(), element.today.getMonth(), 5)
     ];
 
     element.setHoverClass();
 
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    await new Promise((resolve) => setTimeout(resolve, 200));
     const startDateElement = element.shadowRoot?.getElementById(
       `${element._selectedDates[0]?.getTime()}`
     )?.parentElement;
@@ -418,12 +418,12 @@ describe("bl-calendar", () => {
   });
 
   it("should add range-end-day class to the end date element", async () => {
-    element._selectedDates = [new Date(2024, 10, 1),
-      new Date(2024, 10, 5)
+    element._selectedDates = [new Date(element.today.getFullYear(), element.today.getMonth(), 1),
+      new Date(element.today.getFullYear(), element.today.getMonth(), 5)
     ];
 
     element.setHoverClass();
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    await new Promise((resolve) => setTimeout(resolve, 200));
 
     const endDateElement = element.shadowRoot?.getElementById(
       `${element._selectedDates[1]?.getTime()}`

src/components/datepicker/bl-datepicker.css

@@ -1,15 +1,14 @@
 :host {
   width: fit-content;
+  display: block;
+}
 
+.datepicker-content {
   --bl-input-cursor: pointer;
   --icon-size: var(--line-height);
   --icon-color: var(--bl-color-neutral-light);
   --datepicker-width: 314px;
 
-  display: block;
-}
-
-.datepicker-content {
   display: flex;
   flex-direction: column;
   gap: var(--bl-size-2xs);

src/components/datepicker/bl-datepicker.ts

@@ -100,7 +100,10 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
   }
 
   closePopoverWithTimeout() {
-    setTimeout(() => this.closePopover(), 200);
+    setTimeout(() => {
+      this.closePopover();
+      this._inputEl.blur();
+    }, 200);
   }
 
   setFloatingDates() {
@@ -140,7 +143,6 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
     this._selectedDates = [];
     this._inputValue = "";
     this._floatingDateCount = 0;
-    this._inputEl?.blur();
   }
 
   openPopover() {