@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/esm/calcite-sortable-list.entry.js

@@ -3,19 +3,19 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e3f04fa1.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-2e2d102f.js';
-import { c as createObserver } from './observers-fdb7a374.js';
-import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-e4ebf0bf.js';
-import { e as focusElement } from './dom-d675fe65.js';
-import './browser-7fe78178.js';
-import './guid-f05d01d5.js';
-import './resources-1febf4c6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-164d485a.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-39bf5602.js';
+import { c as createObserver } from './observers-d04d1da9.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-d7cd11a3.js';
+import { e as focusElement } from './dom-38c6f027.js';
+import './browser-d60104bd.js';
+import './guid-b75a5f7b.js';
+import './resources-8834f920.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS = {
     sortItem: "sort-item",
@@ -25,7 +25,6 @@ const CSS = {
 };
 
 const sortableListCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;flex:1 1 auto}.container--vertical{flex-direction:column}.container--horizontal{flex-direction:row}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteSortableListStyle0 = sortableListCss;
 
 const SortableList = class {
     constructor(hostRef) {
@@ -154,14 +153,14 @@ const SortableList = class {
     render() {
         const { disabled, layout } = this;
         const horizontal = layout === "horizontal" || false;
-        return (h(InteractiveContainer, { key: '1d1ca38cb992e78dc7f8cac66c7ee2d27fe85992', disabled: disabled }, h("div", { key: '556fc03733b819ac5cccf142c6683a472bc8472a', class: {
+        return (h(InteractiveContainer, { disabled: disabled }, h("div", { class: {
                 [CSS.container]: true,
                 [CSS.containerVertical]: !horizontal,
                 [CSS.containerHorizontal]: horizontal,
-            } }, h("slot", { key: '5cea272c33957a923f7cce3494050db3cb00f3bb' }))));
+            } }, h("slot", null))));
     }
     get el() { return getElement(this); }
 };
-SortableList.style = CalciteSortableListStyle0;
+SortableList.style = sortableListCss;
 
 export { SortableList as calcite_sortable_list };

package/dist/esm/calcite-split-button.entry.js

@@ -3,15 +3,15 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e3f04fa1.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-2e2d102f.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-01033497.js';
-import './browser-7fe78178.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-164d485a.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-39bf5602.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
+import './browser-d60104bd.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
@@ -22,8 +22,7 @@ const CSS = {
     widthFull: "width-full",
 };
 
-const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host:host([kind=brand]){--calcite-split-button-background:var(--calcite-color-brand);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host:host([kind=danger]){--calcite-split-button-background:var(--calcite-color-status-danger);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host:host([kind=neutral]){--calcite-split-button-background:var(--calcite-color-foreground-3);--calcite-split-button-divider:var(--calcite-color-text-1)}:host:host([kind=inverse]){--calcite-split-button-background:var(--calcite-color-inverse);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-text-1);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-foreground-1);--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:transparent}:host([appearance=outline-fill]){--calcite-split-button-background:var(--calcite-color-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-border-1);--calcite-split-button-background:var(--calcite-color-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{display:flex;inline-size:1px;align-items:stretch;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .divider-container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteSplitButtonStyle0 = splitButtonCss;
+const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host:host([kind=brand]){--calcite-split-button-background:var(--calcite-color-brand);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host:host([kind=danger]){--calcite-split-button-background:var(--calcite-color-status-danger);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host:host([kind=neutral]){--calcite-split-button-background:var(--calcite-color-foreground-3);--calcite-split-button-divider:var(--calcite-color-text-1)}:host:host([kind=inverse]){--calcite-split-button-background:var(--calcite-color-inverse);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-text-1);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-foreground-1);--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:transparent}:host([appearance=outline-fill]){--calcite-split-button-background:var(--calcite-color-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-border-1);--calcite-split-button-background:var(--calcite-color-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .divider-container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 
 const SplitButton = class {
     constructor(hostRef) {
@@ -90,7 +89,7 @@ const SplitButton = class {
     }
     render() {
         const buttonWidth = this.width === "auto" ? "auto" : "full";
-        return (h(InteractiveContainer, { key: '5bca9f9751e7f7ff1a4fb5bde5dd2cf8adeb039b', disabled: this.disabled }, h("div", { key: 'd8d95651c49144034a5356b045b39a9b80ed8778', class: CSS.container }, h("calcite-button", { key: 'd882eca49b2d32c0c366bac900c01b6f448e2af6', appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), h("div", { key: '7756c7e247a7d74c94d635b7da4e23e25588ccdc', class: CSS.dividerContainer }, h("div", { key: 'b855b43e1338dd73b8f9fa27217843bb0e1bdf64', class: CSS.divider })), h("calcite-dropdown", { key: 'ab0fba71ae22c3af9563f99a5ac0feb51be0fb9f', disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, "width-scale": this.scale }, h("calcite-button", { key: '6b94ce6f08d225bff2be6a3ece459e991436835d', appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), h("slot", { key: 'd7ddac81064109f923f0e871b59ff38128a17ab8' })))));
+        return (h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: CSS.container }, h("calcite-button", { appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), h("div", { class: CSS.dividerContainer }, h("div", { class: CSS.divider })), h("calcite-dropdown", { disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, "width-scale": this.scale }, h("calcite-button", { appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), h("slot", null)))));
     }
     get dropdownIcon() {
         return this.dropdownIconType === "chevron"
@@ -108,6 +107,6 @@ const SplitButton = class {
         "active": ["activeHandler"]
     }; }
 };
-SplitButton.style = CalciteSplitButtonStyle0;
+SplitButton.style = splitButtonCss;
 
 export { SplitButton as calcite_split_button };

package/dist/esm/calcite-stepper-item.entry.js

@@ -3,22 +3,22 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e3f04fa1.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-2e2d102f.js';
-import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-60861d67.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-01033497.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-5800da82.js';
-import './browser-7fe78178.js';
-import './dom-d675fe65.js';
-import './guid-f05d01d5.js';
-import './resources-1febf4c6.js';
-import './key-092b6260.js';
-import './observers-fdb7a374.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-39bf5602.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-37e7fbd6.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-436fb2b1.js';
+import './browser-d60104bd.js';
+import './dom-38c6f027.js';
+import './guid-b75a5f7b.js';
+import './resources-8834f920.js';
+import './key-c83d835f.js';
+import './observers-d04d1da9.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
@@ -31,8 +31,7 @@ const CSS = {
     visuallyHidden: "visually-hidden",
 };
 
-const stepperItemCss = ":host([layout=horizontal][disabled]) .stepper-item-header,:host([layout=horizontal-single][disabled]) .stepper-item-header,:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][disabled]) .stepper-item-header *,:host([layout=horizontal-single][disabled]) .stepper-item-header *,:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([layout=horizontal-single][disabled]) .stepper-item-header ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;--calcite-internal-stepper-action-inline-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;--calcite-internal-stepper-action-inline-size:2.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;--calcite-internal-stepper-action-inline-size:3rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-color-text-3);opacity:var(--calcite-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .stepper-item-description{color:var(--calcite-color-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-color-brand)}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-color-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-color-status-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][selected]) .container .stepper-item-content:not(:empty){margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-status-danger-hover)}:host([layout=horizontal]),:host([layout=horizontal-single]){display:contents}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header,:host([layout=horizontal-single]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);outline-color:transparent;grid-row:items}:host([layout=horizontal]) .stepper-item-header:focus,:host([layout=horizontal-single]) .stepper-item-header:focus{transition-duration:0s;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          )}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=vertical]) .stepper-item-header:focus{transition-duration:0s}:host([layout=horizontal-single]) .stepper-item-header{grid-area:1/1/1/-1}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header,:host([layout=horizontal-single][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal][error]) .stepper-item-header,:host([layout=horizontal-single][error]) .stepper-item-header{border-color:var(--calcite-color-status-danger)}:host([layout=horizontal][selected]) .stepper-item-header,:host([layout=horizontal-single][selected]) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-status-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal-single]) .stepper-item-header{margin-inline-end:0px;box-sizing:border-box;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem)}:host([layout=horizontal-single][error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([layout=horizontal-single][error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host([layout=horizontal-single][error][selected]),:host([layout=horizontal-single][complete][selected]) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal-single][error][selected]) .stepper-item-heading,:host([layout=horizontal-single][complete][selected]) .container .stepper-item-heading{color:var(--calcite-color-text-2)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-number{color:var(--calcite-color-text-3)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteStepperItemStyle0 = stepperItemCss;
+const stepperItemCss = ":host([layout=horizontal][disabled]) .stepper-item-header,:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][disabled]) .stepper-item-header *,:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;--calcite-internal-stepper-action-inline-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;--calcite-internal-stepper-action-inline-size:2.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;--calcite-internal-stepper-action-inline-size:3rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-color-text-3);opacity:var(--calcite-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .stepper-item-description{color:var(--calcite-color-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-color-brand)}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-color-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-color-status-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][selected]) .container .stepper-item-content:not(:empty){margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-status-danger-hover)}:host([layout=horizontal]){display:contents}:host([layout=horizontal]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);outline-color:transparent;grid-row:items}:host([layout=horizontal]) .stepper-item-header:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([layout=horizontal]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal][selected]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal][error]) .stepper-item-header{border-color:var(--calcite-color-status-danger)}:host([layout=horizontal][selected][multiple-view-mode]) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-status-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal]:not([multiple-view-mode])) .stepper-item-header{margin-inline-end:0px;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem)}:host([layout=horizontal][error]:not([multiple-view-mode])) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([layout=horizontal][error]:not([multiple-view-mode])) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host([layout=horizontal][error][selected]:not([multiple-view-mode])),:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal][error][selected]:not([multiple-view-mode])) .stepper-item-heading,:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-heading{color:var(--calcite-color-text-2)}:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-number{color:var(--calcite-color-text-3)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const StepperItem = class {
     constructor(hostRef) {
@@ -106,6 +105,7 @@ const StepperItem = class {
         this.messages = undefined;
         this.numbered = false;
         this.scale = "m";
+        this.multipleViewMode = false;
         this.messageOverrides = undefined;
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
@@ -162,11 +162,11 @@ const StepperItem = class {
         disconnectMessages(this);
     }
     render() {
-        return (h(Host, { key: 'cbdfe76eb5b7985cf70b86d2bc5b836bc8d75498', "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, h(InteractiveContainer, { key: '7f5296807f7a2e68fbcac907664f5e1a1cec63e7', disabled: this.disabled }, h("div", { key: '4b26e6d65f787c2a3d551ede9e6b939c70285493', class: CSS.container }, this.complete && (h("span", { key: 'a6c153e3e803e7d00d79cb723581c887d6b244fd', "aria-live": "polite", class: CSS.visuallyHidden }, this.messages.complete)), h("div", { key: 'e36628ff97b54239ec2ac2751cc19afca648317b', class: CSS.stepperItemHeader, tabIndex: 
+        return (h(Host, { "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: CSS.container }, this.complete && (h("span", { "aria-live": "polite", class: CSS.visuallyHidden }, this.messages.complete)), h("div", { class: CSS.stepperItemHeader, tabIndex: 
             /* additional tab index logic needed because of display: contents */
-            this.layout === "horizontal" && !this.disabled ? 0 : null,
+            this.layout === "horizontal" && !this.disabled && this.multipleViewMode ? 0 : null,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: CSS.stepperItemNumber }, this.renderNumbers(), ".")) : null, h("div", { key: '2b76b746cd911913c982871b2d2ef65357645c31', class: CSS.stepperItemHeaderText }, h("span", { key: '3ee0d3499c9348294016e27ccc178b65fa7fa0df', class: CSS.stepperItemHeading }, this.heading), h("span", { key: '87a1ad7d0070c946ccb64847698c41d84e328937', class: CSS.stepperItemDescription }, this.description))), h("div", { key: '0e12cbcbd9aadbfe498985eaa038d1b4c68e3512', class: CSS.stepperItemContent }, h("slot", { key: 'ae4f822110e61e19f60d2bad71900632220a2594' }))))));
+            ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: CSS.stepperItemNumber }, this.renderNumbers(), ".")) : null, h("div", { class: CSS.stepperItemHeaderText }, h("span", { class: CSS.stepperItemHeading }, this.heading), h("span", { class: CSS.stepperItemDescription }, this.description))), h("div", { class: CSS.stepperItemContent }, h("slot", null))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -193,7 +193,7 @@ const StepperItem = class {
     }
     renderIcon() {
         let path = "circle";
-        if (this.selected && (this.layout !== "horizontal-single" || (!this.error && !this.complete))) {
+        if (this.selected && (this.multipleViewMode || (!this.error && !this.complete))) {
             path = "circleF";
         }
         else if (this.error) {
@@ -233,6 +233,6 @@ const StepperItem = class {
         "effectiveLocale": ["effectiveLocaleWatcher"]
     }; }
 };
-StepperItem.style = CalciteStepperItemStyle0;
+StepperItem.style = stepperItemCss;
 
 export { StepperItem as calcite_stepper_item };

package/dist/esm/calcite-stepper.entry.js

@@ -3,35 +3,21 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { h, r as registerInstance, c as createEvent, H as Host, d as readTask, g as getElement } from './index-e3f04fa1.js';
-import { h as slotChangeGetAssignedElements, d as focusElementInGroup } from './dom-d675fe65.js';
-import { c as createObserver } from './observers-fdb7a374.js';
-import { g as guid } from './guid-f05d01d5.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-60861d67.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-5800da82.js';
-import './resources-1febf4c6.js';
-import './key-092b6260.js';
+import { h, r as registerInstance, c as createEvent, H as Host, d as readTask, g as getElement } from './index-164d485a.js';
+import { s as slotChangeGetAssignedElements, d as focusElementInGroup } from './dom-38c6f027.js';
+import { c as createObserver } from './observers-d04d1da9.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-436fb2b1.js';
+import './resources-8834f920.js';
+import './key-c83d835f.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS$1 = {
-    actionIcon: "action-icon",
-    actionIconStart: "action-icon--start",
-    actionIconEnd: "action-icon--end",
-    actionContainer: "action-container",
-    stepBarContainer: "step-bar-container",
-    singleView: "single-view",
-};
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
     stepBar: "step-bar",
     stepBarActive: "step-bar--active",
     stepBarComplete: "step-bar--complete",
@@ -40,17 +26,35 @@ const CSS = {
     stepBarInActive: "step-bar--inactive",
 };
 const StepBar = ({ disabled, active, complete, error, key, }) => (h("svg", { class: {
-        [CSS.stepBar]: true,
+        [CSS$1.stepBar]: true,
     }, key: key }, h("rect", { class: {
-        [CSS.stepBarActive]: active,
-        [CSS.stepBarComplete]: complete,
-        [CSS.stepBarDisabled]: disabled,
-        [CSS.stepBarError]: error,
-        [CSS.stepBarInActive]: true,
+        [CSS$1.stepBarActive]: active,
+        [CSS$1.stepBarComplete]: complete,
+        [CSS$1.stepBarDisabled]: disabled,
+        [CSS$1.stepBarError]: error,
+        [CSS$1.stepBarInActive]: true,
     }, width: "100%", x: "0", y: "0" })));
 
-const stepperCss = ":host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:\"items\" \"content\";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteStepperStyle0 = stepperCss;
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const ITEM_MIN_WIDTH = {
+    s: 120,
+    m: 180,
+    l: 200,
+};
+const CSS = {
+    actionIcon: "action-icon",
+    actionIconStart: "action-icon--start",
+    actionIconEnd: "action-icon--end",
+    actionContainer: "action-container",
+    stepBarContainer: "step-bar-container",
+    singleView: "single-view",
+};
+
+const stepperCss = ":host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container{display:grid;grid-template-areas:\"items\" \"content\";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Stepper = class {
     constructor(hostRef) {
@@ -64,6 +68,12 @@ const Stepper = class {
         /** 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. */
         this.multipleViewMode = false;
         this.guid = `calcite-stepper-action-${guid()}`;
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.resizeObserver = createObserver("resize", (entries) => (this.elWidth = entries[0].contentRect.width));
         this.handleActionClick = (event) => {
             const currentActivePosition = this.currentActivePosition;
             const target = event.target;
@@ -85,9 +95,7 @@ const Stepper = class {
         this.handleDefaultSlotChange = (event) => {
             const items = slotChangeGetAssignedElements(event).filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
             this.items = items;
-            const spacing = Array(items.length).fill("1fr").join(" ");
-            this.containerEl.style.gridTemplateAreas = spacing;
-            this.containerEl.style.gridTemplateColumns = spacing;
+            this.setGridTemplateColumns(items);
             this.setStepperItemNumberingSystem();
         };
         this.icon = false;
@@ -101,10 +109,10 @@ const Stepper = class {
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
         this.currentActivePosition = undefined;
+        this.elWidth = undefined;
     }
     handleItemPropChange() {
         this.updateItems();
-        this.determineActiveStepper();
     }
     numberingSystemChange() {
         this.setStepperItemNumberingSystem();
@@ -128,6 +136,8 @@ const Stepper = class {
         await setUpMessages(this);
     }
     componentDidLoad() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.containerEl);
         // if no stepper items are set as active, default to the first one
         if (typeof this.currentActivePosition !== "number") {
             const enabledStepIndex = this.getFirstEnabledStepperPosition();
@@ -140,15 +150,14 @@ const Stepper = class {
         }
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         disconnectMessages(this);
         disconnectLocalized(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
-        return (h(Host, { key: '00695fed43575595fcca8adac07588de79f14170', "aria-label": this.messages.label, role: "region" }, h("div", { key: '3b06715dc1220048bdab4743e783fb28a8da001e', class: { container: true, [CSS$1.singleView]: this.layout === "horizontal-single" },
-            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: this.setContainerEl }, this.layout === "horizontal-single" && (h("div", { key: 'd14afc0d2ae03ea603a5c3a05157825f3dcbcc43', class: { [CSS$1.stepBarContainer]: true } }, this.items.map((item, index) => (h(StepBar, { active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition, key: index }))))), this.layout === "horizontal-single" && (h("div", { key: 'a83ca9efc86407ab66d895027ff3a6b9d4ab698f', class: { [CSS$1.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end"))), h("slot", { key: '104b16d7e23e4ec0977d2934906ea83ffcd7f4cc', onSlotchange: this.handleDefaultSlotChange }))));
+        return (h(Host, { "aria-label": this.messages.label, role: "region" }, h("div", { class: { container: true, [CSS.singleView]: !this.multipleViewMode }, ref: this.setContainerEl }, !this.multipleViewMode && this.layout === "horizontal" && (h("div", { class: { [CSS.stepBarContainer]: true } }, this.items.map((item, index) => (h(StepBar, { active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition, key: index }))))), h("div", { class: { [CSS.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end")), h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -248,15 +257,15 @@ const Stepper = class {
         updateMessages(this, this.effectiveLocale);
     }
     handlePositionChange() {
+        readTask(() => {
+            this.determineActiveStepper(true);
+        });
+    }
+    handleElWidthChange() {
         readTask(() => {
             this.determineActiveStepper();
         });
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     updateItems() {
         this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
             item.icon = this.icon;
@@ -265,22 +274,43 @@ const Stepper = class {
             item.scale = this.scale;
         });
     }
-    determineActiveStepper() {
-        const { items } = this;
-        if (items.length < 2) {
+    determineActiveStepper(currentActivePositionChanged = false) {
+        const totalItems = this.items.length;
+        if (!this.elWidth || !totalItems || this.layout !== "horizontal" || totalItems === 1) {
             return;
         }
-        const { currentActivePosition, layout } = this;
-        this.multipleViewMode = layout !== "horizontal-single";
-        items.forEach((item, index) => {
-            item.hidden = layout === "horizontal-single" && index !== (currentActivePosition || 0);
-        });
+        const activePosition = this.currentActivePosition || 0;
+        const totalMinWidthOfItems = totalItems * this.getMinWidthOfStepperItem();
+        const totalRowGap = (totalItems - 1) * (parseInt(window.getComputedStyle(this.containerEl).rowGap) || 0);
+        if (this.elWidth <= totalMinWidthOfItems + totalRowGap) {
+            this.multipleViewMode = false;
+            this.items.forEach((item, index) => {
+                if (index !== activePosition) {
+                    item.hidden = true;
+                }
+                else {
+                    item.hidden = false;
+                    item.multipleViewMode = false;
+                }
+            });
+        }
+        else if (this.elWidth > totalMinWidthOfItems + totalRowGap) {
+            if (this.multipleViewMode && !currentActivePositionChanged) {
+                return;
+            }
+            this.multipleViewMode = true;
+            this.setGridTemplateColumns(this.items);
+            this.items.forEach((item) => {
+                item.hidden = false;
+                item.multipleViewMode = true;
+            });
+        }
     }
     getEnabledStepIndex(startIndex, direction = "next") {
         var _a;
         const { items, currentActivePosition } = this;
         let newIndex = startIndex;
-        while (((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && this.layout !== "horizontal-single") {
+        while (((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && this.multipleViewMode) {
             newIndex = newIndex + (direction === "previous" ? -1 : 1);
         }
         return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0
@@ -307,8 +337,8 @@ const Stepper = class {
         const { currentActivePosition, multipleViewMode, layout } = this;
         const totalItems = this.items.length;
         const id = `${this.guid}-${isPositionStart ? "start" : "end"}`;
-        return layout === "horizontal-single" && !multipleViewMode ? (h("calcite-action", { alignment: "center", appearance: "transparent", class: {
-                [CSS$1.actionIcon]: true,
+        return layout === "horizontal" && !multipleViewMode ? (h("calcite-action", { alignment: "center", appearance: "transparent", class: {
+                [CSS.actionIcon]: true,
             }, compact: true, "data-position": position, disabled: (currentActivePosition === 0 && isPositionStart) ||
                 (currentActivePosition === totalItems - 1 && !isPositionStart), icon: path, iconFlipRtl: true, id: id, onClick: this.handleActionClick, scale: this.scale, text: isPositionStart ? this.messages.previousStep : this.messages.nextStep })) : null;
     }
@@ -319,6 +349,15 @@ const Stepper = class {
         }
         return 0;
     }
+    setGridTemplateColumns(items) {
+        const minWidth = this.getMinWidthOfStepperItem();
+        const spacing = Array(items.length).fill(`minmax(${minWidth}px, 1fr)`).join(" ");
+        this.containerEl.style.gridTemplateAreas = spacing;
+        this.containerEl.style.gridTemplateColumns = spacing;
+    }
+    getMinWidthOfStepperItem() {
+        return ITEM_MIN_WIDTH[this.scale];
+    }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -329,9 +368,10 @@ const Stepper = class {
         "numberingSystem": ["numberingSystemChange"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"],
-        "currentActivePosition": ["handlePositionChange"]
+        "currentActivePosition": ["handlePositionChange"],
+        "elWidth": ["handleElWidthChange"]
     }; }
 };
-Stepper.style = CalciteStepperStyle0;
+Stepper.style = stepperCss;
 
 export { Stepper as calcite_stepper };

package/dist/esm/calcite-switch.entry.js

@@ -3,20 +3,19 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e3f04fa1.js';
-import { e as focusElement, t as toAriaBoolean } from './dom-d675fe65.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-8b2f6210.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-2e2d102f.js';
-import { i as isActivationKey } from './key-092b6260.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-5692de01.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-01033497.js';
-import './guid-f05d01d5.js';
-import './resources-1febf4c6.js';
-import './browser-7fe78178.js';
-import './component-960ddabf.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
+import { e as focusElement, t as toAriaBoolean } from './dom-38c6f027.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-50dcd52e.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-39bf5602.js';
+import { i as isActivationKey } from './key-c83d835f.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-b4cea72e.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
+import './guid-b75a5f7b.js';
+import './resources-8834f920.js';
+import './browser-d60104bd.js';
+import './component-edd2c3cd.js';
 
-const switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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;-moz-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}:host(: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]:hover) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]: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 switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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;-moz-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-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}:host(: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]:hover) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]: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 Switch = class {
     constructor(hostRef) {
@@ -103,12 +102,12 @@ const Switch = class {
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '3844964b46482e9b6e902c07eccf97264970f3de', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'c0028a5587e7d346ba4d0d7a214f649606f85e17', disabled: this.disabled }, h("div", { key: 'ff48a447bbe579ff1b3f104dea12e76c91cbcb88', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", role: "switch", tabIndex: 0,
+        return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", role: "switch", tabIndex: 0,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setSwitchEl }, h("div", { key: '5b9f7b7dcab019e92d62c8ff18bf00068a286b36', class: "track" }, h("div", { key: '7d05ec0e24c81db645735a7d6e03163ec77a2230', class: "handle" })), h(HiddenFormInputSlot, { key: '191a29b812bb8e1f31f56a7a84d941a48fb80372', component: this })))));
+            ref: this.setSwitchEl }, h("div", { class: "track" }, h("div", { class: "handle" })), h(HiddenFormInputSlot, { component: this })))));
     }
     get el() { return getElement(this); }
 };
-Switch.style = CalciteSwitchStyle0;
+Switch.style = switchCss;
 
 export { Switch as calcite_switch };