@esri/calcite-components 1.0.0-next.466 → 1.0.0-next.469

package/dist/custom-elements/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.466
+ * v1.0.0-next.469
  */
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, Build, forceUpdate, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -13,7 +13,7 @@ const Accordion = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteAccordionChange = createEvent(this, "calciteAccordionChange", 7);
+    this.calciteInternalAccordionChange = createEvent(this, "calciteInternalAccordionChange", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -27,8 +27,10 @@ const Accordion = class extends HTMLElement$1 {
     this.iconType = "chevron";
     /** specify the scale of accordion, defaults to m */
     this.scale = "m";
-    /** specify the selection mode - multi (allow any number of open items), single (allow one open item),
-     * or single-persist (allow and require one open item), defaults to multi */
+    /**
+     * specify the selection mode - multi (allow any number of open items), single (allow one open item),
+     * or single-persist (allow and require one open item), defaults to multi
+     */
     this.selectionMode = "multi";
     //--------------------------------------------------------------------------
     //
@@ -64,7 +66,7 @@ const Accordion = class extends HTMLElement$1 {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteAccordionItemKeyEvent(e) {
+  calciteInternalAccordionItemKeyEvent(e) {
     const item = e.detail.item;
     const parent = e.detail.parent;
     if (this.el === parent) {
@@ -97,6 +99,7 @@ const Accordion = class extends HTMLElement$1 {
           break;
       }
     }
+    e.stopPropagation();
   }
   registerCalciteAccordionItem(e) {
     const item = {
@@ -107,12 +110,14 @@ const Accordion = class extends HTMLElement$1 {
     if (this.el === item.parent) {
       this.items.push(item);
     }
+    e.stopPropagation();
   }
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail.requestedAccordionItem;
-    this.calciteAccordionChange.emit({
+    this.calciteInternalAccordionChange.emit({
       requestedAccordionItem: this.requestedAccordionItem
     });
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -179,6 +184,7 @@ const guid = () => gen([2, 1, 1, 1, 3]);
  *
  * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
  *
+ * @param el
  * @returns {string} The element's ID.
  */
 function ensureId(el) {
@@ -214,6 +220,8 @@ function getHost(root) {
 /**
  * This helper queries an element's rootNodes and any ancestor rootNodes.
  *
+ * @param element
+ * @param selector
  * @returns {Element[]} The elements.
  */
 function queryElementsRoots(element, selector) {
@@ -240,6 +248,10 @@ function queryElementsRoots(element, selector) {
  *
  * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
  *
+ * @param element
+ * @param root0
+ * @param root0.selector
+ * @param root0.id
  * @returns {Element} The element.
  */
 function queryElementRoots(element, { selector, id }) {
@@ -350,6 +362,7 @@ function intersects(rect1, rect2) {
  *
  * It should only be used for aria attributes that require a string value of "true" or "false".
  *
+ * @param value
  * @returns {string} The string conversion of a boolean value ("true" | "false").
  */
 function toAriaBoolean(value) {
@@ -363,10 +376,10 @@ const AccordionItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteAccordionItemKeyEvent = createEvent(this, "calciteAccordionItemKeyEvent", 7);
-    this.calciteAccordionItemSelect = createEvent(this, "calciteAccordionItemSelect", 7);
-    this.calciteAccordionItemClose = createEvent(this, "calciteAccordionItemClose", 7);
-    this.calciteAccordionItemRegister = createEvent(this, "calciteAccordionItemRegister", 7);
+    this.calciteInternalAccordionItemKeyEvent = createEvent(this, "calciteInternalAccordionItemKeyEvent", 7);
+    this.calciteInternalAccordionItemSelect = createEvent(this, "calciteInternalAccordionItemSelect", 7);
+    this.calciteInternalAccordionItemClose = createEvent(this, "calciteInternalAccordionItemClose", 7);
+    this.calciteInternalAccordionItemRegister = createEvent(this, "calciteInternalAccordionItemRegister", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -398,7 +411,7 @@ const AccordionItem = class extends HTMLElement$1 {
   }
   componentDidLoad() {
     this.itemPosition = this.getItemPosition();
-    this.calciteAccordionItemRegister.emit({
+    this.calciteInternalAccordionItemRegister.emit({
       parent: this.parent,
       position: this.itemPosition
     });
@@ -437,7 +450,7 @@ const AccordionItem = class extends HTMLElement$1 {
         case "ArrowDown":
         case "Home":
         case "End":
-          this.calciteAccordionItemKeyEvent.emit({
+          this.calciteInternalAccordionItemKeyEvent.emit({
             parent: this.parent,
             item: e
           });
@@ -453,6 +466,7 @@ const AccordionItem = class extends HTMLElement$1 {
       return;
     }
     this.determineActiveItem();
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -475,7 +489,7 @@ const AccordionItem = class extends HTMLElement$1 {
     }
   }
   emitRequestedItem() {
-    this.calciteAccordionItemSelect.emit({
+    this.calciteInternalAccordionItemSelect.emit({
       requestedAccordionItem: this.el
     });
   }
@@ -520,7 +534,7 @@ function getObserver(type) {
 }
 
 function noopClick() {
-  /** noop **/
+  /** noop */
 }
 /**
  * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility.
@@ -529,8 +543,11 @@ function noopClick() {
  *
  * **Notes**
  *
- * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
- * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
+ * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
+ * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
+ *
+ * @param component
+ * @param hostIsTabbable
  */
 function updateHostInteraction(component, hostIsTabbable = false) {
   if (component.disabled) {
@@ -587,7 +604,9 @@ const Action = class extends HTMLElement$1 {
      * Indicates unread changes.
      */
     this.indicator = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT$r.loading;
@@ -2062,6 +2081,8 @@ let mutationObserver;
 const observerOptions = { childList: true };
 /**
  * Helper to set up a conditional slot component on connectedCallback.
+ *
+ * @param component
  */
 function connectConditionalSlotComponent(component) {
   if (!mutationObserver) {
@@ -2071,6 +2092,8 @@ function connectConditionalSlotComponent(component) {
 }
 /**
  * Helper to tear down a conditional slot component on disconnectedCallback.
+ *
+ * @param component
  */
 function disconnectConditionalSlotComponent(component) {
   observed.delete(component.el);
@@ -2222,12 +2245,17 @@ const ActionBar = class extends HTMLElement$1 {
   // --------------------------------------------------------------------------
   /**
    * Overflows actions that won't fit into menus.
+   *
    * @internal
    */
   async overflowActions() {
     this.resize(this.el.clientHeight);
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
@@ -2363,6 +2391,7 @@ const ActionMenu = class extends HTMLElement$1 {
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the referenceElement.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = "auto";
@@ -2699,7 +2728,11 @@ const ActionPad = class extends HTMLElement$1 {
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
@@ -2761,8 +2794,8 @@ const Alert = class extends HTMLElement$1 {
     this.__attachShadow();
     this.calciteAlertClose = createEvent(this, "calciteAlertClose", 7);
     this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 7);
-    this.calciteAlertSync = createEvent(this, "calciteAlertSync", 7);
-    this.calciteAlertRegister = createEvent(this, "calciteAlertRegister", 7);
+    this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 7);
+    this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -2776,7 +2809,9 @@ const Alert = class extends HTMLElement$1 {
     this.autoDismissDuration = this.autoDismiss ? "medium" : null;
     /** Color for the alert (will apply to top border and icon) */
     this.color = "blue";
-    /** string to override English close text
+    /**
+     * string to override English close text
+     *
      * @default "Close"
      */
     this.intlClose = TEXT$n.intlClose;
@@ -2805,7 +2840,7 @@ const Alert = class extends HTMLElement$1 {
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
       this.determineActiveAlert();
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
@@ -2823,11 +2858,11 @@ const Alert = class extends HTMLElement$1 {
   }
   watchActive() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
     if (!this.active) {
       this.queue = this.queue.filter((e) => e !== this.el);
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     }
   }
   updateRequestedIcon() {
@@ -2846,7 +2881,7 @@ const Alert = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
   }
   componentWillLoad() {
@@ -2875,6 +2910,7 @@ const Alert = class extends HTMLElement$1 {
     }
     this.queueLength = this.queue.length;
     this.determineActiveAlert();
+    event.stopPropagation();
   }
   // when an alert is first registered, trigger a queue sync to get queue
   alertRegister() {
@@ -2882,7 +2918,7 @@ const Alert = class extends HTMLElement$1 {
       this.queued = true;
       this.queue.push(this.el);
     }
-    this.calciteAlertSync.emit({ queue: this.queue });
+    this.calciteInternalAlertSync.emit({ queue: this.queue });
     this.determineActiveAlert();
   }
   //--------------------------------------------------------------------------
@@ -3048,6 +3084,8 @@ function colorEqual(value1, value2) {
 /**
  * Convert a string to a valid hex by hashing its contents
  * and using the hash as a seed for three distinct color values
+ *
+ * @param str
  */
 function stringToHex(str) {
   let hash = 0;
@@ -3063,6 +3101,8 @@ function stringToHex(str) {
 }
 /**
  * Find the hue of a color given the separate RGB color channels
+ *
+ * @param rgb
  */
 function rgbToHue(rgb) {
   let { r, g, b } = rgb;
@@ -3091,6 +3131,7 @@ function rgbToHue(rgb) {
 }
 /**
  * For a hex color, find the hue
+ *
  * @param hex {string} - form of "#------"
  */
 function hexToHue(hex) {
@@ -3252,17 +3293,25 @@ const Block = class extends HTMLElement$1 {
     this.dragHandle = false;
     /**
      * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+     *
+     * @default "Collapse"
      */
     this.intlCollapse = TEXT$m.collapse;
     /**
      * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+     *
+     * @default "Expand"
      */
     this.intlExpand = TEXT$m.expand;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT$m.loading;
-    /** Text string used for the actions menu
+    /**
+     * Text string used for the actions menu
+     *
      * @default "Options"
      */
     this.intlOptions = TEXT$m.options;
@@ -3497,6 +3546,7 @@ const TEXT$k = {
 
 /**
  * Exported for testing purposes only
+ *
  * @internal
  */
 const labelClickEvent = "calciteInternalLabelClick";
@@ -3539,6 +3589,8 @@ function hasAncestorCustomElements(label, componentEl) {
 }
 /**
  * Helper to set up label interactions on connectedCallback.
+ *
+ * @param component
  */
 function connectLabel(component) {
   const labelEl = findLabelForComponent(component.el);
@@ -3563,6 +3615,8 @@ function connectLabel(component) {
 }
 /**
  * Helper to tear down label interactions on disconnectedCallback on labelable components.
+ *
+ * @param component
  */
 function disconnectLabel(component) {
   unlabeledComponents.delete(component);
@@ -3579,6 +3633,8 @@ function disconnectLabel(component) {
 }
 /**
  * Helper to get the label text from a component.
+ *
+ * @param component
  */
 function getLabelText(component) {
   var _a, _b;
@@ -3633,6 +3689,8 @@ function hasRegisteredFormComponentParent(form, formComponentEl) {
 }
 /**
  * Helper to submit a form.
+ *
+ * @param component
  */
 function submitForm(component) {
   var _a;
@@ -3640,6 +3698,8 @@ function submitForm(component) {
 }
 /**
  * Helper to reset a form.
+ *
+ * @param component
  */
 function resetForm(component) {
   var _a;
@@ -3647,6 +3707,8 @@ function resetForm(component) {
 }
 /**
  * Helper to set up form interactions on connectedCallback.
+ *
+ * @param component
  */
 function connectForm(component) {
   const { el, value } = component;
@@ -3673,6 +3735,8 @@ function onFormReset() {
 }
 /**
  * Helper to tear down form interactions on disconnectedCallback.
+ *
+ * @param component
  */
 function disconnectForm(component) {
   const { el, formEl } = component;
@@ -3689,6 +3753,9 @@ function disconnectForm(component) {
  * Helper for setting the default value on initialization after connectedCallback.
  *
  * Note that this is only needed if the default value cannot be determined on connectedCallback.
+ *
+ * @param component
+ * @param value
  */
 function afterConnectDefaultValueSet(component, value) {
   component.defaultValue = value;
@@ -3697,6 +3764,8 @@ function afterConnectDefaultValueSet(component, value) {
  * Helper for maintaining a form-associated's hidden input in sync with the component.
  *
  * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198
+ *
+ * @param component
  */
 function syncHiddenFormInput(component) {
   const { el, formEl, name, value } = component;
@@ -3781,6 +3850,9 @@ function defaultSyncHiddenFormInput(component, input, value) {
  * }
  *
  * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.
+ *
+ * @param root0
+ * @param root0.component
  */
 const HiddenFormInputSlot = ({ component }) => {
   syncHiddenFormInput(component);
@@ -3807,7 +3879,9 @@ const Button = class extends HTMLElement$1 {
     this.color = "blue";
     /** is the button disabled  */
     this.disabled = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT$k.loading;
@@ -3823,7 +3897,7 @@ const Button = class extends HTMLElement$1 {
     this.type = "button";
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
-    /** watches for changing text content **/
+    /** watches for changing text content */
     this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     /** determine if there is slotted content for styling purposes */
     this.hasContent = false;
@@ -3970,15 +4044,21 @@ const Card = class extends HTMLElement$1 {
     this.selected = false;
     /** Indicates whether the card is selectable. */
     this.selectable = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT$j.loading;
-    /** string to override English select text for checkbox when selectable is true
+    /**
+     * string to override English select text for checkbox when selectable is true
+     *
      * @default "Select"
      */
     this.intlSelect = TEXT$j.select;
-    /** string to override English deselect text for checkbox when selectable is true
+    /**
+     * string to override English deselect text for checkbox when selectable is true
+     *
      * @default "Deselect"
      */
     this.intlDeselect = TEXT$j.deselect;
@@ -4069,6 +4149,7 @@ const Checkbox = class extends HTMLElement$1 {
     this.disabled = false;
     /**
      * The hovered state of the checkbox.
+     *
      * @internal
      */
     this.hovered = false;
@@ -4076,7 +4157,7 @@ const Checkbox = class extends HTMLElement$1 {
      * True if the checkbox is initially indeterminate,
      * which is independent from its checked state
      * https://css-tricks.com/indeterminate-checkboxes/
-     * */
+     */
     this.indeterminate = false;
     /**
      * When true, makes the component required for form-submission.
@@ -4206,7 +4287,9 @@ const Chip = class extends HTMLElement$1 {
     this.color = "grey";
     /** Optionally show a button the user can click to dismiss the chip */
     this.dismissible = false;
-    /** Aria label for the "x" button
+    /**
+     * Aria label for the "x" button
+     *
      * @default "Close"
      */
     this.dismissLabel = TEXT$i.close;
@@ -6528,6 +6611,7 @@ const ColorPicker = class extends HTMLElement$1 {
      * The format of the value property.
      *
      * When "auto", the format will be inferred from `value` when set.
+     *
      * @default "auto"
      */
     this.format = defaultFormat;
@@ -6537,80 +6621,117 @@ const ColorPicker = class extends HTMLElement$1 {
     this.hideChannels = false;
     /** When true, hides the saved colors section */
     this.hideSaved = false;
-    /** Label used for the blue channel
+    /**
+     * Label used for the blue channel
+     *
      * @default "B"
      */
     this.intlB = TEXT$h.b;
-    /** Label used for the blue channel description
+    /**
+     * Label used for the blue channel description
+     *
      * @default "Blue"
      */
     this.intlBlue = TEXT$h.blue;
-    /** Label used for the delete color button.
+    /**
+     * Label used for the delete color button.
+     *
      * @default "Delete color"
      */
     this.intlDeleteColor = TEXT$h.deleteColor;
-    /** Label used for the green channel
+    /**
+     * Label used for the green channel
+     *
      * @default "G"
      */
     this.intlG = TEXT$h.g;
-    /** Label used for the green channel description
+    /**
+     * Label used for the green channel description
+     *
      * @default "Green"
      */
     this.intlGreen = TEXT$h.green;
-    /** Label used for the hue channel
+    /**
+     * Label used for the hue channel
+     *
      * @default "H"
      */
     this.intlH = TEXT$h.h;
-    /** Label used for the HSV mode
+    /**
+     * Label used for the HSV mode
+     *
      * @default "HSV"
      */
     this.intlHsv = TEXT$h.hsv;
-    /** Label used for the hex input
+    /**
+     * Label used for the hex input
+     *
      * @default "Hex"
      */
     this.intlHex = TEXT$h.hex;
-    /** Label used for the hue channel description
+    /**
+     * Label used for the hue channel description
+     *
      * @default "Hue"
      */
     this.intlHue = TEXT$h.hue;
     /**
      * Label used for the hex input when there is no color selected.
+     *
      * @default "No color"
      */
     this.intlNoColor = TEXT$h.noColor;
-    /** Label used for the red channel
+    /**
+     * Label used for the red channel
+     *
      * @default "R"
      */
     this.intlR = TEXT$h.r;
-    /** Label used for the red channel description
+    /**
+     * Label used for the red channel description
+     *
      * @default "Red"
      */
     this.intlRed = TEXT$h.red;
-    /** Label used for the RGB mode
+    /**
+     * Label used for the RGB mode
+     *
      * @default "RGB"
      */
     this.intlRgb = TEXT$h.rgb;
-    /** Label used for the saturation channel
+    /**
+     * Label used for the saturation channel
+     *
      * @default "S"
      */
     this.intlS = TEXT$h.s;
-    /** Label used for the saturation channel description
+    /**
+     * Label used for the saturation channel description
+     *
      * @default "Saturation"
      */
     this.intlSaturation = TEXT$h.saturation;
-    /** Label used for the save color button.
+    /**
+     * Label used for the save color button.
+     *
      * @default "Save color"
      */
     this.intlSaveColor = TEXT$h.saveColor;
-    /** Label used for the saved colors section
+    /**
+     * Label used for the saved colors section
+     *
      * @default "Saved"
      */
     this.intlSaved = TEXT$h.saved;
-    /** Label used for the value channel
+    /**
+     * Label used for the value channel
+     *
      * @default "V"
      */
     this.intlV = TEXT$h.v;
-    /** Label used for the
+    /**
+     * Label used for the
+     *
      * @default "Value"
      */
     this.intlValue = TEXT$h.value;
@@ -6625,6 +6746,7 @@ const ColorPicker = class extends HTMLElement$1 {
      * a RGB, HSL or HSV object.
      *
      * The type will be preserved as the color is updated.
+     *
      * @default "#007ac2"
      * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
      */
@@ -7295,11 +7417,13 @@ const ColorPickerHexInput = class extends HTMLElement$1 {
     this.allowEmpty = false;
     /**
      * Label used for the hex input.
+     *
      * @default "Hex"
      */
     this.intlHex = TEXT$h.hex;
     /**
      * Label used for the hex input when there is no color selected.
+     *
      * @default "No color"
      */
     this.intlNoColor = TEXT$h.noColor;
@@ -7311,7 +7435,7 @@ const ColorPickerHexInput = class extends HTMLElement$1 {
      * The hex value.
      */
     this.value = normalizeHex(DEFAULT_COLOR.hex());
-    this.onCalciteInputBlur = () => {
+    this.onCalciteInternalInputBlur = () => {
       const node = this.inputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
@@ -7396,7 +7520,7 @@ const ColorPickerHexInput = class extends HTMLElement$1 {
   render() {
     const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    return (h("div", { class: CSS$F.container }, h("calcite-input", { class: CSS$F.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS$F.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
+    return (h("div", { class: CSS$F.container }, h("calcite-input", { class: CSS$F.input, label: intlHex, maxLength: 6, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS$F.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -9475,7 +9599,8 @@ const Combobox = class extends HTMLElement$1 {
      * @internal
      */
     this.required = false;
-    /** specify the selection mode
+    /**
+     * specify the selection mode
      * - multi: allow any number of selected items (default)
      * - single: only one selection)
      * - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
@@ -9485,7 +9610,9 @@ const Combobox = class extends HTMLElement$1 {
     this.scale = "m";
     /** The value(s) of the selectedItem(s) */
     this.value = null;
-    /** string to override the English "Remove tag" text for when an item is selected.
+    /**
+     * string to override the English "Remove tag" text for when an item is selected.
+     *
      * @default "Remove tag"
      */
     this.intlRemoveTag = TEXT$g.removeTag;
@@ -10292,6 +10419,8 @@ const ComboboxItem = class extends HTMLElement$1 {
   /**
    * Used to toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     if (this.disabled) {
@@ -10574,6 +10703,8 @@ function localizeNumberString(numberString, locale, displayGroupSeparator = fals
 /**
  * Get supported locale code from raw user input
  * Exported for testing purposes.
+ *
+ * @param lang
  * @private
  */
 function getSupportedLocale(lang = "") {
@@ -10592,17 +10723,21 @@ function getSupportedLocale(lang = "") {
 /**
  * CLDR cache.
  * Exported for testing purposes.
+ *
  * @private
  */
 const translationCache = {};
 /**
  * CLDR request cache.
  * Exported for testing purposes.
+ *
  * @private
  */
 const requestCache$1 = {};
 /**
  * Fetch calendar data for a given locale from list of supported languages
+ *
+ * @param lang
  * @public
  */
 async function getLocaleData(lang) {
@@ -10625,6 +10760,10 @@ async function getLocaleData(lang) {
 
 /**
  * Check if date is within a min and max
+ *
+ * @param date
+ * @param min
+ * @param max
  */
 function inRange(date, min, max) {
   const time = date.getTime();
@@ -10635,6 +10774,10 @@ function inRange(date, min, max) {
 /**
  * Ensures date is within range,
  * returns min or max if out of bounds
+ *
+ * @param date
+ * @param min
+ * @param max
  */
 function dateFromRange(date, min, max) {
   if (!(date instanceof Date)) {
@@ -10654,6 +10797,8 @@ function dateFromRange(date, min, max) {
 /**
  * Parse an iso8601 string (YYYY-mm-dd) into a valid date.
  * TODO: handle time when time of day UI is added
+ *
+ * @param iso8601
  */
 function dateFromISO(iso8601) {
   if (iso8601 instanceof Date) {
@@ -10672,6 +10817,8 @@ function dateFromISO(iso8601) {
 }
 /**
  * Return first portion of ISO string (YYYY-mm-dd)
+ *
+ * @param date
  */
 function dateToISO(date) {
   if (typeof date === "string") {
@@ -10684,6 +10831,9 @@ function dateToISO(date) {
 }
 /**
  * Check if two dates are the same day, month, year
+ *
+ * @param d1
+ * @param d2
  */
 function sameDate(d1, d2) {
   return (d1 instanceof Date &&
@@ -10694,6 +10844,8 @@ function sameDate(d1, d2) {
 }
 /**
  * Get a date one month in the past
+ *
+ * @param date
  */
 function prevMonth(date) {
   const month = date.getMonth();
@@ -10707,6 +10859,8 @@ function prevMonth(date) {
 }
 /**
  * Get a date one month in the future
+ *
+ * @param date
  */
 function nextMonth(date) {
   const month = date.getMonth();
@@ -10720,6 +10874,9 @@ function nextMonth(date) {
 }
 /**
  * Translate a number into a given locals numeral system
+ *
+ * @param num
+ * @param localeData
  */
 function localizeNumber(num, localeData) {
   return String(num)
@@ -10729,6 +10886,9 @@ function localizeNumber(num, localeData) {
 }
 /**
  * Calculate actual number from localized string
+ *
+ * @param str
+ * @param localeData
  */
 function parseNumber(str, localeData) {
   const numerals = "0123456789";
@@ -10741,6 +10901,9 @@ function parseNumber(str, localeData) {
 /**
  * Parse numeric units for day, month, and year from a localized string
  * month starts at 0 (can pass to date constructor)
+ *
+ * @param str
+ * @param localeData
  */
 function parseDateString(str, localeData) {
   const { separator, unitOrder } = localeData;
@@ -10754,6 +10917,8 @@ function parseDateString(str, localeData) {
 }
 /**
  * Convert eastern arbic numerals
+ *
+ * @param str
  */
 function replaceArabicNumerals(str = "") {
   return str
@@ -10762,6 +10927,8 @@ function replaceArabicNumerals(str = "") {
 }
 /**
  * Based on the unitOrder string, find order of month, day, and year for locale
+ *
+ * @param unitOrder
  */
 function getOrder(unitOrder) {
   const signifiers = ["d", "m", "y"];
@@ -10770,6 +10937,9 @@ function getOrder(unitOrder) {
 }
 /**
  * Get number of days between two dates
+ *
+ * @param date1
+ * @param date2
  */
 function getDaysDiff(date1, date2) {
   const ts1 = date1.getTime();
@@ -10793,15 +10963,21 @@ const DatePicker = class extends HTMLElement$1 {
     this.__attachShadow();
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
-    /** Localized string for "previous month" (used for aria label)
+    /**
+     * Localized string for "previous month" (used for aria label)
+     *
      * @default "Previous month"
      */
     this.intlPrevMonth = TEXT$f.prevMonth;
-    /** Localized string for "next month" (used for aria label)
+    /**
+     * Localized string for "next month" (used for aria label)
+     *
      * @default "Next month"
      */
     this.intlNextMonth = TEXT$f.nextMonth;
-    /** Localized string for "year" (used for aria label)
+    /**
+     * Localized string for "year" (used for aria label)
+     *
      * @default "Year"
      */
     this.intlYear = TEXT$f.year;
@@ -10917,6 +11093,7 @@ const DatePicker = class extends HTMLElement$1 {
           this.hoverRange = undefined;
         }
       }
+      e.stopPropagation();
     };
     this.monthMouseOutChange = () => {
       if (this.hoverRange) {
@@ -10942,6 +11119,8 @@ const DatePicker = class extends HTMLElement$1 {
     };
     /**
      * Event handler for when the selected date changes
+     *
+     * @param e
      */
     this.monthDateChange = (e) => {
       const date = new Date(e.detail);
@@ -11111,15 +11290,24 @@ const DatePicker = class extends HTMLElement$1 {
   }
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
+   *
+   * @param activeDate
+   * @param maxDate
+   * @param minDate
+   * @param date
+   * @param endDate
    */
   renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
       h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL$6, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
-      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerHover: this.monthHoverChange, onCalciteDatePickerMouseOut: this.monthMouseOutChange, onCalciteDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
+      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerSelect: this.monthDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
   /**
    * Update date instance of start if valid
+   *
+   * @param startDate
+   * @param emit
    */
   setStartAsDate(startDate, emit) {
     this.startAsDate = startDate;
@@ -11133,6 +11321,9 @@ const DatePicker = class extends HTMLElement$1 {
   }
   /**
    * Update date instance of end if valid
+   *
+   * @param endDate
+   * @param emit
    */
   setEndAsDate(endDate, emit) {
     this.endAsDate = endDate;
@@ -11156,6 +11347,10 @@ const DatePicker = class extends HTMLElement$1 {
   }
   /**
    * Get an active date using the value, or current date as default
+   *
+   * @param value
+   * @param min
+   * @param max
    */
   getActiveDate(value, min, max) {
     return dateFromRange(this.activeDate, min, max) || value || dateFromRange(new Date(), min, max);
@@ -11190,7 +11385,7 @@ const DatePickerDay = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.calciteDaySelect = createEvent(this, "calciteDaySelect", 7);
-    this.calciteDayHover = createEvent(this, "calciteDayHover", 7);
+    this.calciteInternalDayHover = createEvent(this, "calciteInternalDayHover", 7);
     /** Date is outside of range and can't be selected */
     this.disabled = false;
     /** Date is in the current month. */
@@ -11225,7 +11420,7 @@ const DatePickerDay = class extends HTMLElement$1 {
     };
   }
   mouseoverHandler() {
-    this.calciteDayHover.emit({
+    this.calciteInternalDayHover.emit({
       disabled: this.disabled
     });
   }
@@ -11260,9 +11455,9 @@ const DatePickerMonth = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 7);
-    this.calciteDatePickerHover = createEvent(this, "calciteDatePickerHover", 7);
+    this.calciteInternalDatePickerHover = createEvent(this, "calciteInternalDatePickerHover", 7);
     this.calciteDatePickerActiveDateChange = createEvent(this, "calciteDatePickerActiveDateChange", 7);
-    this.calciteDatePickerMouseOut = createEvent(this, "calciteDatePickerMouseOut", 7);
+    this.calciteInternalDatePickerMouseOut = createEvent(this, "calciteInternalDatePickerMouseOut", 7);
     /** Date currently active.*/
     this.activeDate = new Date();
     //--------------------------------------------------------------------------
@@ -11325,11 +11520,12 @@ const DatePickerMonth = class extends HTMLElement$1 {
     this.dayHover = (e) => {
       const target = e.target;
       if (e.detail.disabled) {
-        this.calciteDatePickerMouseOut.emit();
+        this.calciteInternalDatePickerMouseOut.emit();
       }
       else {
-        this.calciteDatePickerHover.emit(target.value);
+        this.calciteInternalDatePickerHover.emit(target.value);
       }
+      e.stopPropagation();
     };
     this.daySelect = (e) => {
       const target = e.target;
@@ -11337,7 +11533,7 @@ const DatePickerMonth = class extends HTMLElement$1 {
     };
   }
   mouseoutHandler() {
-    this.calciteDatePickerMouseOut.emit();
+    this.calciteInternalDatePickerMouseOut.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -11382,6 +11578,8 @@ const DatePickerMonth = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   /**
    * Add n months to the current month
+   *
+   * @param step
    */
   addMonths(step) {
     const nextDate = new Date(this.activeDate);
@@ -11391,6 +11589,8 @@ const DatePickerMonth = class extends HTMLElement$1 {
   }
   /**
    * Add n days to the current date
+   *
+   * @param step
    */
   addDays(step = 0) {
     const nextDate = new Date(this.activeDate);
@@ -11400,6 +11600,10 @@ const DatePickerMonth = class extends HTMLElement$1 {
   }
   /**
    * Get dates for last days of the previous month
+   *
+   * @param month
+   * @param year
+   * @param startOfWeek
    */
   getPrevMonthdays(month, year, startOfWeek) {
     const lastDate = new Date(year, month, 0);
@@ -11416,6 +11620,9 @@ const DatePickerMonth = class extends HTMLElement$1 {
   }
   /**
    * Get dates for the current month
+   *
+   * @param month
+   * @param year
    */
   getCurrentMonthDays(month, year) {
     const num = new Date(year, month + 1, 0).getDate();
@@ -11427,6 +11634,10 @@ const DatePickerMonth = class extends HTMLElement$1 {
   }
   /**
    * Get dates for first days of the next month
+   *
+   * @param month
+   * @param year
+   * @param startOfWeek
    */
   getNextMonthDays(month, year, startOfWeek) {
     const endDay = new Date(year, month + 1, 0).getDay();
@@ -11441,6 +11652,8 @@ const DatePickerMonth = class extends HTMLElement$1 {
   }
   /**
    * Determine if the date is in between the start and end dates
+   *
+   * @param date
    */
   betweenSelectedRange(date) {
     return !!(this.startDate &&
@@ -11451,6 +11664,8 @@ const DatePickerMonth = class extends HTMLElement$1 {
   }
   /**
    * Determine if the date should be in selected state
+   *
+   * @param date
    */
   isSelected(date) {
     return !!(sameDate(date, this.selectedDate) ||
@@ -11459,6 +11674,8 @@ const DatePickerMonth = class extends HTMLElement$1 {
   }
   /**
    * Determine if the date is the start of the date range
+   *
+   * @param date
    */
   isStartOfRange(date) {
     return !!(this.startDate &&
@@ -11475,6 +11692,12 @@ const DatePickerMonth = class extends HTMLElement$1 {
   }
   /**
    * Render calcite-date-picker-day
+   *
+   * @param active
+   * @param day
+   * @param date
+   * @param currentMonth
+   * @param ref
    */
   renderDateDay(active, day, date, currentMonth, ref) {
     var _a;
@@ -11486,7 +11709,7 @@ const DatePickerMonth = class extends HTMLElement$1 {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el === null || el === void 0 ? void 0 : el.focus();
@@ -11541,6 +11764,8 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
     //--------------------------------------------------------------------------
     /**
      * Increment year on UP/DOWN keys
+     *
+     * @param e
      */
     this.onYearKey = (e) => {
       const localizedYear = e.target.value;
@@ -11640,6 +11865,11 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
   /**
    * Parse localized year string from input,
    * set to active if in range
+   *
+   * @param root0
+   * @param root0.localizedYear
+   * @param root0.commit
+   * @param root0.offset
    */
   setYear({ localizedYear, commit = true, offset = 0 }) {
     const { yearInput, activeDate, localeData } = this;
@@ -11692,12 +11922,13 @@ const Dropdown = class extends HTMLElement$1 {
     /**
      specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
      this value does not include groupTitles passed to calcite-dropdown-group
-    */
+     */
     this.maxItems = 0;
     /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
     /**
      * Determines where the dropdown will be positioned relative to the button.
+     *
      * @default "bottom-leading"
      */
     this.placement = defaultMenuPlacement;
@@ -11884,8 +12115,9 @@ const Dropdown = class extends HTMLElement$1 {
     }
     this.closeCalciteDropdown(false);
   }
-  closeCalciteDropdownOnEvent() {
+  closeCalciteDropdownOnEvent(e) {
     this.closeCalciteDropdown();
+    e.stopPropagation();
   }
   closeCalciteDropdownOnOpenEvent(e) {
     if (e.composedPath().includes(this.el)) {
@@ -11903,7 +12135,7 @@ const Dropdown = class extends HTMLElement$1 {
       this.closeCalciteDropdown();
     }
   }
-  calciteDropdownItemKeyEvent(e) {
+  calciteInternalDropdownItemKeyEvent(e) {
     const { keyboardEvent } = e.detail;
     // handle edge
     const target = keyboardEvent.target;
@@ -11948,6 +12180,7 @@ const Dropdown = class extends HTMLElement$1 {
       event.detail.requestedDropdownGroup.selectionMode === "none") {
       this.closeCalciteDropdown();
     }
+    event.stopPropagation();
   }
   getModifiers() {
     const flipModifier = {
@@ -12068,9 +12301,11 @@ const DropdownGroup = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteDropdownItemChange = createEvent(this, "calciteDropdownItemChange", 7);
-    /** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
-     none (no active items), defaults to single */
+    this.calciteInternalDropdownItemChange = createEvent(this, "calciteInternalDropdownItemChange", 7);
+    /**
+      specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
+     none (no active items), defaults to single
+     */
     this.selectionMode = "single";
   }
   //--------------------------------------------------------------------------
@@ -12100,7 +12335,7 @@ const DropdownGroup = class extends HTMLElement$1 {
   updateActiveItemOnChange(event) {
     this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
     this.requestedDropdownItem = event.detail.requestedDropdownItem;
-    this.calciteDropdownItemChange.emit({
+    this.calciteInternalDropdownItemChange.emit({
       requestedDropdownGroup: this.requestedDropdownGroup,
       requestedDropdownItem: this.requestedDropdownItem
     });
@@ -12134,9 +12369,9 @@ const DropdownItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteDropdownItemSelect = createEvent(this, "calciteDropdownItemSelect", 7);
-    this.calciteDropdownItemKeyEvent = createEvent(this, "calciteDropdownItemKeyEvent", 7);
-    this.calciteDropdownCloseRequest = createEvent(this, "calciteDropdownCloseRequest", 7);
+    this.calciteInternalDropdownItemSelect = createEvent(this, "calciteInternalDropdownItemSelect", 7);
+    this.calciteInternalDropdownItemKeyEvent = createEvent(this, "calciteInternalDropdownItemKeyEvent", 7);
+    this.calciteInternalDropdownCloseRequest = createEvent(this, "calciteInternalDropdownCloseRequest", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -12221,14 +12456,14 @@ const DropdownItem = class extends HTMLElement$1 {
         }
         break;
       case "Escape":
-        this.calciteDropdownCloseRequest.emit();
+        this.calciteInternalDropdownCloseRequest.emit();
         break;
       case "Tab":
       case "ArrowUp":
       case "ArrowDown":
       case "Home":
       case "End":
-        this.calciteDropdownItemKeyEvent.emit({ keyboardEvent: e });
+        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: e });
         break;
     }
     e.preventDefault();
@@ -12240,6 +12475,7 @@ const DropdownItem = class extends HTMLElement$1 {
       this.requestedDropdownItem = event.detail.requestedDropdownItem;
       this.determineActiveItem();
     }
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -12274,7 +12510,7 @@ const DropdownItem = class extends HTMLElement$1 {
     }
   }
   emitRequestedItem() {
-    this.calciteDropdownItemSelect.emit({
+    this.calciteInternalDropdownItemSelect.emit({
       requestedDropdownItem: this.el,
       requestedDropdownGroup: this.parentDropdownGroupEl
     });
@@ -12316,6 +12552,7 @@ const Fab = class extends HTMLElement$1 {
     this.disabled = false;
     /**
      * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+     *
      * @default "plus"
      */
     this.icon = ICONS$9.plus;
@@ -12638,6 +12875,10 @@ const Flow = class extends HTMLElement$1 {
  * Calculate slope of the tangents
  * uses Steffen interpolation as it's monotonic
  * http://jrwalsh1.github.io/posts/interpolations/
+ *
+ * @param p0
+ * @param p1
+ * @param p2
  */
 function slope(p0, p1, p2) {
   const dx = p1[0] - p0[0];
@@ -12651,6 +12892,10 @@ function slope(p0, p1, p2) {
 }
 /**
  * Calculate slope for just one tangent (single-sided)
+ *
+ * @param p0
+ * @param p1
+ * @param m
  */
 function slopeSingle(p0, p1, m) {
   const dx = p1[0] - p0[0];
@@ -12663,6 +12908,12 @@ function slopeSingle(p0, p1, m) {
  *
  * Translates Hermite Spline to Beziér curve:
  * stackoverflow.com/questions/42574940/
+ *
+ * @param p0
+ * @param p1
+ * @param m0
+ * @param m1
+ * @param t
  */
 function bezier(p0, p1, m0, m1, t) {
   const [x0, y0] = p0;
@@ -12676,6 +12927,12 @@ function bezier(p0, p1, m0, m1, t) {
 /**
  * Generate a function which will translate a point
  * from the data coordinate space to svg viewbox oriented pixels
+ *
+ * @param root0
+ * @param root0.width
+ * @param root0.height
+ * @param root0.min
+ * @param root0.max
  */
 function translate({ width, height, min, max }) {
   const rangeX = max[0] - min[0];
@@ -12688,6 +12945,8 @@ function translate({ width, height, min, max }) {
 }
 /**
  * Get the min and max values from the dataset
+ *
+ * @param data
  */
 function range(data) {
   const [startX, startY] = data[0];
@@ -12701,6 +12960,12 @@ function range(data) {
 /**
  * Generate drawing commands for an area graph
  * returns a string can can be passed directly to a path element's `d` attribute
+ *
+ * @param root0
+ * @param root0.data
+ * @param root0.min
+ * @param root0.max
+ * @param root0.t
  */
 function area({ data, min, max, t }) {
   if (data.length === 0) {
@@ -12846,7 +13111,7 @@ const Handle = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     /**
-     * @internal - stores the activated state of the drag handle.
+     * @internal
      */
     this.activated = false;
     /**
@@ -12910,12 +13175,14 @@ const CSS$u = {
 /**
  * Icon data cache.
  * Exported for testing purposes.
+ *
  * @private
  */
 const iconCache = {};
 /**
  * Icon request cache.
  * Exported for testing purposes.
+ *
  * @private
  */
 const requestCache = {};
@@ -12948,6 +13215,8 @@ async function fetchIcon({ icon, scale }) {
 /**
  * Normalize the icon name to match the path data module exports.
  * Exported for testing purposes.
+ *
+ * @param name
  * @private
  */
 function normalizeIconName(name) {
@@ -13083,7 +13352,7 @@ const InlineEditable = class extends HTMLElement$1 {
     this.__attachShadow();
     this.calciteInlineEditableEditCancel = createEvent(this, "calciteInlineEditableEditCancel", 7);
     this.calciteInlineEditableEditConfirm = createEvent(this, "calciteInlineEditableEditConfirm", 7);
-    this.calciteInlineEditableEnableEditingChange = createEvent(this, "calciteInlineEditableEnableEditingChange", 7);
+    this.calciteInternalInlineEditableEnableEditingChange = createEvent(this, "calciteInternalInlineEditableEnableEditingChange", 7);
     //--------------------------------------------------------------------------
     //
     //  Props
@@ -13097,15 +13366,21 @@ const InlineEditable = class extends HTMLElement$1 {
     this.loading = false;
     /** specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */
     this.controls = false;
-    /** specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
+    /**
+     * specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
+     *
      * @default "Click to edit"
      */
     this.intlEnableEditing = TEXT$d.intlEnablingEditing;
-    /** specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
+    /**
+     * specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
+     *
      * @default "Cancel"
      */
     this.intlCancelEditing = TEXT$d.intlCancelEditing;
-    /** specify text to be user for the confirm changes button's aria-label, defaults to `Save`
+    /**
+     * specify text to be user for the confirm changes button's aria-label, defaults to `Save`
+     *
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT$d.intlConfirmChanges;
@@ -13115,7 +13390,7 @@ const InlineEditable = class extends HTMLElement$1 {
       this.valuePriorToEditing = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
       this.editingEnabled = true;
       (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setFocus();
-      this.calciteInlineEditableEnableEditingChange.emit();
+      this.calciteInternalInlineEditableEnableEditingChange.emit();
     };
     this.disableEditing = () => {
       this.editingEnabled = false;
@@ -13319,8 +13594,8 @@ const Input = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInputFocus = createEvent(this, "calciteInputFocus", 7);
-    this.calciteInputBlur = createEvent(this, "calciteInputBlur", 7);
+    this.calciteInternalInputFocus = createEvent(this, "calciteInternalInputFocus", 7);
+    this.calciteInternalInputBlur = createEvent(this, "calciteInternalInputBlur", 7);
     this.calciteInputInput = createEvent(this, "calciteInputInput", 7);
     this.calciteInputChange = createEvent(this, "calciteInputChange", 7);
     //--------------------------------------------------------------------------
@@ -13332,9 +13607,11 @@ const Input = class extends HTMLElement$1 {
     this.alignment = "start";
     /** should the input autofocus */
     this.autofocus = false;
-    /** optionally display a clear button that displays when field has a value
+    /**
+     * optionally display a clear button that displays when field has a value
      * shows by default for search, time, date
-     * will not display for type="textarea" */
+     * will not display for type="textarea"
+     */
     this.clearable = false;
     /** is the input disabled  */
     this.disabled = false;
@@ -13344,6 +13621,7 @@ const Input = class extends HTMLElement$1 {
     this.hidden = false;
     /**
      * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT$s.loading;
@@ -13355,6 +13633,7 @@ const Input = class extends HTMLElement$1 {
     this.locale = document.documentElement.lang || "en";
     /**
      * Toggles locale formatting for numbers.
+     *
      * @internal
      */
     this.localeFormat = false;
@@ -13368,7 +13647,9 @@ const Input = class extends HTMLElement$1 {
     this.scale = "m";
     /** specify the status of the input field, determines message and icons */
     this.status = "idle";
-    /** @internal adds inline styles for text input when slotted in calcite-inline-editable */
+    /**
+     * @internal
+     */
     this.editingEnabled = false;
     /**
      * specify the input type
@@ -13415,7 +13696,7 @@ const Input = class extends HTMLElement$1 {
       this.previousEmittedValue = this.value;
     };
     this.inputBlurHandler = () => {
-      this.calciteInputBlur.emit({
+      this.calciteInternalInputBlur.emit({
         element: this.childEl,
         value: this.value
       });
@@ -13426,7 +13707,7 @@ const Input = class extends HTMLElement$1 {
       if (event.target !== slottedActionEl) {
         this.setFocus();
       }
-      this.calciteInputFocus.emit({
+      this.calciteInternalInputFocus.emit({
         element: this.childEl,
         value: this.value
       });
@@ -13867,8 +14148,8 @@ const InputDatePicker = class extends HTMLElement$1 {
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
     this.calciteInputDatePickerChange = createEvent(this, "calciteInputDatePickerChange", 7);
-    this.calciteInputDatePickerOpen = createEvent(this, "calciteInputDatePickerOpen", 7);
-    this.calciteInputDatePickerClose = createEvent(this, "calciteInputDatePickerClose", 7);
+    this.calciteInternalInputDatePickerOpen = createEvent(this, "calciteInternalInputDatePickerOpen", 7);
+    this.calciteInternalInputDatePickerClose = createEvent(this, "calciteInternalInputDatePickerClose", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -13880,15 +14161,21 @@ const InputDatePicker = class extends HTMLElement$1 {
     this.disabled = false;
     /** Expand or collapse when calendar does not have input */
     this.active = false;
-    /** Localized string for "previous month" (used for aria label)
+    /**
+     * Localized string for "previous month" (used for aria label)
+     *
      * @default "Previous month"
      */
     this.intlPrevMonth = TEXT$f.prevMonth;
-    /** Localized string for "next month" (used for aria label)
+    /**
+     * Localized string for "next month" (used for aria label)
+     *
      * @default "Next month"
      */
     this.intlNextMonth = TEXT$f.nextMonth;
-    /** Localized string for "year" (used for aria label)
+    /**
+     * Localized string for "year" (used for aria label)
+     *
      * @default "Year"
      */
     this.intlYear = TEXT$f.year;
@@ -13898,6 +14185,7 @@ const InputDatePicker = class extends HTMLElement$1 {
     this.scale = "m";
     /**
      * Determines where the date-picker component will be positioned relative to the input.
+     *
      * @default "bottom-leading"
      */
     this.placement = defaultMenuPlacement;
@@ -13931,8 +14219,8 @@ const InputDatePicker = class extends HTMLElement$1 {
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
         this.active
-          ? this.calciteInputDatePickerOpen.emit()
-          : this.calciteInputDatePickerClose.emit();
+          ? this.calciteInternalInputDatePickerOpen.emit()
+          : this.calciteInternalInputDatePickerClose.emit();
       }
     };
     this.setStartInput = (el) => {
@@ -13984,6 +14272,8 @@ const InputDatePicker = class extends HTMLElement$1 {
     };
     /**
      * Event handler for when the selected date changes
+     *
+     * @param event
      */
     this.handleDateChange = (event) => {
       if (this.range) {
@@ -14142,7 +14432,7 @@ const InputDatePicker = class extends HTMLElement$1 {
       : null;
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, onKeyUp: this.keyUpHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.active), class: "input-container", role: "application" }, h("div", { class: "input-wrapper", ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })), h("div", { "aria-hidden": toAriaBoolean(!this.active), class: {
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, onKeyUp: this.keyUpHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.active), class: "input-container", role: "application" }, h("div", { class: "input-wrapper", ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })), h("div", { "aria-hidden": toAriaBoolean(!this.active), class: {
         "menu-container": true,
         "menu-container--active": this.active
       }, ref: this.setMenuEl }, h("div", { class: {
@@ -14153,7 +14443,7 @@ const InputDatePicker = class extends HTMLElement$1 {
       }, onTransitionEnd: this.transitionEnd }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
-      }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.endInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -14241,6 +14531,8 @@ const InputDatePicker = class extends HTMLElement$1 {
   }
   /**
    * If inputted string is a valid date, update value/active
+   *
+   * @param value
    */
   input(value) {
     const date = this.getDateFromInput(value);
@@ -14283,6 +14575,8 @@ const InputDatePicker = class extends HTMLElement$1 {
   }
   /**
    * Clean up invalid date from input on blur
+   *
+   * @param target
    */
   blur(target) {
     const { locale, focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
@@ -14316,6 +14610,8 @@ const InputDatePicker = class extends HTMLElement$1 {
   /**
    * Find a date from input string
    * return false if date is invalid, or out of range
+   *
+   * @param value
    */
   getDateFromInput(value) {
     if (!this.localeData) {
@@ -14613,6 +14909,7 @@ const InputTimePicker = class extends HTMLElement$1 {
     this.disabled = false;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -14626,6 +14923,7 @@ const InputTimePicker = class extends HTMLElement$1 {
     this.scale = "m";
     /**
      * Determines where the popover will be positioned relative to the input.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = "auto";
@@ -14642,14 +14940,15 @@ const InputTimePicker = class extends HTMLElement$1 {
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    this.calciteInputBlurHandler = () => {
+    this.calciteInternalInputBlurHandler = () => {
       this.active = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
       const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
-    this.calciteInputFocusHandler = () => {
+    this.calciteInternalInputFocusHandler = (event) => {
       this.active = true;
+      event.stopPropagation();
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
@@ -14660,6 +14959,7 @@ const InputTimePicker = class extends HTMLElement$1 {
       const target = event.target;
       const value = target.value;
       this.setValue({ value, origin: "time-picker" });
+      event.stopPropagation();
     };
     // --------------------------------------------------------------------------
     //
@@ -14817,7 +15117,7 @@ const InputTimePicker = class extends HTMLElement$1 {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -14850,6 +15150,7 @@ const Label = class extends HTMLElement$1 {
     this.alignment = "start";
     /**
      * specify the status of the label and any child input / input messages
+     *
      * @deprecated set directly on child element instead
      */
     this.status = "idle";
@@ -14908,7 +15209,8 @@ const Link = class extends HTMLElement$1 {
     //--------------------------------------------------------------------------
     /** is the link disabled  */
     this.disabled = false;
-    /** Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+    /**
+     * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
      * Without a value, the browser will suggest a filename/extension
      * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
      */
@@ -14976,7 +15278,7 @@ const List$1 = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, disabled prevents user interaction.
+     * When true, prevents user interaction.
      */
     this.disabled = false;
   }
@@ -15048,7 +15350,7 @@ const ListItem = class extends HTMLElement$1 {
      */
     this.nonInteractive = false;
     /**
-     * When true, disabled prevents interaction.
+     * When true, prevents user interaction.
      */
     this.disabled = false;
   }
@@ -15166,17 +15468,17 @@ const Loader = class extends HTMLElement$1 {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Show the loader */
+    /** When true, the loader is active. */
     this.active = false;
-    /** Inline loaders are smaller and will appear to the left of the text */
+    /** When true, displays smaller and appears to the left of the text. */
     this.inline = false;
-    /** Speficy the scale of the loader. Defaults to "m" */
+    /** Specify the scale of the loader. */
     this.scale = "m";
-    /** Percent complete of 100, only valid for determinate indicators */
+    /** Valid only for determinate indicators. Percent complete of 100. */
     this.value = 0;
-    /** Text which should appear under the loading indicator (optional) */
+    /** Text that displays under the loading indicator. */
     this.text = "";
-    /** Turn off spacing around the loader */
+    /** Disables spacing around the loader. */
     this.noPadding = false;
   }
   //--------------------------------------------------------------------------
@@ -15213,6 +15515,8 @@ const Loader = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   /**
    * Return the proper sizes based on the scale property
+   *
+   * @param scale
    */
   getSize(scale) {
     return {
@@ -15527,6 +15831,8 @@ const Modal = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   /**
    * Focus first interactive element
+   *
+   * @param el
    * @deprecated use `setFocus` instead.
    */
   async focusElement(el) {
@@ -15540,12 +15846,19 @@ const Modal = class extends HTMLElement$1 {
    *
    * By default, will try to focus on any focusable content. If there is none, it will focus on the close button.
    * If you want to focus on the close button, you can use the `close-button` focus ID.
+   *
+   * @param focusId
    */
   async setFocus(focusId) {
     const closeButton = this.closeButtonEl;
     return focusElement(focusId === "close-button" ? closeButton : getFocusableElements(this.el)[0] || closeButton);
   }
-  /** Set the scroll top of the modal content */
+  /**
+   * Set the scroll top of the modal content
+   *
+   * @param top
+   * @param left
+   */
   async scrollContent(top = 0, left = 0) {
     if (this.modalContent) {
       if (this.modalContent.scrollTo) {
@@ -15625,7 +15938,9 @@ const Notice = class extends HTMLElement$1 {
     this.color = "blue";
     /** Optionally show a button the user can click to dismiss the notice */
     this.dismissible = false;
-    /** String for the close button.
+    /**
+     * String for the close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT$a.close;
@@ -15699,7 +16014,7 @@ const Option = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteOptionChange = createEvent(this, "calciteOptionChange", 7);
+    this.calciteInternalOptionChange = createEvent(this, "calciteInternalOptionChange", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -15711,14 +16026,14 @@ const Option = class extends HTMLElement$1 {
     this.disabled = false;
     this.mutationObserver = createObserver("mutation", () => {
       this.ensureTextContentDependentProps();
-      this.calciteOptionChange.emit();
+      this.calciteInternalOptionChange.emit();
     });
   }
   handlePropChange(_newValue, _oldValue, propName) {
     if (propName === "label" || propName === "value") {
       this.ensureTextContentDependentProps();
     }
-    this.calciteOptionChange.emit();
+    this.calciteInternalOptionChange.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -15780,7 +16095,7 @@ const OptionGroup = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteOptionGroupChange = createEvent(this, "calciteOptionGroupChange", 7);
+    this.calciteInternalOptionGroupChange = createEvent(this, "calciteInternalOptionGroupChange", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -15792,7 +16107,7 @@ const OptionGroup = class extends HTMLElement$1 {
     this.disabled = false;
   }
   handlePropChange() {
-    this.calciteOptionGroupChange.emit();
+    this.calciteInternalOptionGroupChange.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -15845,11 +16160,15 @@ const Pagination = class extends HTMLElement$1 {
     this.start = 1;
     /** total number of items */
     this.total = 0;
-    /** Used as an accessible label (aria-label) for the next button
+    /**
+     * Used as an accessible label (aria-label) for the next button
+     *
      * @default "Next"
      */
     this.textLabelNext = TEXT$9.nextLabel;
-    /** Used as an accessible label (aria-label) of the previous button
+    /**
+     * Used as an accessible label (aria-label) of the previous button
+     *
      * @default "Previous"
      */
     this.textLabelPrevious = TEXT$9.previousLabel;
@@ -16138,7 +16457,11 @@ const Panel = class extends HTMLElement$1 {
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     var _a, _b, _c;
     if (focusId === "dismiss-button") {
@@ -16151,7 +16474,8 @@ const Panel = class extends HTMLElement$1 {
     }
     (_c = this.containerEl) === null || _c === void 0 ? void 0 : _c.focus();
   }
-  /** Scrolls panel content to a particular set of coordinates.
+  /**
+   * Scrolls panel content to a particular set of coordinates.
    *
    * ```
    *   myCalcitePanel.scrollContentTo({
@@ -16160,6 +16484,8 @@ const Panel = class extends HTMLElement$1 {
    *     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    *   });
    * ```
+   *
+   * @param options
    */
   async scrollContentTo(options) {
     var _a;
@@ -16331,8 +16657,7 @@ function calciteListItemChangeHandler(event) {
   this.lastSelectedItem = item;
   this.emitCalciteListChange();
 }
-function calciteListItemValueChangeHandler(event) {
-  event.stopPropagation();
+function calciteInternalListItemValueChangeHandler(event) {
   const oldValue = event.detail.oldValue;
   const selectedValues = this.selectedValues;
   if (selectedValues.has(oldValue)) {
@@ -16340,6 +16665,7 @@ function calciteListItemValueChangeHandler(event) {
     selectedValues.delete(oldValue);
     selectedValues.set(event.detail.newValue, item);
   }
+  event.stopPropagation();
 }
 // --------------------------------------------------------------------------
 //
@@ -16661,12 +16987,13 @@ const PickList = class extends HTMLElement$1 {
   calciteListItemChangeHandler(event) {
     calciteListItemChangeHandler.call(this, event);
   }
-  calciteListItemPropsChangeHandler(event) {
+  calciteInternalListItemPropsChangeHandler(event) {
     event.stopPropagation();
     this.setUpFilter();
   }
-  calciteListItemValueChangeHandler(event) {
-    calciteListItemValueChangeHandler.call(this, event);
+  calciteInternalListItemValueChangeHandler(event) {
+    calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
   }
   calciteListFocusOutHandler(event) {
     calciteListFocusOutHandler.call(this, event);
@@ -16693,7 +17020,11 @@ const PickList = class extends HTMLElement$1 {
   async getSelectedItems() {
     return this.selectedValues;
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -16790,8 +17121,8 @@ const PickListItem = class extends HTMLElement$1 {
     this.__attachShadow();
     this.calciteListItemChange = createEvent(this, "calciteListItemChange", 7);
     this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
-    this.calciteListItemPropsChange = createEvent(this, "calciteListItemPropsChange", 7);
-    this.calciteListItemValueChange = createEvent(this, "calciteListItemValueChange", 7);
+    this.calciteInternalListItemPropsChange = createEvent(this, "calciteInternalListItemPropsChange", 7);
+    this.calciteInternalListItemValueChange = createEvent(this, "calciteInternalListItemValueChange", 7);
     /**
      * When true, the item cannot be clicked and is visually muted.
      */
@@ -16801,11 +17132,12 @@ const PickListItem = class extends HTMLElement$1 {
      */
     this.disableDeselect = false;
     /**
-     * @internal When true, the item cannot be selected by user interaction.
+     * @internal
      */
     this.nonInteractive = false;
     /**
      * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     this.icon = null;
@@ -16819,6 +17151,7 @@ const PickListItem = class extends HTMLElement$1 {
     this.selected = false;
     /**
      * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+     *
      * @default "Remove"
      */
     this.intlRemove = TEXT$7.remove;
@@ -16848,13 +17181,13 @@ const PickListItem = class extends HTMLElement$1 {
     };
   }
   descriptionWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   labelWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   metadataWatchHandler() {
-    this.calciteListItemPropsChange.emit();
+    this.calciteInternalListItemPropsChange.emit();
   }
   selectedWatchHandler() {
     this.calciteListItemChange.emit({
@@ -16866,7 +17199,7 @@ const PickListItem = class extends HTMLElement$1 {
     this.shiftPressed = false;
   }
   valueWatchHandler(newValue, oldValue) {
-    this.calciteListItemValueChange.emit({ oldValue, newValue });
+    this.calciteInternalListItemValueChange.emit({ oldValue, newValue });
   }
   // --------------------------------------------------------------------------
   //
@@ -16890,6 +17223,8 @@ const PickListItem = class extends HTMLElement$1 {
   /**
    * Used to toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
@@ -16981,10 +17316,10 @@ class PopoverManager$1 {
       const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
       return registeredElements.get(registeredElement);
     };
-    this.clickHandler = (event) => {
+    this.togglePopovers = (event) => {
       const composedPath = event.composedPath();
       const popover = this.queryPopover(composedPath);
-      if (popover) {
+      if (popover && !popover.triggerDisabled) {
         popover.toggle();
         return;
       }
@@ -16992,6 +17327,15 @@ class PopoverManager$1 {
         .filter((popover) => popover.autoClose && popover.open && !composedPath.includes(popover))
         .forEach((popover) => popover.toggle(false));
     };
+    this.keyHandler = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      this.togglePopovers(event);
+    };
+    this.clickHandler = (event) => {
+      this.togglePopovers(event);
+    };
   }
   // --------------------------------------------------------------------------
   //
@@ -17015,9 +17359,11 @@ class PopoverManager$1 {
   }
   addListeners() {
     document.addEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.addEventListener("keydown", this.keyHandler, { capture: true });
   }
   removeListeners() {
     document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.removeEventListener("keydown", this.keyHandler, { capture: true });
   }
 }
 
@@ -17042,6 +17388,7 @@ const Popover = class extends HTMLElement$1 {
     this.autoClose = false;
     /**
      * Display a close button within the Popover.
+     *
      * @deprecated use dismissible instead.
      */
     this.closeButton = false;
@@ -17059,6 +17406,7 @@ const Popover = class extends HTMLElement$1 {
     this.disablePointer = false;
     /**
      * Offset the position of the popover away from the reference element.
+     *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
@@ -17074,10 +17422,17 @@ const Popover = class extends HTMLElement$1 {
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the referenceElement.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = defaultPopoverPlacement;
-    /** Text for close button.
+    /**
+     * Disables automatically toggling a popover when its referenceElement has been triggered. This property can be set to true to manage when a popover is open.
+     */
+    this.triggerDisabled = false;
+    /**
+     * Text for close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT$6.close;
@@ -17199,7 +17554,11 @@ const Popover = class extends HTMLElement$1 {
       })
       : this.createPopper();
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     var _a;
     const { closeButtonEl } = this;
@@ -17210,7 +17569,11 @@ const Popover = class extends HTMLElement$1 {
     }
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
-  /** Toggles the popover's open property. */
+  /**
+   * Toggles the popover's open property.
+   *
+   * @param value
+   */
   async toggle(value = !this.open) {
     this.open = value;
   }
@@ -17326,6 +17689,7 @@ const PopoverManager = class extends HTMLElement$1 {
     // --------------------------------------------------------------------------
     /**
      * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
+     *
      * @default `[data-calcite-popover-reference]`
      */
     this.selector = "[data-calcite-popover-reference]";
@@ -17428,6 +17792,7 @@ const RadioButton = class extends HTMLElement$1 {
     this.disabled = false;
     /**
      * The focused state of the radio button.
+     *
      * @internal
      */
     this.focused = false;
@@ -17435,6 +17800,7 @@ const RadioButton = class extends HTMLElement$1 {
     this.hidden = false;
     /**
      * The hovered state of the radio button.
+     *
      * @internal
      */
     this.hovered = false;
@@ -17851,9 +18217,9 @@ const RadioGroup = class extends HTMLElement$1 {
     return (h(Host, { onClick: this.handleClick, role: "radiogroup" }, h("slot", null), h(HiddenFormInputSlot, { component: this })));
   }
   handleSelected(event) {
-    event.stopPropagation();
     event.preventDefault();
     this.selectItem(event.target);
+    event.stopPropagation();
   }
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
@@ -17966,7 +18332,7 @@ const RadioGroupItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteRadioGroupItemChange = createEvent(this, "calciteRadioGroupItemChange", 7);
+    this.calciteInternalRadioGroupItemChange = createEvent(this, "calciteInternalRadioGroupItemChange", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -17980,7 +18346,7 @@ const RadioGroupItem = class extends HTMLElement$1 {
     this.iconPosition = "start";
   }
   handleCheckedChange() {
-    this.calciteRadioGroupItemChange.emit();
+    this.calciteInternalRadioGroupItemChange.emit();
   }
   render() {
     const { checked, value } = this;
@@ -18031,11 +18397,15 @@ const Rating = class extends HTMLElement$1 {
     this.disabled = false;
     /** Show average and count data summary chip (if available) */
     this.showChip = false;
-    /** Localized string for "Rating" (used for aria label)
+    /**
+     * Localized string for "Rating" (used for aria label)
+     *
      * @default "Rating"
      */
     this.intlRating = TEXT$5.rating;
-    /** Localized string for labelling each star, `${num}` in the string will be replaced by the number
+    /**
+     * Localized string for labelling each star, `${num}` in the string will be replaced by the number
+     *
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT$5.stars;
@@ -18144,7 +18514,9 @@ const Scrim = class extends HTMLElement$1 {
     //  Properties
     //
     // --------------------------------------------------------------------------
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT$4.loading;
@@ -18580,6 +18952,7 @@ const ShellPanel = class extends HTMLElement$1 {
     this.widthScale = "m";
     /**
      * Accessible label for resize separator.
+     *
      * @default "Resize"
      */
     this.intlResize = TEXT$3.resize;
@@ -18866,6 +19239,7 @@ const Slider = class extends HTMLElement$1 {
     };
     /**
      * Set the reference of the track Element
+     *
      * @internal
      * @param node
      */
@@ -19255,6 +19629,7 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Set the prop value if changed at the component level
+   *
    * @param valueProp
    * @param value
    */
@@ -19273,6 +19648,9 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * If number is outside range, constrain to min or max
+   *
+   * @param value
+   * @param prop
    * @internal
    */
   clamp(value, prop) {
@@ -19288,6 +19666,8 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Translate a pixel position to value along the range
+   *
+   * @param x
    * @internal
    */
   translate(x) {
@@ -19304,6 +19684,8 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Get closest allowed value along stepped values
+   *
+   * @param num
    * @internal
    */
   getClosestStep(num) {
@@ -19327,6 +19709,8 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Get position of value along range as fractional value
+   *
+   * @param num
    * @return {number} number in the unit interval [0,1]
    * @internal
    */
@@ -19461,6 +19845,9 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Returns an integer representing the number of pixels to offset on the left or right side based on desired position behavior.
+   *
+   * @param leftBounds
+   * @param rightBounds
    * @internal
    */
   getHostOffset(leftBounds, rightBounds) {
@@ -19477,6 +19864,7 @@ const Slider = class extends HTMLElement$1 {
   /**
    * Returns an integer representing the number of pixels that the two given span elements are overlapping, taking into account
    * a space in between the two spans equal to the font-size set on them to account for the space needed to render a hyphen.
+   *
    * @param leftLabel
    * @param rightLabel
    */
@@ -19489,6 +19877,7 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle div element.
+   *
    * @param minLabel
    * @param handle
    */
@@ -19499,6 +19888,7 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle div element.
+   *
    * @param maxLabel
    * @param handle
    */
@@ -22724,13 +23114,16 @@ const SplitButton = class extends HTMLElement$1 {
     this.disabled = false;
     /**
      * Is the dropdown currently active or not
+     *
      * @internal
      */
     this.active = false;
     /** specify the icon used for the dropdown menu, defaults to chevron */
     this.dropdownIconType = "chevron";
-    /** optionally add a calcite-loader component to the control,
-     disabling interaction. with the primary button */
+    /**
+      optionally add a calcite-loader component to the control,
+     disabling interaction. with the primary button
+     */
     this.loading = false;
     /** Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
@@ -22793,7 +23186,7 @@ const Stepper = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteStepperItemChange = createEvent(this, "calciteStepperItemChange", 7);
+    this.calciteInternalStepperItemChange = createEvent(this, "calciteInternalStepperItemChange", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -22835,7 +23228,7 @@ const Stepper = class extends HTMLElement$1 {
   componentDidLoad() {
     // if no stepper items are set as active, default to the first one
     if (!this.currentPosition) {
-      this.calciteStepperItemChange.emit({
+      this.calciteInternalStepperItemChange.emit({
         position: 0
       });
     }
@@ -22853,7 +23246,7 @@ const Stepper = class extends HTMLElement$1 {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteStepperItemKeyEvent(e) {
+  calciteInternalStepperItemKeyEvent(e) {
     const item = e.detail.item;
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
@@ -22884,6 +23277,7 @@ const Stepper = class extends HTMLElement$1 {
         this.focusLastItem();
         break;
     }
+    e.stopPropagation();
   }
   registerItem(event) {
     const item = event.target;
@@ -22894,15 +23288,17 @@ const Stepper = class extends HTMLElement$1 {
     this.itemMap.set(item, position);
     this.items = this.sortItems();
     this.enabledItems = this.filterItems();
+    event.stopPropagation();
   }
   updateItem(event) {
     if (event.detail.content) {
       this.requestedContent = event.detail.content;
     }
     this.currentPosition = event.detail.position;
-    this.calciteStepperItemChange.emit({
+    this.calciteInternalStepperItemChange.emit({
       position: this.currentPosition
     });
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -22925,7 +23321,11 @@ const Stepper = class extends HTMLElement$1 {
     }
     this.emitChangedItem(enabledStepIndex);
   }
-  /** set the requested step as active */
+  /**
+   * set the requested step as active
+   *
+   * @param step
+   */
   async goToStep(step) {
     const position = step - 1;
     if (this.currentPosition !== position) {
@@ -22971,7 +23371,7 @@ const Stepper = class extends HTMLElement$1 {
   }
   emitChangedItem(position) {
     this.currentPosition = position;
-    this.calciteStepperItemChange.emit({
+    this.calciteInternalStepperItemChange.emit({
       position
     });
   }
@@ -23024,9 +23424,9 @@ const StepperItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteStepperItemKeyEvent = createEvent(this, "calciteStepperItemKeyEvent", 7);
-    this.calciteStepperItemSelect = createEvent(this, "calciteStepperItemSelect", 7);
-    this.calciteStepperItemRegister = createEvent(this, "calciteStepperItemRegister", 7);
+    this.calciteInternalStepperItemKeyEvent = createEvent(this, "calciteInternalStepperItemKeyEvent", 7);
+    this.calciteInternalStepperItemSelect = createEvent(this, "calciteInternalStepperItemSelect", 7);
+    this.calciteInternalStepperItemRegister = createEvent(this, "calciteInternalStepperItemRegister", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -23068,7 +23468,7 @@ const StepperItem = class extends HTMLElement$1 {
           case "ArrowRight":
           case "Home":
           case "End":
-            this.calciteStepperItemKeyEvent.emit({ item: e });
+            this.calciteInternalStepperItemKeyEvent.emit({ item: e });
             e.preventDefault();
             break;
         }
@@ -23076,7 +23476,7 @@ const StepperItem = class extends HTMLElement$1 {
     };
     this.emitRequestedItem = () => {
       if (!this.disabled) {
-        this.calciteStepperItemSelect.emit({
+        this.calciteInternalStepperItemSelect.emit({
           position: this.itemPosition,
           content: this.itemContent
         });
@@ -23127,6 +23527,7 @@ const StepperItem = class extends HTMLElement$1 {
       this.activePosition = event.detail.position;
       this.determineActiveItem();
     }
+    event.stopPropagation();
   }
   renderIcon() {
     const path = this.active
@@ -23142,7 +23543,7 @@ const StepperItem = class extends HTMLElement$1 {
     this.active = !this.disabled && this.itemPosition === this.activePosition;
   }
   registerStepperItem() {
-    this.calciteStepperItemRegister.emit({
+    this.calciteInternalStepperItemRegister.emit({
       position: this.itemPosition,
       content: this.itemContent
     });
@@ -23174,7 +23575,9 @@ const Switch = class extends HTMLElement$1 {
     this.disabled = false;
     /** The scale of the switch */
     this.scale = "m";
-    /** True if the switch is initially on
+    /**
+     * True if the switch is initially on
+     *
      * @deprecated use 'checked' instead.
      */
     this.switched = false;
@@ -23268,12 +23671,14 @@ const Tab = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTabRegister = createEvent(this, "calciteTabRegister", 7);
+    this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 7);
     /**
      * Show this tab
      */
     this.active = false;
-    /** @internal Parent tabs component scale value */
+    /**
+     * @internal
+     */
     this.scale = "m";
     this.guid = `calcite-tab-title-${guid()}`;
   }
@@ -23290,7 +23695,7 @@ const Tab = class extends HTMLElement$1 {
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
   componentDidLoad() {
-    this.calciteTabRegister.emit();
+    this.calciteInternalTabRegister.emit();
   }
   componentWillRender() {
     var _a;
@@ -23326,6 +23731,7 @@ const Tab = class extends HTMLElement$1 {
         this.active = index === event.detail.tab;
       });
     }
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -23344,6 +23750,8 @@ const Tab = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   async updateAriaInfo(tabIds = [], titleIds = []) {
@@ -23353,7 +23761,7 @@ const Tab = class extends HTMLElement$1 {
   static get style() { return tabCss; }
 };
 
-const tabNavCss = "@-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:-ms-flexbox;display:flex}:host([scale=s]){min-height:1.5rem}:host([scale=m]){min-height:2rem}:host([scale=l]){min-height:2.75rem}.tab-nav{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:start;justify-content:flex-start;overflow:auto}:host([layout=center]) .tab-nav{-ms-flex-pack:center;justify-content:center}.tab-nav-active-indicator-container{position:absolute;left:0px;right:0px;bottom:0px;height:0.125rem;width:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;bottom:0px;display:block;height:0.125rem;background-color:var(--calcite-ui-brand);-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([position=below]) .tab-nav-active-indicator{bottom:unset;top:0px}:host([position=below]) .tab-nav-active-indicator-container{bottom:unset;top:0px}:host([bordered]) .tab-nav-active-indicator-container{bottom:unset}:host([bordered][position=below]) .tab-nav-active-indicator-container{bottom:0;top:unset}";
+const tabNavCss = "@-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:-ms-flexbox;display:flex}:host([scale=s]){min-height:1.5rem}:host([scale=m]){min-height:2rem}:host([scale=l]){min-height:2.75rem}.tab-nav{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:start;justify-content:flex-start;overflow:auto}:host([layout=center]) .tab-nav{-ms-flex-pack:center;justify-content:center}.tab-nav-active-indicator-container{position:absolute;left:0px;right:0px;bottom:0px;height:0.125rem;width:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;bottom:0px;display:block;height:0.125rem;background-color:var(--calcite-ui-brand);-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([position=below]) .tab-nav-active-indicator{bottom:unset;top:0px}:host([position=below]) .tab-nav-active-indicator-container{bottom:unset;top:0px}:host([bordered]) .tab-nav-active-indicator-container{bottom:unset}:host([bordered][position=below]) .tab-nav-active-indicator-container{bottom:0;top:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}";
 
 const TabNav = class extends HTMLElement$1 {
   constructor() {
@@ -23362,13 +23770,21 @@ const TabNav = class extends HTMLElement$1 {
     this.__attachShadow();
     this.calciteTabChange = createEvent(this, "calciteTabChange", 7);
     this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 7);
-    /** @internal Parent tabs component scale value */
+    /**
+     * @internal
+     */
     this.scale = "m";
-    /** @internal Parent tabs component layout value */
+    /**
+     * @internal
+     */
     this.layout = "inline";
-    /** @internal Parent tabs component position value */
+    /**
+     * @internal
+     */
     this.position = "below";
-    /** @internal Parent tabs component bordered value when layout is "inline" */
+    /**
+     * @internal
+     */
     this.bordered = false;
     this.animationActiveDuration = 0.3;
     this.resizeObserver = createObserver("resize", () => {
@@ -23493,6 +23909,8 @@ const TabNav = class extends HTMLElement$1 {
   }
   /**
    * Check for active tabs on register and update selected
+   *
+   * @param e
    */
   updateTabTitles(e) {
     if (e.target.active) {
@@ -23507,6 +23925,7 @@ const TabNav = class extends HTMLElement$1 {
       this.selectedTab = e.detail.tab;
       e.stopPropagation();
     }
+    e.stopPropagation();
   }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;
@@ -23546,7 +23965,7 @@ const TabNav = class extends HTMLElement$1 {
   static get style() { return tabNavCss; }
 };
 
-const tabTitleCss = "@-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{margin-right:1.25rem;display:block;-ms-flex:0 1 auto;flex:0 1 auto;outline:2px solid transparent;outline-offset:2px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:1.25rem;margin-inline-end:1.25rem}:host([layout=center]){margin-top:0px;margin-bottom:0px;margin-left:1.25rem;margin-right:1.25rem;text-align:center;-ms-flex-preferred-size:12rem;flex-basis:12rem}:host([position=below]) a{border-bottom-width:0px;border-top-width:2px;border-top-color:transparent;border-top-style:solid}:host a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus) a{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-ui-border-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host([active]) a{border-color:transparent;color:var(--calcite-ui-text-1)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) span,:host([disabled]) a{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){-webkit-margin-end:1rem;margin-inline-end:1rem}:host([scale=s]) a,:host([scale=s]) span{padding-top:0.25rem;padding-bottom:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) a,:host([scale=m]) span{padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){-webkit-margin-end:1.5rem;margin-inline-end:1.5rem}:host([scale=l]) a,:host([scale=l]) span{padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}a,span{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;height:100%;width:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:2px;padding-left:0px;padding-right:0px;padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-3);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;border-bottom-color:transparent;border-bottom-style:solid}span{cursor:default}.calcite-tab-title--icon{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:center;align-self:center}.calcite-tab-title--icon svg{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.container--has-text{padding:0.25rem}.container--has-text .calcite-tab-title--icon.icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.container--has-text .calcite-tab-title--icon.icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([bordered]){-webkit-margin-end:0;margin-inline-end:0}:host([bordered][active]){-webkit-box-shadow:inset 0px -2px var(--calcite-ui-foreground-1);box-shadow:inset 0px -2px var(--calcite-ui-foreground-1)}:host([bordered][active][position=below]){-webkit-box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1);box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}:host([bordered]:hover) a,:host([bordered]:focus) a,:host([bordered]:active) a{position:relative}:host([bordered]:hover) a{background-color:var(--calcite-button-transparent-hover);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}:host([bordered]) a{border-bottom-style:unset}:host([bordered][position=below]) a{border-top-style:unset}:host([active][bordered]) a{border-left:1px solid var(--calcite-ui-border-1);border-right:1px solid var(--calcite-ui-border-1)}:host([bordered]) a,:host([bordered]) span{padding-left:0.75rem;padding-right:0.75rem}:host([bordered][scale=s]) a,:host([bordered][scale=s]) span{padding-left:0.5rem;padding-right:0.5rem}:host([bordered][scale=l]) a,:host([bordered][scale=l]) span{padding-left:1rem;padding-right:1rem}";
+const tabTitleCss = "@-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{margin-right:1.25rem;display:block;-ms-flex:0 1 auto;flex:0 1 auto;outline:2px solid transparent;outline-offset:2px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:1.25rem;margin-inline-end:1.25rem}:host([layout=center]){margin-top:0px;margin-bottom:0px;margin-left:1.25rem;margin-right:1.25rem;text-align:center;-ms-flex-preferred-size:12rem;flex-basis:12rem}:host([position=below]) a{border-bottom-width:0px;border-top-width:2px;border-top-color:transparent;border-top-style:solid}:host a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus) a{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-ui-border-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host([active]) a{border-color:transparent;color:var(--calcite-ui-text-1)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) span,:host([disabled]) a{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){-webkit-margin-end:1rem;margin-inline-end:1rem}:host([scale=s]) a,:host([scale=s]) span{padding-top:0.25rem;padding-bottom:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) a,:host([scale=m]) span{padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){-webkit-margin-end:1.5rem;margin-inline-end:1.5rem}:host([scale=l]) a,:host([scale=l]) span{padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}a,span{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;height:100%;width:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:2px;padding-left:0px;padding-right:0px;padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-3);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;border-bottom-color:transparent;border-bottom-style:solid}span{cursor:default}.calcite-tab-title--icon{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:center;align-self:center}.calcite-tab-title--icon svg{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.container--has-text{padding:0.25rem}.container--has-text .calcite-tab-title--icon.icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.container--has-text .calcite-tab-title--icon.icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([bordered]){-webkit-margin-end:0;margin-inline-end:0}:host([bordered][active]){-webkit-box-shadow:inset 0px -2px var(--calcite-ui-foreground-1);box-shadow:inset 0px -2px var(--calcite-ui-foreground-1)}:host([bordered][active][position=below]){-webkit-box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1);box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}:host([bordered]:hover) a,:host([bordered]:focus) a,:host([bordered]:active) a{position:relative}:host([bordered]:hover) a{background-color:var(--calcite-button-transparent-hover);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}:host([bordered]) a{border-bottom-style:unset}:host([bordered][position=below]) a{border-top-style:unset}:host([active][bordered]) a{border-left:1px solid var(--calcite-ui-border-1);border-right:1px solid var(--calcite-ui-border-1)}:host([bordered]) a,:host([bordered]) span{padding-left:0.75rem;padding-right:0.75rem}:host([bordered][scale=s]) a,:host([bordered][scale=s]) span{padding-left:0.5rem;padding-right:0.5rem}:host([bordered][scale=l]) a,:host([bordered][scale=l]) span{padding-left:1rem;padding-right:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) a{outline-color:highlight}:host([bordered]) a{border-bottom-style:solid}:host([bordered][position=below]) a{border-top-style:solid}:host([bordered][active]) a{border-bottom-style:none}:host([bordered][position=below][active]) a{border-top-style:none}}";
 
 const TabTitle = class extends HTMLElement$1 {
   constructor() {
@@ -23555,9 +23974,9 @@ const TabTitle = class extends HTMLElement$1 {
     this.__attachShadow();
     this.calciteTabsActivate = createEvent(this, "calciteTabsActivate", 7);
     this.calciteInternalTabsActivate = createEvent(this, "calciteInternalTabsActivate", 7);
-    this.calciteTabsFocusNext = createEvent(this, "calciteTabsFocusNext", 7);
-    this.calciteTabsFocusPrevious = createEvent(this, "calciteTabsFocusPrevious", 7);
-    this.calciteTabTitleRegister = createEvent(this, "calciteTabTitleRegister", 7);
+    this.calciteInternalTabsFocusNext = createEvent(this, "calciteInternalTabsFocusNext", 7);
+    this.calciteInternalTabsFocusPrevious = createEvent(this, "calciteInternalTabsFocusPrevious", 7);
+    this.calciteInternalTabTitleRegister = createEvent(this, "calciteInternalTabTitleRegister", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -23567,14 +23986,16 @@ const TabTitle = class extends HTMLElement$1 {
     this.active = false;
     /** Disable this tab title  */
     this.disabled = false;
-    /** @internal Parent tabs component bordered value */
+    /**
+     * @internal
+     */
     this.bordered = false;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** watches for changing text content **/
+    /** watches for changing text content */
     this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     /** determine if there is slotted text for styling purposes */
     this.hasText = false;
@@ -23635,7 +24056,7 @@ const TabTitle = class extends HTMLElement$1 {
       }, style: showSideBorders && { width: `${this.parentTabNavEl.indicatorWidth}px` } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
   }
   async componentDidLoad() {
-    this.calciteTabTitleRegister.emit(await this.getTabIdentifier());
+    this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
   }
   componentDidRender() {
     updateHostInteraction(this, true);
@@ -23674,18 +24095,18 @@ const TabTitle = class extends HTMLElement$1 {
         break;
       case "ArrowRight":
         if (getElementDir(this.el) === "ltr") {
-          this.calciteTabsFocusNext.emit();
+          this.calciteInternalTabsFocusNext.emit();
         }
         else {
-          this.calciteTabsFocusPrevious.emit();
+          this.calciteInternalTabsFocusPrevious.emit();
         }
         break;
       case "ArrowLeft":
         if (getElementDir(this.el) === "ltr") {
-          this.calciteTabsFocusPrevious.emit();
+          this.calciteInternalTabsFocusPrevious.emit();
         }
         else {
-          this.calciteTabsFocusNext.emit();
+          this.calciteInternalTabsFocusNext.emit();
         }
         break;
     }
@@ -23708,6 +24129,8 @@ const TabTitle = class extends HTMLElement$1 {
     return this.tab ? this.tab : this.getTabIndex();
   }
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   async updateAriaInfo(tabIds = [], titleIds = []) {
@@ -23741,7 +24164,7 @@ const SLOTS$4 = {
   tabNav: "tab-nav"
 };
 
-const tabsCss = "@-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([bordered]){-webkit-box-shadow:inset 0 1px 0 var(--calcite-ui-border-1);box-shadow:inset 0 1px 0 var(--calcite-ui-border-1);background-color:var(--calcite-ui-foreground-1)}:host([bordered]:not([position=below])) ::slotted(calcite-tab-nav){margin-bottom:-1px}:host([bordered][position=below]) ::slotted(calcite-tab-nav){margin-top:-1px}:host([bordered][position=below]){-webkit-box-shadow:inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);box-shadow:inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1)}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=below]){-ms-flex-direction:column-reverse;flex-direction:column-reverse}section{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;overflow:hidden;border-top-width:1px;border-top-color:var(--calcite-ui-border-1);border-top-style:solid}:host([position=below]) section{-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-top-width:0px;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-1)}:host([position=below]:not([bordered])) section{border-bottom-style:solid}";
+const tabsCss = "@-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([bordered]){-webkit-box-shadow:inset 0 1px 0 var(--calcite-ui-border-1);box-shadow:inset 0 1px 0 var(--calcite-ui-border-1);background-color:var(--calcite-ui-foreground-1)}:host([bordered]:not([position=below])) ::slotted(calcite-tab-nav){margin-bottom:-1px}:host([bordered][position=below]) ::slotted(calcite-tab-nav){margin-top:-1px}:host([bordered][position=below]){-webkit-box-shadow:inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);box-shadow:inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1)}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=below]){-ms-flex-direction:column-reverse;flex-direction:column-reverse}section{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;overflow:hidden;border-top-width:1px;border-top-color:var(--calcite-ui-border-1);border-top-style:solid}:host([position=below]) section{-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-top-width:0px;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-1)}:host([position=below]:not([bordered])) section{border-bottom-style:solid}@media (forced-colors: active){:host([bordered]) section{border-top-width:0px;border-bottom-width:1px}:host([position=below][bordered]) section{border-top-width:1px;border-bottom-width:0px}}";
 
 const Tabs = class extends HTMLElement$1 {
   constructor() {
@@ -23810,14 +24233,16 @@ const Tabs = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   /**
+   * @param e
    * @internal
    */
-  calciteTabTitleRegister(e) {
+  calciteInternalTabTitleRegister(e) {
     this.titles = [...this.titles, e.target];
     this.registryHandler();
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
   calciteTabTitleUnregister(e) {
@@ -23826,14 +24251,16 @@ const Tabs = class extends HTMLElement$1 {
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
-  calciteTabRegister(e) {
+  calciteInternalTabRegister(e) {
     this.tabs = [...this.tabs, e.target];
     this.registryHandler();
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
   calciteTabUnregister(e) {
@@ -23918,6 +24345,7 @@ const Tile = class extends HTMLElement$1 {
     this.embed = false;
     /**
      * The focused state of the tile.
+     *
      * @internal
      */
     this.focused = false;
@@ -24243,64 +24671,89 @@ const TimePicker = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTimePickerBlur = createEvent(this, "calciteTimePickerBlur", 7);
-    this.calciteTimePickerChange = createEvent(this, "calciteTimePickerChange", 7);
-    this.calciteTimePickerFocus = createEvent(this, "calciteTimePickerFocus", 7);
+    this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 7);
+    this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 7);
+    this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** aria-label for the hour input
+    /**
+     * aria-label for the hour input
+     *
      * @default "Hour"
      */
     this.intlHour = TEXT$2.hour;
-    /** aria-label for the hour down button
+    /**
+     * aria-label for the hour down button
+     *
      * @default "Decrease hour"
      */
     this.intlHourDown = TEXT$2.hourDown;
-    /** aria-label for the hour up button
+    /**
+     * aria-label for the hour up button
+     *
      * @default "Increase hour"
      */
     this.intlHourUp = TEXT$2.hourUp;
-    /** aria-label for the meridiem (am/pm) input
+    /**
+     * aria-label for the meridiem (am/pm) input
+     *
      * @default "AM/PM"
      */
     this.intlMeridiem = TEXT$2.meridiem;
-    /** aria-label for the meridiem (am/pm) down button
+    /**
+     * aria-label for the meridiem (am/pm) down button
+     *
      * @default "Decrease AM/PM"
      */
     this.intlMeridiemDown = TEXT$2.meridiemDown;
-    /** aria-label for the meridiem (am/pm) up button
+    /**
+     * aria-label for the meridiem (am/pm) up button
+     *
      * @default "Increase AM/PM"
      */
     this.intlMeridiemUp = TEXT$2.meridiemUp;
-    /** aria-label for the minute input
+    /**
+     * aria-label for the minute input
+     *
      * @default "Minute"
      */
     this.intlMinute = TEXT$2.minute;
-    /** aria-label for the minute down button
+    /**
+     * aria-label for the minute down button
+     *
      * @default "Decrease minute"
      */
     this.intlMinuteDown = TEXT$2.minuteDown;
-    /** aria-label for the minute up button
+    /**
+     * aria-label for the minute up button
+     *
      * @default "Increase minute"
      */
     this.intlMinuteUp = TEXT$2.minuteUp;
-    /** aria-label for the second input
+    /**
+     * aria-label for the second input
+     *
      * @default "Second"
      */
     this.intlSecond = TEXT$2.second;
-    /** aria-label for the second down button
+    /**
+     * aria-label for the second down button
+     *
      * @default "Decrease second"
      */
     this.intlSecondDown = TEXT$2.secondDown;
-    /** aria-label for the second up button
+    /**
+     * aria-label for the second up button
+     *
      * @default "Increase second"
      */
     this.intlSecondUp = TEXT$2.secondUp;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -24598,7 +25051,7 @@ const TimePicker = class extends HTMLElement$1 {
         this.value = null;
       }
       if (emit) {
-        this.calciteTimePickerChange.emit();
+        this.calciteInternalTimePickerChange.emit();
       }
     };
     this.setValuePart = (key, value, emit = true) => {
@@ -24637,7 +25090,7 @@ const TimePicker = class extends HTMLElement$1 {
         ? ((_a = localizeTimeStringToParts(this.value, this.locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
         : localizeTimePart(this.meridiem, "meridiem", this.locale);
       if (emit) {
-        this.calciteTimePickerChange.emit();
+        this.calciteInternalTimePickerChange.emit();
       }
     };
   }
@@ -24654,10 +25107,10 @@ const TimePicker = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   hostBlurHandler() {
-    this.calciteTimePickerBlur.emit();
+    this.calciteInternalTimePickerBlur.emit();
   }
   hostFocusHandler() {
-    this.calciteTimePickerFocus.emit();
+    this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
     const key = event.key;
@@ -24713,7 +25166,11 @@ const TimePicker = class extends HTMLElement$1 {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param target
+   */
   async setFocus(target) {
     var _a;
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -25290,6 +25747,7 @@ const Tooltip = class extends HTMLElement$1 {
     this.__attachShadow();
     /**
      * Offset the position of the tooltip away from the reference element.
+     *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
@@ -25305,6 +25763,7 @@ const Tooltip = class extends HTMLElement$1 {
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the referenceElement.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = "auto";
@@ -25481,6 +25940,7 @@ const TooltipManager = class extends HTMLElement$1 {
     // --------------------------------------------------------------------------
     /**
      * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip.
+     *
      * @default `[data-calcite-tooltip-reference]`
      */
     this.selector = "[data-calcite-tooltip-reference]";
@@ -25520,13 +25980,17 @@ const Tree = class extends HTMLElement$1 {
     //--------------------------------------------------------------------------
     /** Display indentation guide lines. */
     this.lines = false;
-    /** Display input
+    /**
+     * Display input
+     *
      * @deprecated Use "ancestors" selection-mode for checkbox input.
      */
     this.inputEnabled = false;
     /** Specify the scale of the tree. */
     this.scale = "m";
-    /** Customize how tree selection works.
+    /**
+     * Customize how tree selection works.
+     *
      * @default "single"
      * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
      */
@@ -25646,6 +26110,7 @@ const Tree = class extends HTMLElement$1 {
     this.calciteTreeSelect.emit({
       selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
     });
+    e.stopPropagation();
   }
   keyDownHandler(event) {
     var _a;
@@ -25774,7 +26239,7 @@ const TreeItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTreeItemSelect = createEvent(this, "calciteTreeItemSelect", 7);
+    this.calciteInternalTreeItemSelect = createEvent(this, "calciteInternalTreeItemSelect", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -25784,11 +26249,17 @@ const TreeItem = class extends HTMLElement$1 {
     this.selected = false;
     /** Expanded state of the item. */
     this.expanded = false;
-    /** @internal Expanded state of the parent. */
+    /**
+     * @internal
+     */
     this.parentExpanded = false;
-    /** @internal Level of depth of the item. */
+    /**
+     * @internal
+     */
     this.depth = -1;
-    /** @internal Does this tree item have a tree inside it? */
+    /**
+     * @internal
+     */
     this.hasChildren = null;
     this.iconClickHandler = (event) => {
       event.stopPropagation();
@@ -25913,7 +26384,7 @@ const TreeItem = class extends HTMLElement$1 {
       const target = link.target === "" ? "_self" : link.target;
       window.open(link.href, target);
     }
-    this.calciteTreeItemSelect.emit({
+    this.calciteInternalTreeItemSelect.emit({
       modifyCurrentSelection: this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
       forceToggle: false
     });
@@ -25922,7 +26393,7 @@ const TreeItem = class extends HTMLElement$1 {
     let root;
     switch (e.key) {
       case " ":
-        this.calciteTreeItemSelect.emit({
+        this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false
         });
@@ -25936,7 +26407,7 @@ const TreeItem = class extends HTMLElement$1 {
           this.selected = true;
         }
         else {
-          this.calciteTreeItemSelect.emit({
+          this.calciteInternalTreeItemSelect.emit({
             modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false
           });
@@ -26098,12 +26569,13 @@ const ValueList = class extends HTMLElement$1 {
   calciteListItemChangeHandler(event) {
     calciteListItemChangeHandler.call(this, event);
   }
-  calciteListItemPropsChangeHandler(event) {
+  calciteInternalListItemPropsChangeHandler(event) {
     event.stopPropagation();
     this.setUpFilter();
   }
-  calciteListItemValueChangeHandler(event) {
-    calciteListItemValueChangeHandler.call(this, event);
+  calciteInternalListItemValueChangeHandler(event) {
+    calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
   }
   // --------------------------------------------------------------------------
   //
@@ -26152,7 +26624,11 @@ const ValueList = class extends HTMLElement$1 {
   async getSelectedItems() {
     return this.selectedValues;
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -26196,7 +26672,7 @@ const ValueListItem = class extends HTMLElement$1 {
      */
     this.disabled = false;
     /**
-     * @internal When false, the list item cannot be deselected by user interaction.
+     * @internal
      */
     this.disableDeselect = false;
     /**
@@ -26204,11 +26680,12 @@ const ValueListItem = class extends HTMLElement$1 {
      */
     this.nonInteractive = false;
     /**
-     * @internal - Stores the activated state of the drag handle.
+     * @internal
      */
     this.handleActivated = false;
     /**
      * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     this.icon = null;
@@ -26262,6 +26739,8 @@ const ValueListItem = class extends HTMLElement$1 {
   /**
    * Toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     this.pickListItem.toggleSelected(coerce);
@@ -26306,14 +26785,14 @@ const ValueListItem = class extends HTMLElement$1 {
   static get style() { return valueListItemCss; }
 };
 
-const CalciteAccordion = /*@__PURE__*/proxyCustomElement(Accordion, [1,"calcite-accordion",{"appearance":[513],"iconPosition":[513,"icon-position"],"iconType":[513,"icon-type"],"scale":[513],"selectionMode":[513,"selection-mode"]},[[0,"calciteAccordionItemKeyEvent","calciteAccordionItemKeyEvent"],[0,"calciteAccordionItemRegister","registerCalciteAccordionItem"],[0,"calciteAccordionItemSelect","updateActiveItemOnChange"]]]);
-const CalciteAccordionItem = /*@__PURE__*/proxyCustomElement(AccordionItem, [1,"calcite-accordion-item",{"active":[1540],"itemTitle":[1,"item-title"],"itemSubtitle":[1,"item-subtitle"],"icon":[513]},[[0,"keydown","keyDownHandler"],[16,"calciteAccordionChange","updateActiveItemOnChange"]]]);
+const CalciteAccordion = /*@__PURE__*/proxyCustomElement(Accordion, [1,"calcite-accordion",{"appearance":[513],"iconPosition":[513,"icon-position"],"iconType":[513,"icon-type"],"scale":[513],"selectionMode":[513,"selection-mode"]},[[0,"calciteInternalAccordionItemKeyEvent","calciteInternalAccordionItemKeyEvent"],[0,"calciteInternalAccordionItemRegister","registerCalciteAccordionItem"],[0,"calciteInternalAccordionItemSelect","updateActiveItemOnChange"]]]);
+const CalciteAccordionItem = /*@__PURE__*/proxyCustomElement(AccordionItem, [1,"calcite-accordion-item",{"active":[1540],"itemTitle":[1,"item-title"],"itemSubtitle":[1,"item-subtitle"],"icon":[513]},[[0,"keydown","keyDownHandler"],[16,"calciteInternalAccordionChange","updateActiveItemOnChange"]]]);
 const CalciteAction = /*@__PURE__*/proxyCustomElement(Action, [1,"calcite-action",{"active":[516],"alignment":[513],"appearance":[513],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"intlLoading":[1,"intl-loading"],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"]}]);
 const CalciteActionBar = /*@__PURE__*/proxyCustomElement(ActionBar, [1,"calcite-action-bar",{"expandDisabled":[516,"expand-disabled"],"expanded":[1540],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"overflowActionsDisabled":[4,"overflow-actions-disabled"],"position":[513],"scale":[513]}]);
 const CalciteActionGroup = /*@__PURE__*/proxyCustomElement(ActionGroup, [1,"calcite-action-group",{"expanded":[516],"layout":[513],"columns":[514],"intlMore":[1,"intl-more"],"menuOpen":[1540,"menu-open"],"scale":[513]}]);
 const CalciteActionMenu = /*@__PURE__*/proxyCustomElement(ActionMenu, [1,"calcite-action-menu",{"expanded":[516],"flipPlacements":[16],"label":[1],"open":[1540],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"scale":[513],"activeMenuItemIndex":[32]},[[8,"click","closeCalciteActionMenuOnClick"]]]);
 const CalciteActionPad = /*@__PURE__*/proxyCustomElement(ActionPad, [1,"calcite-action-pad",{"expandDisabled":[516,"expand-disabled"],"expanded":[1540],"layout":[513],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"scale":[513]}]);
-const CalciteAlert = /*@__PURE__*/proxyCustomElement(Alert, [1,"calcite-alert",{"active":[1540],"autoDismiss":[4,"auto-dismiss"],"autoDismissDuration":[513,"auto-dismiss-duration"],"color":[513],"icon":[520],"intlClose":[1,"intl-close"],"label":[1],"placement":[1],"scale":[513],"queue":[32],"queueLength":[32],"queued":[32],"requestedIcon":[32]},[[8,"calciteAlertSync","alertSync"],[8,"calciteAlertRegister","alertRegister"]]]);
+const CalciteAlert = /*@__PURE__*/proxyCustomElement(Alert, [1,"calcite-alert",{"active":[1540],"autoDismiss":[4,"auto-dismiss"],"autoDismissDuration":[513,"auto-dismiss-duration"],"color":[513],"icon":[520],"intlClose":[1,"intl-close"],"label":[1],"placement":[1],"scale":[513],"queue":[32],"queueLength":[32],"queued":[32],"requestedIcon":[32]},[[8,"calciteInternalAlertSync","alertSync"],[8,"calciteInternalAlertRegister","alertRegister"]]]);
 const CalciteAvatar = /*@__PURE__*/proxyCustomElement(Avatar, [1,"calcite-avatar",{"scale":[513],"thumbnail":[1],"fullName":[1,"full-name"],"username":[1],"userId":[1,"user-id"],"error":[32]}]);
 const CalciteBlock = /*@__PURE__*/proxyCustomElement(Block, [1,"calcite-block",{"collapsible":[4],"disabled":[516],"dragHandle":[516,"drag-handle"],"heading":[1],"headingLevel":[2,"heading-level"],"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"intlLoading":[1,"intl-loading"],"intlOptions":[1,"intl-options"],"loading":[516],"open":[1540],"status":[513],"summary":[1]}]);
 const CalciteBlockSection = /*@__PURE__*/proxyCustomElement(BlockSection, [1,"calcite-block-section",{"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"open":[1540],"status":[513],"text":[1],"toggleDisplay":[513,"toggle-display"]}]);
@@ -26331,20 +26810,20 @@ const CalciteDatePicker = /*@__PURE__*/proxyCustomElement(DatePicker, [1,"calcit
 const CalciteDatePickerDay = /*@__PURE__*/proxyCustomElement(DatePickerDay, [1,"calcite-date-picker-day",{"day":[2],"disabled":[516],"currentMonth":[516,"current-month"],"selected":[516],"highlighted":[516],"range":[516],"startOfRange":[516,"start-of-range"],"endOfRange":[516,"end-of-range"],"rangeHover":[516,"range-hover"],"active":[516],"localeData":[16],"scale":[513],"value":[16]},[[1,"mouseover","mouseoverHandler"]]]);
 const CalciteDatePickerMonth = /*@__PURE__*/proxyCustomElement(DatePickerMonth, [1,"calcite-date-picker-month",{"selectedDate":[16],"activeDate":[16],"startDate":[16],"endDate":[16],"min":[16],"max":[16],"scale":[513],"localeData":[16],"hoverRange":[16]},[[1,"mouseout","mouseoutHandler"]]]);
 const CalciteDatePickerMonthHeader = /*@__PURE__*/proxyCustomElement(DatePickerMonthHeader, [1,"calcite-date-picker-month-header",{"selectedDate":[16],"activeDate":[16],"headingLevel":[2,"heading-level"],"min":[16],"max":[16],"locale":[1],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"intlYear":[1,"intl-year"],"scale":[513],"localeData":[16],"nextMonthDate":[32],"prevMonthDate":[32]}]);
-const CalciteDropdown = /*@__PURE__*/proxyCustomElement(Dropdown, [1,"calcite-dropdown",{"active":[1540],"disableCloseOnSelect":[516,"disable-close-on-select"],"disabled":[516],"flipPlacements":[16],"maxItems":[2,"max-items"],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"scale":[513],"selectedItems":[1040],"type":[513],"width":[513]},[[8,"click","closeCalciteDropdownOnClick"],[0,"calciteDropdownCloseRequest","closeCalciteDropdownOnEvent"],[8,"calciteDropdownOpen","closeCalciteDropdownOnOpenEvent"],[1,"mouseenter","mouseEnterHandler"],[1,"mouseleave","mouseLeaveHandler"],[0,"calciteDropdownItemKeyEvent","calciteDropdownItemKeyEvent"],[0,"calciteDropdownItemSelect","handleItemSelect"]]]);
-const CalciteDropdownGroup = /*@__PURE__*/proxyCustomElement(DropdownGroup, [1,"calcite-dropdown-group",{"groupTitle":[513,"group-title"],"selectionMode":[513,"selection-mode"],"scale":[513]},[[0,"calciteDropdownItemSelect","updateActiveItemOnChange"]]]);
-const CalciteDropdownItem = /*@__PURE__*/proxyCustomElement(DropdownItem, [1,"calcite-dropdown-item",{"active":[1540],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"iconEnd":[513,"icon-end"],"href":[513],"label":[1],"rel":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"],[16,"calciteDropdownItemChange","updateActiveItemOnChange"]]]);
+const CalciteDropdown = /*@__PURE__*/proxyCustomElement(Dropdown, [1,"calcite-dropdown",{"active":[1540],"disableCloseOnSelect":[516,"disable-close-on-select"],"disabled":[516],"flipPlacements":[16],"maxItems":[2,"max-items"],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"scale":[513],"selectedItems":[1040],"type":[513],"width":[513]},[[8,"click","closeCalciteDropdownOnClick"],[0,"calciteInternalDropdownCloseRequest","closeCalciteDropdownOnEvent"],[8,"calciteDropdownOpen","closeCalciteDropdownOnOpenEvent"],[1,"mouseenter","mouseEnterHandler"],[1,"mouseleave","mouseLeaveHandler"],[0,"calciteInternalDropdownItemKeyEvent","calciteInternalDropdownItemKeyEvent"],[0,"calciteInternalDropdownItemSelect","handleItemSelect"]]]);
+const CalciteDropdownGroup = /*@__PURE__*/proxyCustomElement(DropdownGroup, [1,"calcite-dropdown-group",{"groupTitle":[513,"group-title"],"selectionMode":[513,"selection-mode"],"scale":[513]},[[0,"calciteInternalDropdownItemSelect","updateActiveItemOnChange"]]]);
+const CalciteDropdownItem = /*@__PURE__*/proxyCustomElement(DropdownItem, [1,"calcite-dropdown-item",{"active":[1540],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"iconEnd":[513,"icon-end"],"href":[513],"label":[1],"rel":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"],[16,"calciteInternalDropdownItemChange","updateActiveItemOnChange"]]]);
 const CalciteFab = /*@__PURE__*/proxyCustomElement(Fab, [1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"]}]);
 const CalciteFilter = /*@__PURE__*/proxyCustomElement(Filter, [1,"calcite-filter",{"items":[1040],"disabled":[516],"filteredItems":[1040],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"scale":[513],"value":[1025]}]);
 const CalciteFlow = /*@__PURE__*/proxyCustomElement(Flow, [1,"calcite-flow",{"panelCount":[32],"flowDirection":[32],"panels":[32]},[[0,"calcitePanelBackClick","handleCalcitePanelBackClick"]]]);
 const CalciteGraph = /*@__PURE__*/proxyCustomElement(Graph, [1,"calcite-graph",{"data":[16],"colorStops":[16],"highlightMin":[2,"highlight-min"],"highlightMax":[2,"highlight-max"],"min":[2],"max":[2]}]);
 const CalciteHandle = /*@__PURE__*/proxyCustomElement(Handle, [1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"]}]);
 const CalciteIcon = /*@__PURE__*/proxyCustomElement(Icon, [1,"calcite-icon",{"icon":[513],"flipRtl":[516,"flip-rtl"],"scale":[513],"textLabel":[1,"text-label"],"pathData":[32],"visible":[32]}]);
-const CalciteInlineEditable = /*@__PURE__*/proxyCustomElement(InlineEditable, [1,"calcite-inline-editable",{"disabled":[516],"editingEnabled":[1540,"editing-enabled"],"loading":[1540],"controls":[516],"intlEnableEditing":[513,"intl-enable-editing"],"intlCancelEditing":[513,"intl-cancel-editing"],"intlConfirmChanges":[513,"intl-confirm-changes"],"scale":[1537],"afterConfirm":[16]},[[0,"calciteInputBlur","blurHandler"]]]);
+const CalciteInlineEditable = /*@__PURE__*/proxyCustomElement(InlineEditable, [1,"calcite-inline-editable",{"disabled":[516],"editingEnabled":[1540,"editing-enabled"],"loading":[1540],"controls":[516],"intlEnableEditing":[513,"intl-enable-editing"],"intlCancelEditing":[513,"intl-cancel-editing"],"intlConfirmChanges":[513,"intl-confirm-changes"],"scale":[1537],"afterConfirm":[16]},[[0,"calciteInternalInputBlur","blurHandler"]]]);
 const CalciteInput = /*@__PURE__*/proxyCustomElement(Input, [1,"calcite-input",{"alignment":[513],"autofocus":[4],"clearable":[516],"disabled":[516],"groupSeparator":[4,"group-separator"],"hidden":[4],"icon":[520],"intlClear":[1,"intl-clear"],"intlLoading":[1,"intl-loading"],"iconFlipRtl":[516,"icon-flip-rtl"],"label":[1],"loading":[516],"locale":[1],"localeFormat":[4,"locale-format"],"max":[514],"min":[514],"maxlength":[514],"maxLength":[514,"max-length"],"minLength":[514,"min-length"],"name":[513],"numberButtonType":[513,"number-button-type"],"placeholder":[1],"prefixText":[1,"prefix-text"],"readOnly":[4,"read-only"],"required":[4],"scale":[1537],"status":[1537],"step":[520],"suffixText":[1,"suffix-text"],"editingEnabled":[1540,"editing-enabled"],"type":[513],"value":[1025],"localizedValue":[32]}]);
 const CalciteInputDatePicker = /*@__PURE__*/proxyCustomElement(InputDatePicker, [1,"calcite-input-date-picker",{"disabled":[516],"value":[1025],"flipPlacements":[16],"headingLevel":[2,"heading-level"],"valueAsDate":[1040],"startAsDate":[1040],"endAsDate":[1040],"minAsDate":[1040],"maxAsDate":[1040],"min":[1025],"max":[1025],"active":[1540],"name":[1],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"intlYear":[1,"intl-year"],"locale":[1],"scale":[513],"placement":[513],"range":[516],"required":[516],"start":[1025],"end":[1025],"overlayPositioning":[1,"overlay-positioning"],"proximitySelectionDisabled":[4,"proximity-selection-disabled"],"layout":[513],"focusedInput":[32],"localeData":[32]},[[0,"calciteDatePickerChange","handleDateOrRangeChange"],[0,"calciteDatePickerRangeChange","handleDateOrRangeChange"],[0,"calciteDaySelect","calciteDaySelectHandler"]]]);
 const CalciteInputMessage = /*@__PURE__*/proxyCustomElement(InputMessage, [1,"calcite-input-message",{"active":[516],"icon":[520],"scale":[1537],"status":[1537],"type":[513]}]);
-const CalciteInputTimePicker = /*@__PURE__*/proxyCustomElement(InputTimePicker, [1,"calcite-input-time-picker",{"active":[1540],"disabled":[516],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"locale":[1025,"lang"],"name":[1],"required":[516],"scale":[513],"placement":[513],"step":[2],"value":[1025],"localizedValue":[32]},[[0,"click","clickHandler"],[0,"keyup","keyUpHandler"],[0,"calciteTimePickerBlur","timePickerBlurHandler"],[0,"calciteTimePickerFocus","timePickerFocusHandler"]]]);
+const CalciteInputTimePicker = /*@__PURE__*/proxyCustomElement(InputTimePicker, [1,"calcite-input-time-picker",{"active":[1540],"disabled":[516],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"locale":[1025,"lang"],"name":[1],"required":[516],"scale":[513],"placement":[513],"step":[2],"value":[1025],"localizedValue":[32]},[[0,"click","clickHandler"],[0,"keyup","keyUpHandler"],[0,"calciteInternalTimePickerBlur","timePickerBlurHandler"],[0,"calciteInternalTimePickerFocus","timePickerFocusHandler"]]]);
 const CalciteLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"calcite-label",{"alignment":[513],"status":[513],"for":[513],"scale":[513],"layout":[513],"disableSpacing":[4,"disable-spacing"],"disabled":[516]}]);
 const CalciteLink = /*@__PURE__*/proxyCustomElement(Link, [1,"calcite-link",{"disabled":[516],"download":[520],"href":[513],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"rel":[1],"target":[1]}]);
 const CalciteList = /*@__PURE__*/proxyCustomElement(List$1, [1,"calcite-list",{"disabled":[516],"headingLevel":[2,"heading-level"]}]);
@@ -26357,32 +26836,32 @@ const CalciteOption = /*@__PURE__*/proxyCustomElement(Option, [1,"calcite-option
 const CalciteOptionGroup = /*@__PURE__*/proxyCustomElement(OptionGroup, [1,"calcite-option-group",{"disabled":[516],"label":[1]}]);
 const CalcitePagination = /*@__PURE__*/proxyCustomElement(Pagination, [1,"calcite-pagination",{"num":[2],"start":[1026],"total":[2],"textLabelNext":[1,"text-label-next"],"textLabelPrevious":[1,"text-label-previous"],"scale":[513]}]);
 const CalcitePanel = /*@__PURE__*/proxyCustomElement(Panel, [1,"calcite-panel",{"dismissed":[1540],"beforeBack":[16],"disabled":[516],"dismissible":[516],"headingLevel":[2,"heading-level"],"showBackButton":[516,"show-back-button"],"intlBack":[1,"intl-back"],"heightScale":[513,"height-scale"],"widthScale":[513,"width-scale"],"loading":[516],"intlClose":[1,"intl-close"],"intlOptions":[1,"intl-options"],"heading":[1],"summary":[1],"menuOpen":[516,"menu-open"]}]);
-const CalcitePickList = /*@__PURE__*/proxyCustomElement(PickList, [1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"headingLevel":[2,"heading-level"],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"],[0,"focusout","calciteListFocusOutHandler"]]]);
+const CalcitePickList = /*@__PURE__*/proxyCustomElement(PickList, [1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"headingLevel":[2,"heading-level"],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteInternalListItemPropsChange","calciteInternalListItemPropsChangeHandler"],[0,"calciteInternalListItemValueChange","calciteInternalListItemValueChangeHandler"],[0,"focusout","calciteListFocusOutHandler"]]]);
 const CalcitePickListGroup = /*@__PURE__*/proxyCustomElement(PickListGroup, [1,"calcite-pick-list-group",{"groupTitle":[513,"group-title"],"headingLevel":[2,"heading-level"]}]);
 const CalcitePickListItem = /*@__PURE__*/proxyCustomElement(PickListItem, [1,"calcite-pick-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"nonInteractive":[516,"non-interactive"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"intlRemove":[513,"intl-remove"],"value":[8]}]);
-const CalcitePopover = /*@__PURE__*/proxyCustomElement(Popover, [1,"calcite-popover",{"autoClose":[516,"auto-close"],"closeButton":[516,"close-button"],"dismissible":[516],"disableFlip":[516,"disable-flip"],"disablePointer":[516,"disable-pointer"],"flipPlacements":[16],"heading":[1],"headingLevel":[2,"heading-level"],"label":[1],"offsetDistance":[514,"offset-distance"],"offsetSkidding":[514,"offset-skidding"],"open":[1540],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"referenceElement":[1,"reference-element"],"intlClose":[1,"intl-close"],"effectiveReferenceElement":[32]}]);
+const CalcitePopover = /*@__PURE__*/proxyCustomElement(Popover, [1,"calcite-popover",{"autoClose":[516,"auto-close"],"closeButton":[516,"close-button"],"dismissible":[516],"disableFlip":[516,"disable-flip"],"disablePointer":[516,"disable-pointer"],"flipPlacements":[16],"heading":[1],"headingLevel":[2,"heading-level"],"label":[1],"offsetDistance":[514,"offset-distance"],"offsetSkidding":[514,"offset-skidding"],"open":[1540],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"referenceElement":[1,"reference-element"],"triggerDisabled":[516,"trigger-disabled"],"intlClose":[1,"intl-close"],"effectiveReferenceElement":[32]}]);
 const CalcitePopoverManager = /*@__PURE__*/proxyCustomElement(PopoverManager, [1,"calcite-popover-manager",{"selector":[1],"autoClose":[516,"auto-close"]}]);
 const CalciteProgress = /*@__PURE__*/proxyCustomElement(Progress, [1,"calcite-progress",{"type":[1],"value":[2],"label":[1],"text":[1],"reversed":[4]}]);
 const CalciteRadioButton = /*@__PURE__*/proxyCustomElement(RadioButton, [1,"calcite-radio-button",{"checked":[1540],"disabled":[516],"focused":[1540],"guid":[1537],"hidden":[516],"hovered":[1540],"label":[1],"name":[513],"required":[516],"scale":[513],"value":[1032]},[[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
 const CalciteRadioButtonGroup = /*@__PURE__*/proxyCustomElement(RadioButtonGroup, [1,"calcite-radio-button-group",{"disabled":[516],"hidden":[516],"layout":[513],"name":[513],"required":[516],"scale":[513]},[[0,"calciteRadioButtonChange","radioButtonChangeHandler"]]]);
-const CalciteRadioGroup = /*@__PURE__*/proxyCustomElement(RadioGroup, [1,"calcite-radio-group",{"appearance":[513],"disabled":[516],"required":[516],"layout":[513],"name":[1],"scale":[513],"value":[1025],"selectedItem":[1040],"width":[513]},[[0,"calciteRadioGroupItemChange","handleSelected"],[0,"keydown","handleKeyDown"]]]);
+const CalciteRadioGroup = /*@__PURE__*/proxyCustomElement(RadioGroup, [1,"calcite-radio-group",{"appearance":[513],"disabled":[516],"required":[516],"layout":[513],"name":[1],"scale":[513],"value":[1025],"selectedItem":[1040],"width":[513]},[[0,"calciteInternalRadioGroupItemChange","handleSelected"],[0,"keydown","handleKeyDown"]]]);
 const CalciteRadioGroupItem = /*@__PURE__*/proxyCustomElement(RadioGroupItem, [1,"calcite-radio-group-item",{"checked":[1540],"icon":[513],"iconFlipRtl":[516,"icon-flip-rtl"],"iconPosition":[513,"icon-position"],"value":[1032]}]);
 const CalciteRating = /*@__PURE__*/proxyCustomElement(Rating, [1,"calcite-rating",{"scale":[513],"value":[1538],"readOnly":[516,"read-only"],"disabled":[516],"showChip":[516,"show-chip"],"count":[514],"average":[514],"name":[513],"intlRating":[1,"intl-rating"],"intlStars":[1,"intl-stars"],"required":[516],"hoverValue":[32],"focusValue":[32],"hasFocus":[32]},[[0,"blur","blurHandler"]]]);
 const CalciteScrim = /*@__PURE__*/proxyCustomElement(Scrim, [1,"calcite-scrim",{"intlLoading":[1,"intl-loading"],"loading":[516]}]);
-const CalciteSelect = /*@__PURE__*/proxyCustomElement(Select, [1,"calcite-select",{"disabled":[516],"label":[1],"name":[1],"required":[516],"scale":[513],"value":[1025],"selectedOption":[1040],"width":[513]},[[0,"calciteOptionChange","handleOptionOrGroupChange"],[0,"calciteOptionGroupChange","handleOptionOrGroupChange"]]]);
+const CalciteSelect = /*@__PURE__*/proxyCustomElement(Select, [1,"calcite-select",{"disabled":[516],"label":[1],"name":[1],"required":[516],"scale":[513],"value":[1025],"selectedOption":[1040],"width":[513]},[[0,"calciteInternalOptionChange","handleOptionOrGroupChange"],[0,"calciteInternalOptionGroupChange","handleOptionOrGroupChange"]]]);
 const CalciteShell = /*@__PURE__*/proxyCustomElement(Shell, [1,"calcite-shell",{"contentBehind":[516,"content-behind"]}]);
 const CalciteShellCenterRow = /*@__PURE__*/proxyCustomElement(ShellCenterRow, [1,"calcite-shell-center-row",{"detached":[516],"heightScale":[513,"height-scale"],"position":[513]}]);
 const CalciteShellPanel = /*@__PURE__*/proxyCustomElement(ShellPanel, [1,"calcite-shell-panel",{"collapsed":[516],"detached":[516],"detachedHeightScale":[513,"detached-height-scale"],"widthScale":[513,"width-scale"],"position":[513],"intlResize":[1,"intl-resize"],"resizable":[516],"contentWidth":[32]}]);
 const CalciteSlider = /*@__PURE__*/proxyCustomElement(Slider, [1,"calcite-slider",{"disabled":[516],"hasHistogram":[1540,"has-histogram"],"histogram":[16],"histogramStops":[16],"labelHandles":[516,"label-handles"],"labelTicks":[516,"label-ticks"],"max":[514],"maxLabel":[1,"max-label"],"maxValue":[1026,"max-value"],"min":[514],"minLabel":[1,"min-label"],"minValue":[1026,"min-value"],"mirrored":[516],"name":[513],"pageStep":[2,"page-step"],"precise":[4],"required":[516],"snap":[4],"step":[2],"ticks":[2],"value":[1538],"scale":[1],"activeProp":[32],"minMaxValueRange":[32],"minValueDragRange":[32],"maxValueDragRange":[32],"tickValues":[32]},[[0,"keydown","keyDownHandler"],[0,"click","clickHandler"],[1,"pointerdown","pointerDownHandler"]]]);
 const CalciteSortableList = /*@__PURE__*/proxyCustomElement(SortableList, [1,"calcite-sortable-list",{"dragSelector":[1,"drag-selector"],"group":[1],"handleSelector":[1,"handle-selector"],"layout":[1],"disabled":[516],"loading":[516],"handleActivated":[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]);
 const CalciteSplitButton = /*@__PURE__*/proxyCustomElement(SplitButton, [1,"calcite-split-button",{"appearance":[513],"color":[513],"disabled":[516],"active":[1540],"dropdownIconType":[513,"dropdown-icon-type"],"dropdownLabel":[513,"dropdown-label"],"loading":[516],"overlayPositioning":[1,"overlay-positioning"],"primaryIconEnd":[513,"primary-icon-end"],"primaryIconFlipRtl":[513,"primary-icon-flip-rtl"],"primaryIconStart":[513,"primary-icon-start"],"primaryLabel":[513,"primary-label"],"primaryText":[513,"primary-text"],"scale":[513],"width":[513]}]);
-const CalciteStepper = /*@__PURE__*/proxyCustomElement(Stepper, [1,"calcite-stepper",{"icon":[516],"layout":[513],"numbered":[516],"scale":[513],"requestedContent":[1040]},[[0,"calciteStepperItemKeyEvent","calciteStepperItemKeyEvent"],[0,"calciteStepperItemRegister","registerItem"],[0,"calciteStepperItemSelect","updateItem"]]]);
-const CalciteStepperItem = /*@__PURE__*/proxyCustomElement(StepperItem, [1,"calcite-stepper-item",{"active":[1540],"complete":[516],"error":[4],"disabled":[516],"itemTitle":[1,"item-title"],"itemSubtitle":[1,"item-subtitle"],"layout":[1537],"icon":[1028],"numbered":[1028],"scale":[1537]},[[16,"calciteStepperItemChange","updateActiveItemOnChange"]]]);
+const CalciteStepper = /*@__PURE__*/proxyCustomElement(Stepper, [1,"calcite-stepper",{"icon":[516],"layout":[513],"numbered":[516],"scale":[513],"requestedContent":[1040]},[[0,"calciteInternalStepperItemKeyEvent","calciteInternalStepperItemKeyEvent"],[0,"calciteInternalStepperItemRegister","registerItem"],[0,"calciteInternalStepperItemSelect","updateItem"]]]);
+const CalciteStepperItem = /*@__PURE__*/proxyCustomElement(StepperItem, [1,"calcite-stepper-item",{"active":[1540],"complete":[516],"error":[4],"disabled":[516],"itemTitle":[1,"item-title"],"itemSubtitle":[1,"item-subtitle"],"layout":[1537],"icon":[1028],"numbered":[1028],"scale":[1537]},[[16,"calciteInternalStepperItemChange","updateActiveItemOnChange"]]]);
 const CalciteSwitch = /*@__PURE__*/proxyCustomElement(Switch, [1,"calcite-switch",{"disabled":[516],"label":[1],"name":[513],"scale":[513],"switched":[1028],"checked":[1540],"value":[8]}]);
 const CalciteTab = /*@__PURE__*/proxyCustomElement(Tab, [1,"calcite-tab",{"tab":[513],"active":[1540],"scale":[1537],"labeledBy":[32]},[[16,"calciteInternalTabChange","internalTabChangeHandler"]]]);
-const CalciteTabNav = /*@__PURE__*/proxyCustomElement(TabNav, [1,"calcite-tab-nav",{"storageId":[1,"storage-id"],"syncId":[1,"sync-id"],"scale":[1537],"layout":[1537],"position":[1537],"bordered":[1540],"indicatorOffset":[1026,"indicator-offset"],"indicatorWidth":[1026,"indicator-width"],"selectedTab":[32],"selectedTabEl":[32]},[[0,"calciteTabsFocusPrevious","focusPreviousTabHandler"],[0,"calciteTabsFocusNext","focusNextTabHandler"],[0,"calciteInternalTabsActivate","internalActivateTabHandler"],[0,"calciteTabsActivate","activateTabHandler"],[0,"calciteTabTitleRegister","updateTabTitles"],[16,"calciteInternalTabChange","globalInternalTabChangeHandler"]]]);
+const CalciteTabNav = /*@__PURE__*/proxyCustomElement(TabNav, [1,"calcite-tab-nav",{"storageId":[1,"storage-id"],"syncId":[1,"sync-id"],"scale":[1537],"layout":[1537],"position":[1537],"bordered":[1540],"indicatorOffset":[1026,"indicator-offset"],"indicatorWidth":[1026,"indicator-width"],"selectedTab":[32],"selectedTabEl":[32]},[[0,"calciteInternalTabsFocusPrevious","focusPreviousTabHandler"],[0,"calciteInternalTabsFocusNext","focusNextTabHandler"],[0,"calciteInternalTabsActivate","internalActivateTabHandler"],[0,"calciteTabsActivate","activateTabHandler"],[0,"calciteInternalTabTitleRegister","updateTabTitles"],[16,"calciteInternalTabChange","globalInternalTabChangeHandler"]]]);
 const CalciteTabTitle = /*@__PURE__*/proxyCustomElement(TabTitle, [1,"calcite-tab-title",{"active":[1540],"disabled":[516],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"layout":[1537],"position":[1537],"scale":[1537],"bordered":[1540],"tab":[513],"controls":[32],"hasText":[32]},[[16,"calciteInternalTabChange","internalTabChangeHandler"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]]);
-const CalciteTabs = /*@__PURE__*/proxyCustomElement(Tabs, [1,"calcite-tabs",{"layout":[513],"position":[513],"scale":[513],"bordered":[1540],"titles":[32],"tabs":[32]},[[0,"calciteTabTitleRegister","calciteTabTitleRegister"],[16,"calciteTabTitleUnregister","calciteTabTitleUnregister"],[0,"calciteTabRegister","calciteTabRegister"],[16,"calciteTabUnregister","calciteTabUnregister"]]]);
+const CalciteTabs = /*@__PURE__*/proxyCustomElement(Tabs, [1,"calcite-tabs",{"layout":[513],"position":[513],"scale":[513],"bordered":[1540],"titles":[32],"tabs":[32]},[[0,"calciteInternalTabTitleRegister","calciteInternalTabTitleRegister"],[16,"calciteTabTitleUnregister","calciteTabTitleUnregister"],[0,"calciteInternalTabRegister","calciteInternalTabRegister"],[16,"calciteTabUnregister","calciteTabUnregister"]]]);
 const CalciteTile = /*@__PURE__*/proxyCustomElement(Tile, [1,"calcite-tile",{"active":[516],"description":[513],"disabled":[516],"embed":[516],"focused":[516],"heading":[513],"hidden":[516],"href":[513],"icon":[513]}]);
 const CalciteTileSelect = /*@__PURE__*/proxyCustomElement(TileSelect, [1,"calcite-tile-select",{"checked":[1540],"description":[513],"disabled":[516],"heading":[513],"hidden":[516],"icon":[513],"name":[520],"inputEnabled":[516,"input-enabled"],"inputAlignment":[513,"input-alignment"],"type":[513],"value":[8],"width":[513],"focused":[32]},[[0,"calciteCheckboxChange","checkboxChangeHandler"],[0,"calciteInternalCheckboxFocus","checkboxFocusBlurHandler"],[0,"calciteInternalCheckboxBlur","checkboxFocusBlurHandler"],[0,"calciteRadioButtonChange","radioButtonChangeHandler"],[0,"calciteInternalRadioButtonCheckedChange","radioButtonCheckedChangeHandler"],[0,"calciteInternalRadioButtonFocus","radioButtonFocusBlurHandler"],[0,"calciteInternalRadioButtonBlur","radioButtonFocusBlurHandler"],[0,"click","click"],[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
 const CalciteTileSelectGroup = /*@__PURE__*/proxyCustomElement(TileSelectGroup, [1,"calcite-tile-select-group",{"disabled":[516],"layout":[513]}]);
@@ -26392,9 +26871,9 @@ const CalciteTipGroup = /*@__PURE__*/proxyCustomElement(TipGroup, [1,"calcite-ti
 const CalciteTipManager = /*@__PURE__*/proxyCustomElement(TipManager, [1,"calcite-tip-manager",{"closed":[1540],"headingLevel":[2,"heading-level"],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32]}]);
 const CalciteTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"calcite-tooltip",{"label":[1],"offsetDistance":[514,"offset-distance"],"offsetSkidding":[514,"offset-skidding"],"open":[516],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"referenceElement":[1,"reference-element"],"effectiveReferenceElement":[32]}]);
 const CalciteTooltipManager = /*@__PURE__*/proxyCustomElement(TooltipManager, [1,"calcite-tooltip-manager",{"selector":[1]}]);
-const CalciteTree = /*@__PURE__*/proxyCustomElement(Tree, [1,"calcite-tree",{"lines":[1540],"inputEnabled":[4,"input-enabled"],"child":[1540],"scale":[1537],"selectionMode":[1537,"selection-mode"]},[[0,"focus","onFocus"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"calciteTreeItemSelect","onClick"],[0,"keydown","keyDownHandler"]]]);
+const CalciteTree = /*@__PURE__*/proxyCustomElement(Tree, [1,"calcite-tree",{"lines":[1540],"inputEnabled":[4,"input-enabled"],"child":[1540],"scale":[1537],"selectionMode":[1537,"selection-mode"]},[[0,"focus","onFocus"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"calciteInternalTreeItemSelect","onClick"],[0,"keydown","keyDownHandler"]]]);
 const CalciteTreeItem = /*@__PURE__*/proxyCustomElement(TreeItem, [1,"calcite-tree-item",{"selected":[1540],"expanded":[1540],"parentExpanded":[4,"parent-expanded"],"depth":[1538],"hasChildren":[1540,"has-children"],"lines":[1540],"inputEnabled":[4,"input-enabled"],"scale":[1537],"indeterminate":[516],"selectionMode":[1025,"selection-mode"]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"]]]);
-const CalciteValueList = /*@__PURE__*/proxyCustomElement(ValueList, [1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"focusout","calciteListFocusOutHandler"],[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]);
+const CalciteValueList = /*@__PURE__*/proxyCustomElement(ValueList, [1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"focusout","calciteListFocusOutHandler"],[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteInternalListItemPropsChange","calciteInternalListItemPropsChangeHandler"],[0,"calciteInternalListItemValueChange","calciteInternalListItemValueChangeHandler"]]]);
 const CalciteValueListItem = /*@__PURE__*/proxyCustomElement(ValueListItem, [1,"calcite-value-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"nonInteractive":[516,"non-interactive"],"handleActivated":[1028,"handle-activated"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"value":[8]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {