@esri/calcite-components 1.0.0-next.313 → 1.0.0-next.317

package/dist/collection/components/calcite-tab-title/calcite-tab-title.js

@@ -4,8 +4,7 @@
  */
 import { Component, Prop, Event, Listen, Element, Method, h, Host, State, Build, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getElementDir, getElementProp } from "../../utils/dom";
-import { getKey } from "../../utils/key";
+import { getElementDir, getElementProp, getElementStyleDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
 /**
@@ -123,14 +122,14 @@ export class CalciteTabTitle {
     this.emitActiveTab();
   }
   keyDownHandler(e) {
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
       case "Enter":
         this.emitActiveTab();
         e.preventDefault();
         break;
       case "ArrowRight":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusNext.emit();
         }
         else {
@@ -138,7 +137,7 @@ export class CalciteTabTitle {
         }
         break;
       case "ArrowLeft":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusPrevious.emit();
         }
         else {

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

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Host, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
-import { getKey, isActivationKey, numberKeys } from "../../utils/key";
+import { isActivationKey, numberKeys } from "../../utils/key";
 import { isValidNumber } from "../../utils/number";
 import { formatTimePart, maxTenthForMinuteAndSecond, getMeridiem, getMeridiemHour } from "../../utils/time";
 import { CSS, TEXT } from "./resources";
@@ -122,7 +122,7 @@ export class CalciteTimePicker {
       }
     };
     this.hourKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newHour;
@@ -210,7 +210,7 @@ export class CalciteTimePicker {
       }
     };
     this.meridiemKeyDownHandler = (event) => {
-      switch (getKey(event.key)) {
+      switch (event.key) {
         case "a":
           this.setTime("meridiem", "AM");
           break;
@@ -246,7 +246,7 @@ export class CalciteTimePicker {
       }
     };
     this.minuteKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newMinute;
@@ -294,7 +294,7 @@ export class CalciteTimePicker {
       }
     };
     this.secondKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newSecond;
@@ -403,7 +403,7 @@ export class CalciteTimePicker {
     this.calciteTimePickerFocus.emit();
   }
   keyDownHandler(event) {
-    const key = getKey(event.key);
+    const key = event.key;
     switch (this.activeEl) {
       case this.hourEl:
         if (key === "ArrowRight") {
@@ -462,7 +462,7 @@ export class CalciteTimePicker {
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
   }
   buttonActivated(event) {
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === " ") {
       event.preventDefault();
     }

package/dist/collection/components/calcite-tip-manager/calcite-tip-manager.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
-import { getElementDir } from "../../utils/dom";
+import { getElementStyleDir } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { createObserver } from "../../utils/observers";
 /**
@@ -136,7 +136,7 @@ export class CalciteTipManager {
   //
   // --------------------------------------------------------------------------
   renderPagination() {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
     const nextLabel = intlNext || TEXT.next;
     const previousLabel = intlPrevious || TEXT.previous;

package/dist/collection/components/calcite-tooltip-manager/calcite-tooltip-manager.js

@@ -5,7 +5,6 @@
 import { Component, h, Listen, Prop, Element } from "@stencil/core";
 import { TOOLTIP_REFERENCE, TOOLTIP_DELAY_MS } from "../calcite-tooltip/resources";
 import { queryElementRoots } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
  */
@@ -117,7 +116,7 @@ export class CalciteTooltipManager {
   //
   //--------------------------------------------------------------------------
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape") {
+    if (event.key === "Escape") {
       const { tooltipEl } = this;
       if (tooltipEl) {
         this.clearHoverTimeout(tooltipEl);

package/dist/collection/components/calcite-tree-item/calcite-tree-item.js

@@ -5,7 +5,6 @@
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 /**
@@ -164,7 +163,7 @@ export class CalciteTreeItem {
   }
   keyDownHandler(e) {
     let root;
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.calciteTreeItemSelect.emit({
           modifyCurrentSelection: e.shiftKey,

package/dist/collection/components/functional/CalciteExpandToggle.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { h } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, getElementStyleDir } from "../../utils/dom";
 import { queryActions } from "../calcite-action-bar/utils";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../calcite-action-group/resources";
 const ICONS = {
@@ -30,7 +30,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   return referenceElement;
 };
 export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
-  const rtl = getElementDir(el) === "rtl";
+  const rtl = getElementStyleDir(el) === "rtl";
   const expandText = expanded ? intlCollapse : intlExpand;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
   if (rtl) {
@@ -39,6 +39,6 @@ export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  const actionNode = (h("calcite-action", { dir: getElementDir(el) === "rtl" ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
   return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
 };

package/dist/collection/utils/dom.js

@@ -23,6 +23,12 @@ export function nodeListToArray(nodeList) {
 export function getThemeName(el) {
   return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
 }
+export function getElementStyleDir(el) {
+  return window.getComputedStyle(el).direction || "ltr";
+}
+/**
+ * @deprecated use getElementStyleDir instead.
+ */
 export function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;

package/dist/collection/utils/key.js

@@ -2,30 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-/**
- * Standardize key property of keyboard event (mostly for ie11)
- */
-export function getKey(key, dir) {
-  const lookup = {
-    Up: "ArrowUp",
-    Down: "ArrowDown",
-    Left: "ArrowLeft",
-    Right: "ArrowRight",
-    Spacebar: " ",
-    Esc: "Escape"
-  };
-  const adjustedKey = lookup[key] || key;
-  const isRTL = dir === "rtl";
-  if (isRTL && adjustedKey === "ArrowLeft") {
-    return "ArrowRight";
-  }
-  if (isRTL && adjustedKey === "ArrowRight") {
-    return "ArrowLeft";
-  }
-  return adjustedKey;
-}
 export function isActivationKey(key) {
-  key = getKey(key);
   return key === "Enter" || key === " ";
 }
 export const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

package/dist/components/CalciteExpandToggle.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { forceUpdate, h } from '@stencil/core/internal/client';
-import { a as getElementDir } from './dom.js';
+import { c as getElementStyleDir, a as getElementDir } from './dom.js';
 import { S as SLOTS } from './calcite-action-menu2.js';
 import { S as SLOTS$1 } from './calcite-action-group2.js';
 
@@ -71,7 +71,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   return referenceElement;
 };
 const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
-  const rtl = getElementDir(el) === "rtl";
+  const rtl = getElementStyleDir(el) === "rtl";
   const expandText = expanded ? intlCollapse : intlExpand;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
   if (rtl) {
@@ -80,7 +80,7 @@ const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, p
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  const actionNode = (h("calcite-action", { dir: getElementDir(el) === "rtl" ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
   return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
 };
 

package/dist/components/calcite-accordion-item.js

@@ -4,7 +4,6 @@
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
-import { g as getKey } from './key.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 
 const calciteAccordionItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}.icon-position--end,.icon-position--start{--calcite-accordion-item-icon-rotation:-90deg;--calcite-accordion-item-active-icon-rotation:0;--calcite-accordion-item-icon-rotation-rtl:90deg;--calcite-accordion-item-active-icon-rotation-rtl:0}.icon-position--start{--calcite-accordion-item-flex-direction:row-reverse;--calcite-accordion-item-icon-spacing-start:0;--calcite-accordion-item-icon-spacing-end:var(--calcite-accordion-icon-margin)}.icon-position--end{--calcite-accordion-item-flex-direction:row;--calcite-accordion-item-icon-spacing-start:var(--calcite-accordion-icon-margin);--calcite-accordion-item-icon-spacing-end:0}.icon-position--end:not(.icon-type--plus-minus){--calcite-accordion-item-icon-rotation:0;--calcite-accordion-item-active-icon-rotation:180deg;--calcite-accordion-item-icon-rotation-rtl:0;--calcite-accordion-item-active-icon-rotation-rtl:-180deg}:host{--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host-context([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}:host-context([appearance=transparent]){--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative;color:var(--calcite-ui-text-3);background-color:var(--calcite-accordion-item-background);--calcite-accordion-item-border:var(--calcite-ui-border-2)}:host .accordion-item-header{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus) .accordion-item-header{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([active]){color:var(--calcite-ui-text-1)}:host([active]) .accordion-item-content{display:block;color:var(--calcite-ui-text-1)}:host([active]) .accordion-item-header{border-bottom-color:transparent}:host .accordion-item-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;-ms-flex-direction:var(--calcite-accordion-item-flex-direction);flex-direction:var(--calcite-accordion-item-flex-direction)}:host .accordion-item-icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-right:var(--calcite-accordion-item-icon-spacing-start);margin-left:var(--calcite-accordion-item-icon-spacing-end)}.calcite--rtl .accordion-item-icon{margin-left:var(--calcite-accordion-item-icon-spacing-start);margin-right:var(--calcite-accordion-item-icon-spacing-end)}:host .accordion-item-content,:host .accordion-item-header{padding:var(--calcite-accordion-item-padding);border-bottom:1px solid var(--calcite-accordion-item-border)}:host .accordion-item-header *{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .accordion-item-content{display:none;color:var(--calcite-ui-text-3);padding-top:0;text-align:initial}:host .accordion-item-expand-icon{color:var(--calcite-ui-text-3);margin-left:var(--calcite-accordion-item-icon-spacing-start);margin-right:var(--calcite-accordion-item-icon-spacing-end);-webkit-transform:rotate(var(--calcite-accordion-item-icon-rotation));transform:rotate(var(--calcite-accordion-item-icon-rotation))}.calcite--rtl .accordion-item-expand-icon{margin-left:var(--calcite-accordion-item-icon-spacing-end);margin-right:var(--calcite-accordion-item-icon-spacing-start);-webkit-transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl));transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl))}:host([active]) .accordion-item-expand-icon{color:var(--calcite-ui-text-1);-webkit-transform:rotate(var(--calcite-accordion-item-active-icon-rotation));transform:rotate(var(--calcite-accordion-item-active-icon-rotation))}:host([active]) .calcite--rtl .accordion-item-expand-icon{-webkit-transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl))}:host .accordion-item-header-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;margin-right:auto;text-align:initial}.calcite--rtl .accordion-item-header-text{margin-right:0;margin-left:auto}:host .accordion-item-title,:host .accordion-item-subtitle{display:-ms-flexbox;display:flex;width:100%}:host .accordion-item-title{color:var(--calcite-ui-text-2);font-weight:var(--calcite-font-weight-medium)}:host .accordion-item-subtitle{color:var(--calcite-ui-text-3);margin-top:0.25rem}.calcite--rtl .accordion-item-title{margin-right:0;margin-left:auto}:host(:focus) .accordion-item-title,:host(:hover) .accordion-item-title{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-icon,:host(:hover) .accordion-item-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-expand-icon,:host(:hover) .accordion-item-expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-subtitle,:host(:hover) .accordion-item-subtitle{color:var(--calcite-ui-text-2)}:host(:focus) .accordion-item-title,:host(:active) .accordion-item-title,:host([active]) .accordion-item-title{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-icon,:host(:active) .accordion-item-icon,:host([active]) .accordion-item-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-expand-icon,:host(:active) .accordion-item-expand-icon,:host([active]) .accordion-item-expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-subtitle,:host(:active) .accordion-item-subtitle,:host([active]) .accordion-item-subtitle{color:var(--calcite-ui-text-2)}";
@@ -69,7 +68,7 @@ let CalciteAccordionItem$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   keyDownHandler(e) {
     if (e.target === this.el) {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.emitRequestedItem();

package/dist/components/calcite-accordion.js

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
-import { g as getKey } from './key.js';
 
 const calciteAccordionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:block;position:relative;max-width:100%;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);border-bottom-width:0;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}:host([appearance=transparent]){border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}";
 
@@ -63,7 +62,7 @@ let CalciteAccordion$1 = class extends HTMLElement {
     const item = e.detail.item;
     const parent = e.detail.parent;
     if (this.el === parent) {
-      const key = getKey(item.key);
+      const key = item.key;
       const itemToFocus = e.target;
       const isFirstItem = this.itemIndex(itemToFocus) === 0;
       const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;

package/dist/components/calcite-alert.js

@@ -63,13 +63,11 @@ let CalciteAlert$1 = class extends HTMLElement {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.autoDismissTimeout = null;
-    this.trackTimer = new Date();
+    this.autoDismissTimeoutId = null;
+    this.trackTimer = Date.now();
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
-      if (this.autoDismissTimeout) {
-        this.autoDismissTimeout = null;
-      }
+      this.autoDismissTimeoutId = null;
       this.queued = false;
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
@@ -93,10 +91,10 @@ let CalciteAlert$1 = class extends HTMLElement {
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  updateDuration(newDuration, prevDuration) {
-    if (this.autoDismiss && prevDuration !== newDuration && this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-      this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (new Date().valueOf() - this.trackTimer.valueOf()));
+  updateDuration() {
+    if (this.autoDismiss && this.autoDismissTimeoutId) {
+      window.clearTimeout(this.autoDismissTimeoutId);
+      this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
     }
   }
   //--------------------------------------------------------------------------
@@ -116,9 +114,7 @@ let CalciteAlert$1 = class extends HTMLElement {
     this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
   }
   disconnectedCallback() {
-    if (this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-    }
+    window.clearTimeout(this.autoDismissTimeoutId);
   }
   render() {
     const dir = getElementDir(this.el);
@@ -126,14 +122,13 @@ let CalciteAlert$1 = class extends HTMLElement {
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, queued, requestedIcon } = this;
-    const progressBar = h("div", { class: "alert-dismiss-progress" });
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
         container: true,
         queued,
         [CSS_UTILITY.rtl]: dir === "rtl"
-      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? progressBar : null)));
+      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -179,9 +174,9 @@ let CalciteAlert$1 = class extends HTMLElement {
     var _a;
     if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
       this.openAlert();
-      if (this.autoDismiss && !this.autoDismissTimeout) {
-        this.trackTimer = new Date();
-        this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+      if (this.autoDismiss && !this.autoDismissTimeoutId) {
+        this.trackTimer = Date.now();
+        this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
       }
     }
     else {

package/dist/components/calcite-avatar.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
-import { a as getElementDir, c as getThemeName } from './dom.js';
+import { a as getElementDir, d as getThemeName } from './dom.js';
 import { h as hexToRGB, i as isValidHex } from './utils.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 

package/dist/components/calcite-block-section.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
-import { a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { c as getElementStyleDir, C as CSS_UTILITY } from './dom.js';
 import { d as defineCustomElement$3 } from './calcite-icon2.js';
 import { d as defineCustomElement$2 } from './calcite-switch2.js';
 
@@ -84,7 +84,7 @@ let CalciteBlockSection$1 = class extends HTMLElement {
   }
   render() {
     const { el, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-    const dir = getElementDir(el);
+    const dir = getElementStyleDir(el);
     const arrowIcon = open
       ? ICONS.menuOpen
       : dir === "rtl"

package/dist/components/calcite-button2.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement as HTMLElement$1, Build, h, proxyCustomElement } from '@stencil/core/internal/client';
-import { d as closestElementCrossShadowBoundary, a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { e as closestElementCrossShadowBoundary, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { c as createObserver } from './observers.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';

package/dist/components/calcite-card.js

@@ -4,7 +4,6 @@
  */
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { a as getElementDir, C as CSS_UTILITY } from './dom.js';
-import { g as getKey } from './key.js';
 import { d as defineCustomElement$4 } from './calcite-checkbox2.js';
 import { d as defineCustomElement$3 } from './calcite-label2.js';
 import { d as defineCustomElement$2 } from './calcite-loader2.js';
@@ -76,7 +75,7 @@ let CalciteCard$1 = class extends HTMLElement {
       this.selectCard();
     };
     this.cardSelectKeyDown = (e) => {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.selectCard();

package/dist/components/calcite-color-picker-hex-input2.js

@@ -6,7 +6,6 @@ import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/i
 import { n as normalizeHex, i as isValidHex, a as isLonghandHex, r as rgbToHex, h as hexToRGB, b as hexChar } from './utils.js';
 import { c as color, d as defineCustomElement$4 } from './calcite-color-picker-swatch2.js';
 import { a as getElementDir, f as focusElement } from './dom.js';
-import { g as getKey } from './key.js';
 import { d as defineCustomElement$3 } from './calcite-icon2.js';
 import { d as defineCustomElement$2 } from './calcite-input2.js';
 import { d as defineCustomElement$1 } from './calcite-progress2.js';
@@ -248,7 +247,7 @@ let CalciteColorPickerHexInput = class extends HTMLElement {
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { internalColor, value } = this;
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Tab" || key === "Enter") {
       this.onInputChange();
       return;

package/dist/components/calcite-color-picker-swatch2.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
-import { c as getThemeName } from './dom.js';
+import { d as getThemeName } from './dom.js';
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {

package/dist/components/calcite-color-picker.js

@@ -7,7 +7,6 @@ import { c as color, d as defineCustomElement$a } from './calcite-color-picker-s
 import { D as DEFAULT_COLOR, T as TEXT, a as DIMENSIONS, H as HSV_LIMITS, C as CSS, d as defineCustomElement$b, b as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './calcite-color-picker-hex-input2.js';
 import { f as focusElement, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual } from './utils.js';
-import { g as getKey } from './key.js';
 import { c as clamp } from './math.js';
 import { d as defineCustomElement$c } from './calcite-button2.js';
 import { d as defineCustomElement$9 } from './calcite-icon2.js';
@@ -237,7 +236,7 @@ let CalciteColorPicker$1 = class extends HTMLElement {
       this.updateChannelsFromColor(this.color);
     };
     this.handleColorFieldScopeKeyDown = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       const arrowKeyToXYOffset = {
         ArrowUp: { x: 0, y: -10 },
         ArrowRight: { x: 10, y: 0 },
@@ -252,7 +251,7 @@ let CalciteColorPicker$1 = class extends HTMLElement {
     };
     this.handleHueScopeKeyDown = (event) => {
       const modifier = event.shiftKey ? 10 : 1;
-      const key = getKey(event.key);
+      const key = event.key;
       const arrowKeyToXOffset = {
         ArrowUp: 1,
         ArrowRight: 1,
@@ -590,7 +589,7 @@ let CalciteColorPicker$1 = class extends HTMLElement {
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
     this.shiftKeyChannelAdjustment = 0;
-    const key = getKey(event.key);
+    const key = event.key;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
       !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS.channel); })) {
       return;

package/dist/components/calcite-combobox.js

@@ -6,7 +6,6 @@ import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/
 import { a as isSymbol, S as Symbol, d as debounce } from './debounce.js';
 import { i as isArray, f as forIn } from './forIn.js';
 import { a as getElementDir } from './dom.js';
-import { g as getKey } from './key.js';
 import { u as updatePopper, c as createPopper, C as CSS } from './popper.js';
 import { g as guid } from './guid.js';
 import { C as ComboboxChildSelector, g as getItemAncestors, a as getItemChildren, h as hasActiveChildren, b as ComboboxItem, c as ComboboxItemGroup, d as ComboboxDefaultPlacement } from './utils2.js';
@@ -235,7 +234,7 @@ let CalciteCombobox$1 = class extends HTMLElement {
       this.setFocus();
     };
     this.keydownHandler = (event) => {
-      const key = getKey(event.key, getElementDir(this.el));
+      const { key } = event;
       switch (key) {
         case "Tab":
           this.activeChipIndex = -1;

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

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
-import { g as getKey } from './key.js';
 import { a as getElementDir, C as CSS_UTILITY } from './dom.js';
 
 const calciteDatePickerDayCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;color:var(--calcite-ui-text-3);cursor:pointer;min-width:0;width:14.2857142857%}.day-v-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}.day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.day{display:-ms-flexbox;display:flex;border-radius:9999px;font-size:var(--calcite-font-size--2);line-height:1rem;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;line-height:1;color:var(--calcite-ui-text-3);-webkit-transition-property:all;transition-property:all;opacity:var(--calcite-ui-opacity-disabled);background:none;-webkit-box-shadow:0 0 0 2px transparent, 0 0 0 0px transparent;box-shadow:0 0 0 2px transparent, 0 0 0 0px transparent}.text{margin-top:1px;margin-right:0;margin-bottom:0;margin-left:1px}:host([scale=s]) .day-v-wrapper{padding-top:0.125rem;padding-bottom:0.125rem}:host([scale=s]) .day-wrapper{padding:0}:host([scale=s]) .day{height:27px;width:27px;font-size:var(--calcite-font-size--2)}:host([scale=m]) .day-v-wrapper{padding-top:0.25rem;padding-bottom:0.25rem}:host([scale=m]) .day-wrapper{padding-left:0.25rem;padding-right:0.25rem}:host([scale=m]) .day{height:33px;width:33px;font-size:var(--calcite-font-size--1)}:host([scale=l]) .day-v-wrapper{padding-top:0.25rem;padding-bottom:0.25rem}:host([scale=l]) .day-wrapper{padding-left:0.25rem;padding-right:0.25rem}:host([scale=l]) .day{height:43px;width:43px;font-size:var(--calcite-font-size-0)}:host([current-month]) .day{opacity:1}:host([disabled]){cursor:default;opacity:0.25}: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]){z-index:1}:host(:focus:not([disabled])) .day{-webkit-box-shadow:0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-ui-brand) !important;color:var(--calcite-ui-foreground-1) !important;z-index:1}:host([range][selected]) .day-wrapper{background-color:var(--calcite-ui-foreground-current)}: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%;-webkit-box-shadow:inset 4px 0 var(--calcite-ui-foreground-1);box-shadow:inset 4px 0 var(--calcite-ui-foreground-1)}:host([start-of-range]) :not(.calcite--rtl) .day,:host([end-of-range]) .calcite--rtl .day{opacity:1}:host([start-of-range]:not(:focus)) :not(.calcite--rtl) .day,:host([end-of-range]:not(:focus)) .calcite--rtl .day{-webkit-box-shadow:0 0 0 2px var(--calcite-ui-foreground-1);box-shadow:0 0 0 2px var(--calcite-ui-foreground-1)}: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%;-webkit-box-shadow:inset -4px 0 var(--calcite-ui-foreground-1);box-shadow:inset -4px 0 var(--calcite-ui-foreground-1)}:host([end-of-range]) :not(.calcite--rtl) .day,:host([start-of-range]) .calcite--rtl .day{opacity:1}:host([end-of-range]:not(:focus)) :not(.calcite--rtl) .day,:host([start-of-range]:not(:focus)) .calcite--rtl .day{-webkit-box-shadow:0 0 0 2px var(--calcite-ui-foreground-1);box-shadow:0 0 0 2px var(--calcite-ui-foreground-1)}:host([end-of-range][scale=l]) :not(.calcite--rtl) .day-wrapper,:host([start-of-range][scale=l]) .calcite--rtl .day-wrapper{-webkit-box-shadow:inset -8px 0 var(--calcite-ui-foreground-1);box-shadow:inset -8px 0 var(--calcite-ui-foreground-1)}:host([start-of-range][scale=l]) :not(.calcite--rtl) .day-wrapper,:host([end-of-range][scale=l]) .calcite--rtl .day-wrapper{-webkit-box-shadow:inset 8px 0 var(--calcite-ui-foreground-1);box-shadow:inset 8px 0 var(--calcite-ui-foreground-1)}:host([highlighted]) .day-wrapper{background-color:var(--calcite-ui-foreground-current)}:host([highlighted]) .day-wrapper .day{color:var(--calcite-ui-text-1)}:host([highlighted]:not([active]:focus)) .day{border-radius:0;color:var(--calcite-ui-text-1)}:host([range-hover]:not([selected])) .day-wrapper{background-color:var(--calcite-ui-foreground-2)}:host([range-hover]:not([selected])) .day{border-radius:0}:host([end-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,:host([start-of-range][range-hover]) .calcite--rtl .day-wrapper{background-image:-webkit-gradient(linear, left top, right top, from(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-2)), to(var(--calcite-ui-foreground-2)));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));border-radius:0;-webkit-box-shadow:none;box-shadow:none}:host([start-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,:host([end-of-range][range-hover]) .calcite--rtl .day-wrapper{background-image:-webkit-gradient(linear, right top, left top, from(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-2)), to(var(--calcite-ui-foreground-2)));background-image:linear-gradient(to left, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));border-radius:0;-webkit-box-shadow:none;box-shadow:none}:host(:hover[end-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,:host(:hover[start-of-range][range-hover]) .calcite--rtl .day-wrapper{background-image:-webkit-gradient(linear, left top, right top, from(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-1)), to(var(--calcite-ui-foreground-1)));background-image:linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));border-radius:0;-webkit-box-shadow:none;box-shadow:none}:host(:hover[start-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,:host(:hover[end-of-range][range-hover]) .calcite--rtl .day-wrapper{background-image:-webkit-gradient(linear, right top, left top, from(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-1)), to(var(--calcite-ui-foreground-1)));background-image:linear-gradient(to left, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));border-radius:0;-webkit-box-shadow:none;box-shadow:none}:host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day-wrapper,:host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day-wrapper{background-image:-webkit-gradient(linear, left top, right top, from(var(--calcite-ui-foreground-2)), color-stop(var(--calcite-ui-foreground-2)), color-stop(var(--calcite-ui-foreground-current)), to(var(--calcite-ui-foreground-current)));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{border-radius:9999px;opacity:1;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-foreground-1);box-shadow:0 0 0 2px var(--calcite-ui-foreground-1)}:host(:hover[range-hover]:not([selected]).focused--start) :not(.calcite--rtl) .day-wrapper,:host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day-wrapper{background-image:-webkit-gradient(linear, left top, right top, from(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-current)), color-stop(var(--calcite-ui-foreground-2)), to(var(--calcite-ui-foreground-2)));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{border-radius:9999px;opacity:1;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-foreground-1);box-shadow:0 0 0 2px var(--calcite-ui-foreground-1)}:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day-wrapper,:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day-wrapper{background-image:-webkit-gradient(linear, left top, right top, from(var(--calcite-ui-foreground-1)), color-stop(var(--calcite-ui-foreground-1)), color-stop(var(--calcite-ui-foreground-2)), to(var(--calcite-ui-foreground-2)));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{border-radius:9999px;opacity:1;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-foreground-1);box-shadow:0 0 0 2px var(--calcite-ui-foreground-1)}:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day-wrapper,:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day-wrapper{background-image:-webkit-gradient(linear, left top, right top, from(var(--calcite-ui-foreground-2)), color-stop(var(--calcite-ui-foreground-2)), color-stop(var(--calcite-ui-foreground-1)), to(var(--calcite-ui-foreground-1)));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{border-radius:9999px;opacity:1;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-foreground-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{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{background-color:var(--calcite-ui-foreground-2)}:host([highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,: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%;-webkit-box-shadow:inset -4px 0px 0px 0px var(--calcite-ui-foreground-1);box-shadow:inset -4px 0px 0px 0px var(--calcite-ui-foreground-1)}:host([highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,: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%;-webkit-box-shadow:inset 4px 0px 0px 0px var(--calcite-ui-foreground-1);box-shadow:inset 4px 0px 0px 0px var(--calcite-ui-foreground-1)}:host([scale=s][highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,:host([scale=s][range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,:host([scale=s][highlighted]:first-child) .calcite--rtl .day-wrapper,:host([scale=s][range-hover]:first-child) .calcite--rtl .day-wrapper{-webkit-box-shadow:inset -1px 0px 0px 0px var(--calcite-ui-foreground-1);box-shadow:inset -1px 0px 0px 0px var(--calcite-ui-foreground-1)}:host([scale=s][highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,:host([scale=s][range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,:host([scale=s][highlighted]:last-child) .calcite--rtl .day-wrapper,:host([scale=s][range-hover]:last-child) .calcite--rtl .day-wrapper{-webkit-box-shadow:inset 1px 0px 0px 0px var(--calcite-ui-foreground-1);box-shadow:inset 1px 0px 0px 0px var(--calcite-ui-foreground-1)}:host([scale=l][highlighted]:first-child) :not(.calcite--rtl) .day-wrapper,:host([scale=l][range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,:host([scale=l][highlighted]:last-child) .calcite--rtl .day-wrapper,:host([scale=l][range-hover]:last-child) .calcite--rtl .day-wrapper{-webkit-box-shadow:inset 6px 0px 0px 0px var(--calcite-ui-foreground-1);box-shadow:inset 6px 0px 0px 0px var(--calcite-ui-foreground-1)}: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,:host([scale=l][range-hover]:first-child) .calcite--rtl .day-wrapper{-webkit-box-shadow:inset -6px 0px 0px 0px var(--calcite-ui-foreground-1);box-shadow:inset -6px 0px 0px 0px var(--calcite-ui-foreground-1)}";
@@ -42,7 +41,7 @@ let CalciteDatePickerDay = class extends HTMLElement {
       !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/components/calcite-date-picker-month-header2.js

@@ -5,7 +5,6 @@
 import { HTMLElement, createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { a as getElementDir } from './dom.js';
 import { l as localizeNumber, c as getOrder, b as dateFromRange, n as nextMonth, p as prevMonth, e as parseNumber } from './date.js';
-import { g as getKey } from './key.js';
 import { C as CalciteHeading } from './CalciteHeading.js';
 import { d as defineCustomElement$1 } from './calcite-icon2.js';
 
@@ -27,7 +26,7 @@ let CalciteDatePickerMonthHeader = class extends HTMLElement {
      */
     this.onYearKey = (e) => {
       const year = e.target.value;
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
           this.setYear(year, -1);
@@ -45,7 +44,7 @@ let CalciteDatePickerMonthHeader = class extends HTMLElement {
       this.handleArrowClick(e, this.prevMonthDate);
     };
     this.prevMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.prevMonthClick(e);
       }
@@ -54,7 +53,7 @@ let CalciteDatePickerMonthHeader = class extends HTMLElement {
       this.handleArrowClick(e, this.nextMonthDate);
     };
     this.nextMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.nextMonthClick(e);
       }

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

@@ -4,7 +4,6 @@
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { s as sameDate, b as dateFromRange, i as inRange } from './date.js';
-import { g as getKey } from './key.js';
 import { a as getElementDir } from './dom.js';
 import { d as defineCustomElement$1 } from './calcite-date-picker-day2.js';
 
@@ -28,7 +27,7 @@ let CalciteDatePickerMonth = class extends HTMLElement {
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
       const isRTL = this.el.dir === "rtl";
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowUp":
           e.preventDefault();
           this.addDays(-7);