@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.93

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

@@ -1,427 +1,427 @@
 /*!
  * 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-beta.92
+ * v1.0.0-beta.93
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d1f4f7de.js');
-const dom = require('./dom-e9f09e29.js');
-const interactive = require('./interactive-7fa78804.js');
-require('./resources-42b4d672.js');
-require('./guid-08ecb207.js');
+const index = require('./index-afcc8e68.js');
+const dom = require('./dom-9d34fe95.js');
+const interactive = require('./interactive-4157d28f.js');
+require('./resources-96e885bd.js');
+require('./guid-d157229c.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-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:-ms-flexbox;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:-webkit-fit-content;min-inline-size:fit-content;-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([layout=horizontal]){display:grid;grid-template-areas:\"items\" \"content\"}";
 
-const Stepper = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.calciteStepperItemChange = index.createEvent(this, "calciteStepperItemChange", 6);
-    this.calciteInternalStepperItemChange = index.createEvent(this, "calciteInternalStepperItemChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
-    this.icon = false;
-    /** Defines the layout of the component. */
-    this.layout = "horizontal";
-    /** When true, displays the step number in the `calcite-stepper-item` heading. */
-    this.numbered = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    this.itemMap = new Map();
-    /** list of sorted Stepper items */
-    this.items = [];
-    /** list of enabled Stepper items */
-    this.enabledItems = [];
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  componentDidLoad() {
-    // if no stepper items are set as active, default to the first one
-    if (typeof this.currentPosition !== "number") {
-      this.calciteInternalStepperItemChange.emit({
-        position: 0
-      });
-    }
-  }
-  render() {
-    return (index.h("slot", { onSlotchange: (event) => {
-        const items = event.currentTarget
-          .assignedElements()
-          .filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
-        const spacing = Array(items.length).fill("1fr").join(" ");
-        this.el.style.gridTemplateAreas = spacing;
-        this.el.style.gridTemplateColumns = spacing;
-      } }));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  calciteInternalStepperItemKeyEvent(event) {
-    const item = event.detail.item;
-    const itemToFocus = event.target;
-    const isFirstItem = this.itemIndex(itemToFocus) === 0;
-    const isLastItem = this.itemIndex(itemToFocus) === this.enabledItems.length - 1;
-    switch (item.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-        if (isLastItem) {
-          this.focusFirstItem();
-        }
-        else {
-          this.focusNextItem(itemToFocus);
-        }
-        break;
-      case "ArrowUp":
-      case "ArrowLeft":
-        if (isFirstItem) {
-          this.focusLastItem();
-        }
-        else {
-          this.focusPrevItem(itemToFocus);
-        }
-        break;
-      case "Home":
-        this.focusFirstItem();
-        break;
-      case "End":
-        this.focusLastItem();
-        break;
-    }
-    event.stopPropagation();
-  }
-  registerItem(event) {
-    const item = event.target;
-    const { content, position } = event.detail;
-    this.itemMap.set(item, { position, content });
-    this.items = this.sortItems();
-    this.enabledItems = this.filterItems();
-    event.stopPropagation();
-  }
-  updateItem(event) {
-    const { position } = event.detail;
-    if (typeof position === "number") {
-      this.currentPosition = position;
-    }
-    this.calciteInternalStepperItemChange.emit({
-      position
-    });
-  }
-  handleUserRequestedStepperItemSelect(event) {
-    const { position } = event.detail;
-    this.calciteStepperItemChange.emit({
-      position
-    });
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  //--------------------------------------------------------------------------
-  /** Set the next `calcite-stepper-item` as active. */
-  async nextStep() {
-    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
-    if (typeof enabledStepIndex !== "number") {
-      return;
-    }
-    this.updateStep(enabledStepIndex);
-  }
-  /** Set the previous `calcite-stepper-item` as active. */
-  async prevStep() {
-    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
-    if (typeof enabledStepIndex !== "number") {
-      return;
-    }
-    this.updateStep(enabledStepIndex);
-  }
-  /**
-   * Set a specified `calcite-stepper-item` as active.
-   *
-   * @param step
-   */
-  async goToStep(step) {
-    const position = step - 1;
-    if (this.currentPosition !== position) {
-      this.updateStep(position);
-    }
-  }
-  /** Set the first `calcite-stepper-item` as active. */
-  async startStep() {
-    const enabledStepIndex = this.getEnabledStepIndex(0, "next");
-    if (typeof enabledStepIndex !== "number") {
-      return;
-    }
-    this.updateStep(enabledStepIndex);
-  }
-  /** Set the last `calcite-stepper-item` as active. */
-  async endStep() {
-    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
-    if (typeof enabledStepIndex !== "number") {
-      return;
-    }
-    this.updateStep(enabledStepIndex);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  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;
-  }
-  updateStep(position) {
-    this.currentPosition = position;
-    this.calciteInternalStepperItemChange.emit({
-      position
-    });
-  }
-  focusFirstItem() {
-    const firstItem = this.enabledItems[0];
-    dom.focusElement(firstItem);
-  }
-  focusLastItem() {
-    const lastItem = this.enabledItems[this.enabledItems.length - 1];
-    dom.focusElement(lastItem);
-  }
-  focusNextItem(el) {
-    const index = this.itemIndex(el);
-    const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
-    dom.focusElement(nextItem);
-  }
-  focusPrevItem(el) {
-    const index = this.itemIndex(el);
-    const prevItem = this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
-    dom.focusElement(prevItem);
-  }
-  itemIndex(el) {
-    return this.enabledItems.indexOf(el);
-  }
-  sortItems() {
-    const { itemMap } = this;
-    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a).position - itemMap.get(b).position);
-  }
-  filterItems() {
-    return this.items.filter((item) => !item.disabled);
-  }
-  get el() { return index.getElement(this); }
-};
+const Stepper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteStepperItemChange = index.createEvent(this, "calciteStepperItemChange", 6);
+    this.calciteInternalStepperItemChange = index.createEvent(this, "calciteInternalStepperItemChange", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
+    this.icon = false;
+    /** Defines the layout of the component. */
+    this.layout = "horizontal";
+    /** When true, displays the step number in the `calcite-stepper-item` heading. */
+    this.numbered = false;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.itemMap = new Map();
+    /** list of sorted Stepper items */
+    this.items = [];
+    /** list of enabled Stepper items */
+    this.enabledItems = [];
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidLoad() {
+    // if no stepper items are set as active, default to the first one
+    if (typeof this.currentPosition !== "number") {
+      this.calciteInternalStepperItemChange.emit({
+        position: 0
+      });
+    }
+  }
+  render() {
+    return (index.h("slot", { onSlotchange: (event) => {
+        const items = event.currentTarget
+          .assignedElements()
+          .filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
+        const spacing = Array(items.length).fill("1fr").join(" ");
+        this.el.style.gridTemplateAreas = spacing;
+        this.el.style.gridTemplateColumns = spacing;
+      } }));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalStepperItemKeyEvent(event) {
+    const item = event.detail.item;
+    const itemToFocus = event.target;
+    const isFirstItem = this.itemIndex(itemToFocus) === 0;
+    const isLastItem = this.itemIndex(itemToFocus) === this.enabledItems.length - 1;
+    switch (item.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        if (isLastItem) {
+          this.focusFirstItem();
+        }
+        else {
+          this.focusNextItem(itemToFocus);
+        }
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        if (isFirstItem) {
+          this.focusLastItem();
+        }
+        else {
+          this.focusPrevItem(itemToFocus);
+        }
+        break;
+      case "Home":
+        this.focusFirstItem();
+        break;
+      case "End":
+        this.focusLastItem();
+        break;
+    }
+    event.stopPropagation();
+  }
+  registerItem(event) {
+    const item = event.target;
+    const { content, position } = event.detail;
+    this.itemMap.set(item, { position, content });
+    this.items = this.sortItems();
+    this.enabledItems = this.filterItems();
+    event.stopPropagation();
+  }
+  updateItem(event) {
+    const { position } = event.detail;
+    if (typeof position === "number") {
+      this.currentPosition = position;
+    }
+    this.calciteInternalStepperItemChange.emit({
+      position
+    });
+  }
+  handleUserRequestedStepperItemSelect(event) {
+    const { position } = event.detail;
+    this.calciteStepperItemChange.emit({
+      position
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Set the next `calcite-stepper-item` as active. */
+  async nextStep() {
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
+  }
+  /** Set the previous `calcite-stepper-item` as active. */
+  async prevStep() {
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
+  }
+  /**
+   * Set a specified `calcite-stepper-item` as active.
+   *
+   * @param step
+   */
+  async goToStep(step) {
+    const position = step - 1;
+    if (this.currentPosition !== position) {
+      this.updateStep(position);
+    }
+  }
+  /** Set the first `calcite-stepper-item` as active. */
+  async startStep() {
+    const enabledStepIndex = this.getEnabledStepIndex(0, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
+  }
+  /** Set the last `calcite-stepper-item` as active. */
+  async endStep() {
+    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  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;
+  }
+  updateStep(position) {
+    this.currentPosition = position;
+    this.calciteInternalStepperItemChange.emit({
+      position
+    });
+  }
+  focusFirstItem() {
+    const firstItem = this.enabledItems[0];
+    dom.focusElement(firstItem);
+  }
+  focusLastItem() {
+    const lastItem = this.enabledItems[this.enabledItems.length - 1];
+    dom.focusElement(lastItem);
+  }
+  focusNextItem(el) {
+    const index = this.itemIndex(el);
+    const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
+    dom.focusElement(nextItem);
+  }
+  focusPrevItem(el) {
+    const index = this.itemIndex(el);
+    const prevItem = this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
+    dom.focusElement(prevItem);
+  }
+  itemIndex(el) {
+    return this.enabledItems.indexOf(el);
+  }
+  sortItems() {
+    const { itemMap } = this;
+    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a).position - itemMap.get(b).position);
+  }
+  filterItems() {
+    return this.items.filter((item) => !item.disabled);
+  }
+  get el() { return index.getElement(this); }
+};
 Stepper.style = stepperCss;
 
 const stepperItemCss = "@-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-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([layout=horizontal][disabled]) .stepper-item-header,: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([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;font-size:var(--calcite-font-size--1);line-height:1rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-item-align:start;align-self:flex-start;-webkit-margin-after:var(--calcite-stepper-item-spacing-unit-s);margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;cursor:pointer;-ms-flex-direction:column;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-ui-border-3);color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;-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)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host .stepper-item-header{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:start;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{-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);padding-block:var(--calcite-stepper-item-spacing-unit-l);-webkit-padding-end:var(--calcite-stepper-item-spacing-unit-m);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-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)}:host .stepper-item-content{display:none;inline-size:100%;-ms-flex-direction:column;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{-webkit-margin-end:var(--calcite-stepper-item-spacing-unit-m);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);-webkit-margin-before:1px;margin-block-start:1px;display:-ms-inline-flexbox;display:inline-flex;block-size:0.75rem;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:flex-start;color:var(--calcite-ui-text-3);opacity:var(--calcite-ui-opacity-disabled);-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)}:host .stepper-item-header-text{-ms-flex-direction:column;flex-direction:column;text-align:initial;-webkit-margin-end:auto;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:-ms-flexbox;display:flex;inline-size:100%}:host .stepper-item-heading{-webkit-margin-after:0.25rem;margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}:host .stepper-item-description{color:var(--calcite-ui-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);-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);-webkit-margin-end:var(--calcite-stepper-item-spacing-unit-m);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-ui-brand)}:host([error]) .container{border-block-start-color:var(--calcite-ui-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-ui-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-ui-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-ui-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-ui-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-ui-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-ui-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-ui-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-ui-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-ui-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-ui-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-ui-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:-ms-flexbox;display:flex}:host([layout=vertical]) .container{margin-inline:0px;-webkit-margin-before:0px;margin-block-start:0px;-ms-flex:1 1 auto;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px;border-inline-start-width:2px;-webkit-padding-start:var(--calcite-stepper-item-spacing-unit-l);padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{-ms-flex-order:3;order:3;margin-block:1px 0px;-webkit-padding-start:var(--calcite-stepper-item-spacing-unit-s);padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);-webkit-margin-start:auto;margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{-webkit-padding-end:0px;padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-ui-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-ui-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-ui-brand)}:host([layout=vertical][selected]) .container .stepper-item-content ::slotted(:last-child){-webkit-margin-after:var(--calcite-stepper-item-spacing-unit-l);margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-ui-danger-hover)}:host([layout=horizontal]){display:contents}:host([layout=horizontal]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-ui-border-3);outline-color:transparent;grid-row:items;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;-webkit-margin-after:var(--calcite-stepper-item-spacing-unit-s);margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .stepper-item-header:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host([layout=horizontal]) .stepper-item-content{cursor:auto;-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);padding-block:0;-webkit-padding-end:var(--calcite-stepper-item-spacing-unit-m);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal][selected]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][scale=s]) .stepper-item-header{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;-webkit-margin-after:var(--calcite-stepper-item-spacing-unit-s);margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .stepper-item-header{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem;-webkit-margin-after:var(--calcite-stepper-item-spacing-unit-s);margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=horizontal][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-ui-brand)}:host([layout=horizontal][error]) .stepper-item-header{border-color:var(--calcite-ui-danger)}:host([layout=horizontal][selected]) .stepper-item-header{border-color:var(--calcite-ui-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-ui-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}";
 
-const StepperItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.calciteInternalStepperItemKeyEvent = index.createEvent(this, "calciteInternalStepperItemKeyEvent", 6);
-    this.calciteInternalStepperItemSelect = index.createEvent(this, "calciteInternalStepperItemSelect", 6);
-    this.calciteInternalUserRequestedStepperItemSelect = index.createEvent(this, "calciteInternalUserRequestedStepperItemSelect", 6);
-    this.calciteInternalStepperItemRegister = index.createEvent(this, "calciteInternalStepperItemRegister", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     *  is the step active
-     *
-     * @deprecated Use selected instead.
-     */
-    this.active = false;
-    /**
-     * When true, step is selected
-     */
-    this.selected = false;
-    /** has the step been completed */
-    this.complete = false;
-    /** When true, the component contains an error that requires resolution from the user. */
-    this.error = false;
-    /** When true, interaction is prevented and the component is displayed with lower opacity. */
-    this.disabled = false;
-    // internal props inherited from wrapping calcite-stepper
-    /** Defines the layout of the component. */
-    /** @internal */
-    this.layout = "horizontal";
-    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
-    /** @internal */
-    this.icon = false;
-    /** When true, displays the step number in the `calcite-stepper-item` heading. */
-    /** @internal */
-    this.numbered = false;
-    /** Specifies the size of the component. */
-    /** @internal */
-    this.scale = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.keyDownHandler = (event) => {
-      if (!this.disabled && event.target === this.el) {
-        switch (event.key) {
-          case " ":
-          case "Enter":
-            this.emitUserRequestedItem();
-            event.preventDefault();
-            break;
-          case "ArrowUp":
-          case "ArrowDown":
-          case "ArrowLeft":
-          case "ArrowRight":
-          case "Home":
-          case "End":
-            this.calciteInternalStepperItemKeyEvent.emit({ item: event });
-            event.preventDefault();
-            break;
-        }
-      }
-    };
-    this.handleItemClick = (event) => {
-      if (this.layout === "horizontal" &&
-        event
-          .composedPath()
-          .some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("stepper-item-content"); })) {
-        return;
-      }
-      this.emitUserRequestedItem();
-    };
-    this.emitUserRequestedItem = () => {
-      this.emitRequestedItem();
-      if (!this.disabled) {
-        const position = this.itemPosition;
-        this.calciteInternalUserRequestedStepperItemSelect.emit({
-          position
-        });
-      }
-    };
-    this.emitRequestedItem = () => {
-      if (!this.disabled) {
-        const position = this.itemPosition;
-        this.calciteInternalStepperItemSelect.emit({
-          position
-        });
-      }
-    };
-  }
-  activeHandler(value) {
-    this.selected = value;
-  }
-  selectedHandler(value) {
-    this.active = value;
-    if (this.selected) {
-      this.emitRequestedItem();
-    }
-  }
-  // watch for removal of disabled to register step
-  disabledWatcher() {
-    this.registerStepperItem();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    const { selected, active } = this;
-    if (selected) {
-      this.active = selected;
-    }
-    else if (active) {
-      this.selected = active;
-    }
-  }
-  componentWillLoad() {
-    this.icon = dom.getElementProp(this.el, "icon", false);
-    this.numbered = dom.getElementProp(this.el, "numbered", false);
-    this.layout = dom.getElementProp(this.el, "layout", false);
-    this.scale = dom.getElementProp(this.el, "scale", "m");
-    this.parentStepperEl = this.el.parentElement;
-    this.itemPosition = this.getItemPosition();
-    this.registerStepperItem();
-    if (this.selected) {
-      this.emitRequestedItem();
-    }
-  }
-  componentDidRender() {
-    interactive.updateHostInteraction(this, true);
-  }
-  render() {
-    return (index.h(index.Host, { "aria-expanded": dom.toAriaBoolean(this.active), onClick: this.handleItemClick, onKeyDown: this.keyDownHandler }, index.h("div", { class: "container" }, index.h("div", { class: "stepper-item-header", ref: (el) => (this.headerEl = el), tabIndex: 
-      /* additional tab index logic needed because of display: contents */
-      this.layout === "horizontal" && !this.disabled ? 0 : null }, this.icon ? this.renderIcon() : null, this.numbered ? index.h("div", { class: "stepper-item-number" }, this.itemPosition + 1, ".") : null, index.h("div", { class: "stepper-item-header-text" }, index.h("span", { class: "stepper-item-heading" }, this.heading || this.itemTitle), index.h("span", { class: "stepper-item-description" }, this.description || this.itemSubtitle))), index.h("div", { class: "stepper-item-content" }, index.h("slot", null)))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  updateActiveItemOnChange(event) {
-    if (event.target === this.parentStepperEl ||
-      event.composedPath().includes(this.parentStepperEl)) {
-      this.selectedPosition = event.detail.position;
-      this.determineSelectedItem();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  //--------------------------------------------------------------------------
-  async setFocus() {
-    var _a;
-    (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  renderIcon() {
-    const path = this.selected
-      ? "circleF"
-      : this.error
-        ? "exclamationMarkCircleF"
-        : this.complete
-          ? "checkCircleF"
-          : "circle";
-    return index.h("calcite-icon", { class: "stepper-item-icon", icon: path, scale: "s" });
-  }
-  determineSelectedItem() {
-    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;
-  }
-  registerStepperItem() {
-    this.calciteInternalStepperItemRegister.emit({
-      position: this.itemPosition
-    });
-  }
-  getItemPosition() {
-    var _a;
-    return Array.from((_a = this.parentStepperEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll("calcite-stepper-item")).indexOf(this.el);
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "active": ["activeHandler"],
-    "selected": ["selectedHandler"],
-    "disabled": ["disabledWatcher"]
-  }; }
-};
+const StepperItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteInternalStepperItemKeyEvent = index.createEvent(this, "calciteInternalStepperItemKeyEvent", 6);
+    this.calciteInternalStepperItemSelect = index.createEvent(this, "calciteInternalStepperItemSelect", 6);
+    this.calciteInternalUserRequestedStepperItemSelect = index.createEvent(this, "calciteInternalUserRequestedStepperItemSelect", 6);
+    this.calciteInternalStepperItemRegister = index.createEvent(this, "calciteInternalStepperItemRegister", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  is the step active
+     *
+     * @deprecated Use selected instead.
+     */
+    this.active = false;
+    /**
+     * When true, step is selected
+     */
+    this.selected = false;
+    /** has the step been completed */
+    this.complete = false;
+    /** When true, the component contains an error that requires resolution from the user. */
+    this.error = false;
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
+    this.disabled = false;
+    // internal props inherited from wrapping calcite-stepper
+    /** Defines the layout of the component. */
+    /** @internal */
+    this.layout = "horizontal";
+    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
+    /** @internal */
+    this.icon = false;
+    /** When true, displays the step number in the `calcite-stepper-item` heading. */
+    /** @internal */
+    this.numbered = false;
+    /** Specifies the size of the component. */
+    /** @internal */
+    this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (!this.disabled && event.target === this.el) {
+        switch (event.key) {
+          case " ":
+          case "Enter":
+            this.emitUserRequestedItem();
+            event.preventDefault();
+            break;
+          case "ArrowUp":
+          case "ArrowDown":
+          case "ArrowLeft":
+          case "ArrowRight":
+          case "Home":
+          case "End":
+            this.calciteInternalStepperItemKeyEvent.emit({ item: event });
+            event.preventDefault();
+            break;
+        }
+      }
+    };
+    this.handleItemClick = (event) => {
+      if (this.layout === "horizontal" &&
+        event
+          .composedPath()
+          .some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("stepper-item-content"); })) {
+        return;
+      }
+      this.emitUserRequestedItem();
+    };
+    this.emitUserRequestedItem = () => {
+      this.emitRequestedItem();
+      if (!this.disabled) {
+        const position = this.itemPosition;
+        this.calciteInternalUserRequestedStepperItemSelect.emit({
+          position
+        });
+      }
+    };
+    this.emitRequestedItem = () => {
+      if (!this.disabled) {
+        const position = this.itemPosition;
+        this.calciteInternalStepperItemSelect.emit({
+          position
+        });
+      }
+    };
+  }
+  activeHandler(value) {
+    this.selected = value;
+  }
+  selectedHandler(value) {
+    this.active = value;
+    if (this.selected) {
+      this.emitRequestedItem();
+    }
+  }
+  // watch for removal of disabled to register step
+  disabledWatcher() {
+    this.registerStepperItem();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    const { selected, active } = this;
+    if (selected) {
+      this.active = selected;
+    }
+    else if (active) {
+      this.selected = active;
+    }
+  }
+  componentWillLoad() {
+    this.icon = dom.getElementProp(this.el, "icon", false);
+    this.numbered = dom.getElementProp(this.el, "numbered", false);
+    this.layout = dom.getElementProp(this.el, "layout", false);
+    this.scale = dom.getElementProp(this.el, "scale", "m");
+    this.parentStepperEl = this.el.parentElement;
+    this.itemPosition = this.getItemPosition();
+    this.registerStepperItem();
+    if (this.selected) {
+      this.emitRequestedItem();
+    }
+  }
+  componentDidRender() {
+    interactive.updateHostInteraction(this, true);
+  }
+  render() {
+    return (index.h(index.Host, { "aria-expanded": dom.toAriaBoolean(this.active), onClick: this.handleItemClick, onKeyDown: this.keyDownHandler }, index.h("div", { class: "container" }, index.h("div", { class: "stepper-item-header", ref: (el) => (this.headerEl = el), tabIndex: 
+      /* additional tab index logic needed because of display: contents */
+      this.layout === "horizontal" && !this.disabled ? 0 : null }, this.icon ? this.renderIcon() : null, this.numbered ? index.h("div", { class: "stepper-item-number" }, this.itemPosition + 1, ".") : null, index.h("div", { class: "stepper-item-header-text" }, index.h("span", { class: "stepper-item-heading" }, this.heading || this.itemTitle), index.h("span", { class: "stepper-item-description" }, this.description || this.itemSubtitle))), index.h("div", { class: "stepper-item-content" }, index.h("slot", null)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  updateActiveItemOnChange(event) {
+    if (event.target === this.parentStepperEl ||
+      event.composedPath().includes(this.parentStepperEl)) {
+      this.selectedPosition = event.detail.position;
+      this.determineSelectedItem();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  async setFocus() {
+    var _a;
+    (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  renderIcon() {
+    const path = this.selected
+      ? "circleF"
+      : this.error
+        ? "exclamationMarkCircleF"
+        : this.complete
+          ? "checkCircleF"
+          : "circle";
+    return index.h("calcite-icon", { class: "stepper-item-icon", icon: path, scale: "s" });
+  }
+  determineSelectedItem() {
+    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;
+  }
+  registerStepperItem() {
+    this.calciteInternalStepperItemRegister.emit({
+      position: this.itemPosition
+    });
+  }
+  getItemPosition() {
+    var _a;
+    return Array.from((_a = this.parentStepperEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll("calcite-stepper-item")).indexOf(this.el);
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "selected": ["selectedHandler"],
+    "disabled": ["disabledWatcher"]
+  }; }
+};
 StepperItem.style = stepperItemCss;
 
 exports.calcite_stepper = Stepper;