@esri/calcite-components 2.5.0-next.2 → 2.5.0-next.3

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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { C as ensureId, a as getElementDir, f as focusFirstTabbable } from './dom.js';

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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

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.5.0-next.2
+ * v2.5.0-next.3
  */
 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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

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.5.0-next.2
+ * v2.5.0-next.3
  */
 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';

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.5.0-next.2
+ * v2.5.0-next.3
  */
 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';

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.5.0-next.2
+ * v2.5.0-next.3
  */
 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.5.0-next.2
+ * v2.5.0-next.3
  */
 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';
@@ -21,7 +21,7 @@ const CSS = {
     visuallyHidden: "visually-hidden",
 };
 
-const stepperItemCss = ":host([layout=horizontal][disabled]) .stepper-item-header,:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][disabled]) .stepper-item-header *,:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;--calcite-internal-stepper-action-inline-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;--calcite-internal-stepper-action-inline-size:2.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;--calcite-internal-stepper-action-inline-size:3rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-color-text-3);opacity:var(--calcite-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .stepper-item-description{color:var(--calcite-color-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-color-brand)}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-color-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-color-status-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][selected]) .container .stepper-item-content:not(:empty){margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-status-danger-hover)}:host([layout=horizontal]){display:contents}:host([layout=horizontal]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);outline-color:transparent;grid-row:items}:host([layout=horizontal]) .stepper-item-header:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([layout=horizontal]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal][selected]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal][error]) .stepper-item-header{border-color:var(--calcite-color-status-danger)}:host([layout=horizontal][selected][multiple-view-mode]) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-status-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal]:not([multiple-view-mode])) .stepper-item-header{margin-inline-end:0px;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem)}:host([layout=horizontal][error]:not([multiple-view-mode])) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([layout=horizontal][error]:not([multiple-view-mode])) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host([layout=horizontal][error][selected]:not([multiple-view-mode])),:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal][error][selected]:not([multiple-view-mode])) .stepper-item-heading,:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-heading{color:var(--calcite-color-text-2)}:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-number{color:var(--calcite-color-text-3)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+const stepperItemCss = ":host([layout=horizontal][disabled]) .stepper-item-header,:host([layout=horizontal-single][disabled]) .stepper-item-header,:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][disabled]) .stepper-item-header *,:host([layout=horizontal-single][disabled]) .stepper-item-header *,:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([layout=horizontal-single][disabled]) .stepper-item-header ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;--calcite-internal-stepper-action-inline-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;--calcite-internal-stepper-action-inline-size:2.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;--calcite-internal-stepper-action-inline-size:3rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-color-text-3);opacity:var(--calcite-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .stepper-item-description{color:var(--calcite-color-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-color-brand)}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-color-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-color-status-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][selected]) .container .stepper-item-content:not(:empty){margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-status-danger-hover)}:host([layout=horizontal]),:host([layout=horizontal-single]){display:contents}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header,:host([layout=horizontal-single]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);outline-color:transparent;grid-row:items}:host([layout=horizontal]) .stepper-item-header:focus,:host([layout=horizontal-single]) .stepper-item-header:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal-single]) .stepper-item-header{grid-area:1/1/1/-1}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header,:host([layout=horizontal-single][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal][error]) .stepper-item-header,:host([layout=horizontal-single][error]) .stepper-item-header{border-color:var(--calcite-color-status-danger)}:host([layout=horizontal][selected][multiple-view-mode]) .stepper-item-header,:host([layout=horizontal-single][selected][multiple-view-mode]) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-status-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal-single]) .stepper-item-header{margin-inline-end:0px;box-sizing:border-box;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem)}:host([layout=horizontal-single][error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([layout=horizontal-single][error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host([layout=horizontal-single][error][selected]),:host([layout=horizontal-single][complete][selected]) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal-single][error][selected]) .stepper-item-heading,:host([layout=horizontal-single][complete][selected]) .container .stepper-item-heading{color:var(--calcite-color-text-2)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-number{color:var(--calcite-color-text-3)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends HTMLElement {
     constructor() {

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  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;\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=\"horizontal\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal\"][selected]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]) .stepper-item-header {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  @apply border-color-brand;\n}\n:host([layout=\"horizontal\"][error]) .stepper-item-header {\n  @apply border-color-danger;\n}\n:host([layout=\"horizontal\"][selected][multiple-view-mode]) .stepper-item-header {\n  @apply border-color-brand;\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  @apply border-color-danger-hover;\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\"]:not([multiple-view-mode])) .stepper-item-header {\n  @apply border-none \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\"][error]:not([multiple-view-mode])) .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\"][error][selected]:not([multiple-view-mode])),\n:host([layout=\"horizontal\"][complete][selected]:not([multiple-view-mode])) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal\"][complete][selected]:not([multiple-view-mode])) .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 { Layout, 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} 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 { CSS } from \"./resources\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\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: Extract<\"horizontal\" | \"vertical\", Layout>;\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   * Specifies if the user is viewing one `stepper-item` at a time.\n   * Helps in determining if header region is tabbable.\n   * @internal\n   */\n  @Prop({ reflect: true }) multipleViewMode = false;\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 && this.multipleViewMode ? 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.multipleViewMode || (!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;\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=\"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][multiple-view-mode]),\n:host([layout=\"horizontal-single\"][selected][multiple-view-mode]) {\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 { CSS } from \"./resources\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\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   * Specifies if the user is viewing one `stepper-item` at a time.\n   * Helps in determining if header region is tabbable.\n   * @internal\n   */\n  @Prop({ reflect: true }) multipleViewMode = false;\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 && this.multipleViewMode ? 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.multipleViewMode || (!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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host, readTask } from '@stencil/core/internal/client/index.js';
 import { s as slotChangeGetAssignedElements, v as focusElementInGroup } from './dom.js';
@@ -46,7 +46,7 @@ const CSS = {
     singleView: "single-view",
 };
 
-const stepperCss = ":host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container{display:grid;grid-template-areas:\"items\" \"content\";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}";
+const stepperCss = ":host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:\"items\" \"content\";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLElement {
     constructor() {
@@ -148,7 +148,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { "aria-label": this.messages.label, role: "region" }, h("div", { class: { container: true, [CSS.singleView]: !this.multipleViewMode }, ref: this.setContainerEl }, !this.multipleViewMode && this.layout === "horizontal" && (h("div", { class: { [CSS.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 }))))), h("div", { class: { [CSS.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end")), h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+        return (h(Host, { "aria-label": this.messages.label, role: "region" }, h("div", { class: { container: true, [CSS.singleView]: !this.multipleViewMode }, ref: this.setContainerEl }, this.layout === "horizontal-single" && (h("div", { class: { [CSS.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 }))))), h("div", { class: { [CSS.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end")), h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -267,13 +267,22 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     }
     determineActiveStepper(currentActivePositionChanged = false) {
         const totalItems = this.items.length;
-        if (!this.elWidth || !totalItems || this.layout !== "horizontal" || totalItems === 1) {
+        if (!this.elWidth || !totalItems || this.layout === "vertical" || totalItems === 1) {
             return;
         }
         const activePosition = this.currentActivePosition || 0;
-        const totalMinWidthOfItems = totalItems * this.getMinWidthOfStepperItem();
-        const totalRowGap = (totalItems - 1) * (parseInt(window.getComputedStyle(this.containerEl).rowGap) || 0);
-        if (this.elWidth <= totalMinWidthOfItems + totalRowGap) {
+        if (this.layout === "horizontal") {
+            if (this.multipleViewMode && !currentActivePositionChanged) {
+                return;
+            }
+            this.multipleViewMode = true;
+            this.setGridTemplateColumns(this.items);
+            this.items.forEach((item) => {
+                item.hidden = false;
+                item.multipleViewMode = true;
+            });
+        }
+        else {
             this.multipleViewMode = false;
             this.items.forEach((item, index) => {
                 if (index !== activePosition) {
@@ -285,17 +294,6 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
                 }
             });
         }
-        else if (this.elWidth > totalMinWidthOfItems + totalRowGap) {
-            if (this.multipleViewMode && !currentActivePositionChanged) {
-                return;
-            }
-            this.multipleViewMode = true;
-            this.setGridTemplateColumns(this.items);
-            this.items.forEach((item) => {
-                item.hidden = false;
-                item.multipleViewMode = true;
-            });
-        }
     }
     getEnabledStepIndex(startIndex, direction = "next") {
         const { items, currentActivePosition } = this;
@@ -327,7 +325,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         const { currentActivePosition, multipleViewMode, layout } = this;
         const totalItems = this.items.length;
         const id = `${this.guid}-${isPositionStart ? "start" : "end"}`;
-        return layout === "horizontal" && !multipleViewMode ? (h("calcite-action", { alignment: "center", appearance: "transparent", class: {
+        return layout === "horizontal-single" && !multipleViewMode ? (h("calcite-action", { alignment: "center", appearance: "transparent", class: {
                 [CSS.actionIcon]: true,
             }, compact: true, "data-position": position, disabled: (currentActivePosition === 0 && isPositionStart) ||
                 (currentActivePosition === totalItems - 1 && !isPositionStart), icon: path, iconFlipRtl: true, id: id, onClick: this.handleActionClick, scale: this.scale, text: isPositionStart ? this.messages.previousStep : this.messages.nextStep })) : null;

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

@@ -1 +1 @@
-{"file":"calcite-stepper.js","mappings":"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","names":["CSS"],"sources":["src/components/stepper/functional/step-bar.tsx","src/components/stepper/resources.ts","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["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","export const ITEM_MIN_WIDTH = {\n  s: 120,\n  m: 180,\n  l: 200,\n};\n\nexport 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",":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\"]) .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:host([layout=\"horizontal\"][scale=\"s\"]) .container {\n  gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]) .container {\n  gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\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 { Layout, Position, Scale } from \"../interfaces\";\nimport { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from \"./interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { StepBar } from \"./functional/step-bar\";\nimport { ITEM_MIN_WIDTH, CSS } from \"./resources\";\nimport { guid } from \"../../utils/guid\";\n\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 { 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: Extract<\"horizontal\" | \"vertical\", Layout> = \"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  }\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    this.resizeObserver?.observe(this.containerEl);\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    this.resizeObserver?.disconnect();\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.multipleViewMode }}\n          ref={this.setContainerEl}\n        >\n          {!this.multipleViewMode && this.layout === \"horizontal\" && (\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          <div class={{ [CSS.actionContainer]: true }}>\n            {this.renderAction(\"start\")}\n            {this.renderAction(\"end\")}\n          </div>\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(true);\n    });\n  }\n\n  @State() elWidth: number;\n\n  @Watch(\"elWidth\")\n  handleElWidthChange(): 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 resizeObserver = createObserver(\n    \"resize\",\n    (entries) => (this.elWidth = entries[0].contentRect.width),\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(currentActivePositionChanged = false): void {\n    const totalItems = this.items.length;\n    if (!this.elWidth || !totalItems || this.layout !== \"horizontal\" || totalItems === 1) {\n      return;\n    }\n\n    const activePosition = this.currentActivePosition || 0;\n    const totalMinWidthOfItems = totalItems * this.getMinWidthOfStepperItem();\n    const totalRowGap =\n      (totalItems - 1) * (parseInt(window.getComputedStyle(this.containerEl).rowGap) || 0);\n\n    if (this.elWidth <= totalMinWidthOfItems + totalRowGap) {\n      this.multipleViewMode = false;\n\n      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {\n        if (index !== activePosition) {\n          item.hidden = true;\n        } else {\n          item.hidden = false;\n          item.multipleViewMode = false;\n        }\n      });\n    } else if (this.elWidth > totalMinWidthOfItems + totalRowGap) {\n      if (this.multipleViewMode && !currentActivePositionChanged) {\n        return;\n      }\n\n      this.multipleViewMode = true;\n      this.setGridTemplateColumns(this.items);\n      this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n        item.hidden = false;\n        item.multipleViewMode = true;\n      });\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.multipleViewMode) {\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\" && !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\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    this.setGridTemplateColumns(items);\n    this.setStepperItemNumberingSystem();\n  };\n\n  private setGridTemplateColumns(items: Element[]): void {\n    const minWidth = this.getMinWidthOfStepperItem();\n    const spacing = Array(items.length).fill(`minmax(${minWidth}px, 1fr)`).join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n  }\n\n  private getMinWidthOfStepperItem(): number {\n    return ITEM_MIN_WIDTH[this.scale];\n  }\n}\n"],"version":3}
+{"file":"calcite-stepper.js","mappings":"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","names":["CSS"],"sources":["src/components/stepper/functional/step-bar.tsx","src/components/stepper/resources.ts","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["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","export const ITEM_MIN_WIDTH = {\n  s: 120,\n  m: 180,\n  l: 200,\n};\n\nexport 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",":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 {\n  StepperItemChangeEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"./interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { StepBar } from \"./functional/step-bar\";\nimport { ITEM_MIN_WIDTH, CSS } from \"./resources\";\nimport { guid } from \"../../utils/guid\";\n\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 { 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  }\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    this.resizeObserver?.observe(this.containerEl);\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    this.resizeObserver?.disconnect();\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.multipleViewMode }}\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          <div class={{ [CSS.actionContainer]: true }}>\n            {this.renderAction(\"start\")}\n            {this.renderAction(\"end\")}\n          </div>\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(true);\n    });\n  }\n\n  @State() elWidth: number;\n\n  @Watch(\"elWidth\")\n  handleElWidthChange(): 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 resizeObserver = createObserver(\n    \"resize\",\n    (entries) => (this.elWidth = entries[0].contentRect.width),\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(currentActivePositionChanged = false): void {\n    const totalItems = this.items.length;\n    if (!this.elWidth || !totalItems || this.layout === \"vertical\" || totalItems === 1) {\n      return;\n    }\n\n    const activePosition = this.currentActivePosition || 0;\n\n    if (this.layout === \"horizontal\") {\n      if (this.multipleViewMode && !currentActivePositionChanged) {\n        return;\n      }\n      this.multipleViewMode = true;\n      this.setGridTemplateColumns(this.items);\n      this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n        item.hidden = false;\n        item.multipleViewMode = true;\n      });\n    } else {\n      this.multipleViewMode = false;\n      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {\n        if (index !== activePosition) {\n          item.hidden = true;\n        } else {\n          item.hidden = false;\n          item.multipleViewMode = false;\n        }\n      });\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.multipleViewMode) {\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\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    this.setGridTemplateColumns(items);\n    this.setStepperItemNumberingSystem();\n  };\n\n  private setGridTemplateColumns(items: Element[]): void {\n    const minWidth = this.getMinWidthOfStepperItem();\n    const spacing = Array(items.length).fill(`minmax(${minWidth}px, 1fr)`).join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n  }\n\n  private getMinWidthOfStepperItem(): number {\n    return ITEM_MIN_WIDTH[this.scale];\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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { S as Switch, d as defineCustomElement$1 } from './switch.js';
 

package/dist/components/calcite-tab-nav.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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { T as TabNav, d as defineCustomElement$1 } from './tab-nav.js';
 

package/dist/components/calcite-tab-title.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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { T as TabTitle, d as defineCustomElement$1 } from './tab-title.js';
 

package/dist/components/calcite-tab.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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { T as Tab, d as defineCustomElement$1 } from './tab.js';
 

package/dist/components/calcite-table-cell.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.5.0-next.2
+ * v2.5.0-next.3
  */
 import { T as TableCell, d as defineCustomElement$1 } from './table-cell.js';