@lion/ui 0.22.0 → 0.24.0

package/components/calendar/test/lion-calendar.test.js

@@ -14,29 +14,25 @@ import { runCalendarSuite } from '../test-suites/LionCalendar.suite.js';
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionCalendar>} */ (_fixture);
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionCalendar>} */ _fixture;
 /**
  * @param {HTMLElement} el
  * @returns {HTMLElement | null | undefined}
  */
-const getSelectedDateEl = el => el?.shadowRoot?.querySelector('.calendar__day-button[selected]');
+const getSelectedDateEl = (el) => el?.shadowRoot?.querySelector('.calendar__day-button[selected]');
 /**
  * @param {HTMLElement} el
  * @returns {void}
  */
-const focusSelectedDate = el => getSelectedDateEl(el)?.focus();
-
+const focusSelectedDate = (el) => getSelectedDateEl(el)?.focus();
 describe('<lion-calendar>', () => {
   const localizeManager = getLocalizeManager();
-
   beforeEach(() => {
     localizeTearDown();
   });
-
   describe('Structure', () => {
     it('implements BEM structure', async () => {
       const el = await fixture(html`<lion-calendar></lion-calendar>`);
-
       expect(el.shadowRoot?.querySelector('.calendar')).to.exist;
       expect(el.shadowRoot?.querySelector('.calendar__navigation')).to.exist;
       expect(el.shadowRoot?.querySelector('.calendar__previous-button')).to.exist;
@@ -44,12 +40,11 @@ describe('<lion-calendar>', () => {
       expect(el.shadowRoot?.querySelector('.calendar__navigation-heading')).to.exist;
       expect(el.shadowRoot?.querySelector('.calendar__grid')).to.exist;
     });
-
     it('has heading with month and year', async () => {
-      const clock = sinon.useFakeTimers({ now: new Date('2000/12/01').getTime() });
-
+      const clock = sinon.useFakeTimers({
+        now: new Date('2000/12/01').getTime(),
+      });
       const el = await fixture(html`<lion-calendar></lion-calendar>`);
-
       expect(el.shadowRoot?.querySelector('#year')).dom.to.equal(`
         <h2
           id="year"
@@ -68,10 +63,8 @@ describe('<lion-calendar>', () => {
         December
       </h2>
     `);
-
       clock.restore();
     });
-
     it('has previous year button', async () => {
       const el = await fixture(
         html`<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>`,
@@ -80,7 +73,6 @@ describe('<lion-calendar>', () => {
         <button class="calendar__previous-button" aria-label="Previous year, November 2018" title="Previous year, November 2018">&lt;</button>
       `);
     });
-
     it('has next year button', async () => {
       const el = await fixture(
         html`<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>`,
@@ -89,7 +81,6 @@ describe('<lion-calendar>', () => {
         <button class="calendar__next-button" aria-label="Next year, November 2020" title="Next year, November 2020">&gt;</button>
       `);
     });
-
     it('has previous month button', async () => {
       const el = await fixture(
         html`<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>`,
@@ -98,7 +89,6 @@ describe('<lion-calendar>', () => {
         <button class="calendar__previous-button" aria-label="Previous month, October 2019" title="Previous month, October 2019">&lt;</button>
       `);
     });
-
     it('has next month button', async () => {
       const el = await fixture(
         html`<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>`,
@@ -108,7 +98,6 @@ describe('<lion-calendar>', () => {
       `);
     });
   });
-
   describe('Public API', () => {
     it('has property "centralDate" that determines currently visible month', async () => {
       const elObj = new CalendarObject(
@@ -119,19 +108,17 @@ describe('<lion-calendar>', () => {
       expect(elObj.activeMonth).to.equal('May');
       expect(elObj.activeYear).to.equal('2014');
     });
-
     it('sets "centralDate" to today by default', async () => {
-      const clock = sinon.useFakeTimers({ now: new Date('2013/03/15').getTime() });
-
+      const clock = sinon.useFakeTimers({
+        now: new Date('2013/03/15').getTime(),
+      });
       const el = await fixture(html`<lion-calendar></lion-calendar>`);
       const elObj = new CalendarObject(el);
       expect(isSameDate(el.centralDate, new Date())).to.be.true;
       expect(elObj.activeMonth).to.equal('March');
       expect(elObj.activeYear).to.equal('2013');
-
       clock.restore();
     });
-
     it('determines the date focusable with keyboard from "centralDate"', async () => {
       const elObj = new CalendarObject(
         await fixture(html`
@@ -140,18 +127,17 @@ describe('<lion-calendar>', () => {
       );
       expect(
         elObj.checkForAllDayObjs(
-          /** @param {DayObject} o */ o => o.buttonEl.getAttribute('tabindex') === '0',
-          /** @param {number} n */ n => n === 5,
+          /** @param {DayObject} o */ (o) => o.buttonEl.getAttribute('tabindex') === '0',
+          /** @param {number} n */ (n) => n === 5,
         ),
       ).to.be.true;
       expect(
         elObj.checkForAllDayObjs(
-          /** @param {DayObject} o */ o => o.buttonEl.getAttribute('tabindex') === '-1',
-          /** @param {number} n */ n => n !== 5,
+          /** @param {DayObject} o */ (o) => o.buttonEl.getAttribute('tabindex') === '-1',
+          /** @param {number} n */ (n) => n !== 5,
         ),
       ).to.be.true;
     });
-
     it('has property "selectedDate" for the selected date', async () => {
       const el = await fixture(html`
         <lion-calendar .selectedDate="${new Date('2019/06/15')}"></lion-calendar>
@@ -164,7 +150,6 @@ describe('<lion-calendar>', () => {
       await el.updateComplete;
       expect(elObj.getDayObj(15).isSelected).to.equal(false);
     });
-
     it('gives priority to "centralDate" to display the month when "selectedDate" is also defined', async () => {
       const elObj = new CalendarObject(
         await fixture(html`
@@ -177,10 +162,10 @@ describe('<lion-calendar>', () => {
       expect(elObj.activeMonth).to.equal('June');
       expect(elObj.activeYear).to.equal('2018');
     });
-
     it('changes "centralDate" from default to "selectedDate" on first render if no other custom "centralDate" is provided', async () => {
-      const clock = sinon.useFakeTimers({ now: new Date('2010/01/01').getTime() });
-
+      const clock = sinon.useFakeTimers({
+        now: new Date('2010/01/01').getTime(),
+      });
       const el = await fixture(html`
         <lion-calendar .selectedDate="${new Date('2016/10/20')}"></lion-calendar>
       `);
@@ -190,7 +175,6 @@ describe('<lion-calendar>', () => {
       expect(elObj.activeYear).to.equal('2016');
       clock.restore();
     });
-
     it('does not change "centralDate" to "selectedDate" when new date is provided programmatically', async () => {
       const el = await fixture(html`
         <lion-calendar
@@ -203,7 +187,6 @@ describe('<lion-calendar>', () => {
       await el.updateComplete;
       expect(isSameDate(el.centralDate, new Date('2018/06/01'))).to.be.true;
     });
-
     it('does not set "selectedDate" by default', async () => {
       const el = await fixture(html`<lion-calendar></lion-calendar>`);
       const elObj = new CalendarObject(el);
@@ -211,7 +194,6 @@ describe('<lion-calendar>', () => {
       expect(el.selectedDate).to.equal(undefined);
       expect(elObj.getDayObj(today.getDate()).isSelected).to.equal(false);
     });
-
     it('allows to reset "selectedDate"', async () => {
       const el = await fixture(html`
         <lion-calendar .selectedDate="${new Date('2019/06/15')}"></lion-calendar>
@@ -221,7 +203,6 @@ describe('<lion-calendar>', () => {
       await el.updateComplete;
       expect(elObj.selectedDayObj).to.be.undefined;
     });
-
     it('recalculates "centralDate" when "selectedDate" is reset', async () => {
       const el = await fixture(html`
         <lion-calendar .selectedDate="${new Date('2019/06/15')}"></lion-calendar>
@@ -232,7 +213,6 @@ describe('<lion-calendar>', () => {
       expect(elObj.selectedDayObj).to.be.undefined;
       expect(isSameDate(el.centralDate, new Date('2019/06/15'))).to.be.true;
     });
-
     it('sends event "user-selected-date-changed" when user selects a date via mouse', async () => {
       const dateChangedSpy = sinon.spy();
       const el = await fixture(html`
@@ -250,10 +230,9 @@ describe('<lion-calendar>', () => {
         isSameDate(dateChangedSpy.args[0][0].detail.selectedDate, new Date('2000/12/15')),
       ).to.equal(true);
     });
-
     it('doesn\'t send event "user-selected-date-changed" when user selects a disabled date via mouse', async () => {
       const dateChangedSpy = sinon.spy();
-      const disable15th = /** @param {Date} d */ d => d.getDate() === 15;
+      const disable15th = /** @param {Date} d */ (d) => d.getDate() === 15;
       const el = await fixture(html`
         <lion-calendar
           .selectedDate="${new Date('2000/12/12')}"
@@ -265,9 +244,8 @@ describe('<lion-calendar>', () => {
       elObj.getDayEl(15).click();
       await el.updateComplete;
       expect(dateChangedSpy.called).to.equal(false);
-      expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/12/12'))).to.be.true;
+      expect(isSameDate(/** @type {Date} */ el.selectedDate, new Date('2000/12/12'))).to.be.true;
     });
-
     it.skip('sends event "user-selected-date-changed" when user selects a date via [Enter]', async () => {
       /**
        * TODO fix me
@@ -282,19 +260,24 @@ describe('<lion-calendar>', () => {
         ></lion-calendar>
       `);
       const elObj = new CalendarObject(el);
-
-      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+      el.__contentWrapperElement?.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'ArrowLeft',
+        }),
+      );
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('October');
       expect(elObj.activeYear).to.equal('2000');
       expect(elObj.focusedDayObj?.monthday).to.equal(11);
-
-      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      el.__contentWrapperElement?.dispatchEvent(
+        new KeyboardEvent('keydown', {
+          key: 'Enter',
+        }),
+      );
       await el.updateComplete;
-      expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/10/11'))).to.be.true;
+      expect(isSameDate(/** @type {Date} */ el.selectedDate, new Date('2000/10/11'))).to.be.true;
       expect(dateChangedSpy.called).to.equal(true);
     });
-
     it('doesn\'t send event "user-selected-date-changed" when user selects a disabled date via [Enter]', async () => {
       const dateChangedSpy = sinon.spy();
       const el = await fixture(html`
@@ -305,20 +288,21 @@ describe('<lion-calendar>', () => {
         ></lion-calendar>
       `);
       const elObj = new CalendarObject(el);
-
       focusSelectedDate(el);
-      await sendKeys({ press: 'ArrowLeft' });
+      await sendKeys({
+        press: 'ArrowLeft',
+      });
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('October');
       expect(elObj.activeYear).to.equal('2000');
       expect(elObj.focusedDayObj?.monthday).to.equal(11);
-
-      await sendKeys({ press: 'Enter' });
+      await sendKeys({
+        press: 'Enter',
+      });
       await el.updateComplete;
-      expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/10/12'))).to.be.true;
+      expect(isSameDate(/** @type {Date} */ el.selectedDate, new Date('2000/10/12'))).to.be.true;
       expect(dateChangedSpy.called).to.equal(false);
     });
-
     it('exposes focusedDate getter', async () => {
       const el = await fixture(html`
         <lion-calendar .centralDate="${new Date('2019/06/01')}"></lion-calendar>
@@ -326,19 +310,15 @@ describe('<lion-calendar>', () => {
       const elObj = new CalendarObject(el);
       expect(el.focusedDate).to.be.null;
       elObj.getDayEl(15).click();
-      expect(isSameDate(/** @type {Date} */ (el.focusedDate), new Date('2019/06/15'))).to.equal(
-        true,
-      );
+      expect(isSameDate(/** @type {Date} */ el.focusedDate, new Date('2019/06/15'))).to.equal(true);
     });
-
     it('has a focusDate() method to focus an arbitrary date', async () => {
       const el = await fixture(html`<lion-calendar></lion-calendar>`);
       const elObj = new CalendarObject(el);
       await el.focusDate(new Date('2016/06/10'));
-      expect(isSameDate(/** @type {Date} */ (el.focusedDate), new Date('2016/06/10'))).to.be.true;
+      expect(isSameDate(/** @type {Date} */ el.focusedDate, new Date('2016/06/10'))).to.be.true;
       expect(elObj.getDayObj(10).isFocused).to.be.true;
     });
-
     it('has a focusCentralDate() method to focus the central date', async () => {
       const el = await fixture(html`
         <lion-calendar
@@ -348,10 +328,9 @@ describe('<lion-calendar>', () => {
       `);
       const elObj = new CalendarObject(el);
       el.focusCentralDate();
-      expect(isSameDate(/** @type {Date} */ (el.focusedDate), new Date('2015/12/02'))).to.be.true;
+      expect(isSameDate(/** @type {Date} */ el.focusedDate, new Date('2015/12/02'))).to.be.true;
       expect(elObj.getDayObj(2).isFocused).to.be.true;
     });
-
     it('has a focusSelectedDate() method to focus the selected date', async () => {
       const el = await fixture(html`
         <lion-calendar
@@ -361,10 +340,9 @@ describe('<lion-calendar>', () => {
       `);
       const elObj = new CalendarObject(el);
       await el.focusSelectedDate();
-      expect(isSameDate(/** @type {Date} */ (el.focusedDate), new Date('2014/07/07'))).to.be.true;
+      expect(isSameDate(/** @type {Date} */ el.focusedDate, new Date('2014/07/07'))).to.be.true;
       expect(elObj.getDayObj(7).isFocused).to.be.true;
     });
-
     it('has a initCentralDate() method for external contexts like datepickers', async () => {
       const initialCentralDate = new Date('2014/07/05');
       const initialSelectedDate = new Date('2014/07/07');
@@ -374,10 +352,8 @@ describe('<lion-calendar>', () => {
           .selectedDate="${initialSelectedDate}"
         ></lion-calendar>`,
       );
-
       expect(el.selectedDate).to.equal(initialSelectedDate);
       expect(el.centralDate).to.equal(initialCentralDate);
-
       const newSelectedDate = new Date('2015/07/05');
       el.selectedDate = newSelectedDate;
       el.initCentralDate();
@@ -386,7 +362,6 @@ describe('<lion-calendar>', () => {
       el.initCentralDate();
       expect(el.centralDate).to.equal(initialCentralDate);
     });
-
     describe('Enabled Dates', () => {
       it('disables all days before "minDate" property', async () => {
         const el = await fixture(html`
@@ -403,7 +378,6 @@ describe('<lion-calendar>', () => {
           expect(new DayObject(d).isDisabled).to.equal(shouldBeDisabled);
         });
       });
-
       it('disables all days after "maxDate" property', async () => {
         const el = await fixture(html`
           <lion-calendar
@@ -419,10 +393,9 @@ describe('<lion-calendar>', () => {
           expect(new DayObject(d).isDisabled).to.equal(shouldBeDisabled);
         });
       });
-
       it('disables a date with disableDates function', async () => {
         /** @param {Date} d */
-        const disable15th = d => d.getDate() === 15;
+        const disable15th = (d) => d.getDate() === 15;
         const el = await fixture(html`
           <lion-calendar
             .selectedDate="${new Date('2000/12/01')}"
@@ -434,7 +407,6 @@ describe('<lion-calendar>', () => {
           const shouldBeDisabled = i === 15 - 1;
           expect(new DayObject(d).isDisabled).to.equal(shouldBeDisabled);
         });
-
         el.selectedDate = new Date('2000/11/01'); // When month view updates, it should still work
         await el.updateComplete;
         elObj.dayEls.forEach((d, i) => {
@@ -442,27 +414,26 @@ describe('<lion-calendar>', () => {
           expect(new DayObject(d).isDisabled).to.equal(shouldBeDisabled);
         });
       });
-
       it('does not prevent initializing "centralDate" from "selectedDate" when today is disabled', async () => {
-        const clock = sinon.useFakeTimers({ now: new Date('2019/06/03').getTime() });
-
+        const clock = sinon.useFakeTimers({
+          now: new Date('2019/06/03').getTime(),
+        });
         const el = await fixture(html`
           <lion-calendar
             .selectedDate="${new Date('2001/01/08')}"
-            .disableDates=${/** @param {Date} date */ date => date.getDate() === 3}
+            .disableDates=${/** @param {Date} date */ (date) => date.getDate() === 3}
           ></lion-calendar>
         `);
         const elObj = new CalendarObject(el);
         expect(isSameDate(el.centralDate, new Date('2001/01/08'))).to.be.true;
         expect(elObj.activeMonth).to.equal('January');
         expect(elObj.activeYear).to.equal('2001');
-
         clock.restore();
       });
-
       it('requires the user to set an appropriate centralDate even when minDate and maxDate are equal', async () => {
-        const clock = sinon.useFakeTimers({ now: new Date('2019/06/03').getTime() });
-
+        const clock = sinon.useFakeTimers({
+          now: new Date('2019/06/03').getTime(),
+        });
         const el = await fixture(html`
           <lion-calendar
             .minDate="${new Date('2019/07/03')}"
@@ -476,32 +447,27 @@ describe('<lion-calendar>', () => {
             .maxDate="${new Date('2019/07/03')}"
           ></lion-calendar>
         `);
-
         clock.restore();
         expect(isSameDate(el.centralDate, new Date('2019/07/03'))).to.be.true;
         expect(isSameDate(elSetting.centralDate, new Date('2019/07/03'))).to.be.true;
       });
-
       describe('Normalization', () => {
         it('normalizes all generated dates', async () => {
           /** @param {Date} d */
           function isNormalizedDate(d) {
             return d.getHours() === 0 && d.getMinutes() === 0 && d.getSeconds() === 0;
           }
-
           const el = await fixture(html`<lion-calendar></lion-calendar>`);
           // The central date will be today's date: it's the date all other
           // dates in the month view will be derived from.
           expect(isNormalizedDate(el.centralDate)).to.be.true;
         });
-
         it('normalizes dates in date comparisons', async () => {
           const selectedDate = new Date('2000-11-04T03:00:00');
           // without normalization, selectedDate > maxDate would wrongfully be disabled
           const maxDate = new Date('2000-11-29T02:00:00');
           // without normalization, selectedDate < minDate would wrongfully be disabled
           const minDate = new Date('2000-11-02T04:00:00');
-
           const el = await fixture(html`
             <lion-calendar
               .selectedDate="${selectedDate}"
@@ -510,17 +476,14 @@ describe('<lion-calendar>', () => {
             ></lion-calendar>
           `);
           const elObj = new CalendarObject(el);
-
           expect(elObj.getDayObj(29).isDisabled).to.equal(false);
           expect(elObj.getDayObj(30).isDisabled).to.equal(true);
-
           expect(elObj.getDayObj(2).isDisabled).to.equal(false);
           expect(elObj.getDayObj(1).isDisabled).to.equal(true);
         });
       });
     });
   });
-
   describe('Calendar navigation', () => {
     describe('Title', () => {
       it('contains secondary title displaying the current month and year in focus', async () => {
@@ -531,7 +494,6 @@ describe('<lion-calendar>', () => {
         expect(elObj.activeMonth).to.equal('December');
         expect(elObj.activeYear).to.equal('2000');
       });
-
       it('updates the secondary title when the displayed month/year changes', async () => {
         const el = await fixture(
           html`<lion-calendar .centralDate="${new Date('2000/12/12')}"></lion-calendar>`,
@@ -542,7 +504,6 @@ describe('<lion-calendar>', () => {
         expect(elObj.activeMonth).to.equal('October');
         expect(elObj.activeYear).to.equal('1999');
       });
-
       describe('Accessibility', () => {
         it('has aria-atomic="true" set on the secondary title', async () => {
           const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
@@ -550,7 +511,6 @@ describe('<lion-calendar>', () => {
         });
       });
     });
-
     describe('Navigation', () => {
       describe('finding enabled dates', () => {
         it('has helper for `findNextEnabledDate()`, `findPreviousEnabledDate()`, `findNearestEnabledDate()`', async () => {
@@ -558,92 +518,79 @@ describe('<lion-calendar>', () => {
             <lion-calendar
               .selectedDate="${new Date('2001/01/02')}"
               .disableDates=${
-                /** @param {Date} date */ date => date.getDate() === 3 || date.getDate() === 4
+                /** @param {Date} date */ (date) => date.getDate() === 3 || date.getDate() === 4
               }
             ></lion-calendar>
           `);
           const elObj = new CalendarObject(el);
-
           el.focusDate(el.findNextEnabledDate());
           await el.updateComplete;
           expect(elObj.focusedDayObj?.monthday).to.equal(5);
-
           el.focusDate(el.findPreviousEnabledDate());
           await el.updateComplete;
           expect(elObj.focusedDayObj?.monthday).to.equal(2);
-
           el.focusDate(el.findNearestEnabledDate());
           await el.updateComplete;
           expect(elObj.focusedDayObj?.monthday).to.equal(1);
         });
-
         it('future dates take precedence over past dates when "distance" between dates is equal', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+          const clock = sinon.useFakeTimers({
+            now: new Date('2000/12/15').getTime(),
+          });
           const el = await fixture(html`
             <lion-calendar
-              .disableDates="${/** @param {Date} d */ d => d.getDate() === 15}"
+              .disableDates="${/** @param {Date} d */ (d) => d.getDate() === 15}"
             ></lion-calendar>
           `);
           el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
-
           const elObj = new CalendarObject(el);
           expect(elObj.centralDayObj?.monthday).to.equal(16);
-
           clock.restore();
         });
-
         it('will search 750 days in the past', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+          const clock = sinon.useFakeTimers({
+            now: new Date('2000/12/15').getTime(),
+          });
           const el = await fixture(html`
             <lion-calendar
-              .disableDates="${/** @param {Date} d */ d => d.getFullYear() > 1998}"
+              .disableDates="${/** @param {Date} d */ (d) => d.getFullYear() > 1998}"
             ></lion-calendar>
           `);
           el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
-
           expect(el.centralDate.getFullYear()).to.equal(1998);
           expect(el.centralDate.getMonth()).to.equal(11);
           expect(el.centralDate.getDate()).to.equal(31);
-
           clock.restore();
         });
-
         it('will search 750 days in the future', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+          const clock = sinon.useFakeTimers({
+            now: new Date('2000/12/15').getTime(),
+          });
           const el = await fixture(html`
             <lion-calendar
-              .disableDates="${/** @param {Date} d */ d => d.getFullYear() < 2002}"
+              .disableDates="${/** @param {Date} d */ (d) => d.getFullYear() < 2002}"
             ></lion-calendar>
           `);
-
           el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
-
           expect(el.centralDate.getFullYear()).to.equal(2002);
           expect(el.centralDate.getMonth()).to.equal(0);
           expect(el.centralDate.getDate()).to.equal(1);
-
           clock.restore();
         });
-
         it('throws if no available date can be found within +/- 750 days', async () => {
           const el = await fixture(html`
             <lion-calendar
-              .disableDates="${/** @param {Date} d */ d => d.getFullYear() < 2002}"
+              .disableDates="${/** @param {Date} d */ (d) => d.getFullYear() < 2002}"
             ></lion-calendar>
           `);
-
           expect(() => {
             el.findNextEnabledDate(new Date('1900/01/01'));
           }).to.throw(Error, 'Could not find a selectable date within +/- 750 day for 1900/1/1');
         });
       });
-
       describe('Year', () => {
         it('has a button for navigation to previous year', async () => {
           const el = await fixture(
@@ -654,17 +601,18 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
 
-          /** @type {HTMLElement} */ (elObj.previousYearButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.previousYearButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2000');
 
-          /** @type {HTMLElement} */ (elObj.previousYearButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.previousYearButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('1999');
         });
-
         it('has a button for navigation to next year', async () => {
           const el = await fixture(
             html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
@@ -674,17 +622,18 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
 
-          /** @type {HTMLElement} */ (elObj.nextYearButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.nextYearButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2001');
 
-          /** @type {HTMLElement} */ (elObj.nextYearButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.nextYearButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2002');
         });
-
         it('disables previousYearButton and nextYearButton based on disabled days accordingly', async () => {
           const el = await fixture(html`
             <lion-calendar .selectedDate="${new Date('2000/06/12')}"></lion-calendar>
@@ -694,27 +643,23 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeYear).to.equal('2000');
           expect(elObj.previousYearButtonEl?.hasAttribute('disabled')).to.equal(false);
           expect(elObj.nextYearButtonEl?.hasAttribute('disabled')).to.equal(false);
-
           el.minDate = new Date('2000/01/01');
           el.maxDate = new Date('2000/12/31');
           await el.updateComplete;
-
           expect(elObj.previousYearButtonEl?.hasAttribute('disabled')).to.equal(true);
           expect(elObj.nextYearButtonEl?.hasAttribute('disabled')).to.equal(true);
 
-          /** @type {HTMLElement} */ (elObj.previousYearButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.previousYearButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('June');
           expect(elObj.activeYear).to.equal('2000');
-
           el.minDate = new Date('1999/12/31');
           el.maxDate = new Date('2001/01/01');
           await el.updateComplete;
-
           expect(elObj.previousYearButtonEl?.hasAttribute('disabled')).to.equal(false);
           expect(elObj.nextYearButtonEl?.hasAttribute('disabled')).to.equal(false);
         });
-
         it('sets label to correct month previousYearButton and nextYearButton based on disabled days accordingly', async () => {
           const el = await fixture(html`
             <lion-calendar .selectedDate="${new Date('2000/06/12')}"></lion-calendar>
@@ -723,7 +668,6 @@ describe('<lion-calendar>', () => {
           el.minDate = new Date('1999/07/12');
           el.maxDate = new Date('2001/05/12');
           await el.updateComplete;
-
           expect(elObj.previousYearButtonEl?.hasAttribute('disabled')).to.equal(false);
           expect(elObj.previousYearButtonEl.getAttribute('aria-label')).to.equal(
             'Previous year, July 1999',
@@ -732,7 +676,6 @@ describe('<lion-calendar>', () => {
           expect(elObj.nextYearButtonEl.getAttribute('aria-label')).to.equal('Next year, May 2001');
         });
       });
-
       describe('Month', () => {
         it('has a button for navigation to previous month', async () => {
           const el = await fixture(
@@ -743,17 +686,18 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
 
-          /** @type {HTMLElement} */ (elObj.previousMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.previousMonthButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
 
-          /** @type {HTMLElement} */ (elObj.previousMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.previousMonthButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('November');
           expect(elObj.activeYear).to.equal('2000');
         });
-
         it('has a button for navigation to next month', async () => {
           const el = await fixture(
             html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
@@ -762,17 +706,18 @@ describe('<lion-calendar>', () => {
           expect(elObj.nextMonthButtonEl).not.to.equal(null);
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
-          /** @type {HTMLElement} */ (elObj.nextMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.nextMonthButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
 
-          /** @type {HTMLElement} */ (elObj.nextMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.nextMonthButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('February');
           expect(elObj.activeYear).to.equal('2001');
         });
-
         it('disables previousMonthButton and nextMonthButton based on disabled days accordingly', async () => {
           const el = await fixture(html`
             <lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
@@ -782,68 +727,63 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeYear).to.equal('2000');
           expect(elObj.previousMonthButtonEl?.hasAttribute('disabled')).to.equal(false);
           expect(elObj.nextMonthButtonEl?.hasAttribute('disabled')).to.equal(false);
-
           el.minDate = new Date('2000/12/01');
           el.maxDate = new Date('2000/12/31');
           await el.updateComplete;
-
           expect(elObj.previousMonthButtonEl?.hasAttribute('disabled')).to.equal(true);
           expect(elObj.nextMonthButtonEl?.hasAttribute('disabled')).to.equal(true);
-          /** @type {HTMLElement} */ (elObj.previousMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.previousMonthButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
-          /** @type {HTMLElement} */ (elObj.previousMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.previousMonthButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
         });
-
         it('handles switch to previous month when dates are disabled', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+          const clock = sinon.useFakeTimers({
+            now: new Date('2000/12/15').getTime(),
+          });
           const el = await fixture(html`<lion-calendar></lion-calendar>`);
           const elObj = new CalendarObject(el);
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
-
           el.minDate = new Date('2000/11/20');
           await el.updateComplete;
-
           expect(elObj.previousMonthButtonEl?.hasAttribute('disabled')).to.equal(false);
           expect(isSameDate(el.centralDate, new Date('2000/12/15'))).to.be.true;
 
-          /** @type {HTMLElement} */ (elObj.previousMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.previousMonthButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('November');
           expect(elObj.activeYear).to.equal('2000');
           expect(isSameDate(el.centralDate, new Date('2000/11/15'))).to.be.true;
-
           clock.restore();
         });
-
         it('handles switch to next month when dates are disabled', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+          const clock = sinon.useFakeTimers({
+            now: new Date('2000/12/15').getTime(),
+          });
           const el = await fixture(html`<lion-calendar></lion-calendar>`);
           const elObj = new CalendarObject(el);
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
-
           el.maxDate = new Date('2001/01/10');
           await el.updateComplete;
-
           expect(elObj.nextMonthButtonEl?.hasAttribute('disabled')).to.equal(false);
           expect(isSameDate(el.centralDate, new Date('2000/12/15'))).to.be.true;
-          /** @type {HTMLElement} */ (elObj.nextMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          elObj.nextMonthButtonEl.click();
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
           expect(isSameDate(el.centralDate, new Date('2001/01/15'))).to.be.true;
-
           clock.restore();
         });
-
         it('supports navigating from larger months to smaller ones (day counts)', async () => {
           // given
           const inputDate = new Date('2019/08/31');
@@ -852,7 +792,8 @@ describe('<lion-calendar>', () => {
           `);
           // when
           const remote = new CalendarObject(element);
-          /** @type {HTMLElement} */ (remote.nextMonthButtonEl).click();
+          /** @type {HTMLElement} */
+          remote.nextMonthButtonEl.click();
           await element.updateComplete;
           // then
           expect(remote.activeMonth).to.equal('September');
@@ -876,7 +817,6 @@ describe('<lion-calendar>', () => {
           `);
         });
       });
-
       describe('Accessibility', () => {
         it('navigate buttons have a aria-label and title attribute with accessible label', async () => {
           const el = await fixture(html`
@@ -909,10 +849,9 @@ describe('<lion-calendar>', () => {
             'Next year, December 2001',
           );
         });
-
         it('disables a date with disableDates function provide a correct message', async () => {
           /** @param {Date} d */
-          const disable15th = d => d.getDate() === 15;
+          const disable15th = (d) => d.getDate() === 15;
           const el = await fixture(html`
             <lion-calendar
               .selectedDate="${new Date('2000/12/01')}"
@@ -939,7 +878,6 @@ describe('<lion-calendar>', () => {
             </div>
           `);
         });
-
         it('disables days before "minDate" property provide a correct message', async () => {
           const el = await fixture(html`
             <lion-calendar
@@ -968,7 +906,6 @@ describe('<lion-calendar>', () => {
             </div>
           `);
         });
-
         it('disables days after "maxDate" property provide a correct message', async () => {
           const el = await fixture(html`
             <lion-calendar
@@ -1000,14 +937,13 @@ describe('<lion-calendar>', () => {
       });
     });
   });
-
   describe('Calendar body (months view)', () => {
     it('renders the days of the week as table headers', async () => {
       const el = await fixture(
         html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
       );
       const elObj = new CalendarObject(el);
-      expect(elObj.weekdayHeaderEls.map(h => h.textContent?.trim())).to.deep.equal([
+      expect(elObj.weekdayHeaderEls.map((h) => h.textContent?.trim())).to.deep.equal([
         'Sun',
         'Mon',
         'Tue',
@@ -1017,22 +953,19 @@ describe('<lion-calendar>', () => {
         'Sat',
       ]);
     });
-
     describe('Day view', () => {
       it('adds "today" attribute if date is today', async () => {
-        const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+        const clock = sinon.useFakeTimers({
+          now: new Date('2000/12/15').getTime(),
+        });
         const el = await fixture(html`<lion-calendar></lion-calendar>`);
         const elObj = new CalendarObject(el);
         expect(elObj.getDayEl(15).hasAttribute('today')).to.be.true;
-
-        expect(elObj.checkForAllDayObjs(/** @param {DayObject} d */ d => d.isToday, [15])).to.equal(
-          true,
-        );
-
+        expect(
+          elObj.checkForAllDayObjs(/** @param {DayObject} d */ (d) => d.isToday, [15]),
+        ).to.equal(true);
         clock.restore();
       });
-
       it('adds "selected" attribute to the selected date', async () => {
         const el = await fixture(
           html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
@@ -1040,24 +973,23 @@ describe('<lion-calendar>', () => {
         const elObj = new CalendarObject(el);
         expect(
           elObj.checkForAllDayObjs(
-            /** @param {DayObject} obj */ obj => obj.el.hasAttribute('selected'),
+            /** @param {DayObject} obj */ (obj) => obj.el.hasAttribute('selected'),
             [12],
           ),
         ).to.equal(true);
-
         el.selectedDate = new Date('2000/12/15');
         await el.updateComplete;
         expect(
           elObj.checkForAllDayObjs(
-            /** @param {DayObject} obj */ obj => obj.el.hasAttribute('selected'),
+            /** @param {DayObject} obj */ (obj) => obj.el.hasAttribute('selected'),
             [15],
           ),
         ).to.equal(true);
       });
-
       it('adds aria-disabled="true" attribute to disabled dates', async () => {
-        const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+        const clock = sinon.useFakeTimers({
+          now: new Date('2000/12/15').getTime(),
+        });
         const el = await fixture(html`
           <lion-calendar
             .selectedDate="${new Date('2000/12/10')}"
@@ -1069,15 +1001,13 @@ describe('<lion-calendar>', () => {
         const elObj = new CalendarObject(el);
         expect(
           elObj.checkForAllDayObjs(
-            /** @param {DayObject} d */ d => d.el.getAttribute('aria-disabled') === 'true',
+            /** @param {DayObject} d */ (d) => d.el.getAttribute('aria-disabled') === 'true',
             [1, 2, 30, 31],
           ),
         ).to.equal(true);
-
         clock.restore();
       });
     });
-
     describe('User Interaction', () => {
       // For implementation, base on: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/grid/js/dataGrid.js
 
@@ -1089,12 +1019,11 @@ describe('<lion-calendar>', () => {
           const elObj = new CalendarObject(el);
           expect(
             elObj.checkForAllDayObjs(
-              /** @param {DayObject} d */ d => d.buttonEl.getAttribute('tabindex') === '0',
+              /** @param {DayObject} d */ (d) => d.buttonEl.getAttribute('tabindex') === '0',
               [12],
             ),
           ).to.equal(true);
         });
-
         it('non focused days are not reachable via tab (have tabindex="-1")', async () => {
           const el = await fixture(html`
             <lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
@@ -1102,12 +1031,11 @@ describe('<lion-calendar>', () => {
           const elObj = new CalendarObject(el);
           expect(
             elObj.checkForAllDayObjs(
-              /** @param {DayObject} d */ d => d.buttonEl.getAttribute('tabindex') === '-1',
-              /** @param {number} dayNumber */ dayNumber => dayNumber !== 12,
+              /** @param {DayObject} d */ (d) => d.buttonEl.getAttribute('tabindex') === '-1',
+              /** @param {number} dayNumber */ (dayNumber) => dayNumber !== 12,
             ),
           ).to.equal(true);
         });
-
         it('blocks navigation to disabled days', async () => {
           const el = await fixture(html`
             <lion-calendar
@@ -1119,12 +1047,11 @@ describe('<lion-calendar>', () => {
           const elObj = new CalendarObject(el);
           expect(
             elObj.checkForAllDayObjs(
-              /** @param {DayObject} d */ d => d.buttonEl.getAttribute('tabindex') === '-1',
-              /** @param {number} dayNumber */ dayNumber => dayNumber < 9,
+              /** @param {DayObject} d */ (d) => d.buttonEl.getAttribute('tabindex') === '-1',
+              /** @param {number} dayNumber */ (dayNumber) => dayNumber < 9,
             ),
           ).to.equal(true);
         });
-
         it('navigates through months with [pageup] [pagedown] keys', async () => {
           const el = await fixture(html`
             <lion-calendar .selectedDate="${new Date('2001/01/02')}"></lion-calendar>
@@ -1132,30 +1059,28 @@ describe('<lion-calendar>', () => {
           const elObj = new CalendarObject(el);
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
-
           focusSelectedDate(el);
-          await sendKeys({ press: 'PageUp' });
-
+          await sendKeys({
+            press: 'PageUp',
+          });
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
-
-          await sendKeys({ press: 'PageDown' });
+          await sendKeys({
+            press: 'PageDown',
+          });
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
         });
-
         it('navigates through years with [alt + pageup] [alt + pagedown] keys', async () => {
           const el = await fixture(html`
             <lion-calendar .selectedDate="${new Date('2001/01/02')}"></lion-calendar>
           `);
           focusSelectedDate(el);
-
           const elObj = new CalendarObject(el);
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
-
           await sendKeys({
             down: 'Alt',
           });
@@ -1165,12 +1090,10 @@ describe('<lion-calendar>', () => {
           await sendKeys({
             up: 'Alt',
           });
-
           await el.updateComplete;
           focusSelectedDate(el);
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2002');
-
           await sendKeys({
             down: 'Alt',
           });
@@ -1184,103 +1107,102 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
         });
-
         describe('Arrow keys', () => {
           it('navigates (sets focus) to next row item via [arrow down] key', async () => {
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2001/01/02')}"></lion-calendar>
             `);
             const elObj = new CalendarObject(el);
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowDown' });
+            await sendKeys({
+              press: 'ArrowDown',
+            });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(2 + 7);
           });
-
           it('navigates (sets focus) to previous row item via [arrow up] key', async () => {
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2001/01/02')}"></lion-calendar>
             `);
             const elObj = new CalendarObject(el);
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowUp' });
+            await sendKeys({
+              press: 'ArrowUp',
+            });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(26); // of month before
           });
-
           it('navigates (sets focus) to previous column item via [arrow left] key', async () => {
             // 2000-12-12 is Tuesday; at 2nd of row
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
             `);
             const elObj = new CalendarObject(el);
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowLeft' });
+            await sendKeys({
+              press: 'ArrowLeft',
+            });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(12 - 1);
           });
-
           it('navigates (sets focus) to next column item via [arrow right] key', async () => {
             // 2000-12-12 is Tuesday; at 2nd of row
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
             `);
             const elObj = new CalendarObject(el);
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowRight' });
+            await sendKeys({
+              press: 'ArrowRight',
+            });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(12 + 1);
           });
-
           it('navigates (sets focus) to next column item via [arrow right] key', async () => {
             const el = await fixture(html`
               <lion-calendar
                 .selectedDate="${new Date('2001/01/02')}"
                 .disableDates=${
-                  /** @param {Date} date */ date => date.getDate() === 3 || date.getDate() === 4
+                  /** @param {Date} date */ (date) => date.getDate() === 3 || date.getDate() === 4
                 }
               ></lion-calendar>
             `);
             const elObj = new CalendarObject(el);
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowRight' });
+            await sendKeys({
+              press: 'ArrowRight',
+            });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(3);
           });
-
           it('navigates (sets focus) to next row via [arrow right] key if last item in row', async () => {
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2019/01/05')}"></lion-calendar>
             `);
             const elObj = new CalendarObject(el);
             expect(elObj.centralDayObj?.weekdayNameShort).to.equal('Sat');
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowRight' });
+            await sendKeys({
+              press: 'ArrowRight',
+            });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(6);
             expect(elObj.focusedDayObj?.weekdayNameShort).to.equal('Sun');
           });
-
           it('navigates (sets focus) to previous row via [arrow left] key if first item in row', async () => {
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2019/01/06')}"></lion-calendar>
             `);
             const elObj = new CalendarObject(el);
             expect(elObj.centralDayObj?.weekdayNameShort).to.equal('Sun');
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowLeft' });
+            await sendKeys({
+              press: 'ArrowLeft',
+            });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(5);
             expect(elObj.focusedDayObj?.weekdayNameShort).to.equal('Sat');
           });
-
           it('navigates to next month via [arrow right] key if last day of month', async () => {
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2000/12/31')}"></lion-calendar>
@@ -1288,15 +1210,15 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowRight' });
+            await sendKeys({
+              press: 'ArrowRight',
+            });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
             expect(elObj.focusedDayObj?.monthday).to.equal(1);
           });
-
           it('navigates to previous month via [arrow left] key if first day of month', async () => {
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2001/01/01')}"></lion-calendar>
@@ -1304,15 +1226,15 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowLeft' });
+            await sendKeys({
+              press: 'ArrowLeft',
+            });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
             expect(elObj.focusedDayObj?.monthday).to.equal(31);
           });
-
           it('navigates to next month via [arrow down] key if last row of month', async () => {
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2000/12/30')}"></lion-calendar>
@@ -1320,15 +1242,15 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowDown' });
+            await sendKeys({
+              press: 'ArrowDown',
+            });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
             expect(elObj.focusedDayObj?.monthday).to.equal(6);
           });
-
           it('navigates to previous month via [arrow up] key if first row of month', async () => {
             const el = await fixture(html`
               <lion-calendar .selectedDate="${new Date('2001/01/02')}"></lion-calendar>
@@ -1336,9 +1258,10 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
-
             focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowUp' });
+            await sendKeys({
+              press: 'ArrowUp',
+            });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
@@ -1346,7 +1269,6 @@ describe('<lion-calendar>', () => {
           });
         });
       });
-
       describe('Initial central', () => {
         it('is based on "selectedDate"', async () => {
           const el = await fixture(html`
@@ -1355,42 +1277,37 @@ describe('<lion-calendar>', () => {
           const elObj = new CalendarObject(el);
           expect(elObj.centralDayObj?.monthday).to.equal(15);
         });
-
         it('is today if no selected date is available', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+          const clock = sinon.useFakeTimers({
+            now: new Date('2000/12/15').getTime(),
+          });
           const el = await fixture(html`<lion-calendar></lion-calendar>`);
           const elObj = new CalendarObject(el);
           expect(elObj.centralDayObj?.monthday).to.equal(15);
-
           clock.restore();
         });
-
         it('is nearest to today if no selected date is available and today is disabled', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
+          const clock = sinon.useFakeTimers({
+            now: new Date('2000/12/15').getTime(),
+          });
           const calWithMin = await fixture(
             html`<lion-calendar .minDate=${new Date('2000/12/25')}></lion-calendar>`,
           );
           const calObjWithMin = new CalendarObject(calWithMin);
           expect(calObjWithMin.centralDayObj?.monthday).to.equal(25);
-
           const calWithMax = await fixture(
             html`<lion-calendar .maxDate=${new Date('2000/12/05')}></lion-calendar>`,
           );
           const calObjWithMax = new CalendarObject(calWithMax);
           expect(calObjWithMax.centralDayObj?.monthday).to.equal(5);
-
           const calWithDisabled = await fixture(
             html`<lion-calendar
-              .disableDates=${/** @param {Date} date */ date => date.getDate() === 15}
+              .disableDates=${/** @param {Date} date */ (date) => date.getDate() === 15}
             ></lion-calendar>`,
           );
           await calWithDisabled.updateComplete;
-
           const calObjWithDisabled = new CalendarObject(calWithDisabled);
           expect(calObjWithDisabled.centralDayObj?.monthday).to.equal(16);
-
           clock.restore();
         });
       });
@@ -1400,7 +1317,6 @@ describe('<lion-calendar>', () => {
        * - (virtual) scrolling: still under discussion. Wait for UX
        */
     });
-
     describe('Accessibility', () => {
       // Based on:
       // - https://codepen.io/erikkroes/pen/jJEWpR
@@ -1417,17 +1333,15 @@ describe('<lion-calendar>', () => {
         const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
         expect(elObj.rootEl?.getAttribute('role')).to.equal('application');
       });
-
       it(`renders the calendar as a table element with role="grid", aria-readonly="true" and
         a caption (month + year)`, async () => {
         const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
         expect(elObj.gridEl?.getAttribute('role')).to.equal('grid');
         expect(elObj.gridEl?.getAttribute('aria-readonly')).to.equal('true');
       });
-
       it('adds aria-labels to the weekday table headers', async () => {
         const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
-        expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([
+        expect(elObj.weekdayHeaderEls.map((h) => h.getAttribute('aria-label'))).to.eql([
           'Sunday',
           'Monday',
           'Tuesday',
@@ -1437,14 +1351,12 @@ describe('<lion-calendar>', () => {
           'Saturday',
         ]);
       });
-
       it('renders each day as a button inside a table cell', async () => {
         const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
-        const hasBtn = /** @param {DayObject} d */ d =>
+        const hasBtn = /** @param {DayObject} d */ (d) =>
           d.el.tagName === 'DIV' && d.el.getAttribute('role') === 'button';
         expect(elObj.checkForAllDayObjs(hasBtn)).to.equal(true);
       });
-
       it('renders days for previous and next months', async () => {
         const elObj = new CalendarObject(
           await fixture(html`
@@ -1459,7 +1371,6 @@ describe('<lion-calendar>', () => {
         expect(previousMonthDayObjs[1].monthday).to.equal(30);
         expect(previousMonthDayObjs[2].cellIndex).to.equal(2);
         expect(previousMonthDayObjs[2].monthday).to.equal(31);
-
         expect(nextMonthDayObjs.length).to.equal(9);
         expect(nextMonthDayObjs[0].cellIndex).to.equal(5);
         expect(nextMonthDayObjs[0].monthday).to.equal(1);
@@ -1480,7 +1391,6 @@ describe('<lion-calendar>', () => {
         expect(nextMonthDayObjs[8].cellIndex).to.equal(6);
         expect(nextMonthDayObjs[8].monthday).to.equal(9);
       });
-
       it('renders days for next months in the last month of the year', async () => {
         const elObj = new CalendarObject(
           await fixture(html`
@@ -1508,7 +1418,6 @@ describe('<lion-calendar>', () => {
         expect(nextMonthDayObjs[8].cellIndex).to.equal(6);
         expect(nextMonthDayObjs[8].monthday).to.equal(9);
       });
-
       it('renders days for previous months in the first month of the year', async () => {
         const elObj = new CalendarObject(
           await fixture(html`
@@ -1524,22 +1433,20 @@ describe('<lion-calendar>', () => {
         expect(previousMonthDayObjs[2].cellIndex).to.equal(2);
         expect(previousMonthDayObjs[2].monthday).to.equal(31);
       });
-
       it('sets aria-current="date" to todays button', async () => {
         const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
-        const hasAriaCurrent = /** @param {DayObject} d */ d =>
+        const hasAriaCurrent = /** @param {DayObject} d */ (d) =>
           d.buttonEl.getAttribute('aria-current') === 'date';
         const monthday = new Date().getDate();
         expect(elObj.checkForAllDayObjs(hasAriaCurrent, [monthday])).to.equal(true);
       });
-
       it('sets aria-pressed="true" on selected date button', async () => {
         const elObj = new CalendarObject(
           await fixture(html`
             <lion-calendar .selectedDate="${new Date('2000/11/12')}"></lion-calendar>
           `),
         );
-        const hasAriaPressed = /** @param {DayObject} d */ d =>
+        const hasAriaPressed = /** @param {DayObject} d */ (d) =>
           d.buttonEl.getAttribute('aria-pressed') === 'true';
         expect(elObj.checkForAllDayObjs(hasAriaPressed, [12])).to.equal(true);
       });
@@ -1555,7 +1462,6 @@ describe('<lion-calendar>', () => {
      * - show week numbers
      */
   });
-
   describe('Localization', () => {
     it('supports custom locale with a fallback to a global locale', async () => {
       const el = await fixture(html`
@@ -1563,35 +1469,28 @@ describe('<lion-calendar>', () => {
       `);
       const elObj = new CalendarObject(el);
       expect(elObj.activeMonth).to.equal('December');
-
       el.locale = 'fr-FR';
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('décembre');
-
       localizeManager.locale = 'cs-CZ';
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('décembre');
-
       el.locale = '';
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('prosinec');
     });
-
     it('displays the right translations according to locale', async () => {
       const el = await fixture(html`
         <lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>
       `);
-
       const elObj = new CalendarObject(el);
       expect(elObj.nextMonthButtonEl?.getAttribute('aria-label')).to.equal(
         'Next month, December 2019',
       );
-
       expect(elObj.previousMonthButtonEl?.getAttribute('aria-label')).to.equal(
         'Previous month, October 2019',
       );
-
-      expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([
+      expect(elObj.weekdayHeaderEls.map((h) => h.getAttribute('aria-label'))).to.eql([
         'Sunday',
         'Monday',
         'Tuesday',
@@ -1600,8 +1499,7 @@ describe('<lion-calendar>', () => {
         'Friday',
         'Saturday',
       ]);
-
-      expect(elObj.weekdayHeaderEls.map(h => h.textContent?.trim())).to.deep.equal([
+      expect(elObj.weekdayHeaderEls.map((h) => h.textContent?.trim())).to.deep.equal([
         'Sun',
         'Mon',
         'Tue',
@@ -1610,19 +1508,16 @@ describe('<lion-calendar>', () => {
         'Fri',
         'Sat',
       ]);
-
       localizeManager.locale = 'nl-NL';
       await el.localizeNamespacesLoaded;
       await el.updateComplete;
       expect(elObj.nextMonthButtonEl?.getAttribute('aria-label')).to.equal(
         'Volgende maand, december 2019',
       );
-
       expect(elObj.previousMonthButtonEl?.getAttribute('aria-label')).to.equal(
         'Vorige maand, oktober 2019',
       );
-
-      expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([
+      expect(elObj.weekdayHeaderEls.map((h) => h.getAttribute('aria-label'))).to.eql([
         'zondag',
         'maandag',
         'dinsdag',
@@ -1631,8 +1526,7 @@ describe('<lion-calendar>', () => {
         'vrijdag',
         'zaterdag',
       ]);
-
-      expect(elObj.weekdayHeaderEls.map(h => h.textContent?.trim())).to.deep.equal([
+      expect(elObj.weekdayHeaderEls.map((h) => h.textContent?.trim())).to.deep.equal([
         'zo',
         'ma',
         'di',
@@ -1643,13 +1537,11 @@ describe('<lion-calendar>', () => {
       ]);
     });
   });
-
   describe('Accessibility', () => {
     it('is accessible', async () => {
       const el = await fixture(html`<lion-calendar></lion-calendar>`);
       await expect(el).to.be.accessible();
     });
-
     it('is accessible with a date selected', async () => {
       const today = new Date();
       const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
@@ -1658,24 +1550,21 @@ describe('<lion-calendar>', () => {
       );
       await expect(el).to.be.accessible();
     });
-
     it('is accessible with disabled dates', async () => {
       const el = await fixture(html`
         <lion-calendar
           .disableDates=${
-            /** @param {Date} date */ date => date.getDay() === 6 || date.getDay() === 0
+            /** @param {Date} date */ (date) => date.getDay() === 6 || date.getDay() === 0
           }
         ></lion-calendar>
       `);
       await expect(el).to.be.accessible();
     });
-
     it('is hidden when attribute hidden is true', async () => {
       const el = await fixture(html`<lion-calendar hidden></lion-calendar>`);
       expect(el).not.to.be.displayed;
     });
   });
-
   describe('Run suite', () => {
     runCalendarSuite();
   });