@esri/solutions-components 0.7.34 → 0.7.35

package/dist/components/radio-button.js

@@ -0,0 +1,350 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import { g as getRoundRobinIndex } from './array.js';
+import { g as getElementDir, f as focusElement, t as toAriaBoolean } from './dom.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
+import { g as guid } from './guid.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.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",
+};
+
+const radioButtonCss = ":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:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host .radio{cursor:pointer;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host([focused]) .radio{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([disabled]) .radio{cursor:default;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hovered][disabled]) .radio{box-shadow:inset 0 0 0 1px var(--calcite-color-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{block-size:var(--calcite-radio-size);max-inline-size:var(--calcite-radio-size);min-inline-size:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{box-shadow:inset 0 0 0 4px var(--calcite-color-brand)}:host([scale=s][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 4px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{box-shadow:inset 0 0 0 5px var(--calcite-color-brand)}:host([scale=m][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 5px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{box-shadow:inset 0 0 0 6px var(--calcite-color-brand)}:host([scale=l][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 6px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}@media (forced-colors: active){:host([checked]) .radio::after,:host([checked][disabled]) .radio::after{content:\"\";inline-size:var(--calcite-radio-size);block-size:var(--calcite-radio-size);background-color:windowText;display:block}}::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 RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.calciteInternalRadioButtonBlur = createEvent(this, "calciteInternalRadioButtonBlur", 6);
+        this.calciteRadioButtonChange = createEvent(this, "calciteRadioButtonChange", 6);
+        this.calciteInternalRadioButtonCheckedChange = createEvent(this, "calciteInternalRadioButtonCheckedChange", 6);
+        this.calciteInternalRadioButtonFocus = createEvent(this, "calciteInternalRadioButtonFocus", 6);
+        this.selectItem = (items, selectedIndex) => {
+            items[selectedIndex].click();
+        };
+        this.queryButtons = () => {
+            return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((radioButton) => radioButton.name === this.name);
+        };
+        this.isFocusable = () => {
+            const radioButtons = this.queryButtons();
+            const firstFocusable = radioButtons.find((radioButton) => !radioButton.disabled);
+            const checked = radioButtons.find((radioButton) => radioButton.checked);
+            return firstFocusable === this.el && !checked;
+        };
+        this.check = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.focused = true;
+            this.setFocus();
+            if (this.checked) {
+                return;
+            }
+            this.uncheckAllRadioButtonsInGroup();
+            this.checked = true;
+            this.calciteRadioButtonChange.emit();
+        };
+        this.clickHandler = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.check();
+        };
+        this.setContainerEl = (el) => {
+            this.containerEl = el;
+        };
+        this.handleKeyDown = (event) => {
+            const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
+            const { key } = event;
+            const { el } = this;
+            if (keys.indexOf(key) === -1) {
+                return;
+            }
+            if (key === " ") {
+                this.check();
+                event.preventDefault();
+                return;
+            }
+            let adjustedKey = key;
+            if (getElementDir(el) === "rtl") {
+                if (key === "ArrowRight") {
+                    adjustedKey = "ArrowLeft";
+                }
+                if (key === "ArrowLeft") {
+                    adjustedKey = "ArrowRight";
+                }
+            }
+            const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((radioButton) => radioButton.name === this.name);
+            let currentIndex = 0;
+            const radioButtonsLength = radioButtons.length;
+            radioButtons.some((item, index) => {
+                if (item.checked) {
+                    currentIndex = index;
+                    return true;
+                }
+            });
+            switch (adjustedKey) {
+                case "ArrowLeft":
+                case "ArrowUp":
+                    event.preventDefault();
+                    this.selectItem(radioButtons, getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength));
+                    return;
+                case "ArrowRight":
+                case "ArrowDown":
+                    event.preventDefault();
+                    this.selectItem(radioButtons, getRoundRobinIndex(currentIndex + 1, radioButtonsLength));
+                    return;
+                default:
+                    return;
+            }
+        };
+        this.onContainerBlur = () => {
+            this.focused = false;
+            this.calciteInternalRadioButtonBlur.emit();
+        };
+        this.onContainerFocus = () => {
+            if (!this.disabled) {
+                this.focused = true;
+                this.calciteInternalRadioButtonFocus.emit();
+            }
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.focused = false;
+        this.form = undefined;
+        this.guid = undefined;
+        this.hovered = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.scale = "m";
+        this.value = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Global attributes
+    //
+    //--------------------------------------------------------------------------
+    handleHiddenChange() {
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    checkedChanged(newChecked) {
+        if (newChecked) {
+            this.uncheckOtherRadioButtonsInGroup();
+        }
+        this.calciteInternalRadioButtonCheckedChange.emit();
+    }
+    disabledChanged() {
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    nameChanged() {
+        this.checkLastRadioButton();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        if (!this.disabled) {
+            focusElement(this.containerEl);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    syncHiddenFormInput(input) {
+        input.type = "radio";
+    }
+    onLabelClick(event) {
+        if (this.disabled || this.el.hidden) {
+            return;
+        }
+        const label = event.currentTarget;
+        const radioButton = label.for
+            ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+            : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+        if (!radioButton) {
+            return;
+        }
+        radioButton.focused = true;
+        this.setFocus();
+        if (radioButton.checked) {
+            return;
+        }
+        this.uncheckOtherRadioButtonsInGroup();
+        radioButton.checked = true;
+        this.calciteRadioButtonChange.emit();
+    }
+    checkLastRadioButton() {
+        const radioButtons = this.queryButtons();
+        const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
+        if ((checkedRadioButtons === null || checkedRadioButtons === void 0 ? void 0 : checkedRadioButtons.length) > 1) {
+            const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];
+            checkedRadioButtons
+                .filter((checkedRadioButton) => checkedRadioButton !== lastCheckedRadioButton)
+                .forEach((checkedRadioButton) => {
+                checkedRadioButton.checked = false;
+                checkedRadioButton.emitCheckedChange();
+            });
+        }
+    }
+    /** @internal */
+    async emitCheckedChange() {
+        this.calciteInternalRadioButtonCheckedChange.emit();
+    }
+    uncheckAllRadioButtonsInGroup() {
+        const radioButtons = this.queryButtons();
+        radioButtons.forEach((radioButton) => {
+            if (radioButton.checked) {
+                radioButton.checked = false;
+                radioButton.focused = false;
+            }
+        });
+    }
+    uncheckOtherRadioButtonsInGroup() {
+        const radioButtons = this.queryButtons();
+        const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid);
+        otherRadioButtons.forEach((otherRadioButton) => {
+            if (otherRadioButton.checked) {
+                otherRadioButton.checked = false;
+                otherRadioButton.focused = false;
+            }
+        });
+    }
+    updateTabIndexOfOtherRadioButtonsInGroup() {
+        const radioButtons = this.queryButtons();
+        const otherFocusableRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid && !radioButton.disabled);
+        otherFocusableRadioButtons.forEach((radioButton) => {
+            forceUpdate(radioButton);
+        });
+    }
+    getTabIndex() {
+        if (this.disabled) {
+            return undefined;
+        }
+        return this.checked || this.isFocusable() ? 0 : -1;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    pointerEnterHandler() {
+        if (this.disabled) {
+            return;
+        }
+        this.hovered = true;
+    }
+    pointerLeaveHandler() {
+        if (this.disabled) {
+            return;
+        }
+        this.hovered = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        this.rootNode = this.el.getRootNode();
+        this.guid = this.el.id || `calcite-radio-button-${guid()}`;
+        if (this.name) {
+            this.checkLastRadioButton();
+        }
+        connectInteractive(this);
+        connectLabel(this);
+        connectForm(this);
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+        if (this.focused && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+        disconnectLabel(this);
+        disconnectForm(this);
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        const tabIndex = this.getTabIndex();
+        return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "radio", tabIndex: tabIndex,
+            // 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.setContainerEl }, h("div", { class: "radio" })), h(HiddenFormInputSlot, { component: this }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "hidden": ["handleHiddenChange"],
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "name": ["nameChanged"]
+    }; }
+    static get style() { return radioButtonCss; }
+}, [1, "calcite-radio-button", {
+        "checked": [1540],
+        "disabled": [516],
+        "focused": [1540],
+        "form": [513],
+        "guid": [1537],
+        "hovered": [1540],
+        "label": [1],
+        "name": [513],
+        "required": [516],
+        "scale": [513],
+        "value": [1032],
+        "setFocus": [64],
+        "emitCheckedChange": [64]
+    }, [[1, "pointerenter", "pointerEnterHandler"], [1, "pointerleave", "pointerLeaveHandler"]], {
+        "hidden": ["handleHiddenChange"],
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "name": ["nameChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calcite-radio-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calcite-radio-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RadioButton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RadioButton as R, defineCustomElement as d };

package/dist/components/refine-selection2.js

@@ -97,7 +97,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
     render() {
         var _a, _b;
         const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-        return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
+        return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100", width: "full" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/resources.js

@@ -6,23 +6,23 @@
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const autoMode = "calcite-mode-auto";
 const darkMode = "calcite-mode-dark";
 const lightMode = "calcite-mode-light";
 const CSS_UTILITY = {
-  autoMode,
-  darkMode,
-  lightMode,
-  rtl: "calcite--rtl",
-  calciteAnimate: "calcite-animate",
-  calciteAnimateIn: "calcite-animate__in",
-  calciteAnimateInUp: "calcite-animate__in-up",
-  calciteAnimateInDown: "calcite-animate__in-down",
-  calciteAnimateInRight: "calcite-animate__in-right",
-  calciteAnimateInLeft: "calcite-animate__in-left",
-  calciteAnimateInScale: "calcite-animate__in-scale",
+    autoMode,
+    darkMode,
+    lightMode,
+    rtl: "calcite--rtl",
+    calciteAnimate: "calcite-animate",
+    calciteAnimateIn: "calcite-animate__in",
+    calciteAnimateInUp: "calcite-animate__in-up",
+    calciteAnimateInDown: "calcite-animate__in-down",
+    calciteAnimateInRight: "calcite-animate__in-right",
+    calciteAnimateInLeft: "calcite-animate__in-left",
+    calciteAnimateInScale: "calcite-animate__in-scale",
 };
 
 export { CSS_UTILITY as C, autoMode as a, darkMode as d };

package/dist/components/resources2.js

@@ -6,15 +6,15 @@
 /*!
  * 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.0.0
+ * v2.4.0
  */
 var KindIcons;
 (function (KindIcons) {
-  KindIcons["brand"] = "lightbulb";
-  KindIcons["danger"] = "exclamationMarkTriangle";
-  KindIcons["info"] = "information";
-  KindIcons["success"] = "checkCircle";
-  KindIcons["warning"] = "exclamationMarkTriangle";
+    KindIcons["brand"] = "lightbulb";
+    KindIcons["danger"] = "exclamationMarkTriangle";
+    KindIcons["info"] = "information";
+    KindIcons["success"] = "checkCircle";
+    KindIcons["warning"] = "exclamationMarkTriangle";
 })(KindIcons || (KindIcons = {}));
 
 export { KindIcons as K };

package/dist/components/resources3.js

@@ -6,19 +6,19 @@
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  containerLink: "container--link",
-  containerMulti: "container--multi-selection",
-  containerSingle: "container--single-selection",
-  containerNone: "container--none-selection",
-  icon: "dropdown-item-icon",
-  iconEnd: "dropdown-item-icon-end",
-  iconStart: "dropdown-item-icon-start",
-  itemContent: "dropdown-item-content",
-  link: "dropdown-link",
+    container: "container",
+    containerLink: "container--link",
+    containerMulti: "container--multi-selection",
+    containerSingle: "container--single-selection",
+    containerNone: "container--none-selection",
+    icon: "dropdown-item-icon",
+    iconEnd: "dropdown-item-icon-end",
+    iconStart: "dropdown-item-icon-start",
+    itemContent: "dropdown-item-content",
+    link: "dropdown-link",
 };
 
 export { CSS as C };

package/dist/components/resources4.js

@@ -6,19 +6,19 @@
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const CSS = {
-  sticky: "sticky-pos",
+    sticky: "sticky-pos",
 };
 var ICON_TYPES;
 (function (ICON_TYPES) {
-  ICON_TYPES["circle"] = "circle";
-  ICON_TYPES["square"] = "square";
-  ICON_TYPES["grip"] = "grip";
+    ICON_TYPES["circle"] = "circle";
+    ICON_TYPES["square"] = "square";
+    ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 const SLOTS = {
-  menuActions: "menu-actions",
+    menuActions: "menu-actions",
 };
 
 export { CSS as C, ICON_TYPES as I, SLOTS as S };

package/dist/components/resources5.js

@@ -6,15 +6,15 @@
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const CSS = {
-  heading: "heading",
-  container: "container",
-  indented: "container--indented",
+    heading: "heading",
+    container: "container",
+    indented: "container--indented",
 };
 const SLOTS = {
-  parentItem: "parent-item",
+    parentItem: "parent-item",
 };
 
 export { CSS as C, SLOTS as S };

package/dist/components/scrim.js

@@ -13,16 +13,16 @@ import { d as defineCustomElement$1 } from './loader.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.0.0
+ * v2.4.0
  */
 const CSS = {
-  scrim: "scrim",
-  content: "content",
+    scrim: "scrim",
+    content: "content",
 };
 const BREAKPOINTS = {
-  s: 72,
-  // medium is assumed default.
-  l: 480, // Greater than or equal to 480px.
+    s: 72,
+    // medium is assumed default.
+    l: 480, // Greater than or equal to 480px.
 };
 
 const scrimCss = ":host{--calcite-scrim-background:var(--calcite-color-transparent-scrim);position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch}@keyframes calcite-scrim-fade-in{0%{--tw-bg-opacity:0}100%{--tw-text-opacity:1}}.scrim{position:absolute;inset:0px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background, var(--calcite-color-transparent-scrim))}.content{padding:1rem}:host([hidden]){display:none}[hidden]{display:none}";

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

@@ -10,13 +10,13 @@ import { d as defineCustomElement$1 } from './icon.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.0.0
+ * v2.4.0
  */
 const SLOTS = {
-  input: "input",
+    input: "input",
 };
 const CSS = {
-  segmentedControlItemIcon: "segmented-control-item-icon",
+    segmentedControlItemIcon: "segmented-control-item-icon",
 };
 
 const segmentedControlItemCss = ":host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-animation-timing) ease-in-out}:host label{pointer-events:none;margin:0.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-color-text-3);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-internal-animation-timing-fast) ease-in-out, color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}: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          );outline-offset:-1px}.label--scale-s{padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-block:0.125rem}.label--scale-m{padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:0.375rem}.label--scale-l{padding-inline:1rem;padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:hover) label{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:active) label{background-color:var(--calcite-color-foreground-3)}:host([checked]) label{cursor:default;border-color:var(--calcite-color-brand);background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{border-color:var(--calcite-color-brand);background-color:var(--calcite-color-foreground-1);box-shadow:inset 0 0 0 1px var(--calcite-color-brand);color:var(--calcite-color-brand)}:host([checked]) .label--outline{background-color:transparent}::slotted(input){display:none}@media (forced-colors: active){:host([checked]) label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) label:not([class~=label--outline]) .segmented-control-item-icon{color:highlightText}}.segmented-control-item-icon{position:relative;margin:0px;display:inline-flex;line-height:inherit}:host([icon-start]) .label--scale-s .segmented-control-item-icon{margin-inline-end:0.5rem}:host([icon-end]) .label--scale-s .segmented-control-item-icon{margin-inline-start:0.5rem}:host([icon-start]) .label--scale-m .segmented-control-item-icon{margin-inline-end:0.75rem}:host([icon-end]) .label--scale-m .segmented-control-item-icon{margin-inline-start:0.75rem}:host([icon-start]) .label--scale-l .segmented-control-item-icon{margin-inline-end:1rem}:host([icon-end]) .label--scale-l .segmented-control-item-icon{margin-inline-start:1rem}:host([hidden]){display:none}[hidden]{display:none}";

package/dist/components/segmented-control.js

@@ -6,12 +6,22 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client';
 import { g as getElementDir } from './dom.js';
 import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';
+import { V as Validation } from './Validation.js';
 
-const segmentedControlCss = ":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;background-color:var(--calcite-color-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-color-border-input);outline-offset:-1px}:host([appearance=outline]){background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([layout=vertical]){flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full]){inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full]) ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-segmented-control-item){justify-content:flex-start}::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}";
+/*!
+ * 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 = {
+    itemWrapper: "item-wrapper",
+};
+
+const segmentedControlCss = ":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;flex-direction:column}.item-wrapper{display:flex;background-color:var(--calcite-color-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-color-border-input);outline-offset:-1px}:host([appearance=outline])>.item-wrapper{background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([layout=vertical])>.item-wrapper{flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full])>.item-wrapper{inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full])>.item-wrapper ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical])>.item-wrapper ::slotted(calcite-segmented-control-item){justify-content:flex-start}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::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 SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl extends HTMLElement {
     constructor() {
@@ -42,6 +52,9 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         this.scale = "m";
         this.value = null;
         this.selectedItem = undefined;
+        this.status = "idle";
+        this.validationMessage = undefined;
+        this.validationIcon = undefined;
         this.width = "auto";
     }
     handlePropsChange() {
@@ -97,7 +110,7 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, { onClick: this.handleClick, role: "radiogroup" }, h("slot", null), h(HiddenFormInputSlot, { component: this })));
+        return (h(Host, { onClick: this.handleClick, role: "radiogroup" }, h("div", { class: CSS.itemWrapper }, h(InteractiveContainer, { disabled: this.disabled }, h("slot", null), h(HiddenFormInputSlot, { component: this }))), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     handleSelected(event) {
         event.preventDefault();
@@ -231,6 +244,9 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         "scale": [513],
         "value": [1025],
         "selectedItem": [1040],
+        "status": [513],
+        "validationMessage": [1, "validation-message"],
+        "validationIcon": [520, "validation-icon"],
         "width": [513],
         "setFocus": [64]
     }, [[0, "calciteInternalSegmentedControlItemChange", "handleSelected"], [0, "keydown", "handleKeyDown"]], {