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

package/dist/collection/components/calcite-input-time-picker/calcite-input-time-picker.js

@@ -2,11 +2,11 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch } from "@stencil/core";
+import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getKey } from "../../utils/key";
-import { parseTimeString, formatTimeString, getMeridiem, getMeridiemHour } from "../../utils/time";
+import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteInputTimePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -18,11 +18,20 @@ export class CalciteInputTimePicker {
     this.active = false;
     /** The disabled state of the time input */
     this.disabled = false;
-    /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
-    this.hourDisplayFormat = "12";
+    /**
+     * BCP 47 language tag for desired language and country format
+     * @internal
+     */
+    this.locale = document.documentElement.lang || navigator.language || "en";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** The scale (size) of the time input */
     this.scale = "m";
-    /** number that specifies the granularity that the value must adhere to */
+    /** number (seconds) that specifies the granularity that the value must adhere to */
     this.step = 60;
     /** The selected time (always 24-hour format)*/
     this.value = null;
@@ -37,56 +46,60 @@ export class CalciteInputTimePicker {
     //--------------------------------------------------------------------------
     this.calciteInputBlurHandler = () => {
       this.active = false;
-      const newValue = formatTimeString(this.calciteInputEl.value) || formatTimeString(this.value);
-      if (newValue !== this.calciteInputEl.value) {
-        this.setInputValue(newValue);
-      }
+      const shouldIncludeSeconds = this.shouldIncludeSeconds();
+      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
+      this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
     this.calciteInputFocusHandler = () => {
       this.active = true;
     };
     this.calciteInputInputHandler = (event) => {
-      this.setValue({ value: event.detail.value });
+      const target = event.target;
+      this.setValue({ value: target.value });
+    };
+    this.timePickerChangeHandler = (event) => {
+      event.stopPropagation();
+      const target = event.target;
+      const value = target.value;
+      this.setValue({ value, origin: "time-picker" });
     };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
     };
+    this.setCalciteTimePickerEl = (el) => {
+      this.calciteTimePickerEl = el;
+    };
     this.setInputValue = (newInputValue) => {
       if (!this.calciteInputEl) {
         return;
       }
-      if (this.hourDisplayFormat === "12") {
-        const { hour, minute, second } = parseTimeString(newInputValue);
-        this.calciteInputEl.value = newInputValue
-          ? `${getMeridiemHour(hour)}:${minute}${this.step !== 60 ? ":" + second : ""} ${getMeridiem(hour)}`
-          : null;
-      }
-      else {
-        this.calciteInputEl.value = newInputValue;
-      }
+      this.calciteInputEl.value = newInputValue;
     };
     this.setValue = ({ value, origin = "input" }) => {
       const previousValue = this.value;
-      const validatedNewValue = formatTimeString(value);
+      const newValue = formatTimeString(value);
+      const newLocalizedValue = localizeTimeString(newValue, this.locale, this.shouldIncludeSeconds());
       this.internalValueChange = origin !== "external" && origin !== "loading";
       const shouldEmit = origin !== "loading" &&
         origin !== "external" &&
         ((value !== this.previousValidValue && !value) ||
-          !!(!this.previousValidValue && validatedNewValue) ||
-          (validatedNewValue !== this.previousValidValue && validatedNewValue));
+          !!(!this.previousValidValue && newValue) ||
+          (newValue !== this.previousValidValue && newValue));
       if (value) {
         if (shouldEmit) {
-          this.previousValidValue = validatedNewValue;
+          this.previousValidValue = newValue;
         }
-        if (validatedNewValue && validatedNewValue !== this.value) {
-          this.value = validatedNewValue;
+        if (newValue && newValue !== this.value) {
+          this.value = newValue;
         }
+        this.localizedValue = newLocalizedValue;
       }
       else {
         this.value = value;
+        this.localizedValue = null;
       }
       if (origin === "time-picker" || origin === "external") {
-        this.setInputValue(validatedNewValue);
+        this.setInputValue(newLocalizedValue);
       }
       if (shouldEmit) {
         const changeEvent = this.calciteInputTimePickerChange.emit();
@@ -97,19 +110,28 @@ export class CalciteInputTimePicker {
           this.previousValidValue = previousValue;
         }
         else {
-          this.previousValidValue = validatedNewValue;
+          this.previousValidValue = newValue;
         }
       }
     };
   }
+  localeWatcher(newLocale) {
+    this.setInputValue(localizeTimeString(this.value, newLocale, this.shouldIncludeSeconds()));
+  }
   valueWatcher(newValue) {
     if (!this.internalValueChange) {
       this.setValue({ value: newValue, origin: "external" });
     }
     this.internalValueChange = false;
   }
+  clickHandler(event) {
+    if (event.composedPath().includes(this.calciteTimePickerEl)) {
+      return;
+    }
+    this.setFocus();
+  }
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape" && this.active) {
+    if (event.key === "Escape" && this.active) {
       this.active = false;
     }
   }
