npm - @esri/calcite-components - Versions diffs - 1.0.0-next.322 → 1.0.0-next.323 - Mend

@esri/calcite-components 1.0.0-next.322 → 1.0.0-next.323

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (687) hide show

package/dist/collection/components/calcite-input/calcite-input.css CHANGED Viewed

@@ -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 {
@@ -281,57 +285,27 @@
 }
 :host([scale=s]) .icon {
-  left: 0.5rem;
-}
-:host([scale=s]) .calcite--rtl .icon {
-  left: unset;
-  right: 0.5rem;
+  inset-inline-start: 0.5rem;
 }
 :host([scale=m]) .icon {
-  left: 0.75rem;
-}
-:host([scale=m]) .calcite--rtl .icon {
-  left: unset;
-  right: 0.75rem;
+  inset-inline-start: 0.75rem;
 }
 :host([scale=l]) .icon {
-  left: 1rem;
-}
-:host([scale=l]) .calcite--rtl .icon {
-  left: unset;
-  right: 1rem;
+  inset-inline-start: 1rem;
 }
 :host([icon][scale=s]) input {
-  padding-left: 2rem;
-}
-:host([icon][scale=s]) .calcite--rtl input {
-  padding-right: 2rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 2rem;
 }
 :host([icon][scale=m]) input {
-  padding-left: 2.5rem;
-}
-:host([icon][scale=m]) .calcite--rtl input {
-  padding-right: 2.5rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 2.5rem;
 }
 :host([icon][scale=l]) input {
-  padding-left: 3rem;
-}
-:host([icon][scale=l]) .calcite--rtl input {
-  padding-right: 3rem;
-  padding-left: 0.5rem;
+  padding-inline-start: 3rem;
 }
 .element-wrapper {
@@ -348,7 +322,7 @@
   pointer-events: none;
   z-index: 10;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
@@ -385,15 +359,15 @@ input[type=time]::-webkit-clear-button {
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-foreground-1);
-  border-left-width: 0;
   order: 4;
   margin: 0;
+  border-inline-start-width: 0;
 }
 .clear-button:hover {
   background-color: var(--calcite-ui-foreground-2);
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
@@ -401,7 +375,7 @@ input[type=time]::-webkit-clear-button {
 .clear-button:hover calcite-icon {
   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;
 }
@@ -423,12 +397,6 @@ input[type=time]::-webkit-clear-button {
   opacity: var(--calcite-ui-opacity-disabled);
 }
-.calcite--rtl .clear-button {
-  border-left-color: var(--calcite-ui-border-input);
-  border-width: 1px;
-  border-right-width: 0;
-}
 .loader {
   top: 1px;
   left: 1px;
@@ -466,38 +434,20 @@ input[type=time]::-webkit-clear-button {
 .prefix {
   order: 2;
-  border-right-width: 0;
+  border-inline-end-width: 0;
 }
 .suffix {
   order: 5;
-  border-left-width: 0;
-}
-.calcite--rtl .prefix {
-  border-right-width: 1px;
-  border-left-width: 0;
-}
-.calcite--rtl .suffix {
-  border-left-width: 1px;
-  border-right-width: 0;
+  border-inline-start-width: 0;
 }
 :host([alignment=start]) textarea, :host([alignment=start]) input {
-  text-align: left;
-}
-:host([alignment=start]) .calcite--rtl textarea, :host([alignment=start]) .calcite--rtl input {
-  text-align: right;
+  text-align: start;
 }
 :host([alignment=end]) textarea, :host([alignment=end]) input {
-  text-align: right;
-}
-:host([alignment=end]) .calcite--rtl textarea, :host([alignment=end]) .calcite--rtl input {
-  text-align: left;
+  text-align: end;
 }
 :host input[type=number] {
@@ -517,7 +467,7 @@ input[type=time]::-webkit-clear-button {
   pointer-events: none;
   order: 6;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
@@ -555,7 +505,7 @@ input[type=time]::-webkit-clear-button {
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
-  border-right-width: 0;
+  border-inline-end-width: 0;
 }
 .number-button-item.number-button-item--horizontal[data-adjustment=down]:hover {
@@ -594,20 +544,7 @@ input[type=time]::-webkit-clear-button {
   color: var(--calcite-ui-text-1);
 }
-.calcite--rtl .number-button-item.number-button-item--horizontal[data-adjustment=down] {
-  border-width: 1px;
-  border-left-width: 0;
-  border-color: var(--calcite-ui-border-input);
-}
-.calcite--rtl .number-button-item.number-button-item--horizontal[data-adjustment=up] {
-  border-width: 1px;
-  border-right-width: 0;
-  border-color: var(--calcite-ui-border-input);
-}
-:host([number-button-type=vertical]) .number-button-item[data-adjustment=down],
-:host([number-button-type=vertical]) .calcite--rtl .number-button-item[data-adjustment=down] {
+:host([number-button-type=vertical]) .number-button-item[data-adjustment=down] {
   border-top-width: 0;
 }
@@ -628,18 +565,18 @@ input[type=time]::-webkit-clear-button {
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-foreground-1);
-  border-left-width: 0;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   margin: 0;
+  border-inline-start-width: 0;
 }
 .number-button-item calcite-icon {
   pointer-events: none;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
@@ -656,13 +593,6 @@ input[type=time]::-webkit-clear-button {
   background-color: var(--calcite-ui-foreground-3);
 }
-:host([number-button-type=vertical]) .calcite--rtl .number-button-item {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-input);
-  border-right-width: 0;
-}
 .wrapper {
   display: flex;
   flex-direction: row;
@@ -682,22 +612,16 @@ input[type=time]::-webkit-clear-button {
   box-sizing: border-box;
   position: absolute;
   bottom: 0;
-  right: 0;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
-}
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .resize-icon-wrapper {
-    display: none;
-  }
+  inset-inline-end: 0;
 }
 .resize-icon-wrapper {
   bottom: 2px;
-  right: 2px;
+  inset-inline-end: 2px;
   background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-text-3);
   position: absolute;
@@ -709,23 +633,11 @@ input[type=time]::-webkit-clear-button {
 .resize-icon-wrapper calcite-icon {
   bottom: 0.25rem;
-  right: 0.25rem;
+  inset-inline-end: 0.25rem;
   transform: rotate(-45deg);
 }
-.calcite--rtl textarea::-webkit-resizer {
-  right: unset;
-  left: 0;
-}
-.calcite--rtl .resize-icon-wrapper {
-  left: 2px;
-  right: unset;
-}
 .calcite--rtl .resize-icon-wrapper calcite-icon {
-  bottom: 0.25rem;
-  right: 0.25rem;
   transform: rotate(45deg);
 }
@@ -773,7 +685,7 @@ input[type=time]::-webkit-clear-button {
 :host .inline-child {
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   background-color: transparent;

package/dist/collection/components/calcite-input/calcite-input.js CHANGED Viewed

@@ -213,8 +213,6 @@ export class CalciteInput {
       clearInterval(this.nudgeNumberValueIntervalId);
     };
     this.numberButtonMouseDownHandler = (event) => {
-      // todo, when dropping ie11 support, refactor to use stepup/stepdown
-      // prevent blur and re-focus of input on mousedown
       event.preventDefault();
       const direction = event.target.dataset.adjustment;
       this.nudgeNumberValue(direction, event);
@@ -410,7 +408,7 @@ export class CalciteInput {
       h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
     const inputClearButton = (h("button", { class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: this.disabled ? -1 : 0, type: "button" },
       h("calcite-icon", { icon: "x", scale: "s" })));
-    const iconEl = (h("calcite-icon", { class: CSS.inputIcon, dir: dir, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
+    const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (h("button", { class: {
         [CSS.numberButtonItem]: true,
@@ -439,7 +437,7 @@ export class CalciteInput {
       ]
       : null;
     return (h(Host, { onClick: this.inputFocusHandler, onKeyDown: this.keyDownHandler },
-      h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir },
+      h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
         this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
           ? numberButtonsHorizontalDown
           : null,

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.css CHANGED Viewed

@@ -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-input-date-picker/calcite-input-date-picker.js CHANGED Viewed

@@ -4,7 +4,6 @@
  */
 import { Component, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
 import { getLocaleData } from "../calcite-date-picker/utils";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDate } from "../../utils/date";
 import { TEXT } from "../calcite-date-picker/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
@@ -230,9 +229,8 @@ export class CalciteInputDatePicker {
       : null;
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    const dir = getElementDir(this.el);
     return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" },
-      this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", dir: dir, role: "application" },
+      this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", role: "application" },
         h("div", { class: "input-wrapper", ref: this.setStartWrapper },
           h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
         h("div", { "aria-hidden": (!this.active).toString(), class: "menu-container", ref: this.setMenuEl },

package/dist/collection/components/calcite-input-message/calcite-input-message.css CHANGED Viewed

@@ -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 {
@@ -109,7 +113,7 @@
   pointer-events: none;
   opacity: 0;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
@@ -119,7 +123,7 @@
   visibility: visible;
   opacity: 1;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
@@ -133,16 +137,11 @@
   display: inline-flex;
   flex-shrink: 0;
   pointer-events: none;
-  margin-right: 0.5rem;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
-}
-.calcite-input-message-icon.calcite--rtl {
-  margin-left: 0.5rem;
-  margin-right: 0;
+  margin-inline-end: 0.5rem;
 }
 :host([status=invalid]) .calcite-input-message-icon {

package/dist/collection/components/calcite-input-message/calcite-input-message.js CHANGED Viewed

@@ -3,9 +3,8 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Host, h, Prop, Watch } from "@stencil/core";
-import { getElementDir, getElementProp, setRequestedIcon } from "../../utils/dom";
+import { getElementProp, setRequestedIcon } from "../../utils/dom";
 import { StatusIconDefaults } from "./interfaces";
-import { CSS_UTILITY } from "../../utils/resources";
 /**
  * @slot - A slot for adding text.
  */
@@ -49,8 +48,7 @@ export class CalciteInputMessage {
   //--------------------------------------------------------------------------
   renderIcon(iconName) {
     if (iconName) {
-      const dir = getElementDir(this.el);
-      return (h("calcite-icon", { class: { ["calcite-input-message-icon"]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, icon: iconName, scale: "s" }));
+      return h("calcite-icon", { class: "calcite-input-message-icon", icon: iconName, scale: "s" });
     }
   }
   static get is() { return "calcite-input-message"; }

package/dist/collection/components/calcite-input-time-picker/calcite-input-time-picker.css CHANGED Viewed

@@ -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-label/calcite-label.css CHANGED Viewed

@@ -47,13 +47,17 @@
 }
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 .calcite-animate__in {
@@ -84,14 +88,12 @@
   display: none;
 }
-:host([alignment=start]),
-:host([alignment=end]) .calcite--rtl {
-  text-align: left;
+:host([alignment=start]) {
+  text-align: start;
 }
-:host([alignment=end]),
-:host([alignment=start]) .calcite--rtl {
-  text-align: right;
+:host([alignment=end]) {
+  text-align: end;
 }
 :host([alignment=center]) {

package/dist/collection/components/calcite-label/calcite-label.js CHANGED Viewed

@@ -3,9 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { CSS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 /**
  * @slot - A slot for adding text and a component that can be labeled.
  */
@@ -45,9 +43,8 @@ export class CalciteLabel {
   //
   //--------------------------------------------------------------------------
   render() {
-    const dir = getElementDir(this.el);
     return (h(Host, { onClick: this.labelClickHandler },
-      h("div", { class: { [CSS.container]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+      h("div", { class: CSS.container },
         h("slot", null))));
   }
   static get is() { return "calcite-label"; }

package/dist/collection/components/calcite-link/calcite-link.css CHANGED Viewed

@@ -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 {
@@ -95,7 +99,7 @@
   font-family: inherit;
   cursor: pointer;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   text-decoration: none;
@@ -131,7 +135,7 @@ calcite-icon {
 .calcite-link--icon {
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   vertical-align: text-top;
@@ -149,21 +153,11 @@ calcite-icon {
 }
 :host .calcite-link--icon.icon-start {
-  margin-right: 0.5rem;
-}
-.calcite--rtl .calcite-link--icon.icon-start {
-  margin-right: 0;
-  margin-left: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 :host .calcite-link--icon.icon-end {
-  margin-left: 0.5rem;
-}
-.calcite--rtl .calcite-link--icon.icon-end {
-  margin-left: 0;
-  margin-right: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 :host span,
@@ -194,7 +188,7 @@ calcite-icon {
   background-size: 100% 2px, 100% 2px;
 }
-span.calcite--rtl,
-a.calcite--rtl {
+:host span.calcite--rtl,
+:host a.calcite--rtl {
   background-position: 100% 100%, 100% 100%;
 }

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 {