@esri/calcite-components 1.0.0-next.321 → 1.0.0-next.325

package/dist/collection/components/calcite-alert/calcite-alert.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 {
@@ -268,11 +272,11 @@ slot[name=message]::slotted(*),
 *::slotted([slot=message]) {
   display: inline;
   margin: 0;
-  margin-right: 0.5rem;
   font-weight: var(--calcite-font-weight-normal);
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
   color: var(--calcite-ui-text-2);
+  margin-inline-end: 0.5rem;
 }
 
 slot[name=link]::slotted(*),
@@ -281,12 +285,6 @@ slot[name=link]::slotted(*),
   display: inline-flex;
 }
 
-.calcite--rtl slot[name=message]::slotted(*),
-.calcite--rtl *::slotted([slot=message]) {
-  margin-left: 0.5rem;
-  margin-right: unset;
-}
-
 .alert-content {
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
@@ -296,27 +294,20 @@ slot[name=link]::slotted(*),
   background-color: var(--calcite-ui-foreground-1);
   flex: 1 1 auto;
   min-width: 0;
-  padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small) 0;
+  padding-block: var(--calcite-alert-spacing-token-small);
+  padding-inline: 0 var(--calcite-alert-spacing-token-small);
   border-bottom-left-radius: var(--calcite-border-radius);
   border-bottom-right-radius: var(--calcite-border-radius);
 }
 
 .alert-content:first-of-type:not(:only-child) {
-  padding-left: var(--calcite-alert-spacing-token-large);
+  padding-inline-start: var(--calcite-alert-spacing-token-large);
 }
 
 .alert-content:only-child {
   padding: var(--calcite-alert-spacing-token-small);
 }
 
-.calcite--rtl .alert-content {
-  padding: var(--calcite-alert-spacing-token-small) 0 var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small);
-}
-
-.calcite--rtl .alert-content:first-of-type:not(:only-child) {
-  padding-right: var(--calcite-alert-spacing-token-large);
-}
-
 .alert-icon {
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
@@ -343,7 +334,7 @@ slot[name=link]::slotted(*),
   cursor: pointer;
   color: var(--calcite-ui-text-3);
   overflow: hidden;
-  border-bottom-right-radius: var(--calcite-border-radius);
+  border-end-end-radius: var(--calcite-border-radius);
 }
 
 .alert-close:hover, .alert-close:focus {
@@ -355,11 +346,6 @@ slot[name=link]::slotted(*),
   background-color: var(--calcite-ui-foreground-3);
 }
 
