@esri/solutions-components 0.8.3 → 0.8.4

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

@@ -1,166 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bdfaac50.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
-import { c as createObserver } from './observers-5ba39eee.js';
-import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-e715a3dd.js';
-import { e as focusElement } from './dom-b91aa537.js';
-import './browser-b8d08bed.js';
-import './guid-b75a5f7b.js';
-import './resources-0f8db821.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.4.0
- */
-const CSS = {
-    sortItem: "sort-item",
-    container: "container",
-    containerHorizontal: "container--horizontal",
-    containerVertical: "container--vertical",
-};
-
-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 SortableList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
-        this.items = [];
-        this.mutationObserver = createObserver("mutation", () => {
-            this.setUpSorting();
-        });
-        this.dragEnabled = true;
-        this.canPull = undefined;
-        this.canPut = undefined;
-        this.dragSelector = undefined;
-        this.group = undefined;
-        this.handleSelector = "calcite-handle";
-        this.layout = "vertical";
-        this.disabled = false;
-        this.loading = false;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        if (dragActive(this)) {
-            return;
-        }
-        this.setUpSorting();
-        this.beginObserving();
-        connectInteractive(this);
-    }
-    disconnectedCallback() {
-        if (dragActive(this)) {
-            return;
-        }
-        disconnectInteractive(this);
-        disconnectSortableComponent(this);
-        this.endObserving();
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    calciteHandleNudgeNextHandler(event) {
-        this.handleNudgeEvent(event);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    onGlobalDragStart() {
-        this.endObserving();
-    }
-    onGlobalDragEnd() {
-        this.beginObserving();
-    }
-    onDragEnd() { }
-    onDragStart() { }
-    onDragSort() {
-        this.items = Array.from(this.el.children);
-        this.calciteListOrderChange.emit();
-    }
-    handleNudgeEvent(event) {
-        const { direction } = event.detail;
-        const handle = event
-            .composedPath()
-            .find((el) => el.matches(this.handleSelector));
-        const sortItem = this.items.find((item) => {
-            return item.contains(handle) || event.composedPath().includes(item);
-        });
-        const lastIndex = this.items.length - 1;
-        const startingIndex = this.items.indexOf(sortItem);
-        let appendInstead = false;
-        let buddyIndex;
-        if (direction === "up") {
-            if (startingIndex === 0) {
-                appendInstead = true;
-            }
-            else {
-                buddyIndex = startingIndex - 1;
-            }
-        }
-        else {
-            if (startingIndex === lastIndex) {
-                buddyIndex = 0;
-            }
-            else if (startingIndex === lastIndex - 1) {
-                appendInstead = true;
-            }
-            else {
-                buddyIndex = startingIndex + 2;
-            }
-        }
-        this.endObserving();
-        if (appendInstead) {
-            sortItem.parentElement.appendChild(sortItem);
-        }
-        else {
-            sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
-        }
-        this.items = Array.from(this.el.children);
-        this.beginObserving();
-        requestAnimationFrame(() => focusElement(handle));
-        if ("selected" in handle) {
-            handle.selected = true;
-        }
-    }
-    setUpSorting() {
-        this.items = Array.from(this.el.children);
-        connectSortableComponent(this);
-    }
-    beginObserving() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    }
-    endObserving() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { disabled, layout } = this;
-        const horizontal = layout === "horizontal" || false;
-        return (h(InteractiveContainer, { disabled: disabled }, h("div", { class: {
-                [CSS.container]: true,
-                [CSS.containerVertical]: !horizontal,
-                [CSS.containerHorizontal]: horizontal,
-            } }, h("slot", null))));
-    }
-    get el() { return getElement(this); }
-};
-SortableList.style = sortableListCss;
-
-export { SortableList as calcite_sortable_list };

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

@@ -1,112 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bdfaac50.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-71585ecc.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
-import './browser-b8d08bed.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.4.0
- */
-const CSS = {
-    container: "container",
-    dividerContainer: "divider-container",
-    divider: "divider",
-    widthAuto: "width-auto",
-    widthHalf: "width-half",
-    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: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) {
-        registerInstance(this, hostRef);
-        this.calciteSplitButtonPrimaryClick = createEvent(this, "calciteSplitButtonPrimaryClick", 6);
-        this.calciteSplitButtonSecondaryClick = createEvent(this, "calciteSplitButtonSecondaryClick", 6);
-        this.calciteSplitButtonPrimaryClickHandler = () => this.calciteSplitButtonPrimaryClick.emit();
-        this.calciteSplitButtonSecondaryClickHandler = () => this.calciteSplitButtonSecondaryClick.emit();
-        this.appearance = "solid";
-        this.kind = "brand";
-        this.disabled = false;
-        this.active = false;
-        this.dropdownIconType = "chevron";
-        this.dropdownLabel = undefined;
-        this.loading = false;
-        this.overlayPositioning = "absolute";
-        this.primaryIconEnd = undefined;
-        this.primaryIconFlipRtl = undefined;
-        this.primaryIconStart = undefined;
-        this.primaryLabel = undefined;
-        this.primaryText = undefined;
-        this.scale = "m";
-        this.width = "auto";
-    }
-    handleDisabledChange(value) {
-        if (!value) {
-            this.active = false;
-        }
-    }
-    activeHandler() {
-        if (this.disabled) {
-            this.active = false;
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component's first focusable element. */
-    async setFocus() {
-        await componentFocusable(this);
-        this.el.focus();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
-    componentWillLoad() {
-        setUpLoadableComponent(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
-    render() {
-        const buttonWidth = this.width === "auto" ? "auto" : "full";
-        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"
-            ? "chevronDown"
-            : this.dropdownIconType === "caret"
-                ? "caretDown"
-                : this.dropdownIconType === "ellipsis"
-                    ? "ellipsis"
-                    : "handle-vertical";
-    }
-    static get delegatesFocus() { return true; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "disabled": ["handleDisabledChange"],
-        "active": ["activeHandler"]
-    }; }
-};
-SplitButton.style = splitButtonCss;
-
-export { SplitButton as calcite_split_button };

package/dist/solutions-components/calcite-stack.entry.js

@@ -1,70 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, h, a as Host } from './index-bdfaac50.js';
-import { u as slotChangeHasAssignedElement } from './dom-b91aa537.js';
-import { C as CSS, S as SLOTS } from './resources-3c6947d3.js';
-import './guid-b75a5f7b.js';
-import './resources-0f8db821.js';
-
-const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-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-family:var(--calcite-sans-family);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}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self: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 Stack = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.handleActionsStartSlotChange = (event) => {
-            this.hasActionsStart = slotChangeHasAssignedElement(event);
-        };
-        this.handleActionsEndSlotChange = (event) => {
-            this.hasActionsEnd = slotChangeHasAssignedElement(event);
-        };
-        this.handleContentStartSlotChange = (event) => {
-            this.hasContentStart = slotChangeHasAssignedElement(event);
-        };
-        this.handleContentEndSlotChange = (event) => {
-            this.hasContentEnd = slotChangeHasAssignedElement(event);
-        };
-        this.disabled = false;
-        this.hasActionsStart = false;
-        this.hasActionsEnd = false;
-        this.hasContentStart = false;
-        this.hasContentEnd = false;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderActionsStart() {
-        const { hasActionsStart } = this;
-        return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
-    }
-    renderActionsEnd() {
-        const { hasActionsEnd } = this;
-        return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
-    }
-    renderContentStart() {
-        const { hasContentStart } = this;
-        return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
-    }
-    renderDefaultContent() {
-        return (h("div", { class: CSS.content }, h("slot", null)));
-    }
-    renderContentEnd() {
-        const { hasContentEnd } = this;
-        return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
-    }
-    render() {
-        return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
-    }
-};
-Stack.style = stackCss;
-
-export { Stack as calcite_stack };

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

