@esri/calcite-components 2.12.0 → 2.13.0-next.1

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

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const dom = require('./dom-cdce16d7.js');
-const resources = require('./resources-be7080cd.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const resources = require('./resources-86a2da64.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
 
 const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteStackStyle0 = stackCss;

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

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const dom = require('./dom-cdce16d7.js');
-const observers = require('./observers-3a410d9c.js');
-const guid = require('./guid-a0aaca44.js');
-const locale = require('./locale-987403a2.js');
-const t9n = require('./t9n-0ac48eea.js');
-const interactive = require('./interactive-9db98a91.js');
-const loadable = require('./loadable-8de43def.js');
-require('./resources-8a5c46a3.js');
-require('./browser-89880371.js');
-require('./key-5de2d409.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const observers = require('./observers-498f2676.js');
+const guid = require('./guid-47ff9796.js');
+const locale = require('./locale-38c1927e.js');
+const t9n = require('./t9n-ab4fd9b6.js');
+const interactive = require('./interactive-6e051cdc.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+require('./resources-d2d6a16a.js');
+require('./browser-192fd050.js');
+require('./key-c3b3fd7e.js');
 
 const CSS$2 = {
     actionIcon: "action-icon",
@@ -445,7 +445,6 @@ const StepperItem = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
     }
@@ -466,14 +465,13 @@ const StepperItem = class {
         interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
     render() {
-        return (index.h(index.Host, { key: 'f5ff885f8c94eb0a49e786a798ddfa9a4cadf3c8', "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, index.h(interactive.InteractiveContainer, { key: '628ba67b4d9afdd89589803c8370b916ef2a64f4', disabled: this.disabled }, index.h("div", { key: '0e5a38c093eb3f4d83901cab7528b47af683d0c2', class: CSS.container }, this.complete && (index.h("span", { key: '0b8a733f8d8f5ea684477afaeb3bef9c75204eac', "aria-live": "polite", class: CSS.visuallyHidden }, this.messages.complete)), index.h("div", { key: '33fda93666886ff0a4704a090142061b0710ea2c', class: CSS.stepperItemHeader, ref: (el) => (this.headerEl = el), tabIndex: 
+        return (index.h(index.Host, { key: '26c49f2466341662f4f88d17e04f5908ec3eaabd', "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, index.h(interactive.InteractiveContainer, { key: '0a88428bd7d8f497f7bc3f9e6c4f08be37f16464', disabled: this.disabled }, index.h("div", { key: '3a0fad81f97bc4d38d064a6dbd1063c8115189df', class: CSS.container }, this.complete && (index.h("span", { key: '3a86fd52637117758c9af8586644af124db17189', "aria-live": "polite", class: CSS.visuallyHidden }, this.messages.complete)), index.h("div", { key: '5c1c1bb373229850960d9608d44216b331957f06', class: CSS.stepperItemHeader, ref: (el) => (this.headerEl = el), tabIndex: 
             /* additional tab index logic needed because of display: contents */
-            this.layout === "horizontal" && !this.disabled ? 0 : null }, this.icon ? this.renderIcon() : null, this.numbered ? (index.h("div", { class: CSS.stepperItemNumber }, this.renderNumbers(), ".")) : null, index.h("div", { key: '728402fe3cc024aa27080d0e5b26cad009dc0989', class: CSS.stepperItemHeaderText }, index.h("span", { key: '1be0b998ddf355de099379c2a55d21e0ffe46610', class: CSS.stepperItemHeading }, this.heading), index.h("span", { key: '20099dd36c9a72c5712b42761ecdf3592ea4a4e8', class: CSS.stepperItemDescription }, this.description))), index.h("div", { key: 'be67567d400cfea65bf9fcc8950daff2eea80c8b', class: CSS.stepperItemContent }, index.h("slot", { key: 'd0ccc7d7b5b7caa325a216c293aecfe6d3e983bb' }))))));
+            this.layout === "horizontal" && !this.disabled ? 0 : null }, this.icon ? this.renderIcon() : null, this.numbered ? (index.h("div", { class: CSS.stepperItemNumber }, this.renderNumbers(), ".")) : null, index.h("div", { key: '5a4c9f5796ac4bcd2940e48dd798f60e4d669b5a', class: CSS.stepperItemHeaderText }, index.h("span", { key: 'ffd5308d3c71e6bfbb3b9f1e9723442f087b4da2', class: CSS.stepperItemHeading }, this.heading), index.h("span", { key: '6b8f78366ec70b9f407949e3ed92164e2f297bd7', class: CSS.stepperItemDescription }, this.description))), index.h("div", { key: '83c6c57e396761e571e1e53e22c9e8cdadfa8354', class: CSS.stepperItemContent }, index.h("slot", { key: '68457bebc15aab7d2cd0fe3b8b9afbfb3e0141c4' }))))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -1 +1 @@
-{"file":"calcite-stepper.calcite-stepper-item.entry.cjs.js","mappings":"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","names":["CSS","h","createObserver","guid","slotChangeGetAssignedElements","connectMessages","connectLocalized","setUpMessages","disconnectMessages","disconnectLocalized","Host","index","focusElementInGroup","updateMessages","readTask","locale","numberStringFormatter","connectInteractive","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","disconnectInteractive","InteractiveContainer","componentFocusable"],"sources":["src/components/stepper/resources.ts","src/components/stepper/functional/step-bar.tsx","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx","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  actionIcon: \"action-icon\",\n  actionIconStart: \"action-icon--start\",\n  actionIconEnd: \"action-icon--end\",\n  actionContainer: \"action-container\",\n  stepBarContainer: \"step-bar-container\",\n  singleView: \"single-view\",\n};\n","import { FunctionalComponent, h, VNode } 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}): VNode => (\n  <svg\n    class={{\n      [CSS.stepBar]: true,\n    }}\n    key={key}\n  >\n    <rect\n      class={{\n        [CSS.stepBarActive]: active,\n        [CSS.stepBarComplete]: complete,\n        [CSS.stepBarDisabled]: disabled,\n        [CSS.stepBarError]: error,\n        [CSS.stepBarInActive]: true,\n      }}\n      width=\"100%\"\n      x=\"0\"\n      y=\"0\"\n    />\n  </svg>\n);\n",":host([scale=\"s\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.11\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.13\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.16\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.3\");\n}\n\n:host {\n  @apply flex;\n}\n\n.container {\n  @apply relative\n    flex\n    w-full\n    min-w-fit\n    flex-row\n    flex-wrap\n    items-stretch\n    justify-between;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply flex-auto flex-col;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .container {\n    display: grid;\n    // grid-templates-columns are dynamically generated\n    // grid-templates-rows are dynamically generated\n    grid-template-areas:\n      \"items\"\n      \"content\";\n    gap: theme(\"spacing.2\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"s\"]),\n:host([layout=\"horizontal-single\"][scale=\"s\"]) {\n  .container {\n    gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]),\n:host([layout=\"horizontal-single\"][scale=\"l\"]) {\n  .container {\n    gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"]) .container.single-view {\n  @apply flex  grid-cols-none;\n}\n\n.action-icon {\n  @apply flex relative grow-0;\n  block-size: var(--calcite-internal-stepper-action-block-size);\n  inline-size: var(--calcite-internal-stepper-action-inline-size);\n}\n\n.action-container {\n  @apply absolute flex justify-between;\n  padding-block: 0.25rem;\n  inline-size: 100%;\n}\n\n@mixin step-bar {\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 step-bar();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n  readTask,\n} from \"@stencil/core\";\nimport { focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { Position, Scale } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { CSS } from \"./resources\";\nimport { StepBar } from \"./functional/step-bar\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"./interfaces\";\nimport { StepperMessages } from \"./assets/stepper/t9n\";\n\n/**\n * @slot - A slot for adding `calcite-stepper-item` elements.\n */\n@Component({\n  tag: \"calcite-stepper\",\n  styleUrl: \"stepper.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Stepper implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) icon = false;\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: StepperLayout = \"horizontal\";\n\n  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) numbered = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"icon\")\n  @Watch(\"layout\")\n  @Watch(\"numbered\")\n  @Watch(\"scale\")\n  handleItemPropChange(): void {\n    this.updateItems();\n    this.determineActiveStepper();\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperMessages;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.setStepperItemNumberingSystem();\n  }\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   */\n  @Event({ cancelable: false }) calciteStepperChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @deprecated use `calciteStepperChange` instead or `calciteStepperItemChange` on items instead.\n   */\n  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateItems();\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    // if no stepper items are set as active, default to the first one\n    if (typeof this.currentActivePosition !== \"number\") {\n      const enabledStepIndex = this.getFirstEnabledStepperPosition();\n\n      if (enabledStepIndex === 0) {\n        this.currentActivePosition = enabledStepIndex;\n      }\n\n      this.calciteInternalStepperItemChange.emit({\n        position: enabledStepIndex,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    disconnectMessages(this);\n    disconnectLocalized(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  render(): VNode {\n    return (\n      <Host aria-label={this.messages.label} role=\"region\">\n        <div\n          class={{ container: true, [CSS.singleView]: this.layout === \"horizontal-single\" }}\n          ref={this.setContainerEl}\n        >\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.stepBarContainer]: true }}>\n              {this.items.map((item, index) => (\n                <StepBar\n                  active={index === this.currentActivePosition}\n                  complete={item.complete && index !== this.currentActivePosition && !item.error}\n                  disabled={item.disabled && index !== this.currentActivePosition}\n                  error={item.error && index !== this.currentActivePosition}\n                  key={index}\n                />\n              ))}\n            </div>\n          )}\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.actionContainer]: true }}>\n              {this.renderAction(\"start\")}\n              {this.renderAction(\"end\")}\n            </div>\n          )}\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemKeyEvent\")\n  calciteInternalStepperItemKeyEvent(event: CustomEvent<StepperItemKeyEventDetail>): void {\n    const item = event.detail.item;\n    const itemToFocus = event.target as HTMLCalciteStepperItemElement;\n\n    switch (item.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"next\");\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"last\");\n        break;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemRegister\")\n  registerItem(event: CustomEvent): void {\n    const item = event.target as HTMLCalciteStepperItemElement;\n    const { content, position } = event.detail;\n\n    this.itemMap.set(item, { position, content });\n    this.enabledItems = this.filterItems();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemSelect\")\n  updateItem(event: CustomEvent): void {\n    const { position } = event.detail;\n    if (typeof position === \"number\") {\n      this.currentActivePosition = position;\n      this.selectedItem = event.target as HTMLCalciteStepperItemElement;\n    }\n\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  @Listen(\"calciteStepperItemSelect\")\n  handleItemSelect(): void {\n    this.emitItemSelect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Set the next `calcite-stepper-item` as active. */\n  @Method()\n  async nextStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the previous `calcite-stepper-item` as active. */\n  @Method()\n  async prevStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /**\n   * Set a specified `calcite-stepper-item` as active.\n   *\n   * @param step\n   */\n  @Method()\n  async goToStep(step: number): Promise<void> {\n    const position = step - 1;\n\n    if (this.currentActivePosition !== position) {\n      this.updateStep(position);\n    }\n  }\n\n  /** Set the first `calcite-stepper-item` as active. */\n  @Method()\n  async startStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(0, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the last `calcite-stepper-item` as active. */\n  @Method()\n  async endStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperElement;\n\n  @State() defaultMessages: StepperMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() currentActivePosition: number;\n\n  @Watch(\"currentActivePosition\")\n  handlePositionChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  private enabledItems: HTMLCalciteStepperItemElement[] = [];\n\n  private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();\n\n  private items: HTMLCalciteStepperItemElement[] = [];\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */\n  private multipleViewMode = false;\n\n  private guid = `calcite-stepper-action-${guid()}`;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private emitItemSelect(): void {\n    this.calciteStepperItemChange.emit();\n    this.calciteStepperChange.emit();\n  }\n\n  private updateItems(): void {\n    this.el.querySelectorAll(\"calcite-stepper-item\").forEach((item) => {\n      item.icon = this.icon;\n      item.numbered = this.numbered;\n      item.layout = this.layout;\n      item.scale = this.scale;\n    });\n  }\n\n  private determineActiveStepper(): void {\n    const { items } = this;\n\n    if (items.length < 2) {\n      return;\n    }\n\n    const { currentActivePosition, layout } = this;\n\n    this.multipleViewMode = layout !== \"horizontal-single\";\n    items.forEach((item, index) => {\n      item.hidden = layout === \"horizontal-single\" && index !== (currentActivePosition || 0);\n    });\n  }\n\n  private getEnabledStepIndex(\n    startIndex: number,\n    direction: \"next\" | \"previous\" = \"next\",\n  ): number | null {\n    const { items, currentActivePosition } = this;\n\n    let newIndex = startIndex;\n\n    while (items[newIndex]?.disabled && this.layout !== \"horizontal-single\") {\n      newIndex = newIndex + (direction === \"previous\" ? -1 : 1);\n    }\n\n    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0\n      ? newIndex\n      : null;\n  }\n\n  private updateStep(position: number): void {\n    this.currentActivePosition = position;\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  private filterItems(): HTMLCalciteStepperItemElement[] {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private setStepperItemNumberingSystem(): void {\n    this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n      item.numberingSystem = this.numberingSystem;\n    });\n  }\n\n  private renderAction(position: Position): VNode {\n    const isPositionStart = position === \"start\";\n    const path = isPositionStart ? \"chevron-left\" : \"chevron-right\";\n    const { currentActivePosition, multipleViewMode, layout } = this;\n    const totalItems = this.items.length;\n    const id = `${this.guid}-${isPositionStart ? \"start\" : \"end\"}`;\n\n    return layout === \"horizontal-single\" && !multipleViewMode ? (\n      <calcite-action\n        alignment=\"center\"\n        appearance=\"transparent\"\n        class={{\n          [CSS.actionIcon]: true,\n        }}\n        compact={true}\n        data-position={position}\n        disabled={\n          (currentActivePosition === 0 && isPositionStart) ||\n          (currentActivePosition === totalItems - 1 && !isPositionStart)\n        }\n        icon={path}\n        iconFlipRtl={true}\n        id={id}\n        onClick={this.handleActionClick}\n        scale={this.scale}\n        text={isPositionStart ? this.messages.previousStep : this.messages.nextStep}\n      />\n    ) : null;\n  }\n\n  private handleActionClick = (event: MouseEvent): void => {\n    const currentActivePosition = this.currentActivePosition;\n    const target = event.target as HTMLCalciteActionElement;\n    if (target.getAttribute(\"data-position\") === \"start\") {\n      this.prevStep();\n    } else {\n      this.nextStep();\n    }\n\n    if (\n      typeof this.currentActivePosition === \"number\" &&\n      currentActivePosition !== this.currentActivePosition &&\n      !this.items[this.currentActivePosition].disabled\n    ) {\n      this.emitItemSelect();\n    }\n  };\n\n  private getFirstEnabledStepperPosition(): number {\n    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);\n\n    if (enabledStepIndex > -1) {\n      return enabledStepIndex;\n    }\n    return 0;\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event).filter(\n      (el) => el?.tagName === \"CALCITE-STEPPER-ITEM\",\n    );\n    this.items = items as HTMLCalciteStepperItemElement[];\n    const spacing = Array(items.length).fill(\"1fr\").join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n    this.setStepperItemNumberingSystem();\n  };\n}\n","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}\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  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}\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}\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  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\"]) {\n  @apply w-full;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply border-color-3\n  mx-0\n  mt-0\n  flex-auto\n  border-t-0\n  border-solid\n  py-0;\n  border-inline-start-width: theme(\"borderWidth.2\");\n  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);\n\n  & .stepper-item-icon {\n    @apply order-3 mt-px mb-0;\n    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);\n    margin-inline-start: theme(\"margin.auto\");\n  }\n  & .stepper-item-header {\n    padding-inline-end: theme(\"padding.0\");\n  }\n  & .stepper-item-content {\n    @apply p-0;\n  }\n}\n\n:host([layout=\"vertical\"][complete]) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][complete]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][complete]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-brand;\n}\n:host([layout=\"vertical\"][error]) .container {\n  @apply border-color-danger;\n}\n:host([layout=\"vertical\"][selected]) .container {\n  @apply border-color-brand;\n\n  & .stepper-item-content:not(:empty) {\n    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);\n  }\n}\n:host([layout=\"vertical\"]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"]:focus:not([disabled]):not([selected])) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][error]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-danger-hover;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  display: contents;\n\n  .container {\n    display: contents;\n  }\n\n  .stepper-item-header {\n    @apply border-color-3\n    border-0\n    border-solid\n    border-t-2\n    focus-base;\n    grid-row: items;\n\n    &:focus {\n      @apply focus-outset duration-0;\n    }\n  }\n\n  .stepper-item-content {\n    @apply cursor-auto duration-150 ease-in-out;\n    padding-block: 0;\n    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n    text-align: start;\n  }\n}\n\n:host([layout=\"horizontal\"][disabled]),\n:host([layout=\"horizontal-single\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-header {\n    grid-area: 1 / 1 / 1 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]),\n:host([layout=\"horizontal-single\"][complete]) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"][error]),\n:host([layout=\"horizontal-single\"][error]) {\n  .stepper-item-header {\n    @apply border-color-danger;\n  }\n}\n:host([layout=\"horizontal\"][selected]),\n:host([layout=\"horizontal-single\"][selected]) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-danger-hover;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .container {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus),\n  :host(:focus-visible) {\n    outline-color: canvasText;\n  }\n\n  :host([selected]) .container {\n    border-block-start-color: highlight;\n    & .stepper-item-number {\n      color: highlight;\n    }\n    & .stepper-item-icon {\n      color: highlight;\n    }\n  }\n\n  :host([layout=\"vertical\"][selected]) .container {\n    border-color: highlight;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) .stepper-item-header {\n  @apply border-none box-border\n  me-0;\n  inline-size: 100%;\n  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);\n}\n\n:host([layout=\"horizontal-single\"][error]) .container {\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host([layout=\"horizontal-single\"][error][selected]),\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  & .stepper-item-icon {\n    @apply opacity-disabled;\n  }\n  & .stepper-item-number {\n    @apply text-color-3;\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { Scale } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"../stepper/interfaces\";\nimport {\n  numberStringFormatter,\n  LocalizedComponent,\n  disconnectLocalized,\n  connectLocalized,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  setUpLoadableComponent,\n  setComponentLoaded,\n  LoadableComponent,\n  componentFocusable,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS } from \"./resources\";\nimport { StepperItemMessages } from \"./assets/stepper-item/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-stepper-item\",\n  styleUrl: \"stepper-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class StepperItem\n  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n  }\n\n  /** When `true`, the step has been completed. */\n  @Prop({ reflect: true }) complete = false;\n\n  /** When `true`, the component contains an error that requires resolution from the user. */\n  @Prop({ reflect: true }) error = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text. */\n  @Prop() heading: string;\n\n  /** A description for the component. Displays below the header text. */\n  @Prop() description: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * @internal\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  // watch for removal of disabled to register step\n  @Watch(\"disabled\")\n  disabledWatcher(): void {\n    this.registerStepperItem();\n  }\n\n  /**\n   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() icon = false;\n\n  /**\n   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: StepperLayout;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperItemMessages;\n\n  /**\n   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() numbered = false;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() defaultMessages: StepperItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(locale: string): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   */\n  @Event({ cancelable: false }) calciteStepperItemSelect: EventEmitter<void>;\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              ref={(el) => (this.headerEl = el)}\n              tabIndex={\n                /* additional tab index logic needed because of display: contents */\n                this.layout === \"horizontal\" && !this.disabled ? 0 : null\n              }\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: IconNameOrString = \"circle\";\n\n    if (this.selected && (this.layout !== \"horizontal-single\" || (!this.error && !this.complete))) {\n      path = \"circleF\";\n    } else if (this.error) {\n      path = \"exclamationMarkCircleF\";\n    } else if (this.complete) {\n      path = \"checkCircleF\";\n    }\n\n    return (\n      <calcite-icon class=\"stepper-item-icon\" flipRtl={this.iconFlipRtl} icon={path} scale=\"s\" />\n    );\n  }\n\n  private determineSelectedItem(): void {\n    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;\n  }\n\n  private registerStepperItem(): void {\n    this.calciteInternalStepperItemRegister.emit({\n      position: this.itemPosition,\n    });\n  }\n\n  private handleItemClick = (event: MouseEvent): void => {\n    if (\n      this.disabled ||\n      (this.layout === \"horizontal\" &&\n        event\n          .composedPath()\n          .some((el) => (el as HTMLElement).classList?.contains(\"stepper-item-content\")))\n    ) {\n      return;\n    }\n\n    this.emitUserRequestedItem();\n  };\n\n  private emitUserRequestedItem = (): void => {\n    this.emitRequestedItem();\n    if (!this.disabled) {\n      this.calciteStepperItemSelect.emit();\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.calcite-stepper-item.entry.cjs.js","mappings":"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","names":["CSS","h","createObserver","guid","slotChangeGetAssignedElements","connectMessages","connectLocalized","setUpMessages","disconnectMessages","disconnectLocalized","Host","index","focusElementInGroup","updateMessages","readTask","locale","numberStringFormatter","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","InteractiveContainer","componentFocusable"],"sources":["src/components/stepper/resources.ts","src/components/stepper/functional/step-bar.tsx","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx","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  actionIcon: \"action-icon\",\n  actionIconStart: \"action-icon--start\",\n  actionIconEnd: \"action-icon--end\",\n  actionContainer: \"action-container\",\n  stepBarContainer: \"step-bar-container\",\n  singleView: \"single-view\",\n};\n","import { FunctionalComponent, h, VNode } 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}): VNode => (\n  <svg\n    class={{\n      [CSS.stepBar]: true,\n    }}\n    key={key}\n  >\n    <rect\n      class={{\n        [CSS.stepBarActive]: active,\n        [CSS.stepBarComplete]: complete,\n        [CSS.stepBarDisabled]: disabled,\n        [CSS.stepBarError]: error,\n        [CSS.stepBarInActive]: true,\n      }}\n      width=\"100%\"\n      x=\"0\"\n      y=\"0\"\n    />\n  </svg>\n);\n",":host([scale=\"s\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.11\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.13\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.16\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.3\");\n}\n\n:host {\n  @apply flex;\n}\n\n.container {\n  @apply relative\n    flex\n    w-full\n    min-w-fit\n    flex-row\n    flex-wrap\n    items-stretch\n    justify-between;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply flex-auto flex-col;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .container {\n    display: grid;\n    // grid-templates-columns are dynamically generated\n    // grid-templates-rows are dynamically generated\n    grid-template-areas:\n      \"items\"\n      \"content\";\n    gap: theme(\"spacing.2\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"s\"]),\n:host([layout=\"horizontal-single\"][scale=\"s\"]) {\n  .container {\n    gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]),\n:host([layout=\"horizontal-single\"][scale=\"l\"]) {\n  .container {\n    gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"]) .container.single-view {\n  @apply flex  grid-cols-none;\n}\n\n.action-icon {\n  @apply flex relative grow-0;\n  block-size: var(--calcite-internal-stepper-action-block-size);\n  inline-size: var(--calcite-internal-stepper-action-inline-size);\n}\n\n.action-container {\n  @apply absolute flex justify-between;\n  padding-block: 0.25rem;\n  inline-size: 100%;\n}\n\n@mixin step-bar {\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 step-bar();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n  readTask,\n} from \"@stencil/core\";\nimport { focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { Position, Scale } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { CSS } from \"./resources\";\nimport { StepBar } from \"./functional/step-bar\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"./interfaces\";\nimport { StepperMessages } from \"./assets/stepper/t9n\";\n\n/**\n * @slot - A slot for adding `calcite-stepper-item` elements.\n */\n@Component({\n  tag: \"calcite-stepper\",\n  styleUrl: \"stepper.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Stepper implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) icon = false;\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: StepperLayout = \"horizontal\";\n\n  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) numbered = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"icon\")\n  @Watch(\"layout\")\n  @Watch(\"numbered\")\n  @Watch(\"scale\")\n  handleItemPropChange(): void {\n    this.updateItems();\n    this.determineActiveStepper();\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperMessages;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.setStepperItemNumberingSystem();\n  }\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   */\n  @Event({ cancelable: false }) calciteStepperChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @deprecated use `calciteStepperChange` instead or `calciteStepperItemChange` on items instead.\n   */\n  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateItems();\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    // if no stepper items are set as active, default to the first one\n    if (typeof this.currentActivePosition !== \"number\") {\n      const enabledStepIndex = this.getFirstEnabledStepperPosition();\n\n      if (enabledStepIndex === 0) {\n        this.currentActivePosition = enabledStepIndex;\n      }\n\n      this.calciteInternalStepperItemChange.emit({\n        position: enabledStepIndex,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    disconnectMessages(this);\n    disconnectLocalized(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  render(): VNode {\n    return (\n      <Host aria-label={this.messages.label} role=\"region\">\n        <div\n          class={{ container: true, [CSS.singleView]: this.layout === \"horizontal-single\" }}\n          ref={this.setContainerEl}\n        >\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.stepBarContainer]: true }}>\n              {this.items.map((item, index) => (\n                <StepBar\n                  active={index === this.currentActivePosition}\n                  complete={item.complete && index !== this.currentActivePosition && !item.error}\n                  disabled={item.disabled && index !== this.currentActivePosition}\n                  error={item.error && index !== this.currentActivePosition}\n                  key={index}\n                />\n              ))}\n            </div>\n          )}\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.actionContainer]: true }}>\n              {this.renderAction(\"start\")}\n              {this.renderAction(\"end\")}\n            </div>\n          )}\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemKeyEvent\")\n  calciteInternalStepperItemKeyEvent(event: CustomEvent<StepperItemKeyEventDetail>): void {\n    const item = event.detail.item;\n    const itemToFocus = event.target as HTMLCalciteStepperItemElement;\n\n    switch (item.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"next\");\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"last\");\n        break;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemRegister\")\n  registerItem(event: CustomEvent): void {\n    const item = event.target as HTMLCalciteStepperItemElement;\n    const { content, position } = event.detail;\n\n    this.itemMap.set(item, { position, content });\n    this.enabledItems = this.filterItems();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemSelect\")\n  updateItem(event: CustomEvent): void {\n    const { position } = event.detail;\n    if (typeof position === \"number\") {\n      this.currentActivePosition = position;\n      this.selectedItem = event.target as HTMLCalciteStepperItemElement;\n    }\n\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  @Listen(\"calciteStepperItemSelect\")\n  handleItemSelect(): void {\n    this.emitItemSelect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Set the next `calcite-stepper-item` as active. */\n  @Method()\n  async nextStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the previous `calcite-stepper-item` as active. */\n  @Method()\n  async prevStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /**\n   * Set a specified `calcite-stepper-item` as active.\n   *\n   * @param step\n   */\n  @Method()\n  async goToStep(step: number): Promise<void> {\n    const position = step - 1;\n\n    if (this.currentActivePosition !== position) {\n      this.updateStep(position);\n    }\n  }\n\n  /** Set the first `calcite-stepper-item` as active. */\n  @Method()\n  async startStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(0, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the last `calcite-stepper-item` as active. */\n  @Method()\n  async endStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperElement;\n\n  @State() defaultMessages: StepperMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() currentActivePosition: number;\n\n  @Watch(\"currentActivePosition\")\n  handlePositionChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  private enabledItems: HTMLCalciteStepperItemElement[] = [];\n\n  private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();\n\n  private items: HTMLCalciteStepperItemElement[] = [];\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */\n  private multipleViewMode = false;\n\n  private guid = `calcite-stepper-action-${guid()}`;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private emitItemSelect(): void {\n    this.calciteStepperItemChange.emit();\n    this.calciteStepperChange.emit();\n  }\n\n  private updateItems(): void {\n    this.el.querySelectorAll(\"calcite-stepper-item\").forEach((item) => {\n      item.icon = this.icon;\n      item.numbered = this.numbered;\n      item.layout = this.layout;\n      item.scale = this.scale;\n    });\n  }\n\n  private determineActiveStepper(): void {\n    const { items } = this;\n\n    if (items.length < 2) {\n      return;\n    }\n\n    const { currentActivePosition, layout } = this;\n\n    this.multipleViewMode = layout !== \"horizontal-single\";\n    items.forEach((item, index) => {\n      item.hidden = layout === \"horizontal-single\" && index !== (currentActivePosition || 0);\n    });\n  }\n\n  private getEnabledStepIndex(\n    startIndex: number,\n    direction: \"next\" | \"previous\" = \"next\",\n  ): number | null {\n    const { items, currentActivePosition } = this;\n\n    let newIndex = startIndex;\n\n    while (items[newIndex]?.disabled && this.layout !== \"horizontal-single\") {\n      newIndex = newIndex + (direction === \"previous\" ? -1 : 1);\n    }\n\n    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0\n      ? newIndex\n      : null;\n  }\n\n  private updateStep(position: number): void {\n    this.currentActivePosition = position;\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  private filterItems(): HTMLCalciteStepperItemElement[] {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private setStepperItemNumberingSystem(): void {\n    this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n      item.numberingSystem = this.numberingSystem;\n    });\n  }\n\n  private renderAction(position: Position): VNode {\n    const isPositionStart = position === \"start\";\n    const path = isPositionStart ? \"chevron-left\" : \"chevron-right\";\n    const { currentActivePosition, multipleViewMode, layout } = this;\n    const totalItems = this.items.length;\n    const id = `${this.guid}-${isPositionStart ? \"start\" : \"end\"}`;\n\n    return layout === \"horizontal-single\" && !multipleViewMode ? (\n      <calcite-action\n        alignment=\"center\"\n        appearance=\"transparent\"\n        class={{\n          [CSS.actionIcon]: true,\n        }}\n        compact={true}\n        data-position={position}\n        disabled={\n          (currentActivePosition === 0 && isPositionStart) ||\n          (currentActivePosition === totalItems - 1 && !isPositionStart)\n        }\n        icon={path}\n        iconFlipRtl={true}\n        id={id}\n        onClick={this.handleActionClick}\n        scale={this.scale}\n        text={isPositionStart ? this.messages.previousStep : this.messages.nextStep}\n      />\n    ) : null;\n  }\n\n  private handleActionClick = (event: MouseEvent): void => {\n    const currentActivePosition = this.currentActivePosition;\n    const target = event.target as HTMLCalciteActionElement;\n    if (target.getAttribute(\"data-position\") === \"start\") {\n      this.prevStep();\n    } else {\n      this.nextStep();\n    }\n\n    if (\n      typeof this.currentActivePosition === \"number\" &&\n      currentActivePosition !== this.currentActivePosition &&\n      !this.items[this.currentActivePosition].disabled\n    ) {\n      this.emitItemSelect();\n    }\n  };\n\n  private getFirstEnabledStepperPosition(): number {\n    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);\n\n    if (enabledStepIndex > -1) {\n      return enabledStepIndex;\n    }\n    return 0;\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event).filter(\n      (el) => el?.tagName === \"CALCITE-STEPPER-ITEM\",\n    );\n    this.items = items as HTMLCalciteStepperItemElement[];\n    const spacing = Array(items.length).fill(\"1fr\").join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n    this.setStepperItemNumberingSystem();\n  };\n}\n","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}\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  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}\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}\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  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\"]) {\n  @apply w-full;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply border-color-3\n  mx-0\n  mt-0\n  flex-auto\n  border-t-0\n  border-solid\n  py-0;\n  border-inline-start-width: theme(\"borderWidth.2\");\n  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);\n\n  & .stepper-item-icon {\n    @apply order-3 mt-px mb-0;\n    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);\n    margin-inline-start: theme(\"margin.auto\");\n  }\n  & .stepper-item-header {\n    padding-inline-end: theme(\"padding.0\");\n  }\n  & .stepper-item-content {\n    @apply p-0;\n  }\n}\n\n:host([layout=\"vertical\"][complete]) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][complete]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][complete]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-brand;\n}\n:host([layout=\"vertical\"][error]) .container {\n  @apply border-color-danger;\n}\n:host([layout=\"vertical\"][selected]) .container {\n  @apply border-color-brand;\n\n  & .stepper-item-content:not(:empty) {\n    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);\n  }\n}\n:host([layout=\"vertical\"]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"]:focus:not([disabled]):not([selected])) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][error]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-danger-hover;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  display: contents;\n\n  .container {\n    display: contents;\n  }\n\n  .stepper-item-header {\n    @apply border-color-3\n    border-0\n    border-solid\n    border-t-2\n    focus-base;\n    grid-row: items;\n\n    &:focus {\n      @apply focus-outset duration-0;\n    }\n  }\n\n  .stepper-item-content {\n    @apply cursor-auto duration-150 ease-in-out;\n    padding-block: 0;\n    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n    text-align: start;\n  }\n}\n\n:host([layout=\"horizontal\"][disabled]),\n:host([layout=\"horizontal-single\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-header {\n    grid-area: 1 / 1 / 1 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]),\n:host([layout=\"horizontal-single\"][complete]) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"][error]),\n:host([layout=\"horizontal-single\"][error]) {\n  .stepper-item-header {\n    @apply border-color-danger;\n  }\n}\n:host([layout=\"horizontal\"][selected]),\n:host([layout=\"horizontal-single\"][selected]) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-danger-hover;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .container {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus),\n  :host(:focus-visible) {\n    outline-color: canvasText;\n  }\n\n  :host([selected]) .container {\n    border-block-start-color: highlight;\n    & .stepper-item-number {\n      color: highlight;\n    }\n    & .stepper-item-icon {\n      color: highlight;\n    }\n  }\n\n  :host([layout=\"vertical\"][selected]) .container {\n    border-color: highlight;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) .stepper-item-header {\n  @apply border-none box-border\n  me-0;\n  inline-size: 100%;\n  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);\n}\n\n:host([layout=\"horizontal-single\"][error]) .container {\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host([layout=\"horizontal-single\"][error][selected]),\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  & .stepper-item-icon {\n    @apply opacity-disabled;\n  }\n  & .stepper-item-number {\n    @apply text-color-3;\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { Scale } from \"../interfaces\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"../stepper/interfaces\";\nimport {\n  numberStringFormatter,\n  LocalizedComponent,\n  disconnectLocalized,\n  connectLocalized,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  setUpLoadableComponent,\n  setComponentLoaded,\n  LoadableComponent,\n  componentFocusable,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS } from \"./resources\";\nimport { StepperItemMessages } from \"./assets/stepper-item/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-stepper-item\",\n  styleUrl: \"stepper-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class StepperItem\n  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n  }\n\n  /** When `true`, the step has been completed. */\n  @Prop({ reflect: true }) complete = false;\n\n  /** When `true`, the component contains an error that requires resolution from the user. */\n  @Prop({ reflect: true }) error = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text. */\n  @Prop() heading: string;\n\n  /** A description for the component. Displays below the header text. */\n  @Prop() description: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * @internal\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  // watch for removal of disabled to register step\n  @Watch(\"disabled\")\n  disabledWatcher(): void {\n    this.registerStepperItem();\n  }\n\n  /**\n   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() icon = false;\n\n  /**\n   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: StepperLayout;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperItemMessages;\n\n  /**\n   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() numbered = false;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() defaultMessages: StepperItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(locale: string): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   */\n  @Event({ cancelable: false }) calciteStepperItemSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\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    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              ref={(el) => (this.headerEl = el)}\n              tabIndex={\n                /* additional tab index logic needed because of display: contents */\n                this.layout === \"horizontal\" && !this.disabled ? 0 : null\n              }\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: IconNameOrString = \"circle\";\n\n    if (this.selected && (this.layout !== \"horizontal-single\" || (!this.error && !this.complete))) {\n      path = \"circleF\";\n    } else if (this.error) {\n      path = \"exclamationMarkCircleF\";\n    } else if (this.complete) {\n      path = \"checkCircleF\";\n    }\n\n    return (\n      <calcite-icon class=\"stepper-item-icon\" flipRtl={this.iconFlipRtl} icon={path} scale=\"s\" />\n    );\n  }\n\n  private determineSelectedItem(): void {\n    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;\n  }\n\n  private registerStepperItem(): void {\n    this.calciteInternalStepperItemRegister.emit({\n      position: this.itemPosition,\n    });\n  }\n\n  private handleItemClick = (event: MouseEvent): void => {\n    if (\n      this.disabled ||\n      (this.layout === \"horizontal\" &&\n        event\n          .composedPath()\n          .some((el) => (el as HTMLElement).classList?.contains(\"stepper-item-content\")))\n    ) {\n      return;\n    }\n\n    this.emitUserRequestedItem();\n  };\n\n  private emitUserRequestedItem = (): void => {\n    this.emitRequestedItem();\n    if (!this.disabled) {\n      this.calciteStepperItemSelect.emit();\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/cjs/calcite-switch.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const dom = require('./dom-cdce16d7.js');
-const form = require('./form-1b8877c5.js');
-const interactive = require('./interactive-9db98a91.js');
-const key = require('./key-5de2d409.js');
-const label = require('./label-37a32e86.js');
-const loadable = require('./loadable-8de43def.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
-require('./browser-89880371.js');
-require('./component-c5bbc3ae.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const form = require('./form-f86aab9b.js');
+const interactive = require('./interactive-6e051cdc.js');
+const key = require('./key-c3b3fd7e.js');
+const label = require('./label-66e041c4.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
+require('./component-96607c76.js');
+require('./browser-192fd050.js');
 
 const CSS = {
     container: "container",
@@ -25,7 +25,7 @@ const CSS = {
     handle: "handle",
 };
 
-const switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}:host(:focus) .track{outline:2px solid var(--calcite-ui-focus-color, 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          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}.container:hover .handle,:host(:focus) .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]) .container:hover .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}.container:focus .track{outline:2px solid var(--calcite-ui-focus-color, 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          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}.container:hover .handle,.container:focus .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]) .container:hover .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteSwitchStyle0 = switchCss;
 
 const Switch = class {
@@ -89,7 +89,6 @@ const Switch = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         label.connectLabel(this);
         form.connectForm(this);
     }
@@ -100,7 +99,6 @@ const Switch = class {
         loadable.setComponentLoaded(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         label.disconnectLabel(this);
         form.disconnectForm(this);
     }
@@ -113,7 +111,7 @@ const Switch = class {
     //
     // --------------------------------------------------------------------------
     render() {
-        return (index.h(index.Host, { key: '2e5e3a9e0dcc88431502cd2bbea8323a1898ef9a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '73c50c102fe522422e08835b653dc8651eca6bae', disabled: this.disabled }, index.h("div", { key: 'f0020b33ecee02265dcd4d712f729638ccabb14e', "aria-checked": dom.toAriaBoolean(this.checked), "aria-label": label.getLabelText(this), class: CSS.container, ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, index.h("div", { key: '03b2f583e888ea429025b74ca43b22a4dd957ee5', class: CSS.track }, index.h("div", { key: '3045c61b33731f692ecf201cb6ffea2a164f6297', class: CSS.handle })), index.h(form.HiddenFormInputSlot, { key: 'f1a1c1bda4e85b357936c962175e0942dc0b0001', component: this })))));
+        return (index.h(index.Host, { key: '96dbfb5a84bc4fe9bccd946a10f14a302fdbe53f', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '985e0c7005a276fcac4a680b0a8c01f43729f8cf', disabled: this.disabled }, index.h("div", { key: 'b207efb218b0e343ca81e5e0ff7340c758c7afad', "aria-checked": dom.toAriaBoolean(this.checked), "aria-label": label.getLabelText(this), class: CSS.container, ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, index.h("div", { key: '5b9984c73068b5ecc688d0fddadb10b6573abe12', class: CSS.track }, index.h("div", { key: 'ee7e926c7bca9614ee917e930b0321ca9aa04ef2', class: CSS.handle })), index.h(form.HiddenFormInputSlot, { key: '671754a8379764d741c4fa318d54ee6fbd2308ef', component: this })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/calcite-switch.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-switch.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACjB;;ACJD,MAAM,SAAS,GAAG,22FAA22F,CAAC;AAC93F,4BAAe,SAAS;;MCwCX,MAAM;;;;QAiFjB,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAIA,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAChD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;QAcM,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAkB;YACvC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;wBApGkC,KAAK;;;;qBAqBD,GAAG;uBAGO,KAAK;;;;;;;;;IA+BvD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAE/BC,gBAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B;;;;;;IAQD,mBAAmB,CAAC,KAAuB;QACzC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;KACzB;IASD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAEO,MAAM;QACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;KACjC;;;;;;IA+BD,iBAAiB;QACfC,8BAAkB,CAAC,IAAI,CAAC,CAAC;QACzBC,kBAAY,CAAC,IAAI,CAAC,CAAC;QACnBC,gBAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,iBAAiB;QACfC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;QAC5BC,qBAAe,CAAC,IAAI,CAAC,CAAC;QACtBC,mBAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,MAAM;QACJ,QACEC,QAACC,UAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,IAC9DD,QAACE,gCAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3CF,kFACgBG,iBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,gBAC7BC,kBAAY,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAE,GAAG,CAAC,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAEXJ,kEAAK,KAAK,EAAE,GAAG,CAAC,KAAK,IACnBA,kEAAK,KAAK,EAAE,GAAG,CAAC,MAAM,GAAI,CACtB,EACNA,QAACK,wBAAmB,qDAAC,SAAS,EAAE,IAAI,GAAI,CACpC,CACe,CAClB,EACP;KACH;;;;;;;","names":["isActivationKey","componentFocusable","focusElement","connectInteractive","connectLabel","connectForm","setUpLoadableComponent","setComponentLoaded","disconnectInteractive","disconnectLabel","disconnectForm","updateHostInteraction","h","Host","InteractiveContainer","toAriaBoolean","getLabelText","HiddenFormInputSlot"],"sources":["src/components/switch/resources.ts","src/components/switch/switch.scss?tag=calcite-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  track: \"track\",\n  handle: \"handle\",\n};\n","// sizes\n:host([scale=\"s\"]) {\n  .container {\n    @apply h-3;\n  }\n  .track {\n    @apply h-3 w-6;\n  }\n  .handle {\n    @apply h-2 w-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    @apply h-4;\n  }\n  .track {\n    @apply h-4 w-8;\n  }\n  .handle {\n    @apply h-3 w-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    @apply h-6;\n  }\n  .track {\n    @apply h-6 w-12;\n  }\n  .handle {\n    @apply h-5 w-5;\n  }\n}\n\n:host {\n  @apply relative\n    inline-block\n    w-auto\n    cursor-pointer\n    select-none\n    align-middle;\n  tap-highlight-color: transparent;\n}\n\n@include disabled();\n\n.container {\n  @apply outline-0;\n}\n\n.track {\n  @apply bg-foreground-2\n    border-color-2\n    pointer-events-none\n    relative\n    box-border\n    inline-block\n    rounded-full\n    border\n    border-solid\n    align-top\n    focus-base;\n}\n\n:host(:focus) .track {\n  @apply focus-outset;\n}\n\n.handle {\n  @apply bg-foreground-1\n    border-color-input\n    pointer-events-none\n    absolute\n    block\n    rounded-full\n    border-2\n    border-solid\n    transition-all\n    duration-150\n    ease-in-out;\n  inset-block-start: -1px;\n  inset-inline: -1px theme(\"inset.auto\");\n}\n\n.container:hover,\n:host(:focus) {\n  .handle {\n    @apply border-color-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n\n:host([checked]) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand;\n    inset-inline: theme(\"inset.auto\") -1px;\n  }\n\n  .container:hover {\n    .handle {\n      @apply border-color-brand-hover;\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n  }\n}\n\n@media (forced-colors: active) {\n  :host([checked]) {\n    .track {\n      background-color: canvasText;\n    }\n  }\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale } from \"../interfaces\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-switch\",\n  styleUrl: \"switch.scss\",\n  shadow: true,\n})\nexport class Switch\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSwitchElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  switchEl: HTMLDivElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Switch[\"checked\"];\n\n  defaultChecked: boolean;\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    focusElement(this.switchEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  onLabelClick(): void {\n    if (!this.disabled) {\n      this.toggle();\n      this.setFocus();\n    }\n  }\n\n  private toggle(): void {\n    this.checked = !this.checked;\n    this.calciteSwitchChange.emit();\n  }\n\n  private clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  private setSwitchEl = (el: HTMLDivElement): void => {\n    this.switchEl = el;\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `checked` value has changed.\n   */\n  @Event({ cancelable: false }) calciteSwitchChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class={CSS.container}\n            ref={this.setSwitchEl}\n            role=\"switch\"\n            tabIndex={0}\n          >\n            <div class={CSS.track}>\n              <div class={CSS.handle} />\n            </div>\n            <HiddenFormInputSlot component={this} />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-switch.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACjB;;ACJD,MAAM,SAAS,GAAG,i3FAAi3F,CAAC;AACp4F,4BAAe,SAAS;;MCsCX,MAAM;;;;QAiFjB,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAIA,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAChD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;QAcM,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAkB;YACvC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;wBApGkC,KAAK;;;;qBAqBD,GAAG;uBAGO,KAAK;;;;;;;;;IA+BvD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAE/BC,gBAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B;;;;;;IAQD,mBAAmB,CAAC,KAAuB;QACzC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;KACzB;IASD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAEO,MAAM;QACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;KACjC;;;;;;IA+BD,iBAAiB;QACfC,kBAAY,CAAC,IAAI,CAAC,CAAC;QACnBC,gBAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,iBAAiB;QACfC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClBC,qBAAe,CAAC,IAAI,CAAC,CAAC;QACtBC,mBAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,MAAM;QACJ,QACEC,QAACC,UAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,IAC9DD,QAACE,gCAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3CF,kFACgBG,iBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,gBAC7BC,kBAAY,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAE,GAAG,CAAC,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAEXJ,kEAAK,KAAK,EAAE,GAAG,CAAC,KAAK,IACnBA,kEAAK,KAAK,EAAE,GAAG,CAAC,MAAM,GAAI,CACtB,EACNA,QAACK,wBAAmB,qDAAC,SAAS,EAAE,IAAI,GAAI,CACpC,CACe,CAClB,EACP;KACH;;;;;;;","names":["isActivationKey","componentFocusable","focusElement","connectLabel","connectForm","setUpLoadableComponent","setComponentLoaded","disconnectLabel","disconnectForm","updateHostInteraction","h","Host","InteractiveContainer","toAriaBoolean","getLabelText","HiddenFormInputSlot"],"sources":["src/components/switch/resources.ts","src/components/switch/switch.scss?tag=calcite-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  track: \"track\",\n  handle: \"handle\",\n};\n","// sizes\n:host([scale=\"s\"]) {\n  .container {\n    @apply h-3;\n  }\n  .track {\n    @apply h-3 w-6;\n  }\n  .handle {\n    @apply h-2 w-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    @apply h-4;\n  }\n  .track {\n    @apply h-4 w-8;\n  }\n  .handle {\n    @apply h-3 w-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    @apply h-6;\n  }\n  .track {\n    @apply h-6 w-12;\n  }\n  .handle {\n    @apply h-5 w-5;\n  }\n}\n\n:host {\n  @apply relative\n    inline-block\n    w-auto\n    cursor-pointer\n    select-none\n    align-middle;\n  tap-highlight-color: transparent;\n}\n\n@include disabled();\n\n.container {\n  @apply outline-0;\n}\n\n.track {\n  @apply bg-foreground-2\n    border-color-2\n    pointer-events-none\n    relative\n    box-border\n    inline-block\n    rounded-full\n    border\n    border-solid\n    align-top\n    focus-base;\n}\n\n.container:focus .track {\n  @apply focus-outset;\n}\n\n.handle {\n  @apply bg-foreground-1\n    border-color-input\n    pointer-events-none\n    absolute\n    block\n    rounded-full\n    border-2\n    border-solid\n    transition-all\n    duration-150\n    ease-in-out;\n  inset-block-start: -1px;\n  inset-inline: -1px theme(\"inset.auto\");\n}\n\n.container:hover,\n.container:focus {\n  .handle {\n    @apply border-color-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n\n:host([checked]) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand;\n    inset-inline: theme(\"inset.auto\") -1px;\n  }\n\n  .container:hover {\n    .handle {\n      @apply border-color-brand-hover;\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n  }\n}\n\n@media (forced-colors: active) {\n  :host([checked]) {\n    .track {\n      background-color: canvasText;\n    }\n  }\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale } from \"../interfaces\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-switch\",\n  styleUrl: \"switch.scss\",\n  shadow: true,\n})\nexport class Switch\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSwitchElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  switchEl: HTMLDivElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Switch[\"checked\"];\n\n  defaultChecked: boolean;\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    focusElement(this.switchEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  onLabelClick(): void {\n    if (!this.disabled) {\n      this.toggle();\n      this.setFocus();\n    }\n  }\n\n  private toggle(): void {\n    this.checked = !this.checked;\n    this.calciteSwitchChange.emit();\n  }\n\n  private clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  private setSwitchEl = (el: HTMLDivElement): void => {\n    this.switchEl = el;\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `checked` value has changed.\n   */\n  @Event({ cancelable: false }) calciteSwitchChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class={CSS.container}\n            ref={this.setSwitchEl}\n            role=\"switch\"\n            tabIndex={0}\n          >\n            <div class={CSS.track}>\n              <div class={CSS.handle} />\n            </div>\n            <HiddenFormInputSlot component={this} />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,24 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const dom = require('./dom-cdce16d7.js');
-const guid = require('./guid-a0aaca44.js');
-const core = require('./core-f694f030.js');
-const observers = require('./observers-3a410d9c.js');
-const locale = require('./locale-987403a2.js');
-const t9n = require('./t9n-0ac48eea.js');
-const resources = require('./resources-8a5c46a3.js');
-const interactive = require('./interactive-9db98a91.js');
-const component = require('./component-c5bbc3ae.js');
-const browser = require('./browser-89880371.js');
-require('./key-5de2d409.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const guid = require('./guid-47ff9796.js');
+const core = require('./core-c9c58064.js');
+const observers = require('./observers-498f2676.js');
+const locale = require('./locale-38c1927e.js');
+const t9n = require('./t9n-ab4fd9b6.js');
+const resources = require('./resources-d2d6a16a.js');
+const interactive = require('./interactive-6e051cdc.js');
+const component = require('./component-96607c76.js');
+const browser = require('./browser-192fd050.js');
+require('./key-c3b3fd7e.js');
 
 const CSS$2 = {
     container: "container",
@@ -592,7 +592,6 @@ const TabTitle = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
         this.setupTextContentObserver();
@@ -606,7 +605,6 @@ const TabTitle = class {
             detail: this.el,
         }));
         this.resizeObserver?.disconnect();
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -628,14 +626,14 @@ const TabTitle = class {
     render() {
         const { el, closed } = this;
         const id = el.id || this.guid;
-        const iconStartEl = (index.h("calcite-icon", { key: '20ea18dabdb4cabe8a032d0799f3c757bc90c91d', class: { [CSS.titleIcon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: component.getIconScale(this.scale) }));
-        const iconEndEl = (index.h("calcite-icon", { key: 'ebd3913a334a959e8962addd45e5077ee82f2ca8', class: { [CSS.titleIcon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: component.getIconScale(this.scale) }));
-        return (index.h(index.Host, { key: '58a72fa4a6e961c3414dfe224a4e235892784707', "aria-controls": this.controls, "aria-selected": dom.toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, index.h(interactive.InteractiveContainer, { key: 'fe7662ade3001579b664772b4672d6bebd06a82b', disabled: this.disabled }, index.h("div", { key: 'ea226b71436922de6bae2e8e542ae0adf08add1b', class: {
+        const iconStartEl = (index.h("calcite-icon", { key: '64fa92b612e8be997230698bd79e11de161a2e5d', class: { [CSS.titleIcon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: component.getIconScale(this.scale) }));
+        const iconEndEl = (index.h("calcite-icon", { key: '5c25e211c6614e630d0cea61da30ba99cd18b779', class: { [CSS.titleIcon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: component.getIconScale(this.scale) }));
+        return (index.h(index.Host, { key: 'f35075c2c23e9cde98c50d65b91abccfafdc5d9a', "aria-controls": this.controls, "aria-selected": dom.toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, index.h(interactive.InteractiveContainer, { key: '0ab2ccb83d503ae827cac3f11c0bdb23f6d1d6e5', disabled: this.disabled }, index.h("div", { key: 'a34c4b57593abfae9716bfa1ed8f10419d48f2a4', class: {
                 [CSS.container]: true,
                 [CSS.containerBottom]: this.position === "bottom",
                 [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
                 [CSS.scale(this.scale)]: true,
-            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, index.h("div", { key: '737609daa04d9dc18b46872c49b82cf211ba9b5a', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, index.h("slot", { key: 'fb500a910e5c6bfcd8571e2d109331dd88f2544d' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton(), index.h("div", { key: '3fd13c6f459e05cea88c40809b7220369866a2b9', class: CSS.selectedIndicator })))));
+            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, index.h("div", { key: '3788ba906fffc7666c815e79406906a56f162e23', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, index.h("slot", { key: '74a6116ba66f66ec6304797fde099ce893f6ed2c' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton(), index.h("div", { key: '1a75fd6e657a455aac81ec6bd6a39d10e0b86d7f', class: CSS.selectedIndicator })))));
     }
     renderCloseButton() {
         const { closable, messages } = this;