-.calcite--rtl .alert-close {
-  border-bottom-left-radius: var(--calcite-border-radius);
-  border-bottom-right-radius: unset;
-}
-
 .alert-queue-count {
   display: flex;
   align-items: center;
@@ -385,11 +371,7 @@ slot[name=link]::slotted(*),
 }
 
 :host([auto-dismiss]) > .alert-queue-count {
-  border-right: 0px solid transparent;
-}
-
-:host([auto-dismiss]) .calcite--rtl > .alert-queue-count {
-  border-left: 0px solid transparent;
+  border-inline-end: 0px solid transparent;
 }
 
 .alert-dismiss-progress {
@@ -407,18 +389,13 @@ slot[name=link]::slotted(*),
 
 .alert-dismiss-progress:after {
   top: 0;
-  right: 0;
   display: block;
   position: absolute;
   height: 2px;
   content: "";
   background-color: var(--calcite-alert-dismiss-progress-background);
   z-index: 104;
-}
-
-.calcite--rtl .alert-dismiss-progress:after {
-  left: 0;
-  right: initial;
+  inset-inline-end: 0;
 }
 
 :host([color=blue]) .container {

package/dist/collection/components/calcite-alert/calcite-alert.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 { getElementDir, setRequestedIcon } from "../../utils/dom";
+import { setRequestedIcon } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "./interfaces";
-import { CSS_UTILITY } from "../../utils/resources";
 /** Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  */
@@ -101,7 +100,6 @@ export class CalciteAlert {
     window.clearTimeout(this.autoDismissTimeoutId);
   }
   render() {
-    const dir = getElementDir(this.el);
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" },
       h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
@@ -113,8 +111,7 @@ export class CalciteAlert {
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
       h("div", { class: {
           container: true,
-          queued,
-          [CSS_UTILITY.rtl]: dir === "rtl"
+          queued
         } },
         requestedIcon ? (h("div", { class: "alert-icon" },
           h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,

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

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, h, Prop, State } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { isValidHex } from "../calcite-color-picker/utils";
 import { hexToHue, stringToHex } from "./utils";
 import { getThemeName } from "../../utils/dom";
@@ -38,13 +37,12 @@ export class CalciteAvatar {
   //
   //--------------------------------------------------------------------------
   determineContent() {
-    const dir = getElementDir(this.el);
     if (this.thumbnail && !this.error) {
-      return (h("img", { alt: "", class: "thumbnail", dir: dir, onError: () => (this.error = true), src: this.thumbnail }));
+      return (h("img", { alt: "", class: "thumbnail", onError: () => (this.error = true), src: this.thumbnail }));
     }
     const initials = this.generateInitials();
     const backgroundColor = this.generateFillColor();
-    return (h("span", { class: "background", dir: dir, style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
+    return (h("span", { class: "background", style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
   }
   /**
    * Generate a valid background color that is consistent and unique to this user

package/dist/collection/components/calcite-block/calcite-block.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 {
@@ -314,7 +318,7 @@ calcite-handle {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   position: relative;
-  animation: in var(--calcite-animation-timing) ease-in-out;
+  animation: in var(--calcite-internal-animation-timing-slow) ease-in-out;
 }
 
 .control-container {

package/dist/collection/components/calcite-block-section/calcite-block-section.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 {
@@ -160,11 +164,11 @@
 
 .toggle--switch calcite-switch {
   pointer-events: none;
-  margin-left: 0.25rem;
+  margin-inline-start: 0.25rem;
 }
 
 .toggle--switch .status-icon {
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 
 .toggle--switch__content {
@@ -179,14 +183,4 @@
 
 .status-icon.invalid {
   color: var(--calcite-ui-danger);
-}
-
-.calcite--rtl .toggle--switch calcite-switch {
-  margin-left: 0;
-  margin-right: 0.25rem;
-}
-
-.calcite--rtl .toggle--switch .status-icon {
-  margin-left: 0;
-  margin-right: 0.5rem;
 }

package/dist/collection/components/calcite-block-section/calcite-block-section.js

@@ -3,8 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, Prop, h } from "@stencil/core";
-import { getElementStyleDir } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementDir } from "../../utils/dom";
 import { CSS, ICONS, TEXT } from "./resources";
 /**
  * @slot - A slot for adding content to the block section.
@@ -56,7 +55,7 @@ export class CalciteBlockSection {
   }
   render() {
     const { el, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-    const dir = getElementStyleDir(el);
+    const dir = getElementDir(el);
     const arrowIcon = open
       ? ICONS.menuOpen
       : dir === "rtl"
@@ -77,7 +76,7 @@ export class CalciteBlockSection {
       h("calcite-icon", { icon: arrowIcon, scale: "s" }),
       h("span", { class: CSS.sectionHeaderText }, text),
       this.renderStatusIcon()));
-    return (h("section", { "aria-expanded": open.toString(), class: { [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h("section", { "aria-expanded": open.toString() },
       headerNode,
       h("div", { class: CSS.content, hidden: !open },
         h("slot", null))));

package/dist/collection/components/calcite-button/calcite-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 {
@@ -146,8 +150,8 @@
 .content {
   display: flex;
   flex-basis: auto;
-  margin-left: var(--calcite-button-content-margin);
-  margin-right: var(--calcite-button-content-margin);
+  margin-inline-start: var(--calcite-button-content-margin);
+  margin-inline-end: var(--calcite-button-content-margin);
 }
 
 :host([scale=m]) button,
@@ -161,21 +165,11 @@
 }
 
 :host(:not([icon-start])) .content {
-  margin-left: unset;
+  margin-inline-start: unset;
 }
 
 :host(:not([icon-end])) .content {
-  margin-right: unset;
-}
-
-:host([icon-start]:not([icon-end])) .calcite--rtl .content {
-  margin-left: unset;
-  margin-right: var(--calcite-button-content-margin);
-}
-
-:host([icon-end]:not([icon-start])) .calcite--rtl .content {
-  margin-right: unset;
-  margin-left: var(--calcite-button-content-margin);
+  margin-inline-end: unset;
 }
 
 :host([width=auto]) {
@@ -211,7 +205,7 @@
 }
 
 :host([alignment=icon-start-space-between]:not([width=auto])) .icon--start {
-  margin-right: auto;
+  margin-inline-end: auto;
 }
 
 :host([alignment=icon-start-space-between]:not([width=auto])) a,
@@ -220,7 +214,7 @@
 }
 
 :host([alignment=icon-end-space-between]:not([width=auto])) .icon--end {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 :host([alignment=icon-end-space-between]:not([width=auto])) a,
@@ -228,25 +222,9 @@
   text-align: unset;
 }
 
-:host([alignment=icon-start-space-between]:not([width=auto])) .calcite--rtl .icon--start {
-  margin-right: unset;
-  margin-left: auto;
-}
-
-:host([alignment=icon-end-space-between]:not([width=auto])) .calcite--rtl .icon--end {
-  margin-left: unset;
-  margin-right: auto;
-}
-
 :host([alignment=center]) a:not(.content--slotted) .icon--start + .icon--end,
 :host([alignment=center]) button:not(.content--slotted) .icon--start + .icon--end {
-  margin-left: var(--calcite-button-content-margin);
-}
-
-:host([alignment=center]) a.calcite--rtl:not(.content--slotted) .icon--start + .icon--end,
-:host([alignment=center]) button.calcite--rtl:not(.content--slotted) .icon--start + .icon--end {
-  margin-left: unset;
-  margin-right: var(--calcite-button-content-margin);
+  margin-inline-start: var(--calcite-button-content-margin);
 }
 
 .icon {
@@ -680,26 +658,14 @@
 
 :host([appearance=outline][split-child=primary]) button,
 :host([appearance=clear][split-child=primary]) button {
-  border-right-width: 0;
-  border-left-width: 1px;
-}
-
-:host([appearance=outline][split-child=primary]) button.calcite--rtl,
-:host([appearance=clear][split-child=primary]) button.calcite--rtl {
-  border-left-width: 0;
-  border-right-width: 1px;
+  border-inline-end-width: 0;
+  border-inline-start-width: 1px;
 }
 
 :host([appearance=outline][split-child=secondary]) button,
 :host([appearance=clear][split-child=secondary]) button {
-  border-left-width: 0;
-  border-right-width: 1px;
-}
-
-:host([appearance=outline][split-child=secondary]) button.calcite--rtl,
-:host([appearance=clear][split-child=secondary]) button.calcite--rtl {
-  border-right-width: 0;
-  border-left-width: 1px;
+  border-inline-start-width: 0;
+  border-inline-end-width: 1px;
 }
 
 :host([appearance=transparent]:not(.enable-editing-button)) button,

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

@@ -5,8 +5,7 @@
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
-import { closestElementCrossShadowBoundary, getElementDir } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { closestElementCrossShadowBoundary } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
@@ -103,7 +102,6 @@ export class CalciteButton {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     const Tag = this.childElType;
     const loaderNode = this.hasLoader ? (h("div", { class: CSS.buttonLoader },
       h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" }))) : null;
@@ -111,7 +109,7 @@ export class CalciteButton {
     const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const contentEl = (h("span", { class: CSS.content },
       h("slot", null)));
-    return (h(Tag, { "aria-label": getLabelText(this), class: { [CSS_UTILITY.rtl]: dir === "rtl", [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
+    return (h(Tag, { "aria-label": getLabelText(this), class: { [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
       loaderNode,
       this.iconStart ? iconStartEl : null,
       this.hasContent ? contentEl : null,

package/dist/collection/components/calcite-card/calcite-card.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 {
@@ -226,10 +230,5 @@ slot[name=footer-trailing]::slotted(*),
   margin: 0;
   padding: 0;
   top: 0.5rem;
-  right: 0.5rem;
-}
-
-.calcite--rtl .checkbox-wrapper {
-  right: auto;
-  left: 0.5rem;
+  inset-inline-end: 0.5rem;
 }

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

@@ -4,8 +4,6 @@
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { getElementDir } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
 /** Cards do not include a grid or bounding container
  * - cards will expand to fit the width of their container
  */
@@ -71,8 +69,7 @@ export class CalciteCard {
   //
   // --------------------------------------------------------------------------
   render() {
-    const dir = getElementDir(this.el);
-    return (h("div", { class: { "calcite-card-container": true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h("div", { class: "calcite-card-container" },
       this.loading ? (h("div", { class: "calcite-card-loader-container" },
         h("calcite-loader", { active: true, label: this.intlLoading }))) : null,
       h("section", { "aria-busy": this.loading.toString(), class: { [CSS.container]: true } },

package/dist/collection/components/calcite-checkbox/calcite-checkbox.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-chip/calcite-chip.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 {
@@ -106,7 +110,7 @@
 :host([scale=m]) .chip-image-container {
   height: 1.5rem;
   width: 1.5rem;
-  padding-left: 0.25rem;
+  padding-inline-start: 0.25rem;
 }
 
 :host([scale=l]) {
@@ -122,16 +126,6 @@
   padding-left: 0.25rem;
 }
 
-:host([scale=m]) .calcite--rtl .chip-image-container {
-  padding-left: 0;
-  padding-right: 0.25rem;
-}
-
-:host([scale=l]) .calcite--rtl .chip-image-container {
-  padding-left: 0;
-  padding-right: 0.25rem;
-}
-
 :host {
   display: inline-flex;
   align-items: center;
@@ -143,7 +137,6 @@
   cursor: default;
   border-radius: 9999px;
   box-sizing: border-box;
-  --calcite-chip-button-border-radius: 0 50px 50px 0;
 }
 
 .container {
@@ -159,31 +152,18 @@
   white-space: nowrap;
 }
 
-.calcite--rtl {
-  text-align: right;
-  --calcite-chip-button-border-radius: 50px 0 0 50px;
-}
-
 :host span {
   padding: 0 var(--calcite-chip-spacing-unit-l);
 }
 
 :host([dismissible]) span {
-  padding: 0 var(--calcite-chip-spacing-unit-s) 0 var(--calcite-chip-spacing-unit-l);
-}
-
-:host([dismissible]) .calcite--rtl span {
-  padding: 0 var(--calcite-chip-spacing-unit-l) 0 var(--calcite-chip-spacing-unit-s);
+  padding-inline: var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s);
 }
 
 :host([icon]:not([dismissible])) span {
   padding: 0 var(--calcite-chip-spacing-unit-l);
 }
 
-:host([icon]:not([dismissible])) .calcite--rtl span {
-  padding: 0 var(--calcite-chip-spacing-unit-l);
-}
-
 :host button {
   margin: 0;
   background-color: transparent;
@@ -198,12 +178,15 @@
   border-style: none;
   cursor: pointer;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   color: var(--calcite-ui-text-1);
   -webkit-appearance: none;
-  border-radius: var(--calcite-chip-button-border-radius);
+  border-start-start-radius: 0;
+  border-start-end-radius: 50px;
+  border-end-end-radius: 50px;
+  border-end-start-radius: 0;
   padding: 0 var(--calcite-chip-spacing-unit-s);
   color: inherit;
   --calcite-chip-transparent-hover: var(--calcite-button-transparent-hover);
@@ -243,18 +226,14 @@
   position: relative;
   margin-top: 0;
   margin-bottom: 0;
-  margin-right: 0;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  margin-left: var(--calcite-chip-spacing-unit-l);
-  border-radius: var(--calcite-chip-button-border-radius);
-}
-
-.calcite--rtl .calcite-chip--icon {
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: var(--calcite-chip-spacing-unit-l);
+  margin-inline-end: 0;
+  margin-inline-start: var(--calcite-chip-spacing-unit-l);
+  border-start-start-radius: 0;
+  border-start-end-radius: 50px;
+  border-end-end-radius: 50px;
+  border-end-start-radius: 0;
 }
 
 :host([color=blue][appearance=solid]) {