@esri/calcite-components 1.0.0-next.320 → 1.0.0-next.324

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

@@ -5,7 +5,7 @@
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { intersects } from "../../utils/dom";
-import { clamp } from "../../utils/math";
+import { clamp, decimalPlaces } from "../../utils/math";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSlider {
@@ -45,6 +45,10 @@ export class CalciteSlider {
     this.step = 1;
     /** Currently selected number (if single select) */
     this.value = null;
+    /**
+     * Specify the scale of the slider, defaults to m
+     */
+    this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -259,7 +263,11 @@ export class CalciteSlider {
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
-      h("div", { class: { container: true, "container--range": this.isRange } },
+      h("div", { class: {
+          ["container"]: true,
+          ["container--range"]: this.isRange,
+          [`scale--${this.scale}`]: true
+        } },
         this.renderGraph(),
         h("div", { class: "track", ref: this.storeTrackRef },
           h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
@@ -280,27 +288,31 @@ export class CalciteSlider {
                 right: mirror ? tickOffset : ""
               } }, this.renderTickLabel(tick)));
           }))),
-        !this.precise && !this.labelHandles && this.isRange && minHandle,
-        !this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minLabeledHandle,
-        this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
-        this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
-        this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minHistogramLabeledHandle,
-        !this.precise && !this.labelHandles && handle,
-        !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
-        !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
-        this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
-        !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
-        this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
-        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle,
-        h(HiddenFormInputSlot, { component: this }))));
+        h("div", { class: "thumb-container" },
+          !this.precise && !this.labelHandles && this.isRange && minHandle,
+          !this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minLabeledHandle,
+          this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
+          this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
+          this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minHistogramLabeledHandle,
+          !this.precise && !this.labelHandles && handle,
+          !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
+          !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
+          this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
+          !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
+          this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
+          this.hasHistogram &&
+            this.precise &&
+            this.labelHandles &&
+            histogramLabeledPreciseHandle,
+          h(HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
@@ -407,7 +419,8 @@ export class CalciteSlider {
       return;
     }
     event.preventDefault();
-    this.setValue(activeProp, this.clamp(adjustment, activeProp));
+    const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
+    this.setValue(activeProp, this.clamp(fixedDecimalAdjustment, activeProp));
   }
   clickHandler(event) {
     this.focusActiveHandle(event.clientX);
@@ -545,7 +558,8 @@ export class CalciteSlider {
     const { left, width } = this.trackEl.getBoundingClientRect();
     const percent = (x - left) / width;
     const mirror = this.shouldMirror();
-    let value = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
+    const clampedValue = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
+    let value = Number(clampedValue.toFixed(decimalPlaces(this.step)));
     if (this.snap && this.step) {
       value = this.getClosestStep(value);
     }
@@ -556,10 +570,10 @@ export class CalciteSlider {
    * @internal
    */
   getClosestStep(num) {
-    num = this.clamp(num);
+    num = Number(this.clamp(num).toFixed(decimalPlaces(this.step)));
     if (this.step) {
       const step = Math.round(num / this.step) * this.step;
-      num = this.clamp(step);
+      num = Number(this.clamp(step).toFixed(decimalPlaces(this.step)));
     }
     return num;
   }
@@ -1141,6 +1155,29 @@ export class CalciteSlider {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "null"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the scale of the slider, defaults to m"
+      },
+      "attribute": "scale",
+      "reflect": false,
+      "defaultValue": "\"m\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/calcite-sortable-list/calcite-sortable-list.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

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

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

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,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

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

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -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,8 +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 { CSS_UTILITY } from "../../utils/resources";
+import { getElementProp } from "../../utils/dom";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -63,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" },

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

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -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,26 +217,6 @@
   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;
-}
-
 ::slotted(input[slot=hidden-form-input]) {
   bottom: 0 !important;
   left: 0 !important;

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

@@ -3,8 +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 { 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 {
@@ -98,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,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

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

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

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;