@esri/calcite-components 1.7.0-next.2 → 1.7.0-next.21

package/dist/components/calcite-tree.js

@@ -1,26 +1,27 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { l as focusElement, p as nodeListToArray, r as getRootNode } from './dom.js';
+import { k as focusElement, o as nodeListToArray } from './dom.js';
 
 function isTreeItem(element) {
-  return element?.matches("calcite-tree-item");
+  return element?.tagName === "CALCITE-TREE-ITEM";
 }
-function getEnabledSiblingItem(el, direction) {
-  const directionProp = direction === "down" ? "nextElementSibling" : "previousElementSibling";
-  let currentEl = el;
-  let enabledEl = null;
-  while (isTreeItem(currentEl)) {
-    if (!currentEl.disabled) {
-      enabledEl = currentEl;
-      break;
+function getTraversableItems(root) {
+  return Array.from(root.querySelectorAll("calcite-tree-item:not([disabled])")).filter((item) => {
+    let currentItem = item;
+    while (currentItem !== root && currentItem !== undefined) {
+      const parent = currentItem.parentElement;
+      const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;
+      if (!traversable) {
+        return false;
+      }
+      currentItem = currentItem.parentElement;
     }
-    currentEl = currentEl[directionProp];
-  }
-  return enabledEl;
+    return true;
+  });
 }
 
 const treeCss = ":host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
@@ -31,6 +32,80 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.calciteTreeSelect = createEvent(this, "calciteTreeSelect", 6);
+    this.keyDownHandler = (event) => {
+      if (this.child) {
+        return;
+      }
+      const root = this.el;
+      const target = event.target;
+      const supportedKeys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End", "Tab"];
+      if (!(isTreeItem(target) && this.el.contains(target)) || !supportedKeys.includes(event.key)) {
+        return;
+      }
+      const traversableItems = getTraversableItems(root);
+      if (event.key === "Tab") {
+        // root tabindex will be restored when blurred/focused
+        traversableItems.forEach((item) => (item.tabIndex = -1));
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        const currentItemIndex = traversableItems.indexOf(target);
+        const nextItem = traversableItems[currentItemIndex + 1];
+        nextItem?.focus();
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        const currentItemIndex = traversableItems.indexOf(target);
+        const previousItem = traversableItems[currentItemIndex - 1];
+        previousItem?.focus();
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        if (target.hasChildren && target.expanded) {
+          target.expanded = false;
+          event.preventDefault();
+          return;
+        }
+        const rootToItemPath = traversableItems.slice(0, traversableItems.indexOf(target)).reverse();
+        const parentItem = rootToItemPath.find((item) => item.depth === target.depth - 1);
+        parentItem?.focus();
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        if (!target.disabled && target.hasChildren) {
+          if (!target.expanded) {
+            target.expanded = true;
+            event.preventDefault();
+          }
+          else {
+            const currentItemIndex = traversableItems.indexOf(target);
+            const nextItem = traversableItems[currentItemIndex + 1];
+            nextItem?.focus();
+            event.preventDefault();
+          }
+        }
+        return;
+      }
+      if (event.key === "Home") {
+        const firstNode = traversableItems.shift();
+        if (firstNode) {
+          firstNode.focus();
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.key === "End") {
+        const lastNode = traversableItems.pop();
+        if (lastNode) {
+          lastNode.focus();
+          event.preventDefault();
+        }
+        return;
+      }
+    };
     this.lines = false;
     this.child = undefined;
     this.scale = "m";
@@ -52,7 +127,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     return (h(Host, { "aria-multiselectable": this.child
         ? undefined
-        : (this.selectionMode === "multiple" || this.selectionMode === "multichildren").toString(), role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() }, h("slot", null)));
+        : (this.selectionMode === "multiple" || this.selectionMode === "multichildren").toString(), onKeyDown: this.keyDownHandler, role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() }, h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -166,63 +241,10 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.calciteTreeSelect.emit();
     event.stopPropagation();
   }
-  keyDownHandler(event) {
-    const root = this.el.closest("calcite-tree:not([child])");
-    const target = event.target;
-    if (!(root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target))) {
-      return;
-    }
-    if (event.key === "ArrowDown") {
-      const next = getEnabledSiblingItem(target.nextElementSibling, "down");
-      if (next) {
-        next.focus();
-        event.preventDefault();
-      }
-      return;
-    }
-    if (event.key === "ArrowUp") {
-      const previous = getEnabledSiblingItem(target.previousElementSibling, "up");
-      if (previous) {
-        previous.focus();
-        event.preventDefault();
-      }
-    }
-    if (event.key === "ArrowLeft" && !target.disabled) {
-      // When focus is on an open node, closes the node.
-      if (target.hasChildren && target.expanded) {
-        target.expanded = false;
-        event.preventDefault();
-        return;
-      }
-      // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-      const parentItem = target.parentElement.closest("calcite-tree-item");
-      if (parentItem && (!target.hasChildren || target.expanded === false)) {
-        parentItem.focus();
-        event.preventDefault();
-        return;
-      }
-      // When focus is on a root node that is also either an end node or a closed node, does nothing.
-      return;
-    }
-    if (event.key === "ArrowRight" && !target.disabled) {
-      if (target.hasChildren) {
-        if (target.expanded && getRootNode(this.el).activeElement === target) {
-          // When focus is on an open node, moves focus to the first child node.
-          getEnabledSiblingItem(target.querySelector("calcite-tree-item"), "down")?.focus();
-          event.preventDefault();
-        }
-        else {
-          // When focus is on a closed node, opens the node; focus does not move.
-          target.expanded = true;
-          event.preventDefault();
-        }
-      }
-      return;
-    }
-  }
   updateAncestorTree(event) {
     const item = event.target;
-    if (item.disabled) {
+    const updateItem = event.detail.updateItem;
+    if (item.disabled || (item.indeterminate && !updateItem)) {
       return;
     }
     const ancestors = [];
@@ -234,9 +256,13 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const childItems = Array.from(item.querySelectorAll("calcite-tree-item:not([disabled])"));
     const childItemsWithNoChildren = childItems.filter((child) => !child.hasChildren);
     const childItemsWithChildren = childItems.filter((child) => child.hasChildren);
-    const futureSelected = item.hasChildren
-      ? !(item.selected || item.indeterminate)
-      : !item.selected;
+    let futureSelected;
+    if (updateItem) {
+      futureSelected = item.hasChildren ? !(item.selected || item.indeterminate) : !item.selected;
+    }
+    else {
+      futureSelected = item.selected;
+    }
     childItemsWithNoChildren.forEach((el) => {
       el.selected = futureSelected;
       el.indeterminate = false;
@@ -251,12 +277,14 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const directChildItems = Array.from(el.querySelectorAll(":scope > calcite-tree > calcite-tree-item"));
       updateItemState(directChildItems, el);
     });
-    if (item.hasChildren) {
-      updateItemState(childItems, item);
-    }
-    else {
-      item.selected = futureSelected;
-      item.indeterminate = false;
+    if (updateItem) {
+      if (item.hasChildren) {
+        updateItemState(childItems, item);
+      }
+      else {
+        item.selected = futureSelected;
+        item.indeterminate = false;
+      }
     }
     ancestors.forEach((ancestor) => {
       const descendants = nodeListToArray(ancestor.querySelectorAll("calcite-tree-item"));
@@ -271,7 +299,9 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       ancestor.selected = !indeterminate;
     });
     this.selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected);
-    this.calciteTreeSelect.emit();
+    if (updateItem) {
+      this.calciteTreeSelect.emit();
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -289,7 +319,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "scale": [1537],
     "selectionMode": [1537, "selection-mode"],
     "selectedItems": [1040]
-  }, [[0, "focus", "onFocus"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "calciteInternalTreeItemSelect", "onClick"], [0, "keydown", "keyDownHandler"]]]);
+  }, [[0, "focus", "onFocus"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "calciteInternalTreeItemSelect", "onClick"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/calcite-value-list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -10,7 +10,7 @@ import { g as guid } from './guid.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { S as SLOTS$1, C as CSS, d as defineCustomElement$2 } from './pick-list-item.js';
-import { I as ICON_TYPES } from './resources2.js';
+import { I as ICON_TYPES } from './resources3.js';
 import { d as defineCustomElement$5 } from './action.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './loader.js';

package/dist/components/calcite-value-list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
@@ -10,8 +10,8 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { c as createObserver } from './observers.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render.js';
-import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent.js';
-import { l as focusElement } from './dom.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent.js';
+import { k as focusElement } from './dom.js';
 import { d as defineCustomElement$7 } from './filter.js';
 import { d as defineCustomElement$6 } from './icon.js';
 import { d as defineCustomElement$5 } from './input.js';
@@ -161,6 +161,9 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    if (dragActive(this)) {
+      return;
+    }
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
@@ -180,6 +183,9 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    if (dragActive(this)) {
+      return;
+    }
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);

package/dist/components/checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/chip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';

package/dist/components/color-picker-hex-input.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, h as hexify, k as hexChar, b as alphaToOpacity } from './utils.js';
 import { c as color } from './index2.js';
