@esri/solutions-components 0.6.7 → 0.6.8

package/dist/components/calcite-stepper-item.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { h as getElementProp, t as toAriaBoolean } from './dom.js';
+import { y as getElementProp, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -12,230 +12,230 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const stepperItemCss = ":host([layout=horizontal][disabled]) .stepper-item-header,:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([layout=horizontal][disabled]) .stepper-item-header *,:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}: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;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;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;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:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;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;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-ui-text-3);opacity:var(--calcite-ui-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{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);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);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:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;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;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{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:not(:empty){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;margin-inline-end:0.5rem;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .stepper-item-header:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host([layout=horizontal]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;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{margin-inline-end:0.25rem;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .stepper-item-header{margin-inline-end:0.75rem;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}}:host([hidden]){display:none}[hidden]{display:none}";
 
-const StepperItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.calciteInternalStepperItemKeyEvent = createEvent(this, "calciteInternalStepperItemKeyEvent", 6);
-    this.calciteInternalStepperItemSelect = createEvent(this, "calciteInternalStepperItemSelect", 6);
-    this.calciteInternalUserRequestedStepperItemSelect = createEvent(this, "calciteInternalUserRequestedStepperItemSelect", 6);
-    this.calciteInternalStepperItemRegister = createEvent(this, "calciteInternalStepperItemRegister", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  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.disabled ||
-        (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,
-        });
-      }
-    };
-    this.selected = false;
-    this.complete = false;
-    this.error = false;
-    this.disabled = false;
-    this.heading = undefined;
-    this.description = undefined;
-    this.layout = "horizontal";
-    this.icon = false;
-    this.iconFlipRtl = false;
-    this.numbered = false;
-    this.scale = "m";
-    this.numberingSystem = undefined;
-    this.effectiveLocale = "";
-  }
-  selectedHandler() {
-    if (this.selected) {
-      this.emitRequestedItem();
-    }
-  }
-  // watch for removal of disabled to register step
-  disabledWatcher() {
-    this.registerStepperItem();
-  }
-  effectiveLocaleWatcher(locale) {
-    numberStringFormatter.numberFormatOptions = {
-      locale,
-      numberingSystem: this.numberingSystem,
-      useGrouping: false,
-    };
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    connectInteractive(this);
-    connectLocalized(this);
-  }
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-    this.icon = getElementProp(this.el, "icon", false);
-    this.numbered = getElementProp(this.el, "numbered", false);
-    this.layout = getElementProp(this.el, "layout", false);
-    this.scale = getElementProp(this.el, "scale", "m");
-    this.parentStepperEl = this.el.parentElement;
-    this.itemPosition = this.getItemPosition();
-    this.registerStepperItem();
-    if (this.selected) {
-      this.emitRequestedItem();
-    }
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this, true);
-  }
-  disconnectedCallback() {
-    disconnectInteractive(this);
-    disconnectLocalized(this);
-  }
-  render() {
-    return (h(Host, { "aria-expanded": toAriaBoolean(this.selected), onClick: this.handleItemClick, onKeyDown: this.keyDownHandler }, h("div", { class: "container" }, h("div", { class: "stepper-item-header", tabIndex: 
-      /* additional tab index logic needed because of display: contents */
-      this.layout === "horizontal" && !this.disabled ? 0 : null,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? h("div", { class: "stepper-item-number" }, this.renderNumbers(), ".") : null, h("div", { class: "stepper-item-header-text" }, h("span", { class: "stepper-item-heading" }, this.heading), h("span", { class: "stepper-item-description" }, this.description))), h("div", { class: "stepper-item-content" }, 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
-  //
-  //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    await componentFocusable(this);
-    (_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 (h("calcite-icon", { class: "stepper-item-icon", flipRtl: this.iconFlipRtl, 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);
-  }
-  renderNumbers() {
-    numberStringFormatter.numberFormatOptions = {
-      locale: this.effectiveLocale,
-      numberingSystem: this.numberingSystem,
-      useGrouping: false,
-    };
-    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "selected": ["selectedHandler"],
-    "disabled": ["disabledWatcher"],
-    "effectiveLocale": ["effectiveLocaleWatcher"]
-  }; }
-  static get style() { return stepperItemCss; }
-}, [1, "calcite-stepper-item", {
-    "selected": [1540],
-    "complete": [516],
-    "error": [516],
-    "disabled": [516],
-    "heading": [1],
-    "description": [1],
-    "layout": [1537],
-    "icon": [1028],
-    "iconFlipRtl": [516, "icon-flip-rtl"],
-    "numbered": [1028],
-    "scale": [1537],
-    "numberingSystem": [1, "numbering-system"],
-    "effectiveLocale": [32],
-    "setFocus": [64]
-  }, [[16, "calciteInternalStepperItemChange", "updateActiveItemOnChange"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["calcite-stepper-item", "calcite-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-stepper-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StepperItem);
-      }
-      break;
-    case "calcite-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteInternalStepperItemKeyEvent = createEvent(this, "calciteInternalStepperItemKeyEvent", 6);
+    this.calciteInternalStepperItemSelect = createEvent(this, "calciteInternalStepperItemSelect", 6);
+    this.calciteInternalUserRequestedStepperItemSelect = createEvent(this, "calciteInternalUserRequestedStepperItemSelect", 6);
+    this.calciteInternalStepperItemRegister = createEvent(this, "calciteInternalStepperItemRegister", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  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.disabled ||
+        (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,
+        });
+      }
+    };
+    this.selected = false;
+    this.complete = false;
+    this.error = false;
+    this.disabled = false;
+    this.heading = undefined;
+    this.description = undefined;
+    this.layout = "horizontal";
+    this.icon = false;
+    this.iconFlipRtl = false;
+    this.numbered = false;
+    this.scale = "m";
+    this.numberingSystem = undefined;
+    this.effectiveLocale = "";
+  }
+  selectedHandler() {
+    if (this.selected) {
+      this.emitRequestedItem();
+    }
+  }
+  // watch for removal of disabled to register step
+  disabledWatcher() {
+    this.registerStepperItem();
+  }
+  effectiveLocaleWatcher(locale) {
+    numberStringFormatter.numberFormatOptions = {
+      locale,
+      numberingSystem: this.numberingSystem,
+      useGrouping: false,
+    };
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+    connectLocalized(this);
+  }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+    this.icon = getElementProp(this.el, "icon", false);
+    this.numbered = getElementProp(this.el, "numbered", false);
+    this.layout = getElementProp(this.el, "layout", false);
+    this.scale = getElementProp(this.el, "scale", "m");
+    this.parentStepperEl = this.el.parentElement;
+    this.itemPosition = this.getItemPosition();
+    this.registerStepperItem();
+    if (this.selected) {
+      this.emitRequestedItem();
+    }
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this, true);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+    disconnectLocalized(this);
+  }
+  render() {
+    return (h(Host, { "aria-expanded": toAriaBoolean(this.selected), onClick: this.handleItemClick, onKeyDown: this.keyDownHandler }, h("div", { class: "container" }, h("div", { class: "stepper-item-header", tabIndex: 
+      /* additional tab index logic needed because of display: contents */
+      this.layout === "horizontal" && !this.disabled ? 0 : null,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? h("div", { class: "stepper-item-number" }, this.renderNumbers(), ".") : null, h("div", { class: "stepper-item-header-text" }, h("span", { class: "stepper-item-heading" }, this.heading), h("span", { class: "stepper-item-description" }, this.description))), h("div", { class: "stepper-item-content" }, 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
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    await componentFocusable(this);
+    (_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 (h("calcite-icon", { class: "stepper-item-icon", flipRtl: this.iconFlipRtl, 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);
+  }
+  renderNumbers() {
+    numberStringFormatter.numberFormatOptions = {
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
+      useGrouping: false,
+    };
+    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "selected": ["selectedHandler"],
+    "disabled": ["disabledWatcher"],
+    "effectiveLocale": ["effectiveLocaleWatcher"]
+  }; }
+  static get style() { return stepperItemCss; }
+}, [1, "calcite-stepper-item", {
+    "selected": [1540],
+    "complete": [516],
+    "error": [516],
+    "disabled": [516],
+    "heading": [1],
+    "description": [1],
+    "layout": [1537],
+    "icon": [1028],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
+    "numbered": [1028],
+    "scale": [1537],
+    "numberingSystem": [1, "numbering-system"],
+    "effectiveLocale": [32],
+    "setFocus": [64]
+  }, [[16, "calciteInternalStepperItemChange", "updateActiveItemOnChange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-stepper-item", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-stepper-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StepperItem);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
 defineCustomElement$1();
 
 const CalciteStepperItem = StepperItem;