@esri/calcite-components 1.0.0-beta.69 → 1.0.0-beta.72

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

@@ -4,9 +4,7 @@
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, dateFromISO, dateToISO, getDaysDiff } from "../../utils/date";
-import { getKey } from "../../utils/key";
 import { HEADING_LEVEL, TEXT } from "./resources";
 export class CalciteDatePicker {
   constructor() {
@@ -18,6 +16,10 @@ export class CalciteDatePicker {
      * @default "Next month"
      */
     this.intlNextMonth = TEXT.nextMonth;
+    /** Localized string for "year" (used for aria label)
+     * @default "Year"
+     */
+    this.intlYear = TEXT.year;
     /** BCP 47 language tag for desired language and country format */
     this.locale = document.documentElement.lang || "en";
     /** specify the scale of the date picker */
@@ -32,7 +34,7 @@ export class CalciteDatePicker {
     //
     //--------------------------------------------------------------------------
     this.keyUpHandler = (e) => {
-      if (getKey(e.key) === "Escape") {
+      if (e.key === "Escape") {
         this.reset();
       }
     };
@@ -141,7 +143,9 @@ export class CalciteDatePicker {
      */
     this.reset = () => {
       var _a, _b, _c, _d, _e, _f;
-      if (this.valueAsDate && ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
+      if (!Array.isArray(this.valueAsDate) &&
+        this.valueAsDate &&
+        ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
         this.activeDate = new Date(this.valueAsDate);
       }
       if (this.startAsDate && ((_c = this.startAsDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = this.activeStartDate) === null || _d === void 0 ? void 0 : _d.getTime())) {
@@ -210,21 +214,34 @@ export class CalciteDatePicker {
     };
   }
   handleValueAsDate(date) {
-    this.activeDate = date;
-    this.calciteDatePickerChange.emit(date);
+    if (!Array.isArray(date) && date && date !== this.activeDate) {
+      this.activeDate = date;
+      this.calciteDatePickerChange.emit(date);
+    }
   }
   handleRangeChange() {
     const { startAsDate: startDate, endAsDate: endDate } = this;
     this.activeEndDate = endDate;
     this.activeStartDate = startDate;
   }
+  onMinChanged(min) {
+    this.minAsDate = dateFromISO(min);
+  }
+  onMaxChanged(max) {
+    this.maxAsDate = dateFromISO(max);
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (this.value) {
+    if (Array.isArray(this.value)) {
+      this.valueAsDate = this.value.map((v) => dateFromISO(v));
+      this.start = this.value[0];
+      this.end = this.value[1];
+    }
+    else if (this.value) {
       this.valueAsDate = dateFromISO(this.value);
     }
     if (this.start) {
@@ -242,6 +259,8 @@ export class CalciteDatePicker {
   }
   async componentWillLoad() {
     await this.loadLocaleData();
+    this.onMinChanged(this.min);
+    this.onMaxChanged(this.max);
   }
   render() {
     var _a;
@@ -272,11 +291,19 @@ export class CalciteDatePicker {
         ? endDate || this.maxAsDate
         : this.maxAsDate
       : this.maxAsDate;
-    const dir = getElementDir(this.el);
-    return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, dir, maxDate, minDate, date, endDate)));
+    return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
-  valueWatcher(value) {
-    this.valueAsDate = dateFromISO(value);
+  valueHandler(value) {
+    if (Array.isArray(value)) {
+      this.valueAsDate = value.map((v) => dateFromISO(v));
+      this.start = value[0];
+      this.end = value[1];
+    }
+    else if (value) {
+      this.valueAsDate = dateFromISO(value);
+      this.start = "";
+      this.end = "";
+    }
   }
   startWatcher(start) {
     this.setStartAsDate(dateFromISO(start));
@@ -294,10 +321,10 @@ export class CalciteDatePicker {
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
    */
-  renderCalendar(activeDate, dir, maxDate, minDate, date, endDate) {
+  renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
-      h("calcite-date-picker-month-header", { activeDate: activeDate, dir: dir, headingLevel: this.headingLevel || HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, 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, dir: dir, 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-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 })
     ]);
   }
   /**
@@ -379,8 +406,8 @@ export class CalciteDatePicker {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string | string[]",
+        "resolved": "string | string[]",
         "references": {}
       },
       "required": false,
@@ -418,8 +445,8 @@ export class CalciteDatePicker {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "Date",
-        "resolved": "Date",
+        "original": "Date | Date[]",
+        "resolved": "Date | Date[]",
         "references": {
           "Date": {
             "location": "global"
@@ -448,7 +475,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use valueAsDate instead"
+          }],
         "text": "Selected start date as full date object"
       }
     },
@@ -467,7 +497,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use valueAsDate instead"
+          }],
         "text": "Selected end date as full date object"
       }
     },
@@ -511,7 +544,7 @@ export class CalciteDatePicker {
     },
     "min": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -528,7 +561,7 @@ export class CalciteDatePicker {
     },
     "max": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -585,6 +618,27 @@ export class CalciteDatePicker {
       "reflect": false,
       "defaultValue": "TEXT.nextMonth"
     },
+    "intlYear": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"Year\""
+          }],
+        "text": "Localized string for \"year\" (used for aria label)"
+      },
+      "attribute": "intl-year",
+      "reflect": false,
+      "defaultValue": "TEXT.year"
+    },
     "locale": {
       "type": "string",
       "mutable": false,
@@ -650,7 +704,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use value instead"
+          }],
         "text": "Selected start date"
       },
       "attribute": "start",
@@ -667,7 +724,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use value instead"
+          }],
         "text": "Selected end date"
       },
       "attribute": "end",
@@ -752,9 +812,15 @@ export class CalciteDatePicker {
     }, {
       "propName": "endAsDate",
       "methodName": "handleRangeChange"
+    }, {
+      "propName": "min",
+      "methodName": "onMinChanged"
+    }, {
+      "propName": "max",
+      "methodName": "onMaxChanged"
     }, {
       "propName": "value",
-      "methodName": "valueWatcher"
+      "methodName": "valueHandler"
     }, {
       "propName": "start",
       "methodName": "startWatcher"

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

@@ -5,5 +5,6 @@
 export const HEADING_LEVEL = 2;
 export const TEXT = {
   nextMonth: "Next month",
-  prevMonth: "Previous month"
+  prevMonth: "Previous month",
+  year: "Year"
 };

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -209,10 +213,18 @@
   background-color: var(--calcite-ui-foreground-current);
 }
 
+:host([start-of-range]) .day-wrapper {
+  border-start-start-radius: 40%;
+  border-end-start-radius: 40%;
+}
+
+:host([end-of-range]) .day-wrapper {
+  border-start-end-radius: 40%;
+  border-end-end-radius: 40%;
+}
+
 :host([start-of-range]) :not(.calcite--rtl) .day-wrapper,
 :host([end-of-range]) .calcite--rtl .day-wrapper {
-  border-top-left-radius: 40%;
-  border-bottom-left-radius: 40%;
   box-shadow: inset 4px 0 var(--calcite-ui-foreground-1);
 }
 
@@ -228,8 +240,6 @@
 
 :host([end-of-range]) :not(.calcite--rtl) .day-wrapper,
 :host([start-of-range]) .calcite--rtl .day-wrapper {
-  border-top-right-radius: 40%;
-  border-bottom-right-radius: 40%;
   box-shadow: inset -4px 0 var(--calcite-ui-foreground-1);
 }
 
@@ -364,8 +374,6 @@
 :host([range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([highlighted]:first-child) .calcite--rtl .day-wrapper,
 :host([range-hover]:first-child) .calcite--rtl .day-wrapper {
-  border-top-right-radius: 45%;
-  border-bottom-right-radius: 45%;
   box-shadow: inset -4px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
@@ -373,8 +381,6 @@
 :host([range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
 :host([highlighted]:last-child) .calcite--rtl .day-wrapper,
 :host([range-hover]:last-child) .calcite--rtl .day-wrapper {
-  border-top-left-radius: 45%;
-  border-bottom-left-radius: 45%;
   box-shadow: inset 4px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
@@ -399,6 +405,18 @@
   box-shadow: inset 6px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
+:host([highlighted]:first-child) .day-wrapper,
+:host([range-hover]:first-child) .day-wrapper {
+  border-start-start-radius: 45%;
+  border-end-start-radius: 45%;
+}
+
+:host([highlighted]:last-child) .day-wrapper,
+:host([range-hover]:last-child) .day-wrapper {
+  border-start-end-radius: 45%;
+  border-end-end-radius: 45%;
+}
+
 :host([scale=l][highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([scale=l][range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([scale=l][highlighted]:first-child) .calcite--rtl .day-wrapper,

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

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
-import { getKey } from "../../utils/key";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 export class CalciteDatePickerDay {
@@ -35,7 +34,7 @@ export class CalciteDatePickerDay {
       !this.disabled && this.calciteDaySelect.emit();
     };
     this.keyDownHandler = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         !this.disabled && this.calciteDaySelect.emit();
       }

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {

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

@@ -4,8 +4,6 @@
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
-import { getKey } from "../../utils/key";
-import { getElementDir } from "../../utils/dom";
 export class CalciteDatePickerMonth {
   constructor() {
     /** Date currently active.*/
@@ -17,7 +15,7 @@ export class CalciteDatePickerMonth {
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
       const isRTL = this.el.dir === "rtl";
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowUp":
           e.preventDefault();
           this.addDays(-7);
@@ -99,20 +97,19 @@ export class CalciteDatePickerMonth {
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPrevMonthdays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
-    const dir = getElementDir(this.el);
     const days = [
       ...prevMonDays.map((day) => {
         const date = new Date(year, month - 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       }),
       ...curMonDays.map((day) => {
         const date = new Date(year, month, day);
         const active = sameDate(date, this.activeDate);
-        return this.renderDateDay(active, day, dir, date, true, true);
+        return this.renderDateDay(active, day, date, true, true);
       }),
       ...nextMonDays.map((day) => {
         const date = new Date(year, month + 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       })
     ];
     const weeks = [];
@@ -225,7 +222,7 @@ export class CalciteDatePickerMonth {
   /**
    * Render calcite-date-picker-day
    */
-  renderDateDay(active, day, dir, date, currentMonth, ref) {
+  renderDateDay(active, day, date, currentMonth, ref) {
     var _a;
     const isFocusedOnStart = this.isFocusedOnStart();
     const isHoverInRange = this.isHoverInRange() ||
@@ -235,7 +232,7 @@ export class CalciteDatePickerMonth {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, dir: dir, 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, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, 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();

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {

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

@@ -3,9 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
-import { getKey } from "../../utils/key";
 import { CalciteHeading } from "../functional/CalciteHeading";
 export class CalciteDatePickerMonthHeader {
   constructor() {
@@ -19,7 +17,7 @@ export class CalciteDatePickerMonthHeader {
      */
     this.onYearKey = (e) => {
       const year = e.target.value;
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
           this.setYear(year, -1);
@@ -37,7 +35,7 @@ export class CalciteDatePickerMonthHeader {
       this.handleArrowClick(e, this.prevMonthDate);
     };
     this.prevMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.prevMonthClick(e);
       }
@@ -46,7 +44,7 @@ export class CalciteDatePickerMonthHeader {
       this.handleArrowClick(e, this.nextMonthDate);
     };
     this.nextMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.nextMonthClick(e);
       }
@@ -69,10 +67,9 @@ export class CalciteDatePickerMonthHeader {
     this.setNextPrevMonthDates();
   }
   render() {
-    const dir = getElementDir(this.el);
-    return (h("div", { class: "header", dir: dir }, this.renderContent(dir)));
+    return h("div", { class: "header" }, this.renderContent());
   }
-  renderContent(dir) {
+  renderContent() {
     var _a;
     if (!this.activeDate || !this.localeData) {
       return null;
@@ -87,11 +84,11 @@ export class CalciteDatePickerMonthHeader {
     const suffix = (_a = this.localeData.year) === null || _a === void 0 ? void 0 : _a.suffix;
     return (h(Fragment, null,
       h("a", { "aria-disabled": (this.prevMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlPrevMonth, class: "chevron", href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 },
-        h("calcite-icon", { dir: dir, "flip-rtl": true, icon: "chevron-left", scale: iconScale })),
+        h("calcite-icon", { "flip-rtl": true, icon: "chevron-left", scale: iconScale })),
       h("div", { class: { text: true, "text--reverse": reverse } },
         h(CalciteHeading, { class: "month", level: this.headingLevel }, localizedMonth),
         h("span", { class: "year-wrap" },
-          h("input", { class: {
+          h("input", { "aria-label": this.intlYear, class: {
               year: true,
               "year--suffix": !!suffix
             }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.yearChanged, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }),
@@ -99,7 +96,7 @@ export class CalciteDatePickerMonthHeader {
             h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear),
             " " + suffix)))),
       h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 },
-        h("calcite-icon", { dir: dir, "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
+        h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {
@@ -289,6 +286,23 @@ export class CalciteDatePickerMonthHeader {
       "attribute": "intl-next-month",
       "reflect": false
     },
+    "intlYear": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Localized string for year."
+      },
+      "attribute": "intl-year",
+      "reflect": false
+    },
     "scale": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/calcite-dropdown/calcite-dropdown.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -174,31 +178,4 @@
 
 :host([width=l]) {
   --calcite-dropdown-width: 16rem;
-}
-
-:host([scale=s]) {
-  --calcite-dropdown-group-padding: 0.5rem 0;
-  --calcite-dropdown-item-padding: 0.25rem 0.75rem 0.25rem 1.5rem;
-}
-
-:host([scale=m]) {
-  --calcite-dropdown-group-padding: 0.5rem 0;
-  --calcite-dropdown-item-padding: 0.5rem 0.75rem 0.5rem 1.5rem;
-}
-
-:host([scale=l]) {
-  --calcite-dropdown-group-padding: 0.75rem 0;
-  --calcite-dropdown-item-padding: 0.5rem 0.75rem 0.5rem 1.5rem;
-}
-
-:host([scale=s]) .calcite--rtl {
-  --calcite-dropdown-item-padding: 0.25rem 1.5rem 0.25rem 0.75rem;
-}
-
-:host([scale=m]) .calcite--rtl {
-  --calcite-dropdown-item-padding: 0.5rem 1.5rem 0.5rem 0.75rem;
-}
-
-:host([scale=l]) .calcite--rtl {
-  --calcite-dropdown-item-padding: 0.5rem 1.5rem 0.5rem 0.75rem;
 }

package/dist/collection/components/calcite-dropdown/calcite-dropdown.js

@@ -3,11 +3,9 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
-import { getKey } from "../../utils/key";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { createPopper, CSS as PopperCSS, updatePopper } from "../../utils/popper";
 import { DefaultDropdownPlacement, SLOTS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
@@ -59,7 +57,7 @@ export class CalciteDropdown {
     //
     //--------------------------------------------------------------------------
     this.items = [];
-    this.activeTransitionProp = "opacity";
+    this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     //--------------------------------------------------------------------------
     //
@@ -95,7 +93,7 @@ export class CalciteDropdown {
     };
     this.keyDownHandler = (e) => {
       const target = e.target;
-      const key = getKey(e.key);
+      const key = e.key;
       if (this.triggers.includes(target) ||
         this.triggers.some((trigger) => trigger.contains(target))) {
         if (target.nodeName !== "BUTTON" && target.nodeName !== "CALCITE-BUTTON") {
@@ -158,9 +156,8 @@ export class CalciteDropdown {
   }
   render() {
     const { active } = this;
-    const dir = getElementDir(this.el);
     return (h(Host, { tabIndex: this.disabled ? -1 : null },
-      h("div", { class: { ["calcite-dropdown-trigger-container"]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
+      h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
         h("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: SLOTS.dropdownTrigger })),
       h("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
         h("div", { class: {
@@ -221,7 +218,7 @@ export class CalciteDropdown {
     const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
-    switch (getKey(keyboardEvent.key)) {
+    switch (keyboardEvent.key) {
       case "Tab":
         if (isLastItem && !keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();
@@ -509,7 +506,7 @@ export class CalciteDropdown {
       "mutable": true,
       "complexType": {
         "original": "HTMLCalciteDropdownItemElement[]",
-        "resolved": "HTMLCalciteDropdownItemElement[]",
+        "resolved": "any[]",
         "references": {
           "HTMLCalciteDropdownItemElement": {
             "location": "global"

package/dist/collection/components/calcite-dropdown-group/calcite-dropdown-group.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {