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

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

@@ -3,11 +3,9 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { ensureId, focusElement, getElementDir, getSlotted, isCalciteFocusable } from "../../utils/dom";
-import { getKey } from "../../utils/key";
+import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
 import { queryShadowRoot } from "@a11y/focus-trap/shadow";
 import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
-import { CSS_UTILITY } from "../../utils/resources";
 import { TEXT, SLOTS, CSS, ICONS } from "./resources";
 import { createObserver } from "../../utils/observers";
 const isFocusableExtended = (el) => {
@@ -124,11 +122,10 @@ export class CalciteModal {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
-    const dir = getElementDir(this.el);
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" },
       h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }),
       this.renderStyle(),
-      h("div", { class: { modal: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onTransitionEnd: this.transitionEnd },
+      h("div", { class: "modal", onTransitionEnd: this.transitionEnd },
         h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }),
         h("div", { class: CSS.header },
           this.renderCloseButton(),
@@ -184,7 +181,7 @@ export class CalciteModal {
   //
   //--------------------------------------------------------------------------
   handleEscape(e) {
-    if (this.active && !this.disableEscape && getKey(e.key) === "Escape") {
+    if (this.active && !this.disableEscape && e.key === "Escape") {
       this.close();
     }
   }

package/dist/collection/components/calcite-notice/calcite-notice.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 {
@@ -203,7 +207,6 @@
 
 .container {
   display: none;
-  text-align: left;
   margin-top: 0;
   margin-bottom: 0;
   box-sizing: border-box;
@@ -212,8 +215,9 @@
   pointer-events: none;
   background-color: var(--calcite-ui-foreground-1);
   max-height: 0;
+  text-align: start;
   transition: 150ms ease-in-out;
-  border-left: 0px solid;
+  border-inline-start: 0px solid;
   box-shadow: 0 0 0 0 transparent;
 }
 
@@ -255,31 +259,29 @@
   margin: 0;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-2);
-  margin-right: var(--calcite-notice-spacing-token-small);
-}
-
-.calcite--rtl slot[name=message]::slotted(*),
-.calcite--rtl *::slotted([slot=message]) {
-  margin-right: 0;
-  margin-left: var(--calcite-notice-spacing-token-small);
+  margin-inline-end: var(--calcite-notice-spacing-token-small);
 }
 
 .notice-content {
   box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
   display: flex;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   overflow-wrap: break-word;
   flex: 1 1 0;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-small) 0;
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: 0 var(--calcite-notice-spacing-token-small);
 }
 
 .notice-content:first-of-type:not(:only-child) {
-  padding-left: var(--calcite-notice-spacing-token-large);
+  padding-inline-start: var(--calcite-notice-spacing-token-large);
 }
 
 .notice-content:only-of-type {
@@ -290,9 +292,12 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
 }
 
 .notice-close {
@@ -306,9 +311,12 @@
   cursor: pointer;
   color: var(--calcite-ui-text-3);
   box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
   -webkit-appearance: none;
 }
 
@@ -326,24 +334,6 @@
   align-self: stretch;
 }
 
-.calcite--rtl {
-  text-align: right;
-  border-left: none;
-  border-right: 0px solid;
-}
-
-.calcite--rtl .notice-content {
-  padding: var(--calcite-notice-spacing-token-small) 0 var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-small);
-}
-
-.calcite--rtl .notice-content:first-of-type:not(:only-child) {
-  padding-right: var(--calcite-notice-spacing-token-large);
-}
-
-.calcite--rtl .notice-content:only-of-type {
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
-}
-
 :host([color=blue]) .container {
   border-color: var(--calcite-ui-brand);
 }

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

@@ -5,8 +5,7 @@
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "../calcite-alert/interfaces";
-import { getElementDir, getSlotted, setRequestedIcon } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getSlotted, setRequestedIcon } from "../../utils/dom";
 /** Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
  * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
@@ -65,11 +64,10 @@ export class CalciteNotice {
   }
   render() {
     const { el } = this;
-    const dir = getElementDir(el);
     const closeButton = (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) },
       h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     const hasActionEnd = getSlotted(el, SLOTS.actionsEnd);
-    return (h("div", { class: { [CSS.container]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h("div", { class: CSS.container },
       this.requestedIcon ? (h("div", { class: CSS.icon },
         h("calcite-icon", { icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
       h("div", { class: CSS.content },

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

@@ -51,8 +51,10 @@ export class CalciteOption {
     var _a;
     this.ensureTextContentDependentProps();
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
+      attributeFilter: ["label", "value"],
+      characterData: true,
       childList: true,
-      attributeFilter: ["label", "value"]
+      subtree: true
     });
   }
   disconnectedCallback() {

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

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

package/dist/collection/components/calcite-pagination/calcite-pagination.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 {
@@ -179,7 +183,7 @@
 .page:hover {
   color: var(--calcite-ui-text-1);
   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-pagination/calcite-pagination.js

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Prop, Method, Fragment } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { CSS, TEXT } from "./resources";
 const maxPagesDisplayed = 5;
 export class CalcitePagination {
@@ -136,7 +135,6 @@ export class CalcitePagination {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     const { total, num, start } = this;
     const prevDisabled = num === 1 ? start <= num : start < num;
     const nextDisabled = num === 1 ? start + num > total : start + num > total;
@@ -145,7 +143,7 @@ export class CalcitePagination {
           [CSS.previous]: true,
           [CSS.disabled]: prevDisabled
         }, disabled: prevDisabled, onClick: this.previousClicked },
-        h("calcite-icon", { dir: dir, flipRtl: true, icon: "chevronLeft", scale: "s" })),
+        h("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: "s" })),
       total > num ? this.renderPage(1) : null,
       this.renderLeftEllipsis(),
       this.renderPages(),
@@ -155,7 +153,7 @@ export class CalcitePagination {
           [CSS.next]: true,
           [CSS.disabled]: nextDisabled
         }, disabled: nextDisabled, onClick: this.nextClicked },
-        h("calcite-icon", { dir: dir, flipRtl: true, icon: "chevronRight", scale: "s" }))));
+        h("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: "s" }))));
   }
   static get is() { return "calcite-pagination"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/calcite-panel/calcite-panel.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 {
@@ -234,23 +238,21 @@ h5.heading {
 
 .header-content {
   overflow: hidden;
-  margin-right: auto;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
   display: flex;
   flex-direction: column;
+  margin-inline-end: auto;
 }
 
 .header-content .heading,
 .header-content .summary {
   padding: 0;
   display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  text-overflow: ellipsis;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .header-content .heading {
@@ -277,12 +279,7 @@ h5.heading {
   border-color: var(--calcite-ui-border-3);
   border-style: solid;
   border-width: 0;
-  border-right-width: 1px;
-}
-
-.calcite--rtl .back-button {
-  border-right-width: 0;
-  border-left-width: 1px;
+  border-inline-end-width: 1px;
 }
 
 .header-actions {
@@ -292,12 +289,9 @@ h5.heading {
   flex-wrap: nowrap;
 }
 
-.header-actions--end {
-  margin-left: auto;
-}
-
+.header-actions--end,
 .menu-container:only-child {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .menu-button {
@@ -343,21 +337,6 @@ h5.heading {
   padding: 0.5rem;
 }
 
-.calcite--rtl .header-content {
-  margin-left: auto;
-  margin-right: unset;
-}
-
-.calcite--rtl .header-actions--end {
-  margin-right: auto;
-  margin-left: unset;
-}
-
-.calcite--rtl .menu-container:only-child {
-  margin-right: auto;
-  margin-left: unset;
-}
-
 .fab-container {
   display: block;
   position: sticky;

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

@@ -4,8 +4,7 @@
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getElementStyleDir, getSlotted } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementDir, getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
 /**
@@ -63,7 +62,7 @@ export class CalcitePanel {
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
-    this.panelKeyUpHandler = (event) => {
+    this.panelKeyDownHandler = (event) => {
       if (event.key === "Escape") {
         this.dismiss();
       }
@@ -106,7 +105,7 @@ export class CalcitePanel {
   // --------------------------------------------------------------------------
   renderBackButton() {
     const { el } = this;
-    const rtl = getElementStyleDir(el) === "rtl";
+    const rtl = getElementDir(el) === "rtl";
     const { showBackButton, intlBack, backButtonClick } = this;
     const label = intlBack || TEXT.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
@@ -200,12 +199,8 @@ export class CalcitePanel {
       h("slot", { name: SLOTS.fab })));
   }
   render() {
-    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
-    const rtl = getElementDir(el) === "rtl";
-    const panelNode = (h("article", { "aria-busy": loading.toString(), class: {
-        [CSS.container]: true,
-        [CSS_UTILITY.rtl]: rtl
-      }, hidden: dismissible && dismissed, onKeyUp: panelKeyUpHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
+    const { dismissed, disabled, dismissible, loading, panelKeyDownHandler } = this;
+    const panelNode = (h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterSlottedContent() || this.renderFooterActions()));

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

@@ -299,7 +299,7 @@ export class CalcitePickList {
             "location": "global"
           }
         },
-        "return": "Promise<Map<string, HTMLCalcitePickListItemElement>>"
+        "return": "Promise<Map<string, any>>"
       },
       "docs": {
         "text": "Returns the currently selected items",

package/dist/collection/components/calcite-pick-list/shared-list-logic.js

@@ -215,8 +215,8 @@ export function selectSiblings(item, deselect = false) {
 }
 let groups;
 export function handleFilter(event) {
-  const filteredData = event.detail;
-  const values = filteredData.map((item) => item.value);
+  const { filteredItems } = event.currentTarget;
+  const values = filteredItems.map((item) => item.value);
   let hasSelectedMatch = false;
   if (!groups) {
     groups = new Set();

package/dist/collection/components/calcite-pick-list/shared-list-render.js

@@ -15,14 +15,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, Host } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { getElementDir } from "../../utils/dom";
 export const List = (_a) => {
-  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, el, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
+  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
   const defaultSlot = h("slot", null);
   return (h(Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
     h("section", null,
       h("header", { class: { [CSS.sticky]: true } },
-        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, data: dataForFilter, dir: getElementDir(el), disabled: loading || disabled, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
+        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         h("slot", { name: SLOTS.menuActions })),
       loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
       defaultSlot)));

package/dist/collection/components/calcite-pick-list-group/calcite-pick-list-group.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -155,10 +159,5 @@ h3.heading {
 }
 
 .container--indented {
-  margin-left: 1.5rem;
-}
-
-.calcite--rtl.container--indented {
-  margin-left: 0;
-  margin-right: 1.5rem;
+  margin-inline-start: 1.5rem;
 }

package/dist/collection/components/calcite-pick-list-group/calcite-pick-list-group.js

@@ -4,9 +4,8 @@
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 import { HEADING_LEVEL } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { CalciteHeading, constrainHeadingLevel } from "../functional/CalciteHeading";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements.
@@ -20,12 +19,10 @@ export class CalcitePickListGroup {
   render() {
     var _a;
     const { el, groupTitle, headingLevel } = this;
-    const rtl = getElementDir(el) === "rtl";
     const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
     const sectionClasses = {
       [CSS.container]: true,
-      [CSS.indented]: hasParentItem,
-      [CSS_UTILITY.rtl]: rtl
+      [CSS.indented]: hasParentItem
     };
     const title = groupTitle;
     const parentLevel = (_a = el.closest("calcite-pick-list")) === null || _a === void 0 ? void 0 : _a.headingLevel;

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.css

@@ -49,7 +49,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 {
@@ -210,10 +214,5 @@
 }
 
 .actions--start ~ .label {
-  padding-left: 0.25rem;
-}
-
-.calcite--rtl .actions--start ~ .label {
-  padding-left: unset;
-  padding-right: 0.25rem;
+  padding-inline-start: 0.25rem;
 }

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.js

@@ -382,7 +382,7 @@ export class CalcitePickListItem {
       },
       "complexType": {
         "original": "{\n    item: HTMLCalcitePickListItemElement;\n    value: any;\n    selected: boolean;\n    shiftPressed: boolean;\n  }",
-        "resolved": "{ item: HTMLCalcitePickListItemElement; value: any; selected: boolean; shiftPressed: boolean; }",
+        "resolved": "{ item: any; value: any; selected: boolean; shiftPressed: boolean; }",
         "references": {
           "HTMLCalcitePickListItemElement": {
             "location": "global"

package/dist/collection/components/calcite-popover/calcite-popover.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 {
@@ -226,14 +230,11 @@
   flex-direction: column;
   flex-wrap: nowrap;
   align-self: center;
+  overflow: hidden;
   height: 100%;
   width: 100%;
 }
 
-.calcite--rtl .close-button {
-  border-radius: 0.25rem 0 0 0.25rem;
-}
-
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   height: 100%;

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

@@ -6,8 +6,7 @@ import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watc
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, POPOVER_REFERENCE, TEXT } from "./resources";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { getElementDir, queryElementRoots } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { queryElementRoots } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 /**
  * @slot - A slot for adding custom content.
@@ -253,14 +252,12 @@ export class CalcitePopover {
       this.renderCloseButton())) : null;
   }
   render() {
-    const { effectiveReferenceElement, el, heading, label, open, disablePointer } = this;
-    const rtl = getElementDir(el) === "rtl";
+    const { effectiveReferenceElement, heading, label, open, disablePointer } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !disablePointer ? (h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) })) : null;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
       h("div", { class: {
-          [CSS_UTILITY.rtl]: rtl,
           [PopperCSS.animation]: true,
           [PopperCSS.animationActive]: displayed
         }, onTransitionEnd: this.transitionEnd },

package/dist/collection/components/calcite-popover-manager/calcite-popover-manager.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-progress/calcite-progress.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 {