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

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

@@ -48,7 +48,7 @@ export class CalciteLink {
     const role = this.childElType === "span" ? "link" : null;
     const tabIndex = this.disabled ? -1 : this.childElType === "span" ? 0 : null;
     return (h(Host, { role: "presentation" },
-      h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir, href: Tag === "a" && this.href, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target },
+      h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, href: Tag === "a" && this.href, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target },
         this.iconStart ? iconStartEl : null,
         h("slot", null),
         this.iconEnd ? iconEndEl : null)));

package/dist/collection/components/calcite-list/calcite-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-list-item/calcite-list-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 {

package/dist/collection/components/calcite-list-item-group/calcite-list-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 {

package/dist/collection/components/calcite-loader/calcite-loader.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 {
@@ -226,15 +230,10 @@
   height: var(--calcite-loader-size-inline);
   min-height: var(--calcite-loader-size-inline);
   width: var(--calcite-loader-size-inline);
-  margin-right: calc(var(--calcite-loader-size-inline) * 0.5);
+  margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);
   vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);
 }
 
-:host([inline][dir=rtl]) {
-  margin-right: 0;
-  margin-left: calc(var(--calcite-loader-size-inline) * 0.5);
-}
-
 :host([active][inline]) {
   display: inline-block;
 }

package/dist/collection/components/calcite-modal/calcite-modal.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 {
@@ -207,11 +211,11 @@
   color: var(--calcite-ui-text-3);
   order: 2;
   cursor: pointer;
-  border-top-right-radius: 0.25rem;
   background-color: transparent;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  border-start-end-radius: 0.25rem;
   padding: var(--calcite-modal-padding);
   flex: 0 0 auto;
   transition: all 0.15s ease-in-out;
@@ -232,11 +236,6 @@
   color: var(--calcite-ui-text-1);
 }
 
-.calcite--rtl .close {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0;
-}
-
 .title {
   display: flex;
   align-items: center;
@@ -317,12 +316,7 @@ slot[name=content]::slotted(*),
 
 .back {
   display: block;
-  margin-right: auto;
-}
-
-.calcite--rtl .back {
-  margin-left: auto;
-  margin-right: 0;
+  margin-inline-end: auto;
 }
 
 .secondary {
@@ -468,13 +462,7 @@ slot[name=primary] {
   }
 
   :host([docked]) .close {
-    border-radius: 0 var(--calcite-border-radius) 0 0;
-  }
-}
-
-@media screen and (max-width: 860px) {
-  :host([docked]) .calcite--rtl .close {
-    border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
+    border-start-end-radius: var(--calcite-border-radius);
   }
 }
 
@@ -529,8 +517,7 @@ slot[name=primary] {
     flex-direction: column;
   }
 
-  .calcite--rtl .back,
-.back,
+  .back,
 .secondary {
     margin: 0;
     margin-bottom: 0.25rem;

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

@@ -3,10 +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 { 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) => {
@@ -123,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(),

package/dist/collection/components/calcite-notice/calcite-notice.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 {
@@ -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,13 +259,7 @@
   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 {
@@ -275,11 +273,12 @@
   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 {
@@ -326,24 +325,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,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-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,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-pagination/calcite-pagination.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 {
@@ -179,7 +183,7 @@
 .page:hover {
   color: var(--calcite-ui-text-1);
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-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,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 {
@@ -234,13 +238,13 @@ 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,
@@ -277,12 +281,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 +291,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 +339,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";
 /**
@@ -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, panelKeyDownHandler } = 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, onKeyDown: panelKeyDownHandler, 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,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-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, dir: getElementDir(el), disabled: loading || disabled, items: dataForFilter, 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,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 {
@@ -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;
 }