@esri/calcite-components 2.8.0-next.2 → 2.8.0-next.4

package/dist/components/calcite-segmented-control.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir } from './dom.js';
@@ -106,7 +106,7 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, { key: '0c01a1cf6bb9241ad8f839c50baff34fc22704bb', onClick: this.handleClick, role: "radiogroup" }, h("div", { key: '8f157cf7deeb847edcd3873126cca455ceedd9ab', class: CSS.itemWrapper }, h(InteractiveContainer, { key: '54746752556e4ab175a890b54e09f07938188019', disabled: this.disabled }, h("slot", { key: '15dcd0ec46d75d40d4f3d16caf5cfcf6490fe72e' }), h(HiddenFormInputSlot, { key: '497b955d52bced7139e9424e742e37666bf18055', component: this }))), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
+        return (h(Host, { key: 'c75edd610e87f81d5a30c93a56f4346b785a9883', onClick: this.handleClick, role: "radiogroup" }, h("div", { key: '08e3760c341289cc127741942bc5f084c4a3614d', class: CSS.itemWrapper }, h(InteractiveContainer, { key: '7a0de76a5e61d480e4bab5c30a1a299c011bc5cf', disabled: this.disabled }, h("slot", { key: 'f50c7e6a9117f44b5376eb99035d62d48826cdd8' }), h(HiddenFormInputSlot, { key: '56839275817ae0824dd064c86f04ad1f1385d98f', component: this }))), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     handleSelected(event) {
         event.preventDefault();

package/dist/components/calcite-select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as focusElement } from './dom.js';
@@ -210,9 +210,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     render() {
         const { disabled } = this;
-        return (h(Host, { key: 'b01165b7873667cf3d7645e3c01498e9e2e4abc8' }, h(InteractiveContainer, { key: 'f651b661f5b1bc4f048e2558092d1b1804e81949', disabled: disabled }, h("div", { key: '8851034d0e62f384b77ccc53553aeed3be150274', class: CSS.wrapper }, h("select", { key: '4c5c6c8e203fd7dc04602e0810897d8496032653', "aria-label": getLabelText(this), class: CSS.select, disabled: disabled, onChange: this.handleInternalSelectChange,
+        return (h(Host, { key: 'efff3dfd92474206be57203fb3cdd1f596d77328' }, h(InteractiveContainer, { key: '103150e8912ca124b988c27cc3f1ba2b0be52004', disabled: disabled }, h("div", { key: 'bdc552a38604367f8a1df99f668f1476f8a63bf4', class: CSS.wrapper }, h("select", { key: 'db0e699c538d4c8f34113b3c43ecfd92cfdddf86', "aria-label": getLabelText(this), class: CSS.select, disabled: disabled, onChange: this.handleInternalSelectChange,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeSelectRef }, h("slot", { key: '73feaaeb4ecaa321a5a5feda0dee5e90543c1f76' })), this.renderChevron(), h(HiddenFormInputSlot, { key: 'c664b6223ab9bb618837ae90be540daecc6741f6', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            ref: this.storeSelectRef }, h("slot", { key: '6fd3f9341c81c45b80fda5b05e4838f40eb24ca9' })), this.renderChevron(), h(HiddenFormInputSlot, { key: 'f722c4f6db423d601373464939f4e9f2d37a5651', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/calcite-sheet.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { D as ensureId, a as getElementDir, f as focusFirstTabbable } from './dom.js';
@@ -133,16 +133,16 @@ const Sheet = /*@__PURE__*/ proxyCustomElement(class Sheet extends HTMLElement {
     }
     render() {
         const dir = getElementDir(this.el);
-        return (h(Host, { key: '9009c91b8523ecb86d59399247b2398a6a8cefe9', "aria-describedby": this.contentId, "aria-label": this.label, "aria-modal": "true", role: "dialog" }, h("div", { key: 'ee63961dfff8424a8f55c681327360acdb8e3102', class: {
+        return (h(Host, { key: '10e6dfee188f88906fb6af298a4e2da2e564ac3d', "aria-describedby": this.contentId, "aria-label": this.label, "aria-modal": "true", role: "dialog" }, h("div", { key: 'be31b7cd3714ef41313fa26a2a7ad5313fdbcc4e', class: {
                 [CSS.container]: true,
                 [CSS.containerOpen]: this.opened,
                 [CSS.containerSlottedInShell]: this.slottedInShell,
                 [CSS_UTILITY.rtl]: dir === "rtl",
-            } }, h("calcite-scrim", { key: 'a6a74d2ac6c7c29f0344922c478d3d526a1909d4', class: CSS.scrim, onClick: this.handleOutsideClose }), h("div", { key: '64d217e0732672cb77edb60bfcbacde56bdbf1e8', class: {
+            } }, h("calcite-scrim", { key: '9d5d4b84639681212df9cbf41f10f14fe1ee8b1d', class: CSS.scrim, onClick: this.handleOutsideClose }), h("div", { key: '0f4b00d0796464fc06e376eb201f01ae0c78b1f5', class: {
                 [CSS.content]: true,
             },
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setTransitionEl }, h("slot", { key: '1a02d07dd91e0fb05499a61441e09f0ea8641d2b' })))));
+            ref: this.setTransitionEl }, h("slot", { key: 'c345e009cd622131f97d016dee47967e82d3b576' })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/calcite-shell-center-row.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -45,14 +45,14 @@ const ShellCenterRow = /*@__PURE__*/ proxyCustomElement(class ShellCenterRow ext
     // --------------------------------------------------------------------------
     render() {
         const { el } = this;
-        const contentNode = (h("div", { key: 'b611d572ee4766717d7418ffc139c18e8e0ecf9a', class: CSS.content }, h("slot", { key: '1ba3a1f6d45d9deaff0b66cb2334ebb0c5870263' })));
+        const contentNode = (h("div", { key: '9e1d7602bfdb40e63de0e04a37bedee830533c6e', class: CSS.content }, h("slot", { key: '99adf8c62da6a33acd044c7a2a908aa84d38c03c' })));
         const actionBar = getSlotted(el, SLOTS.actionBar);
         const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer, key: "action-bar" }, h("slot", { name: SLOTS.actionBar }))) : null;
         const children = [actionBarNode, contentNode];
         if (actionBar?.position === "end") {
             children.reverse();
         }
-        return h(Fragment, { key: '0842d87dc0a981b199503ba5bf5e3a1f6fd00bc3' }, children);
+        return h(Fragment, { key: 'e08d188e13fa0f376a364d9e5f9e15fb1d757b4e' }, children);
     }
     get el() { return this; }
     static get style() { return CalciteShellCenterRowStyle0; }

package/dist/components/calcite-shell-panel.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-shell.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -153,7 +153,7 @@ const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
         return (h("div", { class: CSS.positionedSlotWrapper }, this.renderAlerts(), this.renderModals(), this.renderSheets()));
     }
     render() {
-        return (h(Fragment, { key: 'e9895b0f55e2ef9b4e1c6ecc93994b218e3677e5' }, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));
+        return (h(Fragment, { key: '8378ef601abf3b097c6b1cbf83be11bf44ed8afb' }, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));
     }
     get el() { return this; }
     static get style() { return CalciteShellStyle0; }

package/dist/components/calcite-slider.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
@@ -313,16 +313,16 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
                 minInterval,
                 mirror,
             });
-        return (h(Host, { key: 'b6cd9c5759a2c4b270c5cd7ed2b93f5e5ba659aa', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, h(InteractiveContainer, { key: 'cfc450cd1f2ad1fa48d064c49205e620793f7b30', disabled: this.disabled }, h("div", { key: '605a6722ff7ed5f1b1c79ad72a55a877fca00439', "aria-label": getLabelText(this), class: {
+        return (h(Host, { key: '04dea5bcb09095f217e50b4129ff54dad822d686', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, h(InteractiveContainer, { key: '6b82e2160a9c0c4db901463ce3658b0561019d72', disabled: this.disabled }, h("div", { key: '5ff110a64e7971cfbd52f058f7937d3901e3c36b', "aria-label": getLabelText(this), class: {
                 [CSS.container]: true,
                 [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), h("div", { key: '0c583557d73d9b68b822c64ee34e0158fd31622d', class: CSS.track,
+            } }, this.renderGraph(), h("div", { key: 'df2efce7f11b90b2a402b2b2a8fe49bd95425268', class: CSS.track,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeTrackRef }, h("div", { key: 'afd446ecf292aa0ba19ae6f5c11c558c16d659c8', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: {
+            ref: this.storeTrackRef }, h("div", { key: 'ef004106a42892a14307ca51cf73470206e5ce44', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: {
                 left: `${mirror ? 100 - maxInterval : minInterval}%`,
                 right: `${mirror ? minInterval : 100 - maxInterval}%`,
-            } }), h("div", { key: '3bf6dd20767d32a1d004be050f81ced4c2b26662', class: CSS.ticks }, this.tickValues.map((tick) => {
+            } }), h("div", { key: '328f9c37ae975cffa03b1893cf9ce72c32c58dc1', class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = tick >= min && tick <= value;
             if (useMinValue) {
@@ -335,7 +335,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), h("div", { key: '6a12447745cc41ed94028741191247e8fe7ebaad', class: CSS.thumbContainer }, minThumb, thumb, h(HiddenFormInputSlot, { key: '26f79fcde5ce93627ef43cc9b97bd48cb9f1557d', component: this }))))));
+        }))), h("div", { key: 'f3351c3907f38d507c8e355c74095292b62da46b', class: CSS.thumbContainer }, minThumb, thumb, h(HiddenFormInputSlot, { key: 'cf1dde9045965a540d5f36415ea6a1fb428a931e', component: this }))))));
     }
     renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
         const isLabeled = type.includes("labeled");

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
@@ -146,11 +146,11 @@ const SortableList = /*@__PURE__*/ proxyCustomElement(class SortableList extends
     render() {
         const { disabled, layout } = this;
         const horizontal = layout === "horizontal" || false;
-        return (h(InteractiveContainer, { key: '55863db3f7758c2bdf7143e56ae431c952c2249f', disabled: disabled }, h("div", { key: 'e01d31cb0509f793b70c885f70575b331ac5729c', class: {
+        return (h(InteractiveContainer, { key: '74cbecc0103a155addd402773c3651eb9409974a', disabled: disabled }, h("div", { key: 'a3ce1b22fbb0cd1f8e78f7afc2d9f6d16b45594c', class: {
                 [CSS.container]: true,
                 [CSS.containerVertical]: !horizontal,
                 [CSS.containerHorizontal]: horizontal,
-            } }, h("slot", { key: '87ababe82f5e8659244040982348556efd061af9' }))));
+            } }, h("slot", { key: '57fe50b68cf85fcc95f2b65c633ac631750575c1' }))));
     }
     get el() { return this; }
     static get style() { return CalciteSortableListStyle0; }

package/dist/components/calcite-split-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
@@ -90,7 +90,7 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
     }
     render() {
         const buttonWidth = this.width === "auto" ? "auto" : "full";
-        return (h(InteractiveContainer, { key: '828f76cdbd0d6aea6cdb4b960753347ebc998225', disabled: this.disabled }, h("div", { key: '9c94217002691c36a61f5658ef3a6a1c7e577e21', class: CSS.container }, h("calcite-button", { key: '4afce55719d1f12ee7aec177267dd8e031692e54', appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), h("div", { key: '86de75f353658799995139720556cd73715d1dc9', class: CSS.dividerContainer }, h("div", { key: '553168882ba7f2128f6bb343d12c7e42fde4a4a0', class: CSS.divider })), h("calcite-dropdown", { key: 'a84bf9e290ca85f5f86171a14ac09aa7694b39a8', disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, "width-scale": this.scale }, h("calcite-button", { key: '304e9bb68963d69c89bc180bef6dc297d4a3ec17', appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), h("slot", { key: 'ecc5b474491d24b30d385ff1891e45fe3f52d84b' })))));
+        return (h(InteractiveContainer, { key: 'ffb11f3a1130410c96151c30437e6bebf8d72b74', disabled: this.disabled }, h("div", { key: '413a2b27a8aed681110604030f4049b238c02268', class: CSS.container }, h("calcite-button", { key: '2ea89ead3550d6bfa383da6dd66f85831bb25bec', appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), h("div", { key: '2c7f076e3efae596a9cd3b183e8b3f999acff949', class: CSS.dividerContainer }, h("div", { key: 'db6817a5df759d8585bb63286af2648e7e0e787c', class: CSS.divider })), h("calcite-dropdown", { key: '6e4d046a3821d6404068e17b6e11a2be02f85617', disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, "width-scale": this.scale }, h("calcite-button", { key: '339c025cee1c2084f92f167437050677da372036', appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), h("slot", { key: '9208f1780e47d80729765c85297bd4a39314d2ed' })))));
     }
     get dropdownIcon() {
         return this.dropdownIconType === "chevron"

package/dist/components/calcite-stack.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { a as Stack, d as defineCustomElement$1 } from './stack.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
@@ -154,11 +154,11 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H
         disconnectMessages(this);
     }
     render() {
-        return (h(Host, { key: '096f9389ee1639c7bb888668a9b76d4cbbd011f2', "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, h(InteractiveContainer, { key: '683e706e5b1dd6164a5b662d79cfae160ef00233', disabled: this.disabled }, h("div", { key: 'ebdf63213e4117ab1b3e187a3f32aa2ced665205', class: CSS.container }, this.complete && (h("span", { "aria-live": "polite", class: CSS.visuallyHidden }, this.messages.complete)), h("div", { key: 'd8c26e7385c8159afbace97a34bf139acec835d9', class: CSS.stepperItemHeader, tabIndex: 
+        return (h(Host, { key: '78b66c6e63baad88c286103f172b9e0d83f71200', "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, h(InteractiveContainer, { key: '518bf9f28f04a5064f5b06aa08616f54cd1ed074', disabled: this.disabled }, h("div", { key: '2ec353ab0b2e4dff1166a31509cd8f783322b155', class: CSS.container }, this.complete && (h("span", { key: 'f13aab33f57456803ea5ca2e1c74acac1058af3a', "aria-live": "polite", class: CSS.visuallyHidden }, this.messages.complete)), h("div", { key: '8741b6a44b71fb650349bacc676c990f6af07948', class: CSS.stepperItemHeader, 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 should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: CSS.stepperItemNumber }, this.renderNumbers(), ".")) : null, h("div", { key: '2271dc9e98875f797a82fc010684aceb1660cc79', class: CSS.stepperItemHeaderText }, h("span", { key: 'fbe9f433360f1336826b611938a350605a767629', class: CSS.stepperItemHeading }, this.heading), h("span", { key: '4796e41a1671e7d2e5f92a002f8d43e27eb391bc', class: CSS.stepperItemDescription }, this.description))), h("div", { key: '2db709a64c40944cc587fb8406b7608bd00eb763', class: CSS.stepperItemContent }, h("slot", { key: 'c68c7ede026238a8861a2c898ac557f7d4651593' }))))));
+            ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: CSS.stepperItemNumber }, this.renderNumbers(), ".")) : null, h("div", { key: '646398a0c466daf881fc028c167037778ce646bb', class: CSS.stepperItemHeaderText }, h("span", { key: 'f8678c77a71113aa59e0ea42ad888e4e17c755e0', class: CSS.stepperItemHeading }, this.heading), h("span", { key: '06882809e6d0f2a6e56c315c7d5a35692f010018', class: CSS.stepperItemDescription }, this.description))), h("div", { key: '46720937bdc77dc0d0594216991dd49dd701c691', class: CSS.stepperItemContent }, h("slot", { key: '8cb1c5246633879fc105db4be1d7a40ebfa6354b' }))))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -1 +1 @@
-{"file":"calcite-stepper-item.js","mappings":"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","names":[],"sources":["src/components/stepper-item/resources.ts","src/components/stepper-item/stepper-item.scss?tag=calcite-stepper-item&encapsulation=shadow","src/components/stepper-item/stepper-item.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  stepperItemContent: \"stepper-item-content\",\n  stepperItemDescription: \"stepper-item-description\",\n  stepperItemHeader: \"stepper-item-header\",\n  stepperItemHeading: \"stepper-item-heading\",\n  stepperItemHeaderText: \"stepper-item-header-text\",\n  stepperItemNumber: \"stepper-item-number\",\n  visuallyHidden: \"visually-hidden\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  @apply text-n1h;\n  margin-inline-end: theme(\"margin.1\");\n  .stepper-item-description {\n    @apply text-n2h;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.4\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.5\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n  @apply text-0h;\n  margin-inline-end: theme(\"margin.2\");\n  .stepper-item-description {\n    @apply text-n1h;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.5\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.6\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  @apply text-1h;\n  margin-inline-end: theme(\"margin.3\");\n  .stepper-item-description {\n    @apply text-0h;\n  }\n}\n\n:host {\n  @apply relative\n  flex\n  flex-grow\n  flex-col\n  self-start;\n  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);\n}\n\n:host .container {\n  @apply text-color-3\n    border-color-3\n    relative\n    flex\n    flex-grow\n    cursor-pointer\n    flex-col\n    border-0\n    border-t-2\n    border-solid\n    no-underline\n    outline-none\n    duration-150\n    ease-in-out;\n}\n\n// focus styles\n:host {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-outset;\n}\n\n// .stepper-item-header / content\n:host .stepper-item-header {\n  @apply flex cursor-pointer items-start;\n}\n\n:host .stepper-item-content,\n:host .stepper-item-header {\n  @apply duration-150 ease-in-out;\n  padding-block: var(--calcite-stepper-item-spacing-unit-l);\n  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  text-align: start;\n}\n\n:host .stepper-item-header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n}\n\n:host .stepper-item-content {\n  @apply text-n2-wrap\n    hidden\n    w-full\n    flex-col;\n}\n\n// stepper item icon\n:host .stepper-item-icon {\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  @apply text-color-3\n    opacity-disabled\n    mt-px\n    inline-flex\n    h-3\n    flex-shrink-0\n    self-start\n    duration-150\n    ease-in-out;\n}\n\n// stepper item title\n:host .stepper-item-header-text {\n  @apply flex-col;\n  text-align: initial;\n  margin-inline-end: auto;\n}\n\n:host .stepper-item-heading,\n:host .stepper-item-description {\n  @apply flex w-full;\n}\n:host .stepper-item-heading {\n  @apply text-color-2 mb-1 font-medium;\n}\n:host .stepper-item-description {\n  @apply text-color-3;\n}\n\n:host .stepper-item-number {\n  @apply text-color-3\n    font-medium\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n}\n\n@include disabled();\n\n:host([complete]) .container {\n  // todo dark mode\n  border-color: rgba($h-bb-060, 0.5);\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n  }\n}\n\n:host([error]) .container {\n  @apply border-t-color-danger;\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host(:hover:not([disabled]):not([selected])) .container,\n:host(:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-brand;\n\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n}\n\n:host([error]:hover:not([disabled]):not([selected])) .container,\n:host([error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-danger-hover;\n}\n\n:host([selected]) .container {\n  border-block-start-color: theme(\"backgroundColor.brand\");\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.brand\");\n  }\n\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n    @apply opacity-100;\n  }\n}\n\n:host([selected]) .container {\n  & .stepper-item-content {\n    @apply flex;\n  }\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply border-color-3\n  mx-0\n  mt-0\n  flex-auto\n  border-t-0\n  border-solid\n  py-0;\n  border-inline-start-width: theme(\"borderWidth.2\");\n  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);\n\n  & .stepper-item-icon {\n    @apply order-3 mt-px mb-0;\n    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);\n    margin-inline-start: theme(\"margin.auto\");\n  }\n  & .stepper-item-header {\n    padding-inline-end: theme(\"padding.0\");\n  }\n  & .stepper-item-content {\n    @apply p-0;\n  }\n}\n\n:host([layout=\"vertical\"][complete]) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][complete]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][complete]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-brand;\n}\n:host([layout=\"vertical\"][error]) .container {\n  @apply border-color-danger;\n}\n:host([layout=\"vertical\"][selected]) .container {\n  @apply border-color-brand;\n\n  & .stepper-item-content:not(:empty) {\n    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);\n  }\n}\n:host([layout=\"vertical\"]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"]:focus:not([disabled]):not([selected])) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][error]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-danger-hover;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  display: contents;\n\n  .container {\n    display: contents;\n  }\n\n  .stepper-item-header {\n    @apply border-color-3\n    border-0\n    border-solid\n    border-t-2\n    focus-base;\n    grid-row: items;\n\n    &:focus {\n      @apply focus-outset duration-0;\n    }\n  }\n\n  .stepper-item-content {\n    @apply cursor-auto duration-150 ease-in-out;\n    padding-block: 0;\n    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n    text-align: start;\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  .stepper-item-header:focus {\n    @apply duration-0;\n  }\n}\n\n:host([layout=\"horizontal\"][disabled]),\n:host([layout=\"horizontal-single\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-header {\n    grid-area: 1 / 1 / 1 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]),\n:host([layout=\"horizontal-single\"][complete]) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"][error]),\n:host([layout=\"horizontal-single\"][error]) {\n  .stepper-item-header {\n    @apply border-color-danger;\n  }\n}\n:host([layout=\"horizontal\"][selected]),\n:host([layout=\"horizontal-single\"][selected]) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-danger-hover;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .container {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus),\n  :host(:focus-visible) {\n    outline-color: canvasText;\n  }\n\n  :host([selected]) .container {\n    border-block-start-color: highlight;\n    & .stepper-item-number {\n      color: highlight;\n    }\n    & .stepper-item-icon {\n      color: highlight;\n    }\n  }\n\n  :host([layout=\"vertical\"][selected]) .container {\n    border-color: highlight;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) .stepper-item-header {\n  @apply border-none box-border\n  me-0;\n  inline-size: 100%;\n  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);\n}\n\n:host([layout=\"horizontal-single\"][error]) .container {\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host([layout=\"horizontal-single\"][error][selected]),\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  & .stepper-item-icon {\n    @apply opacity-disabled;\n  }\n  & .stepper-item-number {\n    @apply text-color-3;\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { Scale } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"../stepper/interfaces\";\nimport {\n  numberStringFormatter,\n  LocalizedComponent,\n  disconnectLocalized,\n  connectLocalized,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  setUpLoadableComponent,\n  setComponentLoaded,\n  LoadableComponent,\n  componentFocusable,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { CSS } from \"./resources\";\nimport { StepperItemMessages } from \"./assets/stepper-item/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-stepper-item\",\n  styleUrl: \"stepper-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class StepperItem\n  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n  }\n\n  /** When `true`, the step has been completed. */\n  @Prop({ reflect: true }) complete = false;\n\n  /** When `true`, the component contains an error that requires resolution from the user. */\n  @Prop({ reflect: true }) error = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text. */\n  @Prop() heading: string;\n\n  /** A description for the component. Displays below the header text. */\n  @Prop() description: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * @internal\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  // watch for removal of disabled to register step\n  @Watch(\"disabled\")\n  disabledWatcher(): void {\n    this.registerStepperItem();\n  }\n\n  /**\n   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() icon = false;\n\n  /**\n   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: StepperLayout;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperItemMessages;\n\n  /**\n   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() numbered = false;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() defaultMessages: StepperItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(locale: string): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.parentStepperEl = this.el.parentElement as HTMLCalciteStepperElement;\n    this.itemPosition = this.getItemPosition();\n    this.registerStepperItem();\n\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-current={this.selected ? \"step\" : \"false\"}\n        onClick={this.handleItemClick}\n        onKeyDown={this.keyDownHandler}\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div class={CSS.container}>\n            {this.complete && (\n              <span aria-live=\"polite\" class={CSS.visuallyHidden}>\n                {this.messages.complete}\n              </span>\n            )}\n            <div\n              class={CSS.stepperItemHeader}\n              tabIndex={\n                /* additional tab index logic needed because of display: contents */\n                this.layout === \"horizontal\" && !this.disabled ? 0 : null\n              }\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.headerEl = el)}\n            >\n              {this.icon ? this.renderIcon() : null}\n              {this.numbered ? (\n                <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>\n              ) : null}\n              <div class={CSS.stepperItemHeaderText}>\n                <span class={CSS.stepperItemHeading}>{this.heading}</span>\n                <span class={CSS.stepperItemDescription}>{this.description}</span>\n              </div>\n            </div>\n            <div class={CSS.stepperItemContent}>\n              <slot />\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): void {\n    if (\n      event.target === this.parentStepperEl ||\n      event.composedPath().includes(this.parentStepperEl)\n    ) {\n      this.selectedPosition = event.detail.position;\n      this.determineSelectedItem();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    (this.layout === \"vertical\" ? this.el : this.headerEl)?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperItemElement;\n\n  /** position within parent */\n  private itemPosition: number;\n\n  /** the latest requested item position*/\n  private selectedPosition: number;\n\n  /** the parent stepper component */\n  private parentStepperEl: HTMLCalciteStepperElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitUserRequestedItem();\n          event.preventDefault();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalStepperItemKeyEvent.emit({ item: event });\n          event.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private renderIcon(): VNode {\n    let path = \"circle\";\n\n    if (this.selected && (this.layout !== \"horizontal-single\" || (!this.error && !this.complete))) {\n      path = \"circleF\";\n    } else if (this.error) {\n      path = \"exclamationMarkCircleF\";\n    } else if (this.complete) {\n      path = \"checkCircleF\";\n    }\n\n    return (\n      <calcite-icon class=\"stepper-item-icon\" flipRtl={this.iconFlipRtl} icon={path} scale=\"s\" />\n    );\n  }\n\n  private determineSelectedItem(): void {\n    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;\n  }\n\n  private registerStepperItem(): void {\n    this.calciteInternalStepperItemRegister.emit({\n      position: this.itemPosition,\n    });\n  }\n\n  private handleItemClick = (event: MouseEvent): void => {\n    if (\n      this.disabled ||\n      (this.layout === \"horizontal\" &&\n        event\n          .composedPath()\n          .some((el) => (el as HTMLElement).classList?.contains(\"stepper-item-content\")))\n    ) {\n      return;\n    }\n\n    this.emitUserRequestedItem();\n  };\n\n  private emitUserRequestedItem = (): void => {\n    this.emitRequestedItem();\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalUserRequestedStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private emitRequestedItem = (): void => {\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private getItemPosition(): number {\n    return Array.from(this.parentStepperEl?.querySelectorAll(\"calcite-stepper-item\")).indexOf(\n      this.el,\n    );\n  }\n\n  renderNumbers(): string {\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);\n  }\n}\n"],"version":3}
+{"file":"calcite-stepper-item.js","mappings":"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","names":[],"sources":["src/components/stepper-item/resources.ts","src/components/stepper-item/stepper-item.scss?tag=calcite-stepper-item&encapsulation=shadow","src/components/stepper-item/stepper-item.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  stepperItemContent: \"stepper-item-content\",\n  stepperItemDescription: \"stepper-item-description\",\n  stepperItemHeader: \"stepper-item-header\",\n  stepperItemHeading: \"stepper-item-heading\",\n  stepperItemHeaderText: \"stepper-item-header-text\",\n  stepperItemNumber: \"stepper-item-number\",\n  visuallyHidden: \"visually-hidden\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  @apply text-n1h;\n  margin-inline-end: theme(\"margin.1\");\n  .stepper-item-description {\n    @apply text-n2h;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.4\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.5\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n  @apply text-0h;\n  margin-inline-end: theme(\"margin.2\");\n  .stepper-item-description {\n    @apply text-n1h;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.5\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.6\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  @apply text-1h;\n  margin-inline-end: theme(\"margin.3\");\n  .stepper-item-description {\n    @apply text-0h;\n  }\n}\n\n:host {\n  @apply relative\n  flex\n  flex-grow\n  flex-col\n  self-start;\n  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);\n}\n\n:host .container {\n  @apply text-color-3\n    border-color-3\n    relative\n    flex\n    flex-grow\n    cursor-pointer\n    flex-col\n    border-0\n    border-t-2\n    border-solid\n    no-underline\n    outline-none\n    duration-150\n    ease-in-out;\n}\n\n// focus styles\n:host {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-outset;\n}\n\n// .stepper-item-header / content\n:host .stepper-item-header {\n  @apply flex cursor-pointer items-start;\n}\n\n:host .stepper-item-content,\n:host .stepper-item-header {\n  @apply duration-150 ease-in-out;\n  padding-block: var(--calcite-stepper-item-spacing-unit-l);\n  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  text-align: start;\n}\n\n:host .stepper-item-header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n}\n\n:host .stepper-item-content {\n  @apply text-n2-wrap\n    hidden\n    w-full\n    flex-col;\n}\n\n// stepper item icon\n:host .stepper-item-icon {\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  @apply text-color-3\n    opacity-disabled\n    mt-px\n    inline-flex\n    h-3\n    flex-shrink-0\n    self-start\n    duration-150\n    ease-in-out;\n}\n\n// stepper item title\n:host .stepper-item-header-text {\n  @apply flex-col;\n  text-align: initial;\n  margin-inline-end: auto;\n}\n\n:host .stepper-item-heading,\n:host .stepper-item-description {\n  @apply flex w-full;\n}\n:host .stepper-item-heading {\n  @apply text-color-2 mb-1 font-medium;\n}\n:host .stepper-item-description {\n  @apply text-color-3;\n}\n\n:host .stepper-item-number {\n  @apply text-color-3\n    font-medium\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n}\n\n@include disabled();\n\n:host([complete]) .container {\n  // todo dark mode\n  border-color: rgba($h-bb-060, 0.5);\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n  }\n}\n\n:host([error]) .container {\n  @apply border-t-color-danger;\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host(:hover:not([disabled]):not([selected])) .container,\n:host(:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-brand;\n\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n}\n\n:host([error]:hover:not([disabled]):not([selected])) .container,\n:host([error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-danger-hover;\n}\n\n:host([selected]) .container {\n  border-block-start-color: theme(\"backgroundColor.brand\");\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.brand\");\n  }\n\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n    @apply opacity-100;\n  }\n}\n\n:host([selected]) .container {\n  & .stepper-item-content {\n    @apply flex;\n  }\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply border-color-3\n  mx-0\n  mt-0\n  flex-auto\n  border-t-0\n  border-solid\n  py-0;\n  border-inline-start-width: theme(\"borderWidth.2\");\n  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);\n\n  & .stepper-item-icon {\n    @apply order-3 mt-px mb-0;\n    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);\n    margin-inline-start: theme(\"margin.auto\");\n  }\n  & .stepper-item-header {\n    padding-inline-end: theme(\"padding.0\");\n  }\n  & .stepper-item-content {\n    @apply p-0;\n  }\n}\n\n:host([layout=\"vertical\"][complete]) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][complete]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][complete]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-brand;\n}\n:host([layout=\"vertical\"][error]) .container {\n  @apply border-color-danger;\n}\n:host([layout=\"vertical\"][selected]) .container {\n  @apply border-color-brand;\n\n  & .stepper-item-content:not(:empty) {\n    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);\n  }\n}\n:host([layout=\"vertical\"]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"]:focus:not([disabled]):not([selected])) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][error]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-danger-hover;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  display: contents;\n\n  .container {\n    display: contents;\n  }\n\n  .stepper-item-header {\n    @apply border-color-3\n    border-0\n    border-solid\n    border-t-2\n    focus-base;\n    grid-row: items;\n\n    &:focus {\n      @apply focus-outset duration-0;\n    }\n  }\n\n  .stepper-item-content {\n    @apply cursor-auto duration-150 ease-in-out;\n    padding-block: 0;\n    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n    text-align: start;\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  .stepper-item-header:focus {\n    @apply duration-0;\n  }\n}\n\n:host([layout=\"horizontal\"][disabled]),\n:host([layout=\"horizontal-single\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-header {\n    grid-area: 1 / 1 / 1 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]),\n:host([layout=\"horizontal-single\"][complete]) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"][error]),\n:host([layout=\"horizontal-single\"][error]) {\n  .stepper-item-header {\n    @apply border-color-danger;\n  }\n}\n:host([layout=\"horizontal\"][selected]),\n:host([layout=\"horizontal-single\"][selected]) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-danger-hover;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .container {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus),\n  :host(:focus-visible) {\n    outline-color: canvasText;\n  }\n\n  :host([selected]) .container {\n    border-block-start-color: highlight;\n    & .stepper-item-number {\n      color: highlight;\n    }\n    & .stepper-item-icon {\n      color: highlight;\n    }\n  }\n\n  :host([layout=\"vertical\"][selected]) .container {\n    border-color: highlight;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) .stepper-item-header {\n  @apply border-none box-border\n  me-0;\n  inline-size: 100%;\n  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);\n}\n\n:host([layout=\"horizontal-single\"][error]) .container {\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host([layout=\"horizontal-single\"][error][selected]),\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  & .stepper-item-icon {\n    @apply opacity-disabled;\n  }\n  & .stepper-item-number {\n    @apply text-color-3;\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { Scale } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"../stepper/interfaces\";\nimport {\n  numberStringFormatter,\n  LocalizedComponent,\n  disconnectLocalized,\n  connectLocalized,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  setUpLoadableComponent,\n  setComponentLoaded,\n  LoadableComponent,\n  componentFocusable,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { CSS } from \"./resources\";\nimport { StepperItemMessages } from \"./assets/stepper-item/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-stepper-item\",\n  styleUrl: \"stepper-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class StepperItem\n  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n  }\n\n  /** When `true`, the step has been completed. */\n  @Prop({ reflect: true }) complete = false;\n\n  /** When `true`, the component contains an error that requires resolution from the user. */\n  @Prop({ reflect: true }) error = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text. */\n  @Prop() heading: string;\n\n  /** A description for the component. Displays below the header text. */\n  @Prop() description: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * @internal\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  // watch for removal of disabled to register step\n  @Watch(\"disabled\")\n  disabledWatcher(): void {\n    this.registerStepperItem();\n  }\n\n  /**\n   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() icon = false;\n\n  /**\n   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: StepperLayout;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperItemMessages;\n\n  /**\n   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() numbered = false;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() defaultMessages: StepperItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(locale: string): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.parentStepperEl = this.el.parentElement as HTMLCalciteStepperElement;\n    this.itemPosition = this.getItemPosition();\n    this.registerStepperItem();\n\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-current={this.selected ? \"step\" : \"false\"}\n        onClick={this.handleItemClick}\n        onKeyDown={this.keyDownHandler}\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div class={CSS.container}>\n            {this.complete && (\n              <span aria-live=\"polite\" class={CSS.visuallyHidden}>\n                {this.messages.complete}\n              </span>\n            )}\n            <div\n              class={CSS.stepperItemHeader}\n              tabIndex={\n                /* additional tab index logic needed because of display: contents */\n                this.layout === \"horizontal\" && !this.disabled ? 0 : null\n              }\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.headerEl = el)}\n            >\n              {this.icon ? this.renderIcon() : null}\n              {this.numbered ? (\n                <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>\n              ) : null}\n              <div class={CSS.stepperItemHeaderText}>\n                <span class={CSS.stepperItemHeading}>{this.heading}</span>\n                <span class={CSS.stepperItemDescription}>{this.description}</span>\n              </div>\n            </div>\n            <div class={CSS.stepperItemContent}>\n              <slot />\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): void {\n    if (\n      event.target === this.parentStepperEl ||\n      event.composedPath().includes(this.parentStepperEl)\n    ) {\n      this.selectedPosition = event.detail.position;\n      this.determineSelectedItem();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    (this.layout === \"vertical\" ? this.el : this.headerEl)?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperItemElement;\n\n  /** position within parent */\n  private itemPosition: number;\n\n  /** the latest requested item position*/\n  private selectedPosition: number;\n\n  /** the parent stepper component */\n  private parentStepperEl: HTMLCalciteStepperElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitUserRequestedItem();\n          event.preventDefault();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalStepperItemKeyEvent.emit({ item: event });\n          event.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private renderIcon(): VNode {\n    let path = \"circle\";\n\n    if (this.selected && (this.layout !== \"horizontal-single\" || (!this.error && !this.complete))) {\n      path = \"circleF\";\n    } else if (this.error) {\n      path = \"exclamationMarkCircleF\";\n    } else if (this.complete) {\n      path = \"checkCircleF\";\n    }\n\n    return (\n      <calcite-icon class=\"stepper-item-icon\" flipRtl={this.iconFlipRtl} icon={path} scale=\"s\" />\n    );\n  }\n\n  private determineSelectedItem(): void {\n    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;\n  }\n\n  private registerStepperItem(): void {\n    this.calciteInternalStepperItemRegister.emit({\n      position: this.itemPosition,\n    });\n  }\n\n  private handleItemClick = (event: MouseEvent): void => {\n    if (\n      this.disabled ||\n      (this.layout === \"horizontal\" &&\n        event\n          .composedPath()\n          .some((el) => (el as HTMLElement).classList?.contains(\"stepper-item-content\")))\n    ) {\n      return;\n    }\n\n    this.emitUserRequestedItem();\n  };\n\n  private emitUserRequestedItem = (): void => {\n    this.emitRequestedItem();\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalUserRequestedStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private emitRequestedItem = (): void => {\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private getItemPosition(): number {\n    return Array.from(this.parentStepperEl?.querySelectorAll(\"calcite-stepper-item\")).indexOf(\n      this.el,\n    );\n  }\n\n  renderNumbers(): string {\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);\n  }\n}\n"],"version":3}

package/dist/components/calcite-stepper.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host, readTask } from '@stencil/core/internal/client/index.js';
 import { s as slotChangeGetAssignedElements, v as focusElementInGroup } from './dom.js';
@@ -138,9 +138,9 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: 'cffc7783ef3e566c925acca5bc6f5c15f355479e', "aria-label": this.messages.label, role: "region" }, h("div", { key: '2baa858291ec3784ff338fec3e66c12d9d942e29', class: { container: true, [CSS$1.singleView]: this.layout === "horizontal-single" },
+        return (h(Host, { key: '9f44ffa802fd3f8680faed14ada6537a8e2b7850', "aria-label": this.messages.label, role: "region" }, h("div", { key: '36d7624efd7fa1cffd4f025cb3543629b0d6578e', class: { container: true, [CSS$1.singleView]: this.layout === "horizontal-single" },
             // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: this.setContainerEl }, this.layout === "horizontal-single" && (h("div", { class: { [CSS$1.stepBarContainer]: true } }, this.items.map((item, index) => (h(StepBar, { active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition, key: index }))))), this.layout === "horizontal-single" && (h("div", { class: { [CSS$1.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end"))), h("slot", { key: 'abc1f57bf46fed07c55c6ac945d7979958821754', onSlotchange: this.handleDefaultSlotChange }))));
+            ref: this.setContainerEl }, this.layout === "horizontal-single" && (h("div", { key: 'abc141154968d5e0f42abc7bf2c6e1a6d2a4550a', class: { [CSS$1.stepBarContainer]: true } }, this.items.map((item, index) => (h(StepBar, { active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition, key: index }))))), this.layout === "horizontal-single" && (h("div", { key: 'c55d70e84c05d02ae0bf0650603a8bb60725c32c', class: { [CSS$1.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end"))), h("slot", { key: '03b9d71eaded0284873709ea8da17cd642379656', onSlotchange: this.handleDefaultSlotChange }))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -1 +1 @@
-{"file":"calcite-stepper.js","mappings":"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","names":["CSS"],"sources":["src/components/stepper/resources.ts","src/components/stepper/functional/step-bar.tsx","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["export const CSS = {\n  actionIcon: \"action-icon\",\n  actionIconStart: \"action-icon--start\",\n  actionIconEnd: \"action-icon--end\",\n  actionContainer: \"action-container\",\n  stepBarContainer: \"step-bar-container\",\n  singleView: \"single-view\",\n};\n","import { FunctionalComponent, h } from \"@stencil/core\";\n\ninterface StepBarProps {\n  active: boolean;\n  complete: boolean;\n  error: boolean;\n  disabled: boolean;\n  key: number;\n}\n\nexport const CSS = {\n  stepBar: \"step-bar\",\n  stepBarActive: \"step-bar--active\",\n  stepBarComplete: \"step-bar--complete\",\n  stepBarDisabled: \"step-bar--disabled\",\n  stepBarError: \"step-bar--error\",\n  stepBarInActive: \"step-bar--inactive\",\n};\n\nexport const StepBar: FunctionalComponent<StepBarProps> = ({\n  disabled,\n  active,\n  complete,\n  error,\n  key,\n}) => (\n  <svg\n    class={{\n      [CSS.stepBar]: true,\n    }}\n    key={key}\n  >\n    <rect\n      class={{\n        [CSS.stepBarActive]: active,\n        [CSS.stepBarComplete]: complete,\n        [CSS.stepBarDisabled]: disabled,\n        [CSS.stepBarError]: error,\n        [CSS.stepBarInActive]: true,\n      }}\n      width=\"100%\"\n      x=\"0\"\n      y=\"0\"\n    />\n  </svg>\n);\n",":host([scale=\"s\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.11\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.13\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.16\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.3\");\n}\n\n:host {\n  @apply flex;\n}\n\n.container {\n  @apply relative\n    flex\n    w-full\n    min-w-fit\n    flex-row\n    flex-wrap\n    items-stretch\n    justify-between;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply flex-auto flex-col;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .container {\n    display: grid;\n    // grid-templates-columns are dynamically generated\n    // grid-templates-rows are dynamically generated\n    grid-template-areas:\n      \"items\"\n      \"content\";\n    gap: theme(\"spacing.2\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"s\"]),\n:host([layout=\"horizontal-single\"][scale=\"s\"]) {\n  .container {\n    gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]),\n:host([layout=\"horizontal-single\"][scale=\"l\"]) {\n  .container {\n    gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"]) .container.single-view {\n  @apply flex  grid-cols-none;\n}\n\n.action-icon {\n  @apply flex relative grow-0;\n  block-size: var(--calcite-internal-stepper-action-block-size);\n  inline-size: var(--calcite-internal-stepper-action-inline-size);\n}\n\n.action-container {\n  @apply absolute flex justify-between;\n  padding-block: 0.25rem;\n  inline-size: 100%;\n}\n\n@mixin stepBar {\n  .step-bar {\n    @apply flex;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .step-bar-container {\n    @apply flex absolute justify-between items-start;\n    block-size: 0.125rem;\n    inline-size: 100%;\n    gap: var(--calcite-internal-step-bar-gap, 0.5rem);\n  }\n\n  .step-bar--inactive {\n    fill: var(--calcite-color-border-3, #dfdfdf);\n    fill-opacity: 1;\n    block-size: 100%;\n  }\n\n  .step-bar--active {\n    fill: var(--calcite-color-brand);\n  }\n\n  .step-bar--complete {\n    fill: var(--calcite-color-brand);\n    fill-opacity: 0.5;\n  }\n\n  .step-bar--error {\n    fill: var(--calcite-color-status-danger);\n  }\n\n  .step-bar--disabled {\n    opacity: 0.5;\n  }\n}\n\n@include stepBar();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n  readTask,\n} from \"@stencil/core\";\nimport { focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { Position, Scale } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { CSS } from \"./resources\";\nimport { StepBar } from \"./functional/step-bar\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"./interfaces\";\nimport { StepperMessages } from \"./assets/stepper/t9n\";\n\n/**\n * @slot - A slot for adding `calcite-stepper-item` elements.\n */\n@Component({\n  tag: \"calcite-stepper\",\n  styleUrl: \"stepper.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Stepper implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) icon = false;\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: StepperLayout = \"horizontal\";\n\n  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) numbered = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"icon\")\n  @Watch(\"layout\")\n  @Watch(\"numbered\")\n  @Watch(\"scale\")\n  handleItemPropChange(): void {\n    this.updateItems();\n    this.determineActiveStepper();\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperMessages;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.setStepperItemNumberingSystem();\n  }\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   */\n  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateItems();\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    // if no stepper items are set as active, default to the first one\n    if (typeof this.currentActivePosition !== \"number\") {\n      const enabledStepIndex = this.getFirstEnabledStepperPosition();\n\n      if (enabledStepIndex === 0) {\n        this.currentActivePosition = enabledStepIndex;\n      }\n\n      this.calciteInternalStepperItemChange.emit({\n        position: enabledStepIndex,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    disconnectMessages(this);\n    disconnectLocalized(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  render(): VNode {\n    return (\n      <Host aria-label={this.messages.label} role=\"region\">\n        <div\n          class={{ container: true, [CSS.singleView]: this.layout === \"horizontal-single\" }}\n          // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop\n          ref={this.setContainerEl}\n        >\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.stepBarContainer]: true }}>\n              {this.items.map((item, index) => (\n                <StepBar\n                  active={index === this.currentActivePosition}\n                  complete={item.complete && index !== this.currentActivePosition && !item.error}\n                  disabled={item.disabled && index !== this.currentActivePosition}\n                  error={item.error && index !== this.currentActivePosition}\n                  key={index}\n                />\n              ))}\n            </div>\n          )}\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.actionContainer]: true }}>\n              {this.renderAction(\"start\")}\n              {this.renderAction(\"end\")}\n            </div>\n          )}\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemKeyEvent\")\n  calciteInternalStepperItemKeyEvent(event: CustomEvent<StepperItemKeyEventDetail>): void {\n    const item = event.detail.item;\n    const itemToFocus = event.target as HTMLCalciteStepperItemElement;\n\n    switch (item.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"next\");\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"last\");\n        break;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemRegister\")\n  registerItem(event: CustomEvent): void {\n    const item = event.target as HTMLCalciteStepperItemElement;\n    const { content, position } = event.detail;\n\n    this.itemMap.set(item, { position, content });\n    this.enabledItems = this.filterItems();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemSelect\")\n  updateItem(event: CustomEvent): void {\n    const { position } = event.detail;\n    if (typeof position === \"number\") {\n      this.currentActivePosition = position;\n      this.selectedItem = event.target as HTMLCalciteStepperItemElement;\n    }\n\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  @Listen(\"calciteInternalUserRequestedStepperItemSelect\")\n  handleUserRequestedStepperItemSelect(): void {\n    this.calciteStepperItemChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Set the next `calcite-stepper-item` as active. */\n  @Method()\n  async nextStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the previous `calcite-stepper-item` as active. */\n  @Method()\n  async prevStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /**\n   * Set a specified `calcite-stepper-item` as active.\n   *\n   * @param step\n   */\n  @Method()\n  async goToStep(step: number): Promise<void> {\n    const position = step - 1;\n\n    if (this.currentActivePosition !== position) {\n      this.updateStep(position);\n    }\n  }\n\n  /** Set the first `calcite-stepper-item` as active. */\n  @Method()\n  async startStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(0, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the last `calcite-stepper-item` as active. */\n  @Method()\n  async endStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperElement;\n\n  @State() defaultMessages: StepperMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() currentActivePosition: number;\n\n  @Watch(\"currentActivePosition\")\n  handlePositionChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  private enabledItems: HTMLCalciteStepperItemElement[] = [];\n\n  private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();\n\n  private items: HTMLCalciteStepperItemElement[] = [];\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */\n  private multipleViewMode = false;\n\n  private guid = `calcite-stepper-action-${guid()}`;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private updateItems(): void {\n    this.el.querySelectorAll(\"calcite-stepper-item\").forEach((item) => {\n      item.icon = this.icon;\n      item.numbered = this.numbered;\n      item.layout = this.layout;\n      item.scale = this.scale;\n    });\n  }\n\n  private determineActiveStepper(): void {\n    const { items } = this;\n\n    if (items.length < 2) {\n      return;\n    }\n\n    const { currentActivePosition, layout } = this;\n\n    this.multipleViewMode = layout !== \"horizontal-single\";\n    items.forEach((item, index) => {\n      item.hidden = layout === \"horizontal-single\" && index !== (currentActivePosition || 0);\n    });\n  }\n\n  private getEnabledStepIndex(\n    startIndex: number,\n    direction: \"next\" | \"previous\" = \"next\",\n  ): number | null {\n    const { items, currentActivePosition } = this;\n\n    let newIndex = startIndex;\n\n    while (items[newIndex]?.disabled && this.layout !== \"horizontal-single\") {\n      newIndex = newIndex + (direction === \"previous\" ? -1 : 1);\n    }\n\n    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0\n      ? newIndex\n      : null;\n  }\n\n  private updateStep(position: number): void {\n    this.currentActivePosition = position;\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  private filterItems(): HTMLCalciteStepperItemElement[] {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private setStepperItemNumberingSystem(): void {\n    this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n      item.numberingSystem = this.numberingSystem;\n    });\n  }\n\n  private renderAction(position: Position): VNode {\n    const isPositionStart = position === \"start\";\n    const path = isPositionStart ? \"chevron-left\" : \"chevron-right\";\n    const { currentActivePosition, multipleViewMode, layout } = this;\n    const totalItems = this.items.length;\n    const id = `${this.guid}-${isPositionStart ? \"start\" : \"end\"}`;\n\n    return layout === \"horizontal-single\" && !multipleViewMode ? (\n      <calcite-action\n        alignment=\"center\"\n        appearance=\"transparent\"\n        class={{\n          [CSS.actionIcon]: true,\n        }}\n        compact={true}\n        data-position={position}\n        disabled={\n          (currentActivePosition === 0 && isPositionStart) ||\n          (currentActivePosition === totalItems - 1 && !isPositionStart)\n        }\n        icon={path}\n        iconFlipRtl={true}\n        id={id}\n        onClick={this.handleActionClick}\n        scale={this.scale}\n        text={isPositionStart ? this.messages.previousStep : this.messages.nextStep}\n      />\n    ) : null;\n  }\n\n  private handleActionClick = (event: MouseEvent): void => {\n    const currentActivePosition = this.currentActivePosition;\n    const target = event.target as HTMLCalciteActionElement;\n    if (target.getAttribute(\"data-position\") === \"start\") {\n      this.prevStep();\n    } else {\n      this.nextStep();\n    }\n\n    if (\n      typeof this.currentActivePosition === \"number\" &&\n      currentActivePosition !== this.currentActivePosition &&\n      !this.items[this.currentActivePosition].disabled\n    ) {\n      this.calciteStepperItemChange.emit();\n    }\n  };\n\n  private getFirstEnabledStepperPosition(): number {\n    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);\n\n    if (enabledStepIndex > -1) {\n      return enabledStepIndex;\n    }\n    return 0;\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event).filter(\n      (el) => el?.tagName === \"CALCITE-STEPPER-ITEM\",\n    );\n    this.items = items as HTMLCalciteStepperItemElement[];\n    const spacing = Array(items.length).fill(\"1fr\").join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n    this.setStepperItemNumberingSystem();\n  };\n}\n"],"version":3}
+{"file":"calcite-stepper.js","mappings":"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","names":["CSS"],"sources":["src/components/stepper/resources.ts","src/components/stepper/functional/step-bar.tsx","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["export const CSS = {\n  actionIcon: \"action-icon\",\n  actionIconStart: \"action-icon--start\",\n  actionIconEnd: \"action-icon--end\",\n  actionContainer: \"action-container\",\n  stepBarContainer: \"step-bar-container\",\n  singleView: \"single-view\",\n};\n","import { FunctionalComponent, h } from \"@stencil/core\";\n\ninterface StepBarProps {\n  active: boolean;\n  complete: boolean;\n  error: boolean;\n  disabled: boolean;\n  key: number;\n}\n\nexport const CSS = {\n  stepBar: \"step-bar\",\n  stepBarActive: \"step-bar--active\",\n  stepBarComplete: \"step-bar--complete\",\n  stepBarDisabled: \"step-bar--disabled\",\n  stepBarError: \"step-bar--error\",\n  stepBarInActive: \"step-bar--inactive\",\n};\n\nexport const StepBar: FunctionalComponent<StepBarProps> = ({\n  disabled,\n  active,\n  complete,\n  error,\n  key,\n}) => (\n  <svg\n    class={{\n      [CSS.stepBar]: true,\n    }}\n    key={key}\n  >\n    <rect\n      class={{\n        [CSS.stepBarActive]: active,\n        [CSS.stepBarComplete]: complete,\n        [CSS.stepBarDisabled]: disabled,\n        [CSS.stepBarError]: error,\n        [CSS.stepBarInActive]: true,\n      }}\n      width=\"100%\"\n      x=\"0\"\n      y=\"0\"\n    />\n  </svg>\n);\n",":host([scale=\"s\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.11\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.13\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.16\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.3\");\n}\n\n:host {\n  @apply flex;\n}\n\n.container {\n  @apply relative\n    flex\n    w-full\n    min-w-fit\n    flex-row\n    flex-wrap\n    items-stretch\n    justify-between;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply flex-auto flex-col;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .container {\n    display: grid;\n    // grid-templates-columns are dynamically generated\n    // grid-templates-rows are dynamically generated\n    grid-template-areas:\n      \"items\"\n      \"content\";\n    gap: theme(\"spacing.2\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"s\"]),\n:host([layout=\"horizontal-single\"][scale=\"s\"]) {\n  .container {\n    gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]),\n:host([layout=\"horizontal-single\"][scale=\"l\"]) {\n  .container {\n    gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"]) .container.single-view {\n  @apply flex  grid-cols-none;\n}\n\n.action-icon {\n  @apply flex relative grow-0;\n  block-size: var(--calcite-internal-stepper-action-block-size);\n  inline-size: var(--calcite-internal-stepper-action-inline-size);\n}\n\n.action-container {\n  @apply absolute flex justify-between;\n  padding-block: 0.25rem;\n  inline-size: 100%;\n}\n\n@mixin stepBar {\n  .step-bar {\n    @apply flex;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .step-bar-container {\n    @apply flex absolute justify-between items-start;\n    block-size: 0.125rem;\n    inline-size: 100%;\n    gap: var(--calcite-internal-step-bar-gap, 0.5rem);\n  }\n\n  .step-bar--inactive {\n    fill: var(--calcite-color-border-3, #dfdfdf);\n    fill-opacity: 1;\n    block-size: 100%;\n  }\n\n  .step-bar--active {\n    fill: var(--calcite-color-brand);\n  }\n\n  .step-bar--complete {\n    fill: var(--calcite-color-brand);\n    fill-opacity: 0.5;\n  }\n\n  .step-bar--error {\n    fill: var(--calcite-color-status-danger);\n  }\n\n  .step-bar--disabled {\n    opacity: 0.5;\n  }\n}\n\n@include stepBar();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n  readTask,\n} from \"@stencil/core\";\nimport { focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { Position, Scale } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { CSS } from \"./resources\";\nimport { StepBar } from \"./functional/step-bar\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"./interfaces\";\nimport { StepperMessages } from \"./assets/stepper/t9n\";\n\n/**\n * @slot - A slot for adding `calcite-stepper-item` elements.\n */\n@Component({\n  tag: \"calcite-stepper\",\n  styleUrl: \"stepper.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Stepper implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) icon = false;\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: StepperLayout = \"horizontal\";\n\n  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) numbered = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"icon\")\n  @Watch(\"layout\")\n  @Watch(\"numbered\")\n  @Watch(\"scale\")\n  handleItemPropChange(): void {\n    this.updateItems();\n    this.determineActiveStepper();\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperMessages;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.setStepperItemNumberingSystem();\n  }\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   */\n  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateItems();\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    // if no stepper items are set as active, default to the first one\n    if (typeof this.currentActivePosition !== \"number\") {\n      const enabledStepIndex = this.getFirstEnabledStepperPosition();\n\n      if (enabledStepIndex === 0) {\n        this.currentActivePosition = enabledStepIndex;\n      }\n\n      this.calciteInternalStepperItemChange.emit({\n        position: enabledStepIndex,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    disconnectMessages(this);\n    disconnectLocalized(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  render(): VNode {\n    return (\n      <Host aria-label={this.messages.label} role=\"region\">\n        <div\n          class={{ container: true, [CSS.singleView]: this.layout === \"horizontal-single\" }}\n          // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop\n          ref={this.setContainerEl}\n        >\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.stepBarContainer]: true }}>\n              {this.items.map((item, index) => (\n                <StepBar\n                  active={index === this.currentActivePosition}\n                  complete={item.complete && index !== this.currentActivePosition && !item.error}\n                  disabled={item.disabled && index !== this.currentActivePosition}\n                  error={item.error && index !== this.currentActivePosition}\n                  key={index}\n                />\n              ))}\n            </div>\n          )}\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.actionContainer]: true }}>\n              {this.renderAction(\"start\")}\n              {this.renderAction(\"end\")}\n            </div>\n          )}\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemKeyEvent\")\n  calciteInternalStepperItemKeyEvent(event: CustomEvent<StepperItemKeyEventDetail>): void {\n    const item = event.detail.item;\n    const itemToFocus = event.target as HTMLCalciteStepperItemElement;\n\n    switch (item.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"next\");\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"last\");\n        break;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemRegister\")\n  registerItem(event: CustomEvent): void {\n    const item = event.target as HTMLCalciteStepperItemElement;\n    const { content, position } = event.detail;\n\n    this.itemMap.set(item, { position, content });\n    this.enabledItems = this.filterItems();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemSelect\")\n  updateItem(event: CustomEvent): void {\n    const { position } = event.detail;\n    if (typeof position === \"number\") {\n      this.currentActivePosition = position;\n      this.selectedItem = event.target as HTMLCalciteStepperItemElement;\n    }\n\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  @Listen(\"calciteInternalUserRequestedStepperItemSelect\")\n  handleUserRequestedStepperItemSelect(): void {\n    this.calciteStepperItemChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Set the next `calcite-stepper-item` as active. */\n  @Method()\n  async nextStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the previous `calcite-stepper-item` as active. */\n  @Method()\n  async prevStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /**\n   * Set a specified `calcite-stepper-item` as active.\n   *\n   * @param step\n   */\n  @Method()\n  async goToStep(step: number): Promise<void> {\n    const position = step - 1;\n\n    if (this.currentActivePosition !== position) {\n      this.updateStep(position);\n    }\n  }\n\n  /** Set the first `calcite-stepper-item` as active. */\n  @Method()\n  async startStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(0, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the last `calcite-stepper-item` as active. */\n  @Method()\n  async endStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperElement;\n\n  @State() defaultMessages: StepperMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() currentActivePosition: number;\n\n  @Watch(\"currentActivePosition\")\n  handlePositionChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  private enabledItems: HTMLCalciteStepperItemElement[] = [];\n\n  private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();\n\n  private items: HTMLCalciteStepperItemElement[] = [];\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */\n  private multipleViewMode = false;\n\n  private guid = `calcite-stepper-action-${guid()}`;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private updateItems(): void {\n    this.el.querySelectorAll(\"calcite-stepper-item\").forEach((item) => {\n      item.icon = this.icon;\n      item.numbered = this.numbered;\n      item.layout = this.layout;\n      item.scale = this.scale;\n    });\n  }\n\n  private determineActiveStepper(): void {\n    const { items } = this;\n\n    if (items.length < 2) {\n      return;\n    }\n\n    const { currentActivePosition, layout } = this;\n\n    this.multipleViewMode = layout !== \"horizontal-single\";\n    items.forEach((item, index) => {\n      item.hidden = layout === \"horizontal-single\" && index !== (currentActivePosition || 0);\n    });\n  }\n\n  private getEnabledStepIndex(\n    startIndex: number,\n    direction: \"next\" | \"previous\" = \"next\",\n  ): number | null {\n    const { items, currentActivePosition } = this;\n\n    let newIndex = startIndex;\n\n    while (items[newIndex]?.disabled && this.layout !== \"horizontal-single\") {\n      newIndex = newIndex + (direction === \"previous\" ? -1 : 1);\n    }\n\n    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0\n      ? newIndex\n      : null;\n  }\n\n  private updateStep(position: number): void {\n    this.currentActivePosition = position;\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  private filterItems(): HTMLCalciteStepperItemElement[] {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private setStepperItemNumberingSystem(): void {\n    this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n      item.numberingSystem = this.numberingSystem;\n    });\n  }\n\n  private renderAction(position: Position): VNode {\n    const isPositionStart = position === \"start\";\n    const path = isPositionStart ? \"chevron-left\" : \"chevron-right\";\n    const { currentActivePosition, multipleViewMode, layout } = this;\n    const totalItems = this.items.length;\n    const id = `${this.guid}-${isPositionStart ? \"start\" : \"end\"}`;\n\n    return layout === \"horizontal-single\" && !multipleViewMode ? (\n      <calcite-action\n        alignment=\"center\"\n        appearance=\"transparent\"\n        class={{\n          [CSS.actionIcon]: true,\n        }}\n        compact={true}\n        data-position={position}\n        disabled={\n          (currentActivePosition === 0 && isPositionStart) ||\n          (currentActivePosition === totalItems - 1 && !isPositionStart)\n        }\n        icon={path}\n        iconFlipRtl={true}\n        id={id}\n        onClick={this.handleActionClick}\n        scale={this.scale}\n        text={isPositionStart ? this.messages.previousStep : this.messages.nextStep}\n      />\n    ) : null;\n  }\n\n  private handleActionClick = (event: MouseEvent): void => {\n    const currentActivePosition = this.currentActivePosition;\n    const target = event.target as HTMLCalciteActionElement;\n    if (target.getAttribute(\"data-position\") === \"start\") {\n      this.prevStep();\n    } else {\n      this.nextStep();\n    }\n\n    if (\n      typeof this.currentActivePosition === \"number\" &&\n      currentActivePosition !== this.currentActivePosition &&\n      !this.items[this.currentActivePosition].disabled\n    ) {\n      this.calciteStepperItemChange.emit();\n    }\n  };\n\n  private getFirstEnabledStepperPosition(): number {\n    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);\n\n    if (enabledStepIndex > -1) {\n      return enabledStepIndex;\n    }\n    return 0;\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event).filter(\n      (el) => el?.tagName === \"CALCITE-STEPPER-ITEM\",\n    );\n    this.items = items as HTMLCalciteStepperItemElement[];\n    const spacing = Array(items.length).fill(\"1fr\").join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n    this.setStepperItemNumberingSystem();\n  };\n}\n"],"version":3}

package/dist/components/calcite-switch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0-next.2
+ * v2.8.0-next.4
  */
 import { S as Switch, d as defineCustomElement$1 } from './switch.js';