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

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

@@ -1,7 +1,14 @@
+/*!
+ * 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, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, setRequestedIcon } from "../../utils/dom";
 import { StatusIconDefaults } from "./interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding text.
+ */
 export class CalciteInputMessage {
   constructor() {
     //--------------------------------------------------------------------------
@@ -148,8 +155,8 @@ export class CalciteInputMessage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"floating\" type is no longer supported",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "\"floating\" type is no longer supported"
           }],
         "text": "specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input)"
       },

package/dist/collection/components/calcite-input-message/interfaces.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {
   StatusIconDefaults["valid"] = "check-circle";

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

@@ -1,7 +1,12 @@
+/*!
+ * 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 { guid } from "../../utils/guid";
 import { getKey } from "../../utils/key";
 import { parseTimeString, formatTimeString, getMeridiem, getMeridiemHour } from "../../utils/time";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 export class CalciteInputTimePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -19,7 +24,7 @@ export class CalciteInputTimePicker {
     this.scale = "m";
     /** number that specifies the granularity that the value must adhere to */
     this.step = 60;
-    /** The selected time */
+    /** The selected time (always 24-hour format)*/
     this.value = null;
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
@@ -43,17 +48,9 @@ export class CalciteInputTimePicker {
     this.calciteInputInputHandler = (event) => {
       this.setValue({ value: event.detail.value });
     };
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
     };
-    this.setCalciteTimePickerEl = (el) => {
-      this.calciteTimePickerEl = el;
-    };
     this.setInputValue = (newInputValue) => {
       if (!this.calciteInputEl) {
         return;
@@ -111,12 +108,6 @@ export class CalciteInputTimePicker {
     }
     this.internalValueChange = false;
   }
-  clickHandler(event) {
-    if (event.composedPath().includes(this.calciteTimePickerEl)) {
-      return;
-    }
-    this.setFocus();
-  }
   keyUpHandler(event) {
     if (getKey(event.key) === "Escape" && this.active) {
       this.active = false;
@@ -156,6 +147,14 @@ export class CalciteInputTimePicker {
   async setFocus() {
     this.calciteInputEl.setFocus();
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -165,12 +164,16 @@ export class CalciteInputTimePicker {
     if (this.value) {
       this.setValue({ value: this.value, origin: "loading" });
     }
+    connectLabel(this);
   }
   componentDidLoad() {
     if (this.calciteInputEl.value !== this.value) {
       this.setInputValue(this.value);
     }
   }
+  disconnectedCallback() {
+    disconnectLabel(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -181,9 +184,9 @@ export class CalciteInputTimePicker {
     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", 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), name: this.name, 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, ref: this.setCalciteTimePickerEl, scale: this.scale, second: second, step: this.step }))));
+        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 }))));
   }
   static get is() { return "calcite-input-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -527,7 +530,7 @@ export class CalciteInputTimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The selected time"
+        "text": "The selected time (always 24-hour format)"
       },
       "attribute": "value",
       "reflect": false,
@@ -574,12 +577,6 @@ export class CalciteInputTimePicker {
       "methodName": "valueWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "click",
-      "method": "clickHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "keyup",
       "method": "keyUpHandler",
       "target": undefined,

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

@@ -98,25 +98,25 @@
   text-align: center;
 }
 
-:host([scale=s]) label {
+:host([scale=s]) .container {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   margin-bottom: 0.5rem;
 }
 
-:host([scale=m]) label {
+:host([scale=m]) .container {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   margin-bottom: 0.75rem;
 }
 
-:host([scale=l]) label {
+:host([scale=l]) .container {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   margin-bottom: 1rem;
 }
 
-:host label {
+:host .container {
   color: var(--calcite-ui-text-1);
   cursor: pointer;
   width: 100%;
@@ -126,15 +126,15 @@
   line-height: 1.375;
 }
 
-:host([layout=default]) label {
+:host([layout=default]) .container {
   display: flex;
   flex-direction: column;
   grid-gap: 0.25rem;
   gap: 0.25rem;
 }
 
-:host([layout=inline]) label,
-:host([layout=inline-space-between]) label {
+:host([layout=inline]) .container,
+:host([layout=inline-space-between]) .container {
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -142,16 +142,16 @@
   gap: 0.5rem;
 }
 
-:host([layout=inline][scale=l]) label {
+:host([layout=inline][scale=l]) .container {
   grid-gap: 0.75rem;
   gap: 0.75rem;
 }
 
-:host([layout=inline-space-between]) label {
+:host([layout=inline-space-between]) .container {
   justify-content: space-between;
 }
 
-:host([disabled]) > label {
+:host([disabled]) > .container {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -169,7 +169,7 @@
   --bg-opacity: 0;
 }
 
-:host([disable-spacing]) label {
+:host([disable-spacing]) .container {
   grid-gap: 0;
   gap: 0;
   margin: 0;

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

@@ -1,6 +1,14 @@
-import { Component, Element, Event, Listen, h, Prop } from "@stencil/core";
-import { getElementDir, queryElementRoots } from "../../utils/dom";
+/*!
+ * 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, 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.
+ */
 export class CalciteLabel {
   constructor() {
     //--------------------------------------------------------------------------
@@ -12,7 +20,7 @@ export class CalciteLabel {
     this.alignment = "start";
     /** specify the status of the label and any child input / input messages */
     this.status = "idle";
-    /** specify the scale of the input, defaults to m */
+    /** specify the scale of the label, defaults to m */
     this.scale = "m";
     /** is the wrapped element positioned inline with the label slotted text */
     this.layout = "default";
@@ -25,90 +33,25 @@ export class CalciteLabel {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.handleCalciteHtmlForClicks = (target) => {
-      // 1. has htmlFor
-      if (!this.for) {
-        return;
-      }
-      // 2. htmlFor matches a calcite component
-      const inputForThisLabel = queryElementRoots(this.el, `#${this.for}`);
-      if (!inputForThisLabel) {
-        return;
-      }
-      if (!inputForThisLabel.localName.startsWith("calcite")) {
-        return;
-      }
-      // 5. target is NOT the calcite component that this label matches
-      if (target === inputForThisLabel) {
-        return;
-      }
-      // 3. target is not a labelable native form element
-      const labelableNativeElements = [
-        "button",
-        "input",
-        "meter",
-        "output",
-        "progress",
-        "select",
-        "textarea"
-      ];
-      if (labelableNativeElements.includes(target.localName)) {
-        return;
-      }
-      // 4. target is not a labelable calcite form element
-      const labelableCalciteElements = [
-        "calcite-button",
-        "calcite-checkbox",
-        "calcite-date",
-        "calcite-inline-editable",
-        "calcite-input",
-        "calcite-radio",
-        "calcite-radio-button",
-        "calcite-radio-button-group",
-        "calcite-radio-group",
-        "calcite-rating",
-        "calcite-select",
-        "calcite-slider",
-        "calcite-switch"
-      ];
-      if (labelableCalciteElements.includes(target.localName)) {
-        return;
-      }
-      // 5. target is not a child of a labelable calcite form element
-      for (let i = 0; i < labelableCalciteElements.length; i++) {
-        if (target.closest(labelableCalciteElements[i])) {
-          return;
-        }
-      }
-      inputForThisLabel.click();
+    this.labelClickHandler = (event) => {
+      this.calciteInternalLabelClick.emit({
+        sourceEvent: event
+      });
     };
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  onClick(event) {
-    const target = event.target;
-    this.calciteLabelFocus.emit({
-      labelEl: this.el,
-      interactedEl: target,
-      requestedInput: this.for
-    });
-    this.handleCalciteHtmlForClicks(target);
-  }
-  //--------------------------------------------------------------------------
-  //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    return (h("label", { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, htmlFor: this.for },
-      h("slot", null)));
+    return (h(Host, { onClick: this.labelClickHandler },
+      h("div", { class: { [CSS.container]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+        h("slot", null))));
   }
   static get is() { return "calcite-label"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["calcite-label.scss"]
   }; }
@@ -196,7 +139,7 @@ export class CalciteLabel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the input, defaults to m"
+        "text": "specify the scale of the label, defaults to m"
       },
       "attribute": "scale",
       "reflect": true,
@@ -258,35 +201,27 @@ export class CalciteLabel {
     }
   }; }
   static get events() { return [{
-      "method": "calciteLabelFocus",
-      "name": "calciteLabelFocus",
-      "bubbles": true,
+      "method": "calciteInternalLabelClick",
+      "name": "calciteInternalLabelClick",
+      "bubbles": false,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
       "complexType": {
-        "original": "FocusRequest",
-        "resolved": "FocusRequest",
+        "original": "{\n    sourceEvent: MouseEvent;\n  }",
+        "resolved": "{ sourceEvent: MouseEvent; }",
         "references": {
-          "FocusRequest": {
-            "location": "import",
-            "path": "./interfaces"
+          "MouseEvent": {
+            "location": "global"
           }
         }
       }
     }]; }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }

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

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+export const CSS = {
+  container: "container"
+};

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

@@ -1,10 +1,14 @@
-import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
+/*!
+ * 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, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 /** Any attributes placed on <calcite-link> component will propagate to the rendered child */
 /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission */
-/** @slot - default text slot for link text */
+/** @slot - A slot for adding text. */
 export class CalciteLink {
   constructor() {
     //--------------------------------------------------------------------------
@@ -25,6 +29,9 @@ export class CalciteLink {
       this.childEl = el;
     };
   }
+  hrefHandler(href) {
+    this.childElType = href ? "a" : "span";
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -190,6 +197,9 @@ export class CalciteLink {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "childElType": {}
+  }; }
   static get methods() { return {
     "setFocus": {
       "complexType": {
@@ -209,4 +219,8 @@ export class CalciteLink {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "href",
+      "methodName": "hrefHandler"
+    }]; }
 }

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

@@ -1,10 +1,24 @@
-import { Component, h, Host, Prop } from "@stencil/core";
+/*!
+ * 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, h, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  * @slot - A slot for adding `calcite-list-item` elements.
  */
 export class CalciteList {
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    const firstListItem = this.el.querySelector(`calcite-list-item:not([non-interactive])`);
+    firstListItem === null || firstListItem === void 0 ? void 0 : firstListItem.setFocus();
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -47,4 +61,26 @@ export class CalciteList {
       "reflect": false
     }
   }; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLCalciteListItemElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the component.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
 }

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

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   container: "container"
 };

package/dist/collection/components/calcite-list-item/calcite-list-item.js

@@ -1,12 +1,16 @@
-import { Component, Element, Prop, h, Host } from "@stencil/core";
+/*!
+ * 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, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
+ * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the list item.
  * @slot content-start - A slot for adding non-actionable elements before the label and description of the list item.
  * @slot content-end - A slot for adding non-actionable elements after the label and description of the list item.
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the list item.
- * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  */
 export class CalciteListItem {
   constructor() {
@@ -26,6 +30,16 @@ export class CalciteListItem {
   }
   // --------------------------------------------------------------------------
   //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -58,7 +72,7 @@ export class CalciteListItem {
   renderContentContainer() {
     const { disabled, nonInteractive } = this;
     const content = [this.renderContentStart(), this.renderContent(), this.renderContentEnd()];
-    return !nonInteractive ? (h("button", { class: { [CSS.contentContainer]: true, [CSS.contentContainerButton]: true }, disabled: disabled }, content)) : (h("div", { class: CSS.contentContainer }, content));
+    return !nonInteractive ? (h("button", { class: { [CSS.contentContainer]: true, [CSS.contentContainerButton]: true }, disabled: disabled, ref: (focusEl) => (this.focusEl = focusEl) }, content)) : (h("div", { class: CSS.contentContainer, ref: () => (this.focusEl = null) }, content));
   }
   render() {
     return (h(Host, { role: "listitem" },
@@ -149,5 +163,23 @@ export class CalciteListItem {
       "reflect": false
     }
   }; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the component.",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/calcite-list-item/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   container: "container",
   contentContainer: "content-container",

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

@@ -1,3 +1,7 @@
+/*!
+ * 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, Prop, h, Host } from "@stencil/core";
 import { CSS } from "./resources";
 import { HEADING_LEVEL } from "./resources";

package/dist/collection/components/calcite-list-item-group/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   heading: "heading",
   container: "container"

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

@@ -158,10 +158,8 @@
   text-align: center;
   font-size: var(--calcite-loader-font-size);
   width: var(--calcite-loader-size);
-  top: 4rem;
   left: 50%;
   margin-left: calc(var(--calcite-loader-size) / 2 * -1);
-  margin-top: calc(var(--calcite-loader-size) / 2);
   line-height: 0.25;
   transform: scale(1, 1);
 }
@@ -172,7 +170,6 @@
   opacity: 1;
   width: var(--calcite-loader-size);
   height: var(--calcite-loader-size);
-  top: 4rem;
   left: 50%;
   margin-left: calc(var(--calcite-loader-size) / 2 * -1);
   transform: scale(1, 1);
@@ -229,13 +226,13 @@
   height: var(--calcite-loader-size-inline);
   min-height: var(--calcite-loader-size-inline);
   width: var(--calcite-loader-size-inline);
-  margin-right: var(--calcite-loader-size-inline)/2;
-  vertical-align: -var(--calcite-loader-size-inline)/5;
+  margin-right: 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: var(--calcite-loader-size-inline)/2;
+  margin-left: calc(var(--calcite-loader-size-inline) * 0.5);
 }
 
 :host([active][inline]) {

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

@@ -1,3 +1,7 @@
+/*!
+ * 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, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
 export class CalciteLoader {