@esri/calcite-components 1.0.0-next.461 → 1.0.0-next.464

package/dist/esm/calcite-stepper_2.entry.js

@@ -1,12 +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.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-48c3884e.js';
-import { d as getElementProp } from './dom-ee67e7a9.js';
-import { u as updateHostInteraction } from './interactive-48e0f9d9.js';
-import './guid-c5ae46ae.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-d261ca5a.js';
+import { d as getElementProp, t as toAriaBoolean } from './dom-a2932582.js';
+import { u as updateHostInteraction } from './interactive-b38097f6.js';
+import './guid-19d940ff.js';
 
 const stepperCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:-ms-flexbox;display:flex;width:100%;min-width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between}:host([layout=vertical]){-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column}:host ::slotted(.calcite-stepper-content){display:-ms-flexbox;display:flex;width:100%;min-width:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}";
 
@@ -32,10 +32,12 @@ const Stepper = class {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** created list of Stepper items */
+    /** map of Stepper items */
+    this.itemMap = new Map();
+    /** list of sorted Stepper items */
     this.items = [];
-    /** sorted list of Stepper items */
-    this.sortedItems = [];
+    /** list of enabled Stepper items */
+    this.enabledItems = [];
   }
   // watch for removal of disabled to register step
   contentWatcher() {
@@ -76,7 +78,7 @@ const Stepper = class {
     const item = e.detail.item;
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
-    const isLastItem = this.itemIndex(itemToFocus) === this.sortedItems.length - 1;
+    const isLastItem = this.itemIndex(itemToFocus) === this.enabledItems.length - 1;
     switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
@@ -105,18 +107,14 @@ const Stepper = class {
     }
   }
   registerItem(event) {
-    const item = {
-      item: event.target,
-      position: event.detail.position,
-      content: event.detail.content
-    };
-    if (item.content && item.item.active) {
-      this.requestedContent = item.content;
-    }
-    if (!this.items.includes(item)) {
-      this.items.push(item);
+    const item = event.target;
+    const { content, position } = event.detail;
+    if (content && item.active) {
+      this.requestedContent = content;
     }
-    this.sortedItems = this.sortItems();
+    this.itemMap.set(item, position);
+    this.items = this.sortItems();
+    this.enabledItems = this.filterItems();
   }
   updateItem(event) {
     if (event.detail.content) {
@@ -134,31 +132,46 @@ const Stepper = class {
   //--------------------------------------------------------------------------
   /** set the next step as active */
   async nextStep() {
-    this.currentPosition =
-      this.currentPosition + 1 < this.items.length
-        ? this.currentPosition + 1
-        : this.currentPosition;
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.currentPosition = enabledStepIndex;
     this.emitChangedItem();
   }
   /** set the previous step as active */
   async prevStep() {
-    this.currentPosition =
-      this.currentPosition - 1 >= 0 ? this.currentPosition - 1 : this.currentPosition;
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.currentPosition = enabledStepIndex;
     this.emitChangedItem();
   }
   /** set the requested step as active */
-  async goToStep(num) {
-    this.currentPosition = num - 1;
-    this.emitChangedItem();
+  async goToStep(step) {
+    const position = step - 1;
+    if (this.currentPosition !== position) {
+      this.currentPosition = position;
+      this.emitChangedItem();
+    }
   }
   /** set the first step as active */
   async startStep() {
-    this.currentPosition = 0;
+    const enabledStepIndex = this.getEnabledStepIndex(0, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.currentPosition = enabledStepIndex;
     this.emitChangedItem();
   }
   /** set the last step as active */
   async endStep() {
-    this.currentPosition = this.items.length - 1;
+    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.currentPosition = enabledStepIndex;
     this.emitChangedItem();
   }
   //--------------------------------------------------------------------------
@@ -166,6 +179,17 @@ const Stepper = class {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  getEnabledStepIndex(startIndex, direction = "next") {
+    var _a;
+    const { items, currentPosition } = this;
+    let newIndex = startIndex;
+    while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+      newIndex = newIndex + (direction === "previous" ? -1 : 1);
+    }
+    return newIndex !== currentPosition && newIndex < items.length && newIndex >= 0
+      ? newIndex
+      : null;
+  }
   addHorizontalContentContainer() {
     this.stepperContentContainer = document.createElement("div");
     this.stepperContentContainer.classList.add("calcite-stepper-content");
@@ -177,36 +201,35 @@ const Stepper = class {
     });
   }
   focusFirstItem() {
-    const firstItem = this.sortedItems[0];
+    const firstItem = this.enabledItems[0];
     this.focusElement(firstItem);
   }
   focusLastItem() {
-    const lastItem = this.sortedItems[this.sortedItems.length - 1];
+    const lastItem = this.enabledItems[this.enabledItems.length - 1];
     this.focusElement(lastItem);
   }
   focusNextItem(e) {
     const index = this.itemIndex(e);
-    const nextItem = this.sortedItems[index + 1] || this.sortedItems[0];
+    const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
     this.focusElement(nextItem);
   }
   focusPrevItem(e) {
     const index = this.itemIndex(e);
-    const prevItem = this.sortedItems[index - 1] || this.sortedItems[this.sortedItems.length - 1];
+    const prevItem = this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
     this.focusElement(prevItem);
   }
   itemIndex(e) {
-    return this.sortedItems.indexOf(e);
+    return this.enabledItems.indexOf(e);
   }
   focusElement(item) {
-    const target = item;
-    target.focus();
+    item.focus();
   }
   sortItems() {
-    const items = Array.from(this.items)
-      .filter((a) => !a.item.disabled)
-      .sort((a, b) => a.position - b.position)
-      .map((a) => a.item);
-    return [...Array.from(new Set(items))];
+    const { itemMap } = this;
+    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a) - itemMap.get(b));
+  }
+  filterItems() {
+    return this.items.filter((item) => !item.disabled);
   }
   updateContent(content) {
     this.stepperContentContainer.innerHTML = "";
@@ -249,6 +272,50 @@ const StepperItem = class {
     /** the scale of the item */
     /** @internal */
     this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (e) => {
+      if (!this.disabled && e.target === this.el) {
+        switch (e.key) {
+          case " ":
+          case "Enter":
+            this.emitRequestedItem();
+            e.preventDefault();
+            break;
+          case "ArrowUp":
+          case "ArrowDown":
+          case "ArrowLeft":
+          case "ArrowRight":
+          case "Home":
+          case "End":
+            this.calciteStepperItemKeyEvent.emit({ item: e });
+            e.preventDefault();
+            break;
+        }
+      }
+    };
+    this.emitRequestedItem = () => {
+      if (!this.disabled) {
+        this.calciteStepperItemSelect.emit({
+          position: this.itemPosition,
+          content: this.itemContent
+        });
+      }
+    };
+    this.setItemContent = (event) => {
+      this.itemPosition = this.getItemPosition();
+      const itemContent = event.target.assignedNodes({ flatten: true });
+      if (itemContent.length) {
+        this.itemContent = itemContent;
+      }
+      this.registerStepperItem();
+      if (this.active) {
+        this.emitRequestedItem();
+      }
+    };
   }
   // watch for removal of disabled to register step
   disabledWatcher() {
@@ -266,50 +333,17 @@ const StepperItem = class {
     this.scale = getElementProp(this.el, "scale", "m");
     this.parentStepperEl = this.el.parentElement;
   }
-  componentDidLoad() {
-    this.itemPosition = this.getItemPosition();
-    this.itemContent = this.getItemContent();
-    this.registerStepperItem();
-    if (this.active) {
-      this.emitRequestedItem();
-    }
-  }
-  componentDidUpdate() {
-    if (this.active) {
-      this.emitRequestedItem();
-    }
-  }
   componentDidRender() {
     updateHostInteraction(this, true);
   }
   render() {
-    return (h(Host, { "aria-expanded": this.active.toString(), onClick: () => this.emitRequestedItem() }, h("div", { class: "container" }, h("div", { class: "stepper-item-header" }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: "stepper-item-number" }, this.getItemPosition() + 1, ".")) : null, h("div", { class: "stepper-item-header-text" }, h("span", { class: "stepper-item-title" }, this.itemTitle), h("span", { class: "stepper-item-subtitle" }, this.itemSubtitle))), h("div", { class: "stepper-item-content" }, h("slot", null)))));
+    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.emitRequestedItem, onKeyDown: this.keyDownHandler }, h("div", { class: "container" }, h("div", { class: "stepper-item-header" }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: "stepper-item-number" }, this.getItemPosition() + 1, ".")) : null, h("div", { class: "stepper-item-header-text" }, h("span", { class: "stepper-item-title" }, this.itemTitle), h("span", { class: "stepper-item-subtitle" }, this.itemSubtitle))), h("div", { class: "stepper-item-content" }, h("slot", { onSlotchange: this.setItemContent })))));
   }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  keyDownHandler(e) {
-    if (!this.disabled && e.target === this.el) {
-      switch (e.key) {
-        case " ":
-        case "Enter":
-          this.emitRequestedItem();
-          e.preventDefault();
-          break;
-        case "ArrowUp":
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "Home":
-        case "End":
-          this.calciteStepperItemKeyEvent.emit({ item: e });
-          e.preventDefault();
-          break;
-      }
-    }
-  }
   updateActiveItemOnChange(event) {
     if (event.target === this.parentStepperEl ||
       event.composedPath().includes(this.parentStepperEl)) {
@@ -317,11 +351,6 @@ const StepperItem = class {
       this.determineActiveItem();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   renderIcon() {
     const path = this.active
       ? "circleF"
@@ -341,23 +370,6 @@ const StepperItem = class {
       content: this.itemContent
     });
   }
-  emitRequestedItem() {
-    if (!this.disabled) {
-      this.calciteStepperItemSelect.emit({
-        position: this.itemPosition,
-        content: this.itemContent
-      });
-    }
-  }
-  getItemContent() {
-    var _a;
-    // todo: Remove IE/Edge specific code.
-    return ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("slot"))
-      ? this.el.shadowRoot.querySelector("slot").assignedNodes({ flatten: true })
-      : this.el.querySelector(".stepper-item-content")
-        ? this.el.querySelector(".stepper-item-content").childNodes
-        : null;
-  }
   getItemPosition() {
     return Array.prototype.indexOf.call(this.parentStepperEl.querySelectorAll("calcite-stepper-item"), this.el);
   }

package/dist/esm/calcite-switch.entry.js

@@ -1,14 +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.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-48c3884e.js';
-import { f as focusElement } from './dom-ee67e7a9.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-dac60e12.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-5fd9623d.js';
-import { u as updateHostInteraction } from './interactive-48e0f9d9.js';
-import './guid-c5ae46ae.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d261ca5a.js';
+import { f as focusElement, t as toAriaBoolean } from './dom-a2932582.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2f6ec862.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-f7e25bb7.js';
+import { u as updateHostInteraction } from './interactive-b38097f6.js';
+import './guid-19d940ff.js';
 
 const switchCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]) .container{height:0.75rem}:host([scale=s]) .track{height:0.75rem;width:1.5rem}:host([scale=s]) .handle{height:0.5rem;width:0.5rem}:host([scale=m]) .container{height:1rem}:host([scale=m]) .track{height:1rem;width:2rem}:host([scale=m]) .handle{height:0.75rem;width:0.75rem}:host([scale=l]) .container{height:1.5rem}:host([scale=l]) .track{height:1.5rem;width:3rem}:host([scale=l]) .handle{height:1.25rem;width:1.25rem}:host{position:relative;display:inline-block;width:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host{width:auto;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.track{pointer-events:none;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-2);vertical-align:top;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);top:-1px;inset-inline:-1px auto}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([checked]) .track{border-color:var(--calcite-ui-brand-hover);background-color:var(--calcite-ui-brand)}:host([checked]) .handle{border-color:var(--calcite-ui-brand);inset-inline:auto -1px}:host([checked]:hover) .track{border-color:var(--calcite-ui-brand-hover);background-color:var(--calcite-ui-brand)}:host([checked]:hover) .handle{border-color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}.container:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