@@ -118,21 +140,6 @@ export class CalciteInputTimePicker {
     event.stopPropagation();
     this.active = false;
   }
-  timePickerChangeHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (event.detail) {
-      const { hour, minute, second } = event.detail;
-      let value;
-      if (hour && minute) {
-        value = second && this.step !== 60 ? `${hour}:${minute}:${second}` : `${hour}:${minute}`;
-      }
-      else {
-        value = "";
-      }
-      this.setValue({ value, origin: "time-picker" });
-    }
-  }
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -155,6 +162,9 @@ export class CalciteInputTimePicker {
   onLabelClick() {
     this.setFocus();
   }
+  shouldIncludeSeconds() {
+    return this.step < 60;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -162,17 +172,17 @@ export class CalciteInputTimePicker {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.value) {
-      this.setValue({ value: this.value, origin: "loading" });
+      this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
     }
     connectLabel(this);
+    connectForm(this);
   }
   componentDidLoad() {
-    if (this.calciteInputEl.value !== this.value) {
-      this.setInputValue(this.value);
-    }
+    this.setInputValue(this.localizedValue);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -180,13 +190,13 @@ export class CalciteInputTimePicker {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { hour, minute, second } = parseTimeString(this.value);
     const popoverId = `${this.referenceElementId}-popover`;
     return (h(Host, null,
       h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" },
-        h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), name: this.name, onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
+        h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
       h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active || false, referenceElement: this.referenceElementId },
-        h("calcite-time-picker", { hour: hour, "hour-display-format": this.hourDisplayFormat, intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, minute: minute, scale: this.scale, second: second, step: this.step }))));
+        h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-input-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -233,29 +243,6 @@ export class CalciteInputTimePicker {
       "reflect": true,
       "defaultValue": "false"
     },
-    "hourDisplayFormat": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "HourDisplayFormat",
-        "resolved": "\"12\" | \"24\"",
-        "references": {
-          "HourDisplayFormat": {
-            "location": "import",
-            "path": "../../utils/time"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)"
-      },
-      "attribute": "hour-display-format",
-      "reflect": false,
-      "defaultValue": "\"12\""
-    },
     "intlHour": {
       "type": "string",
       "mutable": false,
@@ -460,6 +447,27 @@ export class CalciteInputTimePicker {
       "attribute": "intl-second-up",
       "reflect": false
     },
+    "locale": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "BCP 47 language tag for desired language and country format"
+      },
+      "attribute": "lang",
+      "reflect": false,
+      "defaultValue": "document.documentElement.lang || navigator.language || \"en\""
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -469,7 +477,7 @@ export class CalciteInputTimePicker {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The name of the time input"
@@ -477,6 +485,27 @@ export class CalciteInputTimePicker {
       "attribute": "name",
       "reflect": false
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "scale": {
       "type": "string",
       "mutable": false,
@@ -512,7 +541,7 @@ export class CalciteInputTimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "number that specifies the granularity that the value must adhere to"
+        "text": "number (seconds) that specifies the granularity that the value must adhere to"
       },
       "attribute": "step",
       "reflect": false,
@@ -537,6 +566,9 @@ export class CalciteInputTimePicker {
       "defaultValue": "null"
     }
   }; }
+  static get states() { return {
+    "localizedValue": {}
+  }; }
   static get events() { return [{
       "method": "calciteInputTimePickerChange",
       "name": "calciteInputTimePickerChange",
@@ -573,24 +605,27 @@ export class CalciteInputTimePicker {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "locale",
+      "methodName": "localeWatcher"
+    }, {
       "propName": "value",
       "methodName": "valueWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "keyup",
-      "method": "keyUpHandler",
+      "name": "click",
+      "method": "clickHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerBlur",
-      "method": "timePickerBlurHandler",
+      "name": "keyup",
+      "method": "keyUpHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerChange",
-      "method": "timePickerChangeHandler",
+      "name": "calciteTimePickerBlur",
+      "method": "timePickerBlurHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/calcite-label/calcite-label.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 {
@@ -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]) {
@@ -118,7 +120,6 @@
 
 :host .container {
   color: var(--calcite-ui-text-1);
-  cursor: pointer;
   width: 100%;
   margin-top: 0;
   margin-right: 0;

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

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

@@ -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 {
@@ -95,7 +99,7 @@
   font-family: inherit;
   cursor: pointer;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-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-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,
@@ -174,13 +168,16 @@ calcite-icon {
   background-color: transparent;
   position: relative;
   color: var(--calcite-ui-text-link);
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   line-height: inherit;
   white-space: initial;
   background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-link-blue-underline), var(--calcite-link-blue-underline));
   background-position: 0% 100%, 100% 100%;
   background-repeat: no-repeat, no-repeat;
   background-size: 0% 1px, 100% 1px;
-  transition: all 0.15s ease-in-out, background-size 0.3s ease-in-out;
 }
 
 :host span:hover, :host span:focus,
@@ -194,7 +191,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

@@ -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,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-list-item/calcite-list-item.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 {
@@ -167,6 +171,13 @@
   word-break: break-word;
 }
 
+.label:only-child,
+.description:only-child {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  margin: 0;
+}
+
 .label {
   color: var(--calcite-ui-text-1);
 }

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

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

package/dist/collection/components/calcite-loader/calcite-loader.css

@@ -49,7 +49,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -212,7 +216,7 @@
   stroke: var(--calcite-ui-brand);
   stroke-dasharray: 150.79632;
   transform: rotate(-90deg);
-  transition: all 100ms linear;
+  transition: all var(--calcite-internal-animation-timing-fast) linear;
 }
 
 :host([inline]) {
@@ -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;
 }
@@ -256,21 +255,21 @@
   opacity: 0;
   transform: scale(0.75, 0.75);
   transform-origin: center;
-  transition: opacity 200ms linear 1000ms, transform 200ms linear 1000ms;
+  transition: opacity var(--calcite-internal-animation-timing-medium) linear 1000ms, transform var(--calcite-internal-animation-timing-medium) linear 1000ms;
 }
 
 :host([complete]) .loader__svgs {
   opacity: 0;
   transform: scale(0.75, 0.75);
   transform-origin: center;
-  transition: opacity 180ms linear 800ms, transform 180ms linear 800ms;
+  transition: opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;
 }
 
 :host([complete]) .loader__percentage {
   color: var(--calcite-ui-brand);
   transform: scale(1.05, 1.05);
   transform-origin: center;
-  transition: color 200ms linear, transform 200ms linear;
+  transition: color var(--calcite-internal-animation-timing-medium) linear, transform var(--calcite-internal-animation-timing-medium) linear;
 }
 
 /**