-import { l as focusElement } from './dom.js';
+import { k as focusElement } from './dom.js';
 import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './input-number.js';

package/dist/components/color-picker-swatch.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as color } from './index2.js';
-import { v as getModeName } from './dom.js';
+import { r as getModeName } from './dom.js';
 import { h as hexify } from './utils.js';
 
 const CSS = {

package/dist/components/combobox-item.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { g as getSlotted } from './dom.js';
 import { g as guid } from './guid.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
-import { g as getAncestors, a as getDepth } from './utils2.js';
+import { g as getAncestors, i as isSingleLike, a as getDepth } from './utils2.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const CSS = {
@@ -76,7 +76,8 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //
   // --------------------------------------------------------------------------
   toggleSelected() {
-    if (this.disabled) {
+    const isSinglePersistSelect = this.selectionMode === "single-persist";
+    if (this.disabled || (isSinglePersistSelect && this.selected)) {
       return;
     }
     this.selected = !this.selected;
@@ -111,7 +112,7 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return null;
   }
   render() {
-    const isSingleSelect = this.selectionMode === "single";
+    const isSingleSelect = isSingleLike(this.selectionMode);
     const showDot = isSingleSelect && !this.disabled;
     const defaultIcon = isSingleSelect ? "dot" : "check";
     const iconPath = this.disabled ? "circle-disallowed" : defaultIcon;

package/dist/components/combobox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter2.js';
@@ -16,7 +16,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { c as createObserver } from './observers.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
-import { C as ComboboxChildSelector, b as getItemAncestors, c as getItemChildren, h as hasActiveChildren, d as ComboboxItem, e as ComboboxItemGroup, f as CSS$1 } from './utils2.js';
+import { i as isSingleLike, C as ComboboxChildSelector, b as getItemAncestors, c as getItemChildren, h as hasActiveChildren, d as ComboboxItem, e as ComboboxItemGroup, f as CSS$1 } from './utils2.js';
 import { d as defineCustomElement$2 } from './chip.js';
 import { d as defineCustomElement$1 } from './icon.js';
 import { d as debounce } from './debounce.js';
@@ -31,7 +31,7 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
     h("calcite-icon", { icon: "x", scale: scale === "l" ? "m" : "s" })));
 }
 
-const comboboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-ui-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-ui-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1.5rem}:host([scale=s]) .x-button{margin-inline-end:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:2rem}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:2.75rem}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px}.input{flex-grow:1;-webkit-appearance:none;appearance:none;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-ui-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-inline-size:120px;margin-block-end:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{margin-block:0px;padding:0px}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:flex;flex-grow:1}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;inline-size:1rem;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{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}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);margin-inline:0 var(--calcite-combobox-item-spacing-unit-s);max-inline-size:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.item{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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-ui-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-ui-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline-end:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px}.input{flex-grow:1;-webkit-appearance:none;appearance:none;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-ui-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-inline-size:120px;margin-block-end:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;inline-size:1rem;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{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}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);margin-inline:0 var(--calcite-combobox-item-spacing-unit-s);max-inline-size:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.item{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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
 
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -238,7 +238,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (this.allowCustomValues && this.text.trim().length) {
         this.addCustomChip(this.text);
       }
-      if (this.selectionMode === "single") {
+      if (isSingleLike(this.selectionMode)) {
         if (this.textInput) {
           this.textInput.value = "";
         }
@@ -612,7 +612,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return [...this.groupItems, ...this.items];
   }
   toggleSelection(item, value = !item.selected) {
-    if (!item) {
+    if (!item ||
+      (this.selectionMode === "single-persist" && item.selected && item.value === this.value)) {
       return;
     }
     if (this.isMulti()) {
@@ -686,7 +687,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }));
   }
   getNeedsIcon() {
-    return this.selectionMode === "single" && this.items.some((item) => item.icon);
+    return isSingleLike(this.selectionMode) && this.items.some((item) => item.icon);
   }
   resetText() {
     if (this.textInput) {
@@ -789,7 +790,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   isMulti() {
-    return this.selectionMode !== "single";
+    return !isSingleLike(this.selectionMode);
   }
   //--------------------------------------------------------------------------
   //
@@ -811,7 +812,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   renderInput() {
     const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
-    const single = selectionMode === "single";
+    const single = isSingleLike(selectionMode);
     const selectedItem = selectedItems[0];
     const showLabel = !open && single && !!selectedItem;
     return (h("span", { class: {
@@ -853,7 +854,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
     const selectedItem = selectedItems[0];
     const selectedIcon = selectedItem?.icon;
-    const singleSelectionMode = selectionMode === "single";
+    const singleSelectionMode = isSingleLike(selectionMode);
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
       : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
@@ -865,7 +866,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const { guid, label, open } = this;
-    const single = this.selectionMode === "single";
+    const single = isSingleLike(this.selectionMode);
     const isClearable = !this.clearDisabled && this.value?.length > 0;
     return (h(Host, { onClick: this.comboboxFocusHandler }, h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
         wrapper: true,

package/dist/components/conditionalSlot.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { forceUpdate } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/cs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/da.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/date-picker-day.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { b as dateToISO } from './date.js';
+import { c as dateToISO } from './date.js';
 import { c as closestElementCrossShadowBoundary, b as getElementDir, t as toAriaBoolean, C as CSS_UTILITY } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { i as isActivationKey } from './key.js';

package/dist/components/date-picker-month-header.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
-import { h as getOrder, e as dateFromRange, n as nextMonth, p as prevMonth, j as formatCalendarYear, k as parseCalendarYear } from './date.js';
+import { j as getOrder, f as dateFromRange, n as nextMonth, p as prevMonth, k as formatCalendarYear, l as parseCalendarYear } from './date.js';
 import { c as closestElementCrossShadowBoundary } from './dom.js';
 import { i as isActivationKey } from './key.js';
 import { n as numberStringFormatter } from './locale.js';

package/dist/components/date-picker-month.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { f as sameDate, e as dateFromRange, i as inRange } from './date.js';
+import { h as sameDate, f as dateFromRange, i as inRange } from './date.js';
 import { d as defineCustomElement$1 } from './date-picker-day.js';
 
 const datePickerMonthCss = ":host([hidden]){display:none}[hidden]{display:none}.calendar{margin-block-end:0.25rem}.week-headers{display:flex;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px;padding-inline:0.25rem}.week-header{text-align:center;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-3);inline-size:14.2857142857%}.day{display:flex;min-inline-size:0px;justify-content:center;inline-size:14.2857142857%}:host([scale=s]) .week-header{padding-inline:0px;padding-block:0.5rem 0.75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .week-header{padding-inline:0px;padding-block:0.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=l]) .week-header{padding-inline:0px;padding-block:1rem 1.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}.week-days{display:flex;flex-direction:row;padding-block:0px;padding-inline:6px}.week-days:focus{outline:2px solid transparent;outline-offset:2px}";

package/dist/components/date-picker.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
-import { c as dateFromISO, g as getDaysDiff, b as dateToISO, e as dateFromRange, s as setEndOfDay } from './date.js';
+import { e as dateFromISO, g as getDaysDiff, c as dateToISO, f as dateFromRange, s as setEndOfDay } from './date.js';
 import { c as componentFocusable, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
 import { g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter, a as getDateTimeFormat } from './locale.js';
 import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';

package/dist/components/date.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { n as numberStringFormatter } from './locale.js';
 
@@ -136,6 +136,16 @@ function dateToISO(date) {
   }
   return "";
 }
+/**
+ * Retrieve day, month, and year strings from a ISO string (YYYY-mm-dd)
+ *
+ * @param string
+ * @param isoDate
+ */
+function datePartsFromISO(isoDate) {
+  const dateParts = isoDate.split("-");
+  return { day: dateParts[2], month: dateParts[1], year: dateParts[0] };
+}
 /**
  * Check if two dates are the same day, month, year
  *
@@ -227,4 +237,4 @@ function setEndOfDay(date) {
   return date;
 }
 
-export { dateFromLocalizedString as a, dateToISO as b, dateFromISO as c, datePartsFromLocalizedString as d, dateFromRange as e, sameDate as f, getDaysDiff as g, getOrder as h, inRange as i, formatCalendarYear as j, parseCalendarYear as k, nextMonth as n, prevMonth as p, setEndOfDay as s };
+export { datePartsFromLocalizedString as a, dateFromLocalizedString as b, dateToISO as c, datePartsFromISO as d, dateFromISO as e, dateFromRange as f, getDaysDiff as g, sameDate as h, inRange as i, getOrder as j, formatCalendarYear as k, parseCalendarYear as l, nextMonth as n, prevMonth as p, setEndOfDay as s };