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

package/dist/collection/components/calcite-block/calcite-block.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 {
@@ -190,13 +194,6 @@ h5.heading {
   grid-row: 1/2;
 }
 
-.header-container > .header {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0;
-  padding-right: 0;
-}
-
 .toggle {
   display: flex;
   flex-wrap: nowrap;
@@ -204,10 +201,7 @@ h5.heading {
   font-family: inherit;
   align-items: center;
   margin: 0;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0;
   border-style: none;
   cursor: pointer;
   outline-offset: 0;
@@ -237,8 +231,7 @@ calcite-handle {
 
 .title {
   margin: 0;
-  padding-inline: 0.75rem;
-  padding-block: 0px;
+  padding: 0.75rem;
 }
 
 .header .title .heading {
@@ -266,6 +259,7 @@ calcite-handle {
 .icon {
   margin-inline-start: 0.75rem;
   margin-inline-end: 0px;
+  margin-block: 0.75rem;
 }
 
 .status-icon.valid {
@@ -296,12 +290,15 @@ calcite-handle {
 
 .toggle-icon {
   align-self: center;
+  justify-self: end;
   color: var(--calcite-ui-text-3);
   transition-property: color;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
   margin-inline-end: 1rem;
-  margin-inline-start: 0px;
+  margin-inline-start: auto;
 }
 
 .toggle:hover .toggle-icon {
@@ -314,7 +311,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/calcite-block.js

@@ -80,14 +80,18 @@ export class CalciteBlock {
       }, icon: statusIcon, scale: "m" }));
     return hasIcon ? h("div", { class: CSS.icon }, iconEl) : null;
   }
+  renderTitle() {
+    const { heading, headingLevel, summary } = this;
+    return heading || summary ? (h("div", { class: CSS.title },
+      h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading),
+      summary ? h("div", { class: CSS.summary }, summary) : null)) : null;
+  }
   render() {
-    const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary, intlLoading, headingLevel } = this;
+    const { collapsible, disabled, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
     const headerContent = (h("header", { class: CSS.header },
       this.renderIcon(),
-      h("div", { class: CSS.title },
-        h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading),
-        summary ? h("div", { class: CSS.summary }, summary) : null)));
+      this.renderTitle()));
     const hasControl = !!getSlotted(el, SLOTS.control);
     const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
     const collapseIcon = open ? ICONS.opened : ICONS.closed;

package/dist/collection/components/calcite-block-section/calcite-block-section.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 {
@@ -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,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 {
@@ -135,7 +139,7 @@
   box-sizing: border-box;
   font-family: inherit;
   font-weight: var(--calcite-font-weight-normal);
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  transition: color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-offset var(--calcite-internal-animation-timing-fast) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
 }
 
 :host button:hover,
@@ -146,8 +150,16 @@
 .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);
+}
+
+.icon-start-empty .content {
+  margin-inline-start: unset;
+}
+
+.icon-end-empty .content {
+  margin-inline-end: unset;
 }
 
 :host([scale=m]) button,
@@ -160,24 +172,6 @@
   --calcite-button-content-margin: 1rem;
 }
 
-:host(:not([icon-start])) .content {
-  margin-left: 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);
-}
-
 :host([width=auto]) {
   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 {
@@ -304,7 +282,7 @@
 
 .calcite-button--loader calcite-loader {
   margin: 0;
-  transition: width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out;
+  transition: width var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out;
 }
 
 .calcite-button--loader calcite-loader.loading-in {
@@ -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,15 +102,19 @@ export class CalciteButton {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     const Tag = this.childElType;
-    const loader = (h("div", { class: CSS.buttonLoader }, this.hasLoader ? (h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" })) : null));
+    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;
     const iconStartEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     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 },
-      loader,
+    return (h(Tag, { "aria-label": getLabelText(this), class: {
+        [CSS.contentSlotted]: this.hasContent,
+        [CSS.iconStartEmpty]: !this.iconStart,
+        [CSS.iconEndEmpty]: !this.iconEnd
+      }, 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,
       this.iconEnd ? iconEndEl : null));

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

@@ -10,7 +10,9 @@ export const CSS = {
   iconStart: "icon--start",
   iconEnd: "icon--end",
   loadingIn: "loading-in",
-  loadingOut: "loading-out"
+  loadingOut: "loading-out",
+  iconStartEmpty: "icon-start-empty",
+  iconEndEmpty: "icon-end-empty"
 };
 export const TEXT = {
   loading: "Loading"

package/dist/collection/components/calcite-card/calcite-card.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,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,9 +4,6 @@
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { getElementDir } from "../../utils/dom";
-import { getKey } from "../../utils/key";
-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
  */
@@ -57,7 +54,7 @@ export class CalciteCard {
       this.selectCard();
     };
     this.cardSelectKeyDown = (e) => {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.selectCard();
@@ -72,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,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-chip/calcite-chip.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 {
@@ -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-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]) {

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,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 {
@@ -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 {
@@ -285,7 +284,7 @@
 }
 
 .saved-color:hover {
-  transition: outline-color 100ms ease-in-out;
+  transition: outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
   outline: 2px solid var(--calcite-ui-border-2);
   outline-offset: 2px;
 }