@@ -103,7 +103,7 @@ const Switch = class {
   //
   // --------------------------------------------------------------------------
   render() {
-    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "container", ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, h("div", { class: "track" }, h("div", { class: "handle" })), h(HiddenFormInputSlot, { component: this }))));
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, h("div", { class: "track" }, h("div", { class: "handle" })), h(HiddenFormInputSlot, { component: this }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/calcite-tab_4.entry.js

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-48c3884e.js';
-import { g as guid } from './guid-c5ae46ae.js';
-import { n as nodeListToArray, a as getElementDir, k as filterDirectChildren, d as getElementProp } from './dom-ee67e7a9.js';
-import { c as createObserver } from './observers-0385e49f.js';
-import { u as updateHostInteraction } from './interactive-48e0f9d9.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-d261ca5a.js';
+import { g as guid } from './guid-19d940ff.js';
+import { t as toAriaBoolean, n as nodeListToArray, a as getElementDir, k as filterDirectChildren, d as getElementProp } from './dom-a2932582.js';
+import { c as createObserver } from './observers-a2053cce.js';
+import { u as updateHostInteraction } from './interactive-b38097f6.js';
 
 const tabCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([active]) section{display:block}:host{display:none;height:100%;width:100%}:host([active]){display:block;height:100%;width:100%;overflow:auto}section{display:none;height:100%;width:100%}:host([scale=s]){padding-top:0.25rem;padding-bottom:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}";
 
@@ -30,7 +30,7 @@ const Tab = class {
   //--------------------------------------------------------------------------
   render() {
     const id = this.el.id || this.guid;
-    return (h(Host, { "aria-expanded": this.active.toString(), "aria-labelledby": this.labeledBy, id: id, role: "tabpanel" }, h("section", null, h("slot", null))));
+    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), "aria-labelledby": this.labeledBy, id: id, role: "tabpanel" }, h("section", null, h("slot", null))));
   }
   connectedCallback() {
     this.parentTabsEl = this.el.closest("calcite-tabs");
@@ -371,7 +371,7 @@ const TabTitle = class {
     const showSideBorders = this.bordered && !this.disabled && this.layout !== "center";
     const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.active.toString(), id: id, role: "tab" }, h("a", { class: {
+    return (h(Host, { "aria-controls": this.controls, "aria-expanded": toAriaBoolean(this.active), id: id, role: "tab" }, h("a", { class: {
         container: true,
         "container--has-text": this.hasText
       }, style: showSideBorders && { width: `${this.parentTabNavEl.indicatorWidth}px` } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));

package/dist/esm/calcite-tile-select_2.entry.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-48c3884e.js';
-import { g as guid } from './guid-c5ae46ae.js';
-import { u as updateHostInteraction } from './interactive-48e0f9d9.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-d261ca5a.js';
+import { g as guid } from './guid-19d940ff.js';
+import { u as updateHostInteraction } from './interactive-b38097f6.js';
 
 const CSS = {
   checked: "checked",

package/dist/esm/calcite-tile.entry.js

@@ -1,14 +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.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-48c3884e.js';
-import { g as getSlotted } from './dom-ee67e7a9.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-176139a8.js';
-import { u as updateHostInteraction } from './interactive-48e0f9d9.js';
-import './guid-c5ae46ae.js';
-import './observers-0385e49f.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-d261ca5a.js';
+import { g as getSlotted } from './dom-a2932582.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-4f7a799a.js';
+import { u as updateHostInteraction } from './interactive-b38097f6.js';
+import './guid-19d940ff.js';
+import './observers-a2053cce.js';
 
 const SLOTS = {
   contentStart: "content-start",

package/dist/esm/calcite-tip_3.entry.js

@@ -1,14 +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.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-48c3884e.js';
-import { g as getSlotted, a as getElementDir } from './dom-ee67e7a9.js';
-import { H as Heading, c as constrainHeadingLevel } from './Heading-01f3a212.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-176139a8.js';
-import { c as createObserver } from './observers-0385e49f.js';
-import './guid-c5ae46ae.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-d261ca5a.js';
+import { g as getSlotted, a as getElementDir, t as toAriaBoolean } from './dom-a2932582.js';
+import { H as Heading, c as constrainHeadingLevel } from './Heading-b4e2ed84.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-4f7a799a.js';
+import { c as createObserver } from './observers-a2053cce.js';
+import './guid-19d940ff.js';
 
 const CSS$1 = {
   header: "header",
@@ -293,7 +293,7 @@ const TipManager = class {
     if (total === 0) {
       return null;
     }
-    return (h("section", { "aria-hidden": closed.toString(), class: CSS$1.container, hidden: closed, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef, tabIndex: 0 }, h("header", { class: CSS$1.header }, h(Heading, { class: CSS$1.heading, level: headingLevel || HEADING_LEVEL$1 }, groupTitle), h("calcite-action", { class: CSS$1.close, onClick: this.hideTipManager, scale: "m", text: closeLabel }, h("calcite-icon", { icon: ICONS$1.close, scale: "m" }))), h("div", { class: {
+    return (h("section", { "aria-hidden": toAriaBoolean(closed), class: CSS$1.container, hidden: closed, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef, tabIndex: 0 }, h("header", { class: CSS$1.header }, h(Heading, { class: CSS$1.heading, level: headingLevel || HEADING_LEVEL$1 }, groupTitle), h("calcite-action", { class: CSS$1.close, onClick: this.hideTipManager, scale: "m", text: closeLabel }, h("calcite-icon", { icon: ICONS$1.close, scale: "m" }))), h("div", { class: {
         [CSS$1.tipContainer]: true,
         [CSS$1.tipContainerAdvancing]: !closed && direction === "advancing",
         [CSS$1.tipContainerRetreating]: !closed && direction === "retreating"

package/dist/esm/calcite-tooltip_2.entry.js

@@ -1,12 +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.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-48c3884e.js';
-import { g as guid } from './guid-c5ae46ae.js';
-import { a as defaultOffsetDistance, u as updatePopper, c as createPopper, C as CSS$1 } from './popper-2740424e.js';
-import { q as queryElementRoots } from './dom-ee67e7a9.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-d261ca5a.js';
+import { g as guid } from './guid-19d940ff.js';
+import { a as defaultOffsetDistance, u as updatePopper, c as createPopper, C as CSS$1 } from './popper-838cc3a3.js';
+import { q as queryElementRoots, t as toAriaBoolean } from './dom-a2932582.js';
 
 const CSS = {
   container: "container",
@@ -336,7 +336,7 @@ const Tooltip = class {
     const { effectiveReferenceElement, label, open } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
-    return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, h("div", { class: {
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, h("div", { class: {
         [CSS$1.animation]: true,
         [CSS$1.animationActive]: displayed
       } }, h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) }), h("div", { class: CSS.container }, h("slot", null)))));

package/dist/esm/calcite-tree_2.entry.js

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-48c3884e.js';
-import { f as focusElement, n as nodeListToArray, g as getSlotted, a as getElementDir, C as CSS_UTILITY, k as filterDirectChildren } from './dom-ee67e7a9.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-176139a8.js';
-import './guid-c5ae46ae.js';
-import './observers-0385e49f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d261ca5a.js';
+import { f as focusElement, n as nodeListToArray, g as getSlotted, a as getElementDir, C as CSS_UTILITY, t as toAriaBoolean, k as filterDirectChildren } from './dom-a2932582.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-4f7a799a.js';
+import './guid-19d940ff.js';
+import './observers-a2053cce.js';
 
 var TreeSelectionMode;
 (function (TreeSelectionMode) {
@@ -401,7 +401,7 @@ const TreeItem = class {
         [CSS_UTILITY.rtl]: rtl
       }, icon: selectedIcon, scale: "s" })) : null;
     const hidden = !(this.parentExpanded || this.depth === 1);
-    return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" }, h("div", { class: {
+    return (h(Host, { "aria-expanded": this.hasChildren ? toAriaBoolean(this.expanded) : undefined, "aria-hidden": toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" }, h("div", { class: {
         [CSS.nodeContainer]: true,
         [CSS_UTILITY.rtl]: rtl
       }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) }, chevron, bulletOrCheckIcon, checkbox ? checkbox : defaultSlotNode), h("div", { class: {

package/dist/esm/calcite-value-list_2.entry.js

@@ -1,18 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-48c3884e.js';
-import { S as Sortable } from './sortable.esm-b3495838.js';
-import { m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, b as moveItemIndex, i as initialize, c as initializeObserver, e as cleanUpObserver, f as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteListItemValueChangeHandler, n as setUpItems, o as setFocus, L as List, I as ICON_TYPES$1, C as CSS$1, S as SLOTS$1 } from './resources-94afe52a.js';
-import { c as createObserver } from './observers-0385e49f.js';
-import { u as updateHostInteraction } from './interactive-48e0f9d9.js';
-import { g as guid } from './guid-c5ae46ae.js';
-import { g as getSlotted } from './dom-ee67e7a9.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-176139a8.js';
-import './array-c21f5a16.js';
-import './debounce-7edd4f71.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-d261ca5a.js';
+import { S as Sortable } from './sortable.esm-daa6d5c1.js';
+import { m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, b as moveItemIndex, i as initialize, c as initializeObserver, e as cleanUpObserver, f as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteListItemValueChangeHandler, n as setUpItems, o as setFocus, L as List, I as ICON_TYPES$1, C as CSS$1, S as SLOTS$1 } from './resources-68442e39.js';
+import { c as createObserver } from './observers-a2053cce.js';
+import { u as updateHostInteraction } from './interactive-b38097f6.js';
+import { g as guid } from './guid-19d940ff.js';
+import { g as getSlotted, t as toAriaBoolean } from './dom-a2932582.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-4f7a799a.js';
+import './array-c3d1a08d.js';
+import './debounce-4ee433e8.js';
 
 const CSS = {
   container: "container",
@@ -335,7 +335,7 @@ const ValueListItem = class {
   renderHandle() {
     const { icon } = this;
     if (icon === ICON_TYPES$1.grip) {
-      return (h("span", { "aria-pressed": this.handleActivated.toString(), class: {
+      return (h("span", { "aria-pressed": toAriaBoolean(this.handleActivated), class: {
           [CSS$1.handle]: true,
           [CSS$1.handleActivated]: this.handleActivated
         }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));