@esri/calcite-components 1.0.0-next.345 → 1.0.0-next.349

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const guid = require('./guid-b270f0db.js');
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 const observers = require('./observers-41837607.js');
 
 const calciteTabCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([active]) section{display:block}:host{display:none;height:100%;width:100%}:host([active]){display:block;height:100%;width:100%;overflow:auto}section{display:none;height:100%;width:100%}:host([scale=s]){padding-top:0.25rem;padding-bottom:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}";

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

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 require('./guid-b270f0db.js');
 
 const SLOTS = {

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

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
 const observers = require('./observers-41837607.js');
 require('./guid-b270f0db.js');

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

@@ -8,8 +8,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const guid = require('./guid-b270f0db.js');
-const popper = require('./popper-a7580aca.js');
-const dom = require('./dom-19822169.js');
+const popper = require('./popper-ccef76e3.js');
+const dom = require('./dom-db7722f2.js');
 
 const CSS = {
   container: "container",
@@ -140,7 +140,7 @@ let CalciteTooltip = class {
   getReferenceElement() {
     const { referenceElement, el } = this;
     return ((typeof referenceElement === "string"
-      ? dom.queryElementRoots(el, `#${referenceElement}`)
+      ? dom.queryElementRoots(el, { id: referenceElement })
       : referenceElement) || null);
   }
   getModifiers() {
@@ -230,7 +230,7 @@ let CalciteTooltipManager = class {
       var _a;
       const { selector, el } = this;
       const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(TOOLTIP_REFERENCE);
-      return dom.queryElementRoots(el, `#${id}`);
+      return dom.queryElementRoots(el, { id });
     };
     this.clearHoverTimeout = (tooltip) => {
       const { hoverTimeouts } = this;

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

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 require('./guid-b270f0db.js');
 
 var TreeSelectionMode;

package/dist/cjs/calcite-value-list_2.cjs.entry.js

@@ -8,11 +8,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const sortable_esm = require('./sortable.esm-d7a4560b.js');
-const resources = require('./resources-27b28faa.js');
+const resources = require('./resources-8273cb31.js');
 const array = require('./array-a5dedf5a.js');
 const observers = require('./observers-41837607.js');
 const guid = require('./guid-b270f0db.js');
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 require('./debounce-95979061.js');
 
 const CSS = {
@@ -75,6 +75,7 @@ let CalciteValueList = class {
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
+    this.deselectRemovedItems = resources.deselectRemovedItems.bind(this);
     this.deselectSiblingItems = resources.deselectSiblingItems.bind(this);
     this.selectSiblings = resources.selectSiblings.bind(this);
     this.handleFilter = resources.handleFilter.bind(this);

package/dist/cjs/{dom-19822169.js → dom-db7722f2.js}

@@ -36,7 +36,8 @@ function nodeListToArray(nodeList) {
   return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
 function getThemeName(el) {
-  return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
+  const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
+  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
 }
 function getElementDir(el) {
   const prop = "dir";
@@ -55,10 +56,14 @@ function getRootNode(el) {
 function getHost(root) {
   return root.host || null;
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
+/**
+ * This helper queries an element's rootNodes and any ancestor rootNodes.
+ *
+ * @returns {Element[]} The elements.
+ */
 function queryElementsRoots(element, selector) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFromAll(el, allResults) {
     if (!el) {
       return allResults;
@@ -75,10 +80,16 @@ function queryElementsRoots(element, selector) {
   }
   return queryFromAll(element, []);
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
-function queryElementRoots(element, selector) {
+/**
+ * This helper queries an element's rootNode and any ancestor rootNodes.
+ *
+ * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
+ *
+ * @returns {Element} The element.
+ */
+function queryElementRoots(element, { selector, id }) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFrom(el) {
     if (!el) {
       return null;
@@ -87,7 +98,11 @@ function queryElementRoots(element, selector) {
       el = el.assignedSlot;
     }
     const rootNode = getRootNode(el);
-    const found = rootNode.querySelector(selector);
+    const found = id
+      ? rootNode.getElementById(id)
+      : selector
+        ? rootNode.querySelector(selector)
+        : null;
     const host = getHost(rootNode);
     return found ? found : host ? queryFrom(host) : null;
   }
@@ -110,7 +125,9 @@ async function focusElement(el) {
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
 function getSlotted(element, slotName, options) {
-  const slotSelector = `[slot="${slotName}"]`;
+  const slotSelector = Array.isArray(slotName)
+    ? slotName.map((name) => `[slot="${name}"]`).join(",")
+    : `[slot="${slotName}"]`;
   if (options === null || options === void 0 ? void 0 : options.all) {
     return queryMultiple(element, slotSelector, options);
   }

package/dist/cjs/{form-a5b44a1f.js → form-ad18d4fc.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 const index = require('./index-6b5d2de5.js');
 
 /**

package/dist/cjs/{label-8e3552b2.js → label-4776bb0e.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 
 /**
  * Exported for testing purposes only
@@ -15,7 +15,7 @@ const labelTagName = "calcite-label";
 const onLabelClickMap = new WeakMap();
 const findLabelForComponent = (componentEl) => {
   const { id } = componentEl;
-  const forLabel = id && dom.queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`);
+  const forLabel = id && dom.queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
   if (forLabel) {
     return forLabel;
   }
@@ -75,6 +75,9 @@ function getLabelText(component) {
   return component.label || ((_b = (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "";
 }
 function onLabelClick(event) {
+  if (this.disabled) {
+    return;
+  }
   const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
   if (containedLabelableChildClicked) {
     return;

package/dist/cjs/{popper-a7580aca.js → popper-ccef76e3.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 
 var top = 'top';
 var bottom = 'bottom';

package/dist/cjs/{resources-27b28faa.js → resources-8273cb31.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-db7722f2.js');
 const array = require('./array-a5dedf5a.js');
 const debounce = require('./debounce-95979061.js');
 const index = require('./index-6b5d2de5.js');
@@ -12,6 +12,7 @@ const index = require('./index-6b5d2de5.js');
 function mutationObserverCallback() {
   this.setUpItems();
   this.setUpFilter();
+  this.deselectRemovedItems();
 }
 const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
 // --------------------------------------------------------------------------
@@ -181,6 +182,15 @@ function setUpItems(tagName) {
     toggleSingleSelectItemTabbing(first, true);
   }
 }
+function deselectRemovedItems() {
+  const selectedValues = this.selectedValues;
+  const itemValues = this.items.map(({ value }) => value);
+  selectedValues.forEach((selectedItem) => {
+    if (!itemValues.includes(selectedItem.value)) {
+      this.selectedValues.delete(selectedItem.value);
+    }
+  });
+}
 function deselectSiblingItems(item) {
   this.items.forEach((currentItem) => {
     if (currentItem.value !== item.value) {
@@ -333,6 +343,7 @@ exports.calciteListFocusOutHandler = calciteListFocusOutHandler;
 exports.calciteListItemChangeHandler = calciteListItemChangeHandler;
 exports.calciteListItemValueChangeHandler = calciteListItemValueChangeHandler;
 exports.cleanUpObserver = cleanUpObserver;
+exports.deselectRemovedItems = deselectRemovedItems;
 exports.deselectSiblingItems = deselectSiblingItems;
 exports.getItemData = getItemData;
 exports.handleFilter = handleFilter;

package/dist/collection/components/calcite-date-picker/calcite-date-picker.js

@@ -161,8 +161,9 @@ export class CalciteDatePicker {
     this.monthDateChange = (e) => {
       const date = new Date(e.detail);
       if (!this.range) {
-        this.value = dateToISO(date);
-        this.activeDate = date;
+        this.value = date ? dateToISO(date) : "";
+        this.valueAsDate = date || null;
+        this.activeDate = date || null;
         return;
       }
       if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
@@ -354,14 +355,14 @@ export class CalciteDatePicker {
     }
   }
   setEndDate(date) {
-    this.end = dateToISO(date);
+    this.end = date ? dateToISO(date) : "";
     this.setEndAsDate(date, true);
-    this.activeEndDate = date;
+    this.activeEndDate = date || null;
   }
   setStartDate(date) {
-    this.start = dateToISO(date);
+    this.start = date ? dateToISO(date) : "";
     this.setStartAsDate(date, true);
-    this.activeStartDate = date;
+    this.activeStartDate = date || null;
   }
   /**
    * Get an active date using the value, or current date as default

package/dist/collection/components/calcite-dropdown-group/calcite-dropdown-group.css

@@ -78,6 +78,10 @@
   display: none;
 }
 
+:host {
+  display: block;
+}
+
 .container--s {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;

package/dist/collection/components/calcite-icon/calcite-icon.css

@@ -78,8 +78,16 @@
   display: none;
 }
 
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-ui-icon-color: the color of the icon. Defaults to 'currentColor'.
+*/
 :host {
   display: inline-flex;
+  color: var(--calcite-ui-icon-color);
 }
 
 :host([scale=s]) {

package/dist/collection/components/calcite-input/calcite-input.js

@@ -296,11 +296,12 @@ export class CalciteInput {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
-    this.editingEnabled = (_a = this.inlineEditableEl) === null || _a === void 0 ? void 0 : _a.editingEnabled;
+    if (this.inlineEditableEl) {
+      this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
+    }
     if (this.type === "number" && this.value) {
       if (isValidNumber(this.value)) {
         this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);

package/dist/collection/components/calcite-pick-list/calcite-pick-list.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Listen, Method, Prop, State, h } from "@stencil/core";
 import { ICON_TYPES } from "./resources";
-import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, getItemData, handleFilter, calciteListFocusOutHandler, initialize, initializeObserver, mutationObserverCallback, selectSiblings, setUpItems, keyDownHandler, setFocus, removeItem } from "./shared-list-logic";
+import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, calciteListFocusOutHandler, initialize, initializeObserver, mutationObserverCallback, selectSiblings, setUpItems, keyDownHandler, setFocus, removeItem } from "./shared-list-logic";
 import List from "./shared-list-render";
 import { createObserver } from "../../utils/observers";
 /**
@@ -53,6 +53,7 @@ export class CalcitePickList {
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
+    this.deselectRemovedItems = deselectRemovedItems.bind(this);
     this.deselectSiblingItems = deselectSiblingItems.bind(this);
     this.selectSiblings = selectSiblings.bind(this);
     this.handleFilter = handleFilter.bind(this);

package/dist/collection/components/calcite-pick-list/shared-list-logic.js

@@ -8,6 +8,7 @@ import { getRoundRobinIndex } from "../../utils/array";
 export function mutationObserverCallback() {
   this.setUpItems();
   this.setUpFilter();
+  this.deselectRemovedItems();
 }
 const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
 // --------------------------------------------------------------------------
@@ -182,6 +183,15 @@ export function setUpFilter() {
     this.dataForFilter = this.getItemData();
   }
 }
+export function deselectRemovedItems() {
+  const selectedValues = this.selectedValues;
+  const itemValues = this.items.map(({ value }) => value);
+  selectedValues.forEach((selectedItem) => {
+    if (!itemValues.includes(selectedItem.value)) {
+      this.selectedValues.delete(selectedItem.value);
+    }
+  });
+}
 export function deselectSiblingItems(item) {
   this.items.forEach((currentItem) => {
     if (currentItem.value !== item.value) {

package/dist/collection/components/calcite-popover/calcite-popover.js

@@ -183,7 +183,7 @@ export class CalcitePopover {
   getReferenceElement() {
     const { referenceElement, el } = this;
     return ((typeof referenceElement === "string"
-      ? queryElementRoots(el, `#${referenceElement}`)
+      ? queryElementRoots(el, { id: referenceElement })
       : referenceElement) || null);
   }
   getModifiers() {

package/dist/collection/components/calcite-popover-manager/calcite-popover-manager.js

@@ -33,7 +33,7 @@ export class CalcitePopoverManager {
       var _a;
       const { selector, el } = this;
       const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(POPOVER_REFERENCE);
-      return queryElementRoots(el, `#${id}`);
+      return queryElementRoots(el, { id });
     };
   }
   // --------------------------------------------------------------------------

package/dist/collection/components/calcite-tooltip/calcite-tooltip.js

@@ -128,7 +128,7 @@ export class CalciteTooltip {
   getReferenceElement() {
     const { referenceElement, el } = this;
     return ((typeof referenceElement === "string"
-      ? queryElementRoots(el, `#${referenceElement}`)
+      ? queryElementRoots(el, { id: referenceElement })
       : referenceElement) || null);
   }
   getModifiers() {

package/dist/collection/components/calcite-tooltip-manager/calcite-tooltip-manager.js

@@ -30,7 +30,7 @@ export class CalciteTooltipManager {
       var _a;
       const { selector, el } = this;
       const id = (_a = element.closest(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(TOOLTIP_REFERENCE);
-      return queryElementRoots(el, `#${id}`);
+      return queryElementRoots(el, { id });
     };
     this.clearHoverTimeout = (tooltip) => {
       const { hoverTimeouts } = this;

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

@@ -5,7 +5,7 @@
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";
-import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../calcite-pick-list/shared-list-logic";
+import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../calcite-pick-list/shared-list-logic";
 import List from "../calcite-pick-list/shared-list-render";
 import { getRoundRobinIndex } from "../../utils/array";
 import { createObserver } from "../../utils/observers";
@@ -59,6 +59,7 @@ export class CalciteValueList {
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
+    this.deselectRemovedItems = deselectRemovedItems.bind(this);
     this.deselectSiblingItems = deselectSiblingItems.bind(this);
     this.selectSiblings = selectSiblings.bind(this);
     this.handleFilter = handleFilter.bind(this);

package/dist/collection/utils/dom.js

@@ -21,7 +21,8 @@ export function nodeListToArray(nodeList) {
   return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
 export function getThemeName(el) {
-  return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
+  const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
+  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
 }
 export function getElementDir(el) {
   const prop = "dir";
@@ -40,10 +41,14 @@ export function getRootNode(el) {
 export function getHost(root) {
   return root.host || null;
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
+/**
+ * This helper queries an element's rootNodes and any ancestor rootNodes.
+ *
+ * @returns {Element[]} The elements.
+ */
 export function queryElementsRoots(element, selector) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFromAll(el, allResults) {
     if (!el) {
       return allResults;
@@ -60,10 +65,16 @@ export function queryElementsRoots(element, selector) {
   }
   return queryFromAll(element, []);
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
-export function queryElementRoots(element, selector) {
+/**
+ * This helper queries an element's rootNode and any ancestor rootNodes.
+ *
+ * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
+ *
+ * @returns {Element} The element.
+ */
+export function queryElementRoots(element, { selector, id }) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFrom(el) {
     if (!el) {
       return null;
@@ -72,7 +83,11 @@ export function queryElementRoots(element, selector) {
       el = el.assignedSlot;
     }
     const rootNode = getRootNode(el);
-    const found = rootNode.querySelector(selector);
+    const found = id
+      ? rootNode.getElementById(id)
+      : selector
+        ? rootNode.querySelector(selector)
+        : null;
     const host = getHost(rootNode);
     return found ? found : host ? queryFrom(host) : null;
   }
@@ -95,7 +110,9 @@ export async function focusElement(el) {
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
 export function getSlotted(element, slotName, options) {
-  const slotSelector = `[slot="${slotName}"]`;
+  const slotSelector = Array.isArray(slotName)
+    ? slotName.map((name) => `[slot="${name}"]`).join(",")
+    : `[slot="${slotName}"]`;
   if (options === null || options === void 0 ? void 0 : options.all) {
     return queryMultiple(element, slotSelector, options);
   }

package/dist/collection/utils/label.js

@@ -12,7 +12,7 @@ const labelTagName = "calcite-label";
 const onLabelClickMap = new WeakMap();
 const findLabelForComponent = (componentEl) => {
   const { id } = componentEl;
-  const forLabel = id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`);
+  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
   if (forLabel) {
     return forLabel;
   }
@@ -72,6 +72,9 @@ export function getLabelText(component) {
   return component.label || ((_b = (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "";
 }
 function onLabelClick(event) {
+  if (this.disabled) {
+    return;
+  }
   const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
   if (containedLabelableChildClicked) {
     return;

package/dist/components/calcite-date-picker2.js

@@ -227,8 +227,9 @@ let CalciteDatePicker = class extends HTMLElement {
     this.monthDateChange = (e) => {
       const date = new Date(e.detail);
       if (!this.range) {
-        this.value = dateToISO(date);
-        this.activeDate = date;
+        this.value = date ? dateToISO(date) : "";
+        this.valueAsDate = date || null;
+        this.activeDate = date || null;
         return;
       }
       if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
@@ -420,14 +421,14 @@ let CalciteDatePicker = class extends HTMLElement {
     }
   }
   setEndDate(date) {
-    this.end = dateToISO(date);
+    this.end = date ? dateToISO(date) : "";
     this.setEndAsDate(date, true);
-    this.activeEndDate = date;
+    this.activeEndDate = date || null;
   }
   setStartDate(date) {
-    this.start = dateToISO(date);
+    this.start = date ? dateToISO(date) : "";
     this.setStartAsDate(date, true);
-    this.activeStartDate = date;
+    this.activeStartDate = date || null;
   }
   /**
    * Get an active date using the value, or current date as default

package/dist/components/calcite-dropdown-group.js

@@ -11,7 +11,7 @@ const CSS = {
   containerLarge: "container--l"
 };
 
-const calciteDropdownGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem}.container--s .dropdown-title{padding:0.5rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem}.container--m .dropdown-title{padding:0.75rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem}.container--l .dropdown-title{padding:1rem}.dropdown-title{margin-bottom:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}.dropdown-separator{display:block;height:1px;background-color:var(--calcite-ui-border-3)}";
+const calciteDropdownGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem}.container--s .dropdown-title{padding:0.5rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem}.container--m .dropdown-title{padding:0.75rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem}.container--l .dropdown-title{padding:1rem}.dropdown-title{margin-bottom:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}.dropdown-separator{display:block;height:1px;background-color:var(--calcite-ui-border-3)}";
 
 let CalciteDropdownGroup$1 = class extends HTMLElement {
   constructor() {

package/dist/components/calcite-icon2.js

@@ -70,7 +70,7 @@ function normalizeIconName(name) {
     .join("");
 }
 
-const calciteIconCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-inline-flexbox;display:inline-flex}:host([scale=s]){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host([scale=m]){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host([scale=l]){height:2rem;width:2rem;min-width:2rem;min-height:2rem}.flip-rtl{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.svg{display:block}";
+const calciteIconCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-icon-color)}:host([scale=s]){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host([scale=m]){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host([scale=l]){height:2rem;width:2rem;min-width:2rem;min-height:2rem}.flip-rtl{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.svg{display:block}";
 
 let CalciteIcon = class extends HTMLElement {
   constructor() {

package/dist/components/calcite-input2.js

@@ -330,11 +330,12 @@ let CalciteInput = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
-    this.editingEnabled = (_a = this.inlineEditableEl) === null || _a === void 0 ? void 0 : _a.editingEnabled;
+    if (this.inlineEditableEl) {
+      this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
+    }
     if (this.type === "number" && this.value) {
       if (isValidNumber(this.value)) {
         this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);

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

@@ -4,7 +4,7 @@
  */
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { I as ICON_TYPES } from './resources3.js';
-import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, r as removeItem, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as calciteListFocusOutHandler, j as setUpItems, l as setFocus, L as List } from './shared-list-render.js';
+import { m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, b as initializeObserver, c as cleanUpObserver, r as removeItem, e as calciteListItemChangeHandler, f as calciteListItemValueChangeHandler, j as calciteListFocusOutHandler, l as setUpItems, n as setFocus, L as List } from './shared-list-render.js';
 import { c as createObserver } from './observers.js';
 import { d as defineCustomElement$7 } from './calcite-filter2.js';
 import { d as defineCustomElement$6 } from './calcite-icon2.js';
@@ -61,6 +61,7 @@ let CalcitePickList$1 = class extends HTMLElement {
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
+    this.deselectRemovedItems = deselectRemovedItems.bind(this);
     this.deselectSiblingItems = deselectSiblingItems.bind(this);
     this.selectSiblings = selectSiblings.bind(this);
     this.handleFilter = handleFilter.bind(this);