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

package/dist/collection/components/calcite-split-button/calcite-split-button.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 {
@@ -175,7 +179,10 @@
   width: 1px;
   display: flex;
   align-items: stretch;
-  transition: 0.15s ease-in-out;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   background-color: var(--calcite-split-button-background);
 }
 

package/dist/collection/components/calcite-split-button/calcite-split-button.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { CSS } from "./resources";
-import { getElementDir } from "../../utils/dom";
 /**
  * @slot - A slot for adding `calcite-dropdown` content.
  */
@@ -36,7 +35,6 @@ export class CalciteSplitButton {
     this.calciteSplitButtonSecondaryClickHandler = (e) => this.calciteSplitButtonSecondaryClick.emit(e);
   }
   render() {
-    const dir = getElementDir(this.el);
     const widthClasses = {
       [CSS.container]: true,
       [CSS.widthAuto]: this.width === "auto",
@@ -44,12 +42,12 @@ export class CalciteSplitButton {
       [CSS.widthFull]: this.width === "full"
     };
     const buttonWidth = this.width === "auto" ? "auto" : "full";
-    return (h("div", { class: widthClasses, dir: dir },
-      h("calcite-button", { appearance: this.appearance, color: this.color, dir: dir, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", width: buttonWidth }, this.primaryText),
+    return (h("div", { class: widthClasses },
+      h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", width: buttonWidth }, this.primaryText),
       h("div", { class: CSS.dividerContainer },
         h("div", { class: CSS.divider })),
-      h("calcite-dropdown", { active: this.active, dir: dir, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-trailing", scale: this.scale, width: this.scale },
-        h("calcite-button", { appearance: this.appearance, color: this.color, dir: dir, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary" }),
+      h("calcite-dropdown", { active: this.active, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-trailing", scale: this.scale, width: this.scale },
+        h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary" }),
         h("slot", null))));
   }
   get dropdownIcon() {

package/dist/collection/components/calcite-stepper/calcite-stepper.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-stepper/calcite-stepper.js

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
-import { getKey } from "../../utils/key";
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
  */
@@ -72,7 +71,7 @@ export class CalciteStepper {
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.sortedItems.length - 1;
-    switch (getKey(item.key)) {
+    switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
         if (isLastItem) {

package/dist/collection/components/calcite-stepper-item/calcite-stepper-item.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 {
@@ -90,7 +94,7 @@
   --calcite-stepper-item-spacing-unit-l: 1rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  margin-right: 0.25rem;
+  margin-inline-end: 0.25rem;
 }
 
 :host([scale=s]) .stepper-item-subtitle {
@@ -104,7 +108,7 @@
   --calcite-stepper-item-spacing-unit-l: 1.25rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 
 :host([scale=m]) .stepper-item-subtitle {
@@ -118,7 +122,7 @@
   --calcite-stepper-item-spacing-unit-l: 1.5rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.5rem;
-  margin-right: 0.75rem;
+  margin-inline-end: 0.75rem;
 }
 
 :host([scale=l]) .stepper-item-subtitle {
@@ -152,11 +156,6 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.calcite--rtl {
-  margin-left: var(--calcite-stepper-item-spacing-unit-l);
-  margin-right: 0;
-}
-
 :host {
   outline-offset: 0;
   outline-color: transparent;
@@ -176,20 +175,11 @@
 
 :host .stepper-item-content,
 :host .stepper-item-header {
-  padding: var(--calcite-stepper-item-spacing-unit-l) var(--calcite-stepper-item-spacing-unit-m);
-  padding-left: 0;
-  text-align: left;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.calcite--rtl .stepper-item-content,
-.calcite--rtl .stepper-item-header {
-  padding-right: 0;
-  text-align: right;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  padding-left: initial;
+  padding-block: var(--calcite-stepper-item-spacing-unit-l);
+  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+  text-align: start;
 }
 
 :host .stepper-item-header * {
@@ -208,7 +198,7 @@
 }
 
 :host .stepper-item-icon {
-  margin-right: var(--calcite-stepper-item-spacing-unit-m);
+  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
   color: var(--calcite-ui-text-3);
   margin-top: 1px;
   opacity: var(--calcite-ui-opacity-disabled);
@@ -220,20 +210,10 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.calcite--rtl .stepper-item-icon {
-  margin-left: var(--calcite-stepper-item-spacing-unit-l);
-  margin-right: 0;
-}
-
 :host .stepper-item-header-text {
-  margin-right: auto;
   flex-direction: column;
   text-align: initial;
-}
-
-.calcite--rtl .stepper-item-header-text {
-  margin-left: auto;
-  margin-right: 0;
+  margin-inline-end: auto;
 }
 
 :host .stepper-item-title,
@@ -252,22 +232,12 @@
   color: var(--calcite-ui-text-3);
 }
 
-.calcite--rtl .stepper-item-title {
-  margin-right: 0;
-  margin-left: auto;
-}
-
 :host .stepper-item-number {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-3);
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  margin-right: var(--calcite-stepper-item-spacing-unit-m);
-}
-
-.calcite--rtl .stepper-item-number {
-  margin-left: var(--calcite-stepper-item-spacing-unit-m);
-  margin-right: initial;
+  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
 }
 
 :host([disabled]) {
@@ -345,29 +315,27 @@
 :host([layout=vertical]) .container {
   flex: 1 1 auto;
   border-top-width: 0;
-  border-left-width: 2px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   padding-top: 0;
   padding-bottom: 0;
-  padding-right: 0;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
-  padding-left: var(--calcite-stepper-item-spacing-unit-l);
+  border-inline-start-width: 2px;
+  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
 }
 
 :host([layout=vertical]) .container .stepper-item-icon {
   margin-top: 1px;
-  margin-right: 0;
   margin-bottom: 0;
-  margin-left: auto;
   order: 3;
-  padding-left: var(--calcite-stepper-item-spacing-unit-s);
+  padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);
+  margin-inline-start: auto;
 }
 
 :host([layout=vertical]) .container .stepper-item-header {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 :host([layout=vertical]) .container .stepper-item-content {
@@ -382,28 +350,6 @@
   margin-bottom: var(--calcite-stepper-item-spacing-unit-l);
 }
 
-:host([layout=vertical]) .calcite--rtl {
-  border-left-width: 0;
-  border-right-width: 2px;
-  border-color: var(--calcite-ui-border-3);
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: var(--calcite-stepper-item-spacing-unit-l);
-}
-
-:host([layout=vertical]) .calcite--rtl .stepper-item-icon {
-  margin-bottom: 0;
-  margin-left: 0;
-  padding-left: 0;
-  padding-right: var(--calcite-stepper-item-spacing-unit-l);
-}
-
-:host([layout=vertical]) .calcite--rtl .stepper-item-header {
-  padding-left: 0;
-  padding-right: intial;
-}
-
 :host([layout=vertical][complete]) .container {
   border-color: rgba(0, 122, 194, 0.5);
 }

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

@@ -3,9 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
-import { getKey } from "../../utils/key";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementProp } from "../../utils/dom";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -64,9 +62,8 @@ export class CalciteStepperItem {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     return (h(Host, { "aria-expanded": this.active.toString(), onClick: () => this.emitRequestedItem(), tabindex: this.disabled ? null : 0 },
-      h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+      h("div", { class: "container" },
         h("div", { class: "stepper-item-header" },
           this.icon ? this.renderIcon() : null,
           this.numbered ? (h("div", { class: "stepper-item-number" },
@@ -85,7 +82,7 @@ export class CalciteStepperItem {
   //--------------------------------------------------------------------------
   keyDownHandler(e) {
     if (!this.disabled && e.target === this.el) {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.emitRequestedItem();

package/dist/collection/components/calcite-switch/calcite-switch.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,7 +178,6 @@
 .handle {
   position: absolute;
   display: block;
-  right: auto;
   background-color: var(--calcite-ui-foreground-1);
   border-width: 2px;
   border-style: solid;
@@ -185,7 +188,7 @@
   border-radius: 9999px;
   pointer-events: none;
   top: -1px;
-  left: -1px;
+  inset-inline: -1px auto;
 }
 
 :host(:hover) .handle,
@@ -200,9 +203,8 @@
 }
 
 :host([checked]) .handle {
-  left: auto;
   border-color: var(--calcite-ui-brand);
-  right: -1px;
+  inset-inline: auto -1px;
 }
 
 :host([checked]:hover) .track {
@@ -215,24 +217,8 @@
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
 
-.calcite--rtl .handle {
-  left: auto;
-  right: -1px;
-}
-
-:host([checked]) .calcite--rtl .handle {
-  right: auto;
-  left: -1px;
-}
-
-:host([checked]:active) .calcite--rtl .handle {
-  right: auto;
-  left: -1px;
-}
-
-:host([checked]:focus) .calcite--rtl .handle {
-  right: auto;
-  left: -1px;
+.container:focus-visible {
+  outline-color: var(--calcite-ui-brand);
 }
 
 ::slotted(input[slot=hidden-form-input]) {

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

@@ -3,9 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
-import { focusElement, getElementDir } from "../../utils/dom";
-import { getKey } from "../../utils/key";
-import { CSS_UTILITY } from "../../utils/resources";
+import { focusElement } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSwitch {
@@ -31,7 +29,7 @@ export class CalciteSwitch {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (!this.disabled && (key === " " || key === "Enter")) {
         this.toggle();
       }
@@ -99,9 +97,8 @@ export class CalciteSwitch {
   //
   // --------------------------------------------------------------------------
   render() {
-    const dir = getElementDir(this.el);
     return (h(Host, { onKeyDown: this.keyDownHandler },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.clickHandler, ref: this.setSwitchEl, role: "switch", tabindex: this.tabindex },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "container", onClick: this.clickHandler, ref: this.setSwitchEl, role: "switch", tabindex: this.tabindex },
         h("div", { class: "track" },
           h("div", { class: "handle" })),
         h(HiddenFormInputSlot, { component: this }))));

package/dist/collection/components/calcite-tab/calcite-tab.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 {
@@ -90,7 +94,6 @@
 
 :host {
   display: none;
-  color: var(--calcite-ui-text-3);
   width: 100%;
   height: 100%;
 }

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.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 {
@@ -107,8 +111,6 @@
   overflow: auto;
   justify-content: flex-start;
   -webkit-overflow-scrolling: touch;
-  padding: 0.25rem;
-  margin: -0.25rem;
 }
 
 :host([layout=center]) .tab-nav {

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

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
-import { getElementStyleDir, filterDirectChildren } from "../../utils/dom";
+import { getElementDir, filterDirectChildren } from "../../utils/dom";
 /**
  * @slot - A slot for adding `calcite-tab-title`s.
  */
@@ -86,7 +86,7 @@ export class CalciteTabNav {
     }
   }
   render() {
-    const dir = getElementStyleDir(this.el);
+    const dir = getElementDir(this.el);
     const width = `${this.indicatorWidth}px`;
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
@@ -147,7 +147,7 @@ export class CalciteTabNav {
   }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;
-    const dir = getElementStyleDir(this.el);
+    const dir = getElementDir(this.el);
     const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     const tabLeft = (_b = this.selectedTabEl) === null || _b === void 0 ? void 0 : _b.offsetLeft;
     const tabWidth = (_c = this.selectedTabEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;

package/dist/collection/components/calcite-tab-title/calcite-tab-title.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 {
@@ -118,7 +122,7 @@
 
 :host(:focus) a {
   outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 2px;
+  outline-offset: -2px;
 }
 
 :host(:active) a,
@@ -195,7 +199,7 @@ span {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   padding-left: 0;
@@ -218,36 +222,25 @@ span {
 
 .calcite-tab-title--icon svg {
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
 
+.container--has-text {
+  padding: 0.25rem;
+}
+
 .container--has-text .calcite-tab-title--icon.icon-start {
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 
 .container--has-text .calcite-tab-title--icon.icon-end {
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 
 :host([icon-start][icon-end]) .calcite-tab-title--icon:first-child {
-  margin-right: 0.5rem;
-}
-
-.container--has-text.calcite--rtl .calcite-tab-title--icon.icon-end {
-  margin-left: 0;
-  margin-right: 0.5rem;
-}
-
-.container--has-text.calcite--rtl .calcite-tab-title--icon.icon-start {
-  margin-left: 0.5rem;
-  margin-right: 0;
-}
-
-:host([icon-start][icon-end]) .calcite--rtl .calcite-tab-title--icon:first-child {
-  margin-left: 0.5rem;
-  margin-right: 0;
+  margin-inline-end: 0.5rem;
 }
 
 :host([bordered]) {
@@ -271,7 +264,7 @@ span {
 :host([bordered]:hover) a {
   background-color: var(--calcite-button-transparent-hover);
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }

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

@@ -4,9 +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, getElementStyleDir } from "../../utils/dom";
-import { getKey } from "../../utils/key";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementProp, getElementDir } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding text.
@@ -83,17 +81,15 @@ export class CalciteTabTitle {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     const id = this.el.id || this.guid;
     const Tag = this.disabled ? "span" : "a";
     const showSideBorders = this.bordered && !this.disabled && this.layout !== "center";
-    const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", dir: dir, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-    const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", dir: dir, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+    const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+    const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.active.toString(), id: id, role: "tab", tabindex: this.disabled ? "-1" : "0" },
       h(Tag, { class: {
           container: true,
-          "container--has-text": this.hasText,
-          [CSS_UTILITY.rtl]: dir === "rtl"
+          "container--has-text": this.hasText
         }, style: showSideBorders && { width: `${this.parentTabNavEl.indicatorWidth}px` } },
         this.iconStart ? iconStartEl : null,
         h("slot", null),
@@ -123,14 +119,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 (getElementStyleDir(this.el) === "ltr") {
+        if (getElementDir(this.el) === "ltr") {
           this.calciteTabsFocusNext.emit();
         }
         else {
@@ -138,7 +134,7 @@ export class CalciteTabTitle {
         }
         break;
       case "ArrowLeft":
-        if (getElementStyleDir(this.el) === "ltr") {
+        if (getElementDir(this.el) === "ltr") {
           this.calciteTabsFocusPrevious.emit();
         }
         else {

package/dist/collection/components/calcite-tabs/calcite-tabs.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-tile/calcite-tile.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 {