@@ -1,238 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-71585ecc.js';
-import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
-import './browser-b8d08bed.js';
-import './dom-b91aa537.js';
-import './guid-b75a5f7b.js';
-import './resources-0f8db821.js';
-import './key-9a10d862.js';
-import './observers-5ba39eee.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.4.0
- */
-const CSS = {
-    container: "container",
-    stepperItemContent: "stepper-item-content",
-    stepperItemDescription: "stepper-item-description",
-    stepperItemHeader: "stepper-item-header",
-    stepperItemHeading: "stepper-item-heading",
-    stepperItemHeaderText: "stepper-item-header-text",
-    stepperItemNumber: "stepper-item-number",
-    visuallyHidden: "visually-hidden",
-};
-
-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) {
-        registerInstance(this, hostRef);
-        this.calciteInternalStepperItemKeyEvent = createEvent(this, "calciteInternalStepperItemKeyEvent", 6);
-        this.calciteInternalStepperItemSelect = createEvent(this, "calciteInternalStepperItemSelect", 6);
-        this.calciteInternalUserRequestedStepperItemSelect = createEvent(this, "calciteInternalUserRequestedStepperItemSelect", 6);
-        this.calciteInternalStepperItemRegister = createEvent(this, "calciteInternalStepperItemRegister", 6);
-        //--------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        //--------------------------------------------------------------------------
-        this.keyDownHandler = (event) => {
-            if (!this.disabled && event.target === this.el) {
-                switch (event.key) {
-                    case " ":
-                    case "Enter":
-                        this.emitUserRequestedItem();
-                        event.preventDefault();
-                        break;
-                    case "ArrowUp":
-                    case "ArrowDown":
-                    case "ArrowLeft":
-                    case "ArrowRight":
-                    case "Home":
-                    case "End":
-                        this.calciteInternalStepperItemKeyEvent.emit({ item: event });
-                        event.preventDefault();
-                        break;
-                }
-            }
-        };
-        this.handleItemClick = (event) => {
-            if (this.disabled ||
-                (this.layout === "horizontal" &&
-                    event
-                        .composedPath()
-                        .some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("stepper-item-content"); }))) {
-                return;
-            }
-            this.emitUserRequestedItem();
-        };
-        this.emitUserRequestedItem = () => {
-            this.emitRequestedItem();
-            if (!this.disabled) {
-                const position = this.itemPosition;
-                this.calciteInternalUserRequestedStepperItemSelect.emit({
-                    position,
-                });
-            }
-        };
-        this.emitRequestedItem = () => {
-            if (!this.disabled) {
-                const position = this.itemPosition;
-                this.calciteInternalStepperItemSelect.emit({
-                    position,
-                });
-            }
-        };
-        this.selected = false;
-        this.complete = false;
-        this.error = false;
-        this.disabled = false;
-        this.heading = undefined;
-        this.description = undefined;
-        this.iconFlipRtl = false;
-        this.numberingSystem = undefined;
-        this.icon = false;
-        this.layout = undefined;
-        this.messages = undefined;
-        this.numbered = false;
-        this.scale = "m";
-        this.multipleViewMode = false;
-        this.messageOverrides = undefined;
-        this.defaultMessages = undefined;
-        this.effectiveLocale = "";
-    }
-    selectedHandler() {
-        if (this.selected) {
-            this.emitRequestedItem();
-        }
-    }
-    // watch for removal of disabled to register step
-    disabledWatcher() {
-        this.registerStepperItem();
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    effectiveLocaleWatcher(locale) {
-        numberStringFormatter.numberFormatOptions = {
-            locale,
-            numberingSystem: this.numberingSystem,
-            useGrouping: false,
-        };
-        updateMessages(this, this.effectiveLocale);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-        connectLocalized(this);
-        connectMessages(this);
-    }
-    async componentWillLoad() {
-        setUpLoadableComponent(this);
-        this.parentStepperEl = this.el.parentElement;
-        this.itemPosition = this.getItemPosition();
-        this.registerStepperItem();
-        if (this.selected) {
-            this.emitRequestedItem();
-        }
-        await setUpMessages(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-        disconnectLocalized(this);
-        disconnectMessages(this);
-    }
-    render() {
-        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 && 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", { 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))))));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    updateActiveItemOnChange(event) {
-        if (event.target === this.parentStepperEl ||
-            event.composedPath().includes(this.parentStepperEl)) {
-            this.selectedPosition = event.detail.position;
-            this.determineSelectedItem();
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        var _a;
-        await componentFocusable(this);
-        (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    renderIcon() {
-        let path = "circle";
-        if (this.selected && (this.multipleViewMode || (!this.error && !this.complete))) {
-            path = "circleF";
-        }
-        else if (this.error) {
-            path = "exclamationMarkCircleF";
-        }
-        else if (this.complete) {
-            path = "checkCircleF";
-        }
-        return (h("calcite-icon", { class: "stepper-item-icon", flipRtl: this.iconFlipRtl, icon: path, scale: "s" }));
-    }
-    determineSelectedItem() {
-        this.selected = !this.disabled && this.itemPosition === this.selectedPosition;
-    }
-    registerStepperItem() {
-        this.calciteInternalStepperItemRegister.emit({
-            position: this.itemPosition,
-        });
-    }
-    getItemPosition() {
-        var _a;
-        return Array.from((_a = this.parentStepperEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll("calcite-stepper-item")).indexOf(this.el);
-    }
-    renderNumbers() {
-        numberStringFormatter.numberFormatOptions = {
-            locale: this.effectiveLocale,
-            numberingSystem: this.numberingSystem,
-            useGrouping: false,
-        };
-        return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "selected": ["selectedHandler"],
-        "disabled": ["disabledWatcher"],
-        "messageOverrides": ["onMessagesChange"],
-        "effectiveLocale": ["effectiveLocaleWatcher"]
-    }; }
-};
-StepperItem.style = stepperItemCss;
-
-export { StepperItem as calcite_stepper_item };