@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/collection/components/combobox-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-group.css

@@ -105,7 +105,8 @@
   --calcite-combobox-item-spacing-indent-2: 2rem;
 }
 
-:host, .list {
+:host, 
+.list {
   margin: 0px;
   display: flex;
   flex-direction: column;

package/dist/collection/components/combobox-item-group/combobox-item-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Prop, h, Element } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/combobox-item-group/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/assets/date-picker/nls/ru.json

@@ -5,10 +5,10 @@
   "weekStart": 1,
   "placeholder": "DD.MM.YYYY",
   "days": {
-    "abbreviated": ["пн", "вт", "ср", "чт", "пт", "сб", "вс"],
-    "narrow": ["пн", "вт", "ср", "чт", "пт", "сб", "вс"],
-    "short": ["пн", "вт", "ср", "чт", "пт", "сб", "вс"],
-    "wide": ["понедельник", "вторник", "среда", "четверг", "пятница", "суббота", "воскресенье"]
+    "abbreviated": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
+    "narrow": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
+    "short": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
+    "wide": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"]
   },
   "numerals": "0123456789",
   "months": {

package/dist/collection/components/date-picker/assets/date-picker/nls/th.json

@@ -1,5 +1,5 @@
 {
-  "default-calendar": "gregorian",
+  "default-calendar": "buddhist",
   "separator": "/",
   "unitOrder": "DD/MM/YYYY",
   "weekStart": 7,

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
@@ -9,15 +9,21 @@ import { dateFromRange, dateFromISO, dateToISO, getDaysDiff } from "../../utils/
 import { HEADING_LEVEL, TEXT } from "./resources";
 export class DatePicker {
   constructor() {
-    /** Localized string for "previous month" (used for aria label)
+    /**
+     * Localized string for "previous month" (used for aria label)
+     *
      * @default "Previous month"
      */
     this.intlPrevMonth = TEXT.prevMonth;
-    /** Localized string for "next month" (used for aria label)
+    /**
+     * Localized string for "next month" (used for aria label)
+     *
      * @default "Next month"
      */
     this.intlNextMonth = TEXT.nextMonth;
-    /** Localized string for "year" (used for aria label)
+    /**
+     * Localized string for "year" (used for aria label)
+     *
      * @default "Year"
      */
     this.intlYear = TEXT.year;
@@ -133,6 +139,7 @@ export class DatePicker {
           this.hoverRange = undefined;
         }
       }
+      e.stopPropagation();
     };
     this.monthMouseOutChange = () => {
       if (this.hoverRange) {
@@ -158,6 +165,8 @@ export class DatePicker {
     };
     /**
      * Event handler for when the selected date changes
+     *
+     * @param e
      */
     this.monthDateChange = (e) => {
       const date = new Date(e.detail);
@@ -228,10 +237,14 @@ export class DatePicker {
     this.activeStartDate = startDate;
   }
   onMinChanged(min) {
-    this.minAsDate = dateFromISO(min);
+    if (min) {
+      this.minAsDate = dateFromISO(min);
+    }
   }
   onMaxChanged(max) {
-    this.maxAsDate = dateFromISO(max);
+    if (max) {
+      this.maxAsDate = dateFromISO(max);
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -323,15 +336,24 @@ export class DatePicker {
   }
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
+   *
+   * @param activeDate
+   * @param maxDate
+   * @param minDate
+   * @param date
+   * @param endDate
    */
   renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
       h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
-      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerHover: this.monthHoverChange, onCalciteDatePickerMouseOut: this.monthMouseOutChange, onCalciteDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
+      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerSelect: this.monthDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
   /**
    * Update date instance of start if valid
+   *
+   * @param startDate
+   * @param emit
    */
   setStartAsDate(startDate, emit) {
     this.startAsDate = startDate;
@@ -345,6 +367,9 @@ export class DatePicker {
   }
   /**
    * Update date instance of end if valid
+   *
+   * @param endDate
+   * @param emit
    */
   setEndAsDate(endDate, emit) {
     this.endAsDate = endDate;
@@ -368,6 +393,10 @@ export class DatePicker {
   }
   /**
    * Get an active date using the value, or current date as default
+   *
+   * @param value
+   * @param min
+   * @param max
    */
   getActiveDate(value, min, max) {
     return dateFromRange(this.activeDate, min, max) || value || dateFromRange(new Date(), min, max);

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

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export {};

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const HEADING_LEVEL = 2;
 export const TEXT = {

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

@@ -1,13 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { getAssetPath } from "@stencil/core";
 import { locales } from "../../utils/locale";
 /**
  * Get supported locale code from raw user input
  * Exported for testing purposes.
+ *
+ * @param lang
  * @private
  */
 function getSupportedLocale(lang = "") {
@@ -26,17 +28,21 @@ function getSupportedLocale(lang = "") {
 /**
  * CLDR cache.
  * Exported for testing purposes.
+ *
  * @private
  */
 export const translationCache = {};
 /**
  * CLDR request cache.
  * Exported for testing purposes.
+ *
  * @private
  */
 export const requestCache = {};
 /**
  * Fetch calendar data for a given locale from list of supported languages
+ *
+ * @param lang
  * @public
  */
 export async function getLocaleData(lang) {

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

@@ -120,18 +120,16 @@
   line-height: 1;
   color: var(--calcite-ui-text-3);
   opacity: var(--calcite-ui-opacity-disabled);
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  outline-color: transparent;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   background: none;
-  box-shadow: 0 0 0 2px transparent, 0 0 0 0px transparent;
+  box-shadow: 0 0 0 2px transparent;
 }
 
 .text {
   margin-top: 1px;
-  margin-right: 0px;
   margin-bottom: 0px;
-  margin-left: 1px;
+  margin-inline-start: 0px;
 }
 
 :host([scale=s]) .day-v-wrapper {
@@ -179,19 +177,23 @@
   opacity: 1;
 }
 
-:host(:hover:not([disabled])) .day, :host([active]:not([range])) .day {
+:host(:hover:not([disabled])) .day, 
+:host([active]:not([range])) .day {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
 
-:host(:focus), :host([active]) {
+:host(:focus), 
+:host([active]) {
   outline: 2px solid transparent;
   outline-offset: 2px;
   z-index: 1;
 }
 
 :host(:focus:not([disabled])) .day {
-  box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+  outline: 2px solid var(--calcite-ui-brand);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
 :host([selected]) .day {
@@ -312,7 +314,8 @@
 :host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current));
 }
-:host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day, 
+:host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -322,7 +325,8 @@
 :host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
 }
-:host(:hover[range-hover]:not([selected]).focused--start) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--start) :not(.calcite--rtl) .day, 
+:host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -332,7 +336,8 @@
 :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
 }
-:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day, 
+:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -342,17 +347,20 @@
 :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));
 }
-:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day, 
+:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
-:host(:hover[start-of-range].hover--inside-range.focused--end) .day-wrapper, :host(:hover[end-of-range].hover--inside-range.focused--start) .day-wrapper {
+:host(:hover[start-of-range].hover--inside-range.focused--end) .day-wrapper, 
+:host(:hover[end-of-range].hover--inside-range.focused--start) .day-wrapper {
   background-image: none;
 }
 
-:host([start-of-range].hover--inside-range.focused--end) .day-wrapper, :host([end-of-range].hover--inside-range.focused--start) .day-wrapper {
+:host([start-of-range].hover--inside-range.focused--end) .day-wrapper, 
+:host([end-of-range].hover--inside-range.focused--start) .day-wrapper {
   background-color: var(--calcite-ui-foreground-2);
 }
 
@@ -411,7 +419,8 @@
 }
 
 @media (forced-colors: active) {
-  :host(:hover:not([disabled])) .day, :host([active]:not([range])) .day {
+  :host(:hover:not([disabled])) .day, 
+:host([active]:not([range])) .day {
     border-radius: 0px;
   }
 
@@ -421,8 +430,6 @@
   }
   :host([selected]) .day {
     border-radius: 0px;
-  }
-  :host([selected]) .day {
     background-color: highlight;
   }
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -43,7 +43,7 @@ export class DatePickerDay {
     };
   }
   mouseoverHandler() {
-    this.calciteDayHover.emit({
+    this.calciteInternalDayHover.emit({
       disabled: this.disabled
     });
   }
@@ -336,8 +336,8 @@ export class DatePickerDay {
         "references": {}
       }
     }, {
-      "method": "calciteDayHover",
-      "name": "calciteDayHover",
+      "method": "calciteInternalDayHover",
+      "name": "calciteInternalDayHover",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
@@ -69,11 +69,12 @@ export class DatePickerMonth {
     this.dayHover = (e) => {
       const target = e.target;
       if (e.detail.disabled) {
-        this.calciteDatePickerMouseOut.emit();
+        this.calciteInternalDatePickerMouseOut.emit();
       }
       else {
-        this.calciteDatePickerHover.emit(target.value);
+        this.calciteInternalDatePickerHover.emit(target.value);
       }
+      e.stopPropagation();
     };
     this.daySelect = (e) => {
       const target = e.target;
@@ -81,7 +82,7 @@ export class DatePickerMonth {
     };
   }
   mouseoutHandler() {
-    this.calciteDatePickerMouseOut.emit();
+    this.calciteInternalDatePickerMouseOut.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -129,6 +130,8 @@ export class DatePickerMonth {
   //--------------------------------------------------------------------------
   /**
    * Add n months to the current month
+   *
+   * @param step
    */
   addMonths(step) {
     const nextDate = new Date(this.activeDate);
@@ -138,6 +141,8 @@ export class DatePickerMonth {
   }
   /**
    * Add n days to the current date
+   *
+   * @param step
    */
   addDays(step = 0) {
     const nextDate = new Date(this.activeDate);
@@ -147,6 +152,10 @@ export class DatePickerMonth {
   }
   /**
    * Get dates for last days of the previous month
+   *
+   * @param month
+   * @param year
+   * @param startOfWeek
    */
   getPrevMonthdays(month, year, startOfWeek) {
     const lastDate = new Date(year, month, 0);
@@ -156,13 +165,16 @@ export class DatePickerMonth {
     if (day - 6 === startOfWeek) {
       return days;
     }
-    for (let i = lastDate.getDay(); i >= startOfWeek; i--) {
+    for (let i = Math.abs(lastDate.getDay() - startOfWeek); i >= 0; i--) {
       days.push(date - i);
     }
     return days;
   }
   /**
    * Get dates for the current month
+   *
+   * @param month
+   * @param year
    */
   getCurrentMonthDays(month, year) {
     const num = new Date(year, month + 1, 0).getDate();
@@ -174,6 +186,10 @@ export class DatePickerMonth {
   }
   /**
    * Get dates for first days of the next month
+   *
+   * @param month
+   * @param year
+   * @param startOfWeek
    */
   getNextMonthDays(month, year, startOfWeek) {
     const endDay = new Date(year, month + 1, 0).getDay();
@@ -188,6 +204,8 @@ export class DatePickerMonth {
   }
   /**
    * Determine if the date is in between the start and end dates
+   *
+   * @param date
    */
   betweenSelectedRange(date) {
     return !!(this.startDate &&
@@ -198,6 +216,8 @@ export class DatePickerMonth {
   }
   /**
    * Determine if the date should be in selected state
+   *
+   * @param date
    */
   isSelected(date) {
     return !!(sameDate(date, this.selectedDate) ||
@@ -206,6 +226,8 @@ export class DatePickerMonth {
   }
   /**
    * Determine if the date is the start of the date range
+   *
+   * @param date
    */
   isStartOfRange(date) {
     return !!(this.startDate &&
@@ -222,6 +244,12 @@ export class DatePickerMonth {
   }
   /**
    * Render calcite-date-picker-day
+   *
+   * @param active
+   * @param day
+   * @param date
+   * @param currentMonth
+   * @param ref
    */
   renderDateDay(active, day, date, currentMonth, ref) {
     var _a;
@@ -233,7 +261,7 @@ export class DatePickerMonth {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el === null || el === void 0 ? void 0 : el.focus();
@@ -475,8 +503,8 @@ export class DatePickerMonth {
         "references": {}
       }
     }, {
-      "method": "calciteDatePickerHover",
-      "name": "calciteDatePickerHover",
+      "method": "calciteInternalDatePickerHover",
+      "name": "calciteInternalDatePickerHover",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -508,8 +536,8 @@ export class DatePickerMonth {
         "references": {}
       }
     }, {
-      "method": "calciteDatePickerMouseOut",
-      "name": "calciteDatePickerMouseOut",
+      "method": "calciteInternalDatePickerMouseOut",
+      "name": "calciteInternalDatePickerMouseOut",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -137,19 +137,15 @@
   color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   width: 14.2857142857%;
 }
 .chevron:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-.chevron:hover, .chevron:focus {
+.chevron:hover,  .chevron:focus {
   background-color: var(--calcite-ui-foreground-2);
   fill: var(--calcite-ui-text-1);
   color: var(--calcite-ui-text-1);
@@ -177,7 +173,9 @@
   flex-direction: row-reverse;
 }
 
-.month, .year, .suffix {
+.month, 
+.year, 
+.suffix {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   margin-top: auto;
@@ -197,9 +195,7 @@
   background-color: transparent;
   text-align: center;
   font-family: inherit;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   z-index: 2;
 }
 .year:hover {