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

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

@@ -3,10 +3,9 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { CSS, TEXT, SLOTS, ICONS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 /**
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
@@ -65,11 +64,10 @@ export class CalciteChip {
       h("slot", { name: SLOTS.image }))) : null;
   }
   render() {
-    const dir = getElementDir(this.el);
-    const iconEl = (h("calcite-icon", { class: CSS.calciteChipIcon, dir: dir, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    const iconEl = (h("calcite-icon", { class: CSS.calciteChipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
     const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) },
       h("calcite-icon", { icon: ICONS.close, scale: "s" })));
-    return (h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h("div", { class: "container" },
       this.renderChipImage(),
       this.icon ? iconEl : null,
       h("span", { class: CSS.title, id: this.guid },

package/dist/collection/components/calcite-color-picker/calcite-color-picker.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 {
@@ -116,11 +120,6 @@
   width: 272px;
 }
 
-:host([scale=l]) .control-section.section.calcite--rtl > :nth-child(2) {
-  margin-left: 0;
-  margin-right: 12px;
-}
-
 :host([scale=l]) .header {
   padding-bottom: 0;
 }
@@ -158,7 +157,7 @@
 }
 
 :host([scale=l]) .control-section > :nth-child(2) {
-  margin-left: 12px;
+  margin-inline-start: 12px;
 }
 
 :host([scale=l]) .color-hex-options {

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

@@ -5,11 +5,10 @@
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
 import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, RGB_LIMITS, TEXT } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { colorEqual, CSSColorMode, normalizeHex, parseMode } from "./utils";
 import { throttle } from "lodash-es";
 import { clamp } from "../../utils/math";
-import { CSS_UTILITY } from "../../utils/resources";
 const throttleFor60FpsInMs = 16;
 const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
 const defaultFormat = "auto";
@@ -571,13 +570,12 @@ export class CalciteColorPicker {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { allowEmpty, color, intlDeleteColor, el, hideHex, hideChannels, hideSaved, intlHex, intlSaved, intlSaveColor, savedColors, scale } = this;
+    const { allowEmpty, color, intlDeleteColor, hideHex, hideChannels, hideSaved, intlHex, intlSaved, intlSaveColor, savedColors, scale } = this;
     const selectedColorInHex = color ? color.hex() : null;
     const hexInputScale = scale === "l" ? "m" : "s";
     const { colorFieldAndSliderInteractive, colorFieldScopeTop, colorFieldScopeLeft, hueScopeLeft, hueScopeTop, scopeOrientation, dimensions: { colorField: { height: colorFieldHeight, width: colorFieldWidth }, slider: { height: sliderHeight } } } = this;
     const hueTop = hueScopeTop !== null && hueScopeTop !== void 0 ? hueScopeTop : sliderHeight / 2 + colorFieldHeight;
     const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (colorFieldWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
-    const elementDir = getElementDir(el);
     const noColor = color === null;
     const vertical = scopeOrientation === "vertical";
     return (h("div", { class: CSS.container },
@@ -590,19 +588,18 @@ export class CalciteColorPicker {
         h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })),
       hideHex && hideChannels ? null : (h("div", { class: {
           [CSS.controlSection]: true,
-          [CSS.section]: true,
-          [CSS_UTILITY.rtl]: elementDir === "rtl"
+          [CSS.section]: true
         } },
         hideHex ? null : (h("div", { class: CSS.hexOptions },
           h("span", { class: {
               [CSS.header]: true,
               [CSS.headerHex]: true
             } }, intlHex),
-          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, dir: elementDir, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
+          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
         hideChannels ? null : (h("calcite-tabs", { class: {
             [CSS.colorModeContainer]: true,
             [CSS.splitSection]: true
-          }, dir: elementDir, scale: hexInputScale },
+          }, scale: hexInputScale },
           h("calcite-tab-nav", { slot: "tab-nav" },
             this.renderChannelsTabTitle("rgb"),
             this.renderChannelsTabTitle("hsv")),

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.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-color-picker-hex-input/calcite-color-picker-hex-input.js

@@ -6,7 +6,7 @@ import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from
 import { hexChar, hexToRGB, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../calcite-color-picker/utils";
 import Color from "color";
 import { CSS } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { TEXT } from "../calcite-color-picker/resources";
 const DEFAULT_COLOR = Color();
 export class CalciteColorPickerHexInput {
@@ -163,11 +163,10 @@ export class CalciteColorPickerHexInput {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { el, intlHex, value } = this;
+    const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    const elementDir = getElementDir(el);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, dir: elementDir, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
       hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------

package/dist/collection/components/calcite-color-picker-swatch/calcite-color-picker-swatch.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-combobox/calcite-combobox.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 {
@@ -327,7 +331,8 @@
 }
 
 .chip {
-  margin: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) var(--calcite-combobox-item-spacing-unit-s) calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
+  margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
+  margin-inline: 0 var(--calcite-combobox-item-spacing-unit-s);
   max-width: 100%;
 }
 
@@ -335,17 +340,8 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 
-.chip:last-child {
-  margin-right: 0;
-}
-
-.chip--rtl {
-  margin-right: unset;
-  margin-left: var(--calcite-combobox-item-spacing-unit-l);
-}
-
-.chip--rtl:last-child {
-  margin-left: 0;
+.chip:last-of-type {
+  margin-inline-end: 0;
 }
 
 .item {

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

@@ -4,7 +4,6 @@
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
-import { getElementDir } from "../../utils/dom";
 import { debounce } from "lodash-es";
 import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { guid } from "../../utils/guid";
@@ -186,7 +185,9 @@ export class CalciteCombobox {
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+      if ((!this.active && !this.open) ||
+        composedPath.includes(this.el) ||
+        composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text) {
@@ -201,6 +202,7 @@ export class CalciteCombobox {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
+      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -650,13 +652,11 @@ export class CalciteCombobox {
   //
   //--------------------------------------------------------------------------
   renderChips() {
-    const { activeChipIndex, scale, selectionMode, el } = this;
-    const dir = getElementDir(el);
+    const { activeChipIndex, scale, selectionMode } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
-        "chip--active": activeChipIndex === i,
-        "chip--rtl": dir === "rtl"
+        "chip--active": activeChipIndex === i
       };
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);

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

@@ -49,13 +49,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 {
@@ -114,13 +118,6 @@
   --calcite-combobox-item-indent-value: calc(
     var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
   );
-  --calcite-combobox-item-indent-start: var(--calcite-combobox-item-indent-value);
-  --calcite-combobox-item-indent-end: unset;
-}
-
-.calcite--rtl {
-  --calcite-combobox-item-indent-start: unset;
-  --calcite-combobox-item-indent-end: var(--calcite-combobox-item-indent-value);
 }
 
 :host(:focus) {
@@ -190,8 +187,7 @@ ul {
 }
 
 .icon--indent {
-  padding-left: var(--calcite-combobox-item-indent-start);
-  padding-right: var(--calcite-combobox-item-indent-end);
+  padding-inline-start: var(--calcite-combobox-item-indent-value);
 }
 
 .icon--custom {
@@ -210,13 +206,10 @@ ul {
 }
 
 .icon--dot:before {
+  text-align: start;
   content: "•";
 }
 
-.calcite--rtl .icon--dot:before {
-  text-align: right;
-}
-
 .label--active .icon {
   opacity: 1;
 }

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

@@ -3,11 +3,10 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementProp } from "../../utils/dom";
 import { CSS } from "./resources";
 import { guid } from "../../utils/guid";
 import { getAncestors, getDepth } from "../calcite-combobox/utils";
-import { CSS_UTILITY } from "../../utils/resources";
 /**
  * @slot - A slot for adding nested `calcite-combobox-item`s.
  */
@@ -101,9 +100,7 @@ export class CalciteComboboxItem {
   }
   render() {
     const isSingleSelect = getElementProp(this.el, "selection-mode", "multi") === "single";
-    const dir = getElementDir(this.el);
     const classes = {
-      [CSS_UTILITY.rtl]: dir === "rtl",
       [CSS.label]: true,
       [CSS.selected]: this.selected,
       [CSS.active]: this.active,

package/dist/collection/components/calcite-combobox-item-group/calcite-combobox-item-group.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 {
@@ -84,13 +88,6 @@
   display: none;
 }
 
-:host {
-  --calcite-combobox-item-indent-start-1: var(--calcite-combobox-item-spacing-indent-1);
-  --calcite-combobox-item-indent-end-1: unset;
-  --calcite-combobox-item-indent-start-2: var(--calcite-combobox-item-spacing-indent-2);
-  --calcite-combobox-item-indent-end-2: unset;
-}
-
 .scale--s {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -118,13 +115,6 @@
   --calcite-combobox-item-spacing-indent-2: 2rem;
 }
 
-.calcite--rtl {
-  --calcite-combobox-item-indent-start-1: unset;
-  --calcite-combobox-item-indent-end-1: var(--calcite-combobox-item-spacing-indent-1);
-  --calcite-combobox-item-indent-start-2: unset;
-  --calcite-combobox-item-indent-end-2: var(--calcite-combobox-item-spacing-indent-2);
-}
-
 :host,
 .list {
   display: flex;
@@ -145,13 +135,11 @@
 }
 
 .label--indent-1 {
-  padding-left: var(--calcite-combobox-item-indent-start-1);
-  padding-right: var(--calcite-combobox-item-indent-end-1);
+  padding-inline-start: var(--calcite-combobox-item-spacing-indent-1);
 }
 
 .label--indent-2 {
-  padding-left: var(--calcite-combobox-item-indent-start-2);
-  padding-right: var(--calcite-combobox-item-indent-end-2);
+  padding-inline-start: var(--calcite-combobox-item-spacing-indent-2);
 }
 
 .title {

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

@@ -6,8 +6,7 @@ import { Component, Prop, h, Element } from "@stencil/core";
 import { CSS } from "./resources";
 import { getAncestors, getDepth } from "../calcite-combobox/utils";
 import { guid } from "../../utils/guid";
-import { getElementDir, getElementProp } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementProp } from "../../utils/dom";
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
@@ -32,9 +31,8 @@ export class CalciteComboboxItemGroup {
   // --------------------------------------------------------------------------
   render() {
     const { el, scale } = this;
-    const dir = getElementDir(el);
     const indent = `${CSS.label}--indent-${getDepth(el)}`;
-    return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [CSS_UTILITY.rtl]: dir === "rtl", [`scale--${scale}`]: true }, role: "group" },
+    return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" },
       h("li", { class: { [CSS.label]: true, [indent]: true }, id: this.guid, role: "presentation" },
         h("span", { class: CSS.title }, this.label)),
       h("slot", null)));

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

@@ -4,7 +4,6 @@
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, dateFromISO, dateToISO, getDaysDiff } from "../../utils/date";
 import { HEADING_LEVEL, TEXT } from "./resources";
 export class CalciteDatePicker {
@@ -280,8 +279,7 @@ export class CalciteDatePicker {
         ? endDate || this.maxAsDate
         : this.maxAsDate
       : this.maxAsDate;
-    const dir = getElementDir(this.el);
-    return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, dir, maxDate, minDate, date, endDate)));
+    return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
   valueHandler(value) {
     if (Array.isArray(value)) {
@@ -311,10 +309,10 @@ export class CalciteDatePicker {
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
    */
-  renderCalendar(activeDate, dir, maxDate, minDate, date, endDate) {
+  renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
-      h("calcite-date-picker-month-header", { activeDate: activeDate, dir: dir, headingLevel: this.headingLevel || HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
-      h("calcite-date-picker-month", { activeDate: activeDate, dir: dir, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerHover: this.monthHoverChange, onCalciteDatePickerMouseOut: this.monthMouseOutChange, onCalciteDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
+      h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
+      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerHover: this.monthHoverChange, onCalciteDatePickerMouseOut: this.monthMouseOutChange, onCalciteDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
   /**

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.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 {
@@ -209,10 +213,18 @@
   background-color: var(--calcite-ui-foreground-current);
 }
 
+:host([start-of-range]) .day-wrapper {
+  border-start-start-radius: 40%;
+  border-end-start-radius: 40%;
+}
+
+:host([end-of-range]) .day-wrapper {
+  border-start-end-radius: 40%;
+  border-end-end-radius: 40%;
+}
+
 :host([start-of-range]) :not(.calcite--rtl) .day-wrapper,
 :host([end-of-range]) .calcite--rtl .day-wrapper {
-  border-top-left-radius: 40%;
-  border-bottom-left-radius: 40%;
   box-shadow: inset 4px 0 var(--calcite-ui-foreground-1);
 }
 
@@ -228,8 +240,6 @@
 
 :host([end-of-range]) :not(.calcite--rtl) .day-wrapper,
 :host([start-of-range]) .calcite--rtl .day-wrapper {
-  border-top-right-radius: 40%;
-  border-bottom-right-radius: 40%;
   box-shadow: inset -4px 0 var(--calcite-ui-foreground-1);
 }
 
@@ -364,8 +374,6 @@
 :host([range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([highlighted]:first-child) .calcite--rtl .day-wrapper,
 :host([range-hover]:first-child) .calcite--rtl .day-wrapper {
-  border-top-right-radius: 45%;
-  border-bottom-right-radius: 45%;
   box-shadow: inset -4px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
@@ -373,8 +381,6 @@
 :host([range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
 :host([highlighted]:last-child) .calcite--rtl .day-wrapper,
 :host([range-hover]:last-child) .calcite--rtl .day-wrapper {
-  border-top-left-radius: 45%;
-  border-bottom-left-radius: 45%;
   box-shadow: inset 4px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
@@ -399,6 +405,18 @@
   box-shadow: inset 6px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
+:host([highlighted]:first-child) .day-wrapper,
+:host([range-hover]:first-child) .day-wrapper {
+  border-start-start-radius: 45%;
+  border-end-start-radius: 45%;
+}
+
+:host([highlighted]:last-child) .day-wrapper,
+:host([range-hover]:last-child) .day-wrapper {
+  border-start-end-radius: 45%;
+  border-end-end-radius: 45%;
+}
+
 :host([scale=l][highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([scale=l][range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([scale=l][highlighted]:first-child) .calcite--rtl .day-wrapper,

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

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
-import { getElementDir } from "../../utils/dom";
 export class CalciteDatePickerMonth {
   constructor() {
     /** Date currently active.*/
@@ -98,20 +97,19 @@ export class CalciteDatePickerMonth {
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPrevMonthdays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
-    const dir = getElementDir(this.el);
     const days = [
       ...prevMonDays.map((day) => {
         const date = new Date(year, month - 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       }),
       ...curMonDays.map((day) => {
         const date = new Date(year, month, day);
         const active = sameDate(date, this.activeDate);
-        return this.renderDateDay(active, day, dir, date, true, true);
+        return this.renderDateDay(active, day, date, true, true);
       }),
       ...nextMonDays.map((day) => {
         const date = new Date(year, month + 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       })
     ];
     const weeks = [];
@@ -224,7 +222,7 @@ export class CalciteDatePickerMonth {
   /**
    * Render calcite-date-picker-day
    */
-  renderDateDay(active, day, dir, date, currentMonth, ref) {
+  renderDateDay(active, day, date, currentMonth, ref) {
     var _a;
     const isFocusedOnStart = this.isFocusedOnStart();
     const isHoverInRange = this.isHoverInRange() ||
@@ -234,7 +232,7 @@ export class CalciteDatePickerMonth {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, dir: dir, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el === null || el === void 0 ? void 0 : el.focus();