@esri/calcite-components 1.0.0-next.467 → 1.0.0-next.468

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.467
+ * v1.0.0-next.468
  */
 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';
@@ -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";
     //--------------------------------------------------------------------------
     //
@@ -182,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) {
@@ -217,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) {
@@ -243,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 }) {
@@ -353,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) {
@@ -524,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.
@@ -533,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) {
@@ -591,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;
@@ -2066,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) {
@@ -2075,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);
@@ -2226,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);
@@ -2367,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";
@@ -2703,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);
@@ -2780,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;
@@ -3053,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;
@@ -3068,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;
@@ -3096,6 +3131,7 @@ function rgbToHue(rgb) {
 }
 /**
  * For a hex color, find the hue
+ *
  * @param hex {string} - form of "#------"
  */
 function hexToHue(hex) {
@@ -3257,19 +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;
@@ -3504,6 +3546,7 @@ const TEXT$k = {
 
 /**
  * Exported for testing purposes only
+ *
  * @internal
  */
 const labelClickEvent = "calciteInternalLabelClick";
@@ -3546,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);
@@ -3570,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);
@@ -3586,6 +3633,8 @@ function disconnectLabel(component) {
 }
 /**
  * Helper to get the label text from a component.
+ *
+ * @param component
  */
 function getLabelText(component) {
   var _a, _b;
@@ -3640,6 +3689,8 @@ function hasRegisteredFormComponentParent(form, formComponentEl) {
 }
 /**
  * Helper to submit a form.
+ *
+ * @param component
  */
 function submitForm(component) {
   var _a;
@@ -3647,6 +3698,8 @@ function submitForm(component) {
 }
 /**
  * Helper to reset a form.
+ *
+ * @param component
  */
 function resetForm(component) {
   var _a;
@@ -3654,6 +3707,8 @@ function resetForm(component) {
 }
 /**
  * Helper to set up form interactions on connectedCallback.
+ *
+ * @param component
  */
 function connectForm(component) {
   const { el, value } = component;
@@ -3680,6 +3735,8 @@ function onFormReset() {
 }
 /**
  * Helper to tear down form interactions on disconnectedCallback.
+ *
+ * @param component
  */
 function disconnectForm(component) {
   const { el, formEl } = component;
@@ -3696,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;
@@ -3704,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;
@@ -3788,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);
@@ -3814,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;
@@ -3830,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;
@@ -3977,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;
@@ -4076,6 +4149,7 @@ const Checkbox = class extends HTMLElement$1 {
     this.disabled = false;
     /**
      * The hovered state of the checkbox.
+     *
      * @internal
      */
     this.hovered = false;
@@ -4083,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.
@@ -4213,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;
@@ -6535,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;
@@ -6544,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;
@@ -6632,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)
      */
@@ -7302,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;
@@ -9482,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
@@ -9492,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;
@@ -10299,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) {
@@ -10581,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 = "") {
@@ -10599,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) {
@@ -10632,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();
@@ -10642,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)) {
@@ -10661,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) {
@@ -10679,6 +10817,8 @@ function dateFromISO(iso8601) {
 }
 /**
  * Return first portion of ISO string (YYYY-mm-dd)
+ *
+ * @param date
  */
 function dateToISO(date) {
   if (typeof date === "string") {
@@ -10691,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 &&
@@ -10701,6 +10844,8 @@ function sameDate(d1, d2) {
 }
 /**
  * Get a date one month in the past
+ *
+ * @param date
  */
 function prevMonth(date) {
   const month = date.getMonth();
@@ -10714,6 +10859,8 @@ function prevMonth(date) {
 }
 /**
  * Get a date one month in the future
+ *
+ * @param date
  */
 function nextMonth(date) {
   const month = date.getMonth();
@@ -10727,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)
@@ -10736,6 +10886,9 @@ function localizeNumber(num, localeData) {
 }
 /**
  * Calculate actual number from localized string
+ *
+ * @param str
+ * @param localeData
  */
 function parseNumber(str, localeData) {
   const numerals = "0123456789";
@@ -10748,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;
@@ -10761,6 +10917,8 @@ function parseDateString(str, localeData) {
 }
 /**
  * Convert eastern arbic numerals
+ *
+ * @param str
  */
 function replaceArabicNumerals(str = "") {
   return str
@@ -10769,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"];
@@ -10777,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();
@@ -10800,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;
@@ -10950,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);
@@ -11119,6 +11290,12 @@ 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 && [
@@ -11128,6 +11305,9 @@ const DatePicker = class extends HTMLElement$1 {
   }
   /**
    * Update date instance of start if valid
+   *
+   * @param startDate
+   * @param emit
    */
   setStartAsDate(startDate, emit) {
     this.startAsDate = startDate;
@@ -11141,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;
@@ -11164,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);
@@ -11391,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);
@@ -11400,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);
@@ -11409,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);
@@ -11425,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();
@@ -11436,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();
@@ -11450,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 &&
@@ -11460,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) ||
@@ -11468,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 &&
@@ -11484,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;
@@ -11550,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;
@@ -11649,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;
@@ -11701,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;
@@ -12080,8 +12302,10 @@ const DropdownGroup = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     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 */
+    /**
+      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";
   }
   //--------------------------------------------------------------------------
@@ -12328,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;
@@ -12650,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];
@@ -12663,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];
@@ -12675,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;
@@ -12688,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];
@@ -12700,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];
@@ -12713,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) {
@@ -12858,7 +13111,7 @@ const Handle = class extends HTMLElement$1 {
     //
     // --------------------------------------------------------------------------
     /**
-     * @internal - stores the activated state of the drag handle.
+     * @internal
      */
     this.activated = false;
     /**
@@ -12922,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 = {};
@@ -12960,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) {
@@ -13109,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;
@@ -13344,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;
@@ -13356,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;
@@ -13367,6 +13633,7 @@ const Input = class extends HTMLElement$1 {
     this.locale = document.documentElement.lang || "en";
     /**
      * Toggles locale formatting for numbers.
+     *
      * @internal
      */
     this.localeFormat = false;
@@ -13380,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
@@ -13892,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;
@@ -13910,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;
@@ -13996,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) {
@@ -14253,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);
@@ -14295,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;
@@ -14328,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) {
@@ -14625,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";
@@ -14638,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";
@@ -14864,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";
@@ -14922,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
      */
@@ -15227,6 +15515,8 @@ const Loader = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   /**
    * Return the proper sizes based on the scale property
+   *
+   * @param scale
    */
   getSize(scale) {
     return {
@@ -15541,6 +15831,8 @@ const Modal = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   /**
    * Focus first interactive element
+   *
+   * @param el
    * @deprecated use `setFocus` instead.
    */
   async focusElement(el) {
@@ -15554,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) {
@@ -15639,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;
@@ -15859,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;
@@ -16152,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") {
@@ -16165,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({
@@ -16174,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;
@@ -16708,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);
   }
@@ -16816,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;
@@ -16834,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;
@@ -16905,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;
@@ -16999,7 +17319,7 @@ class PopoverManager$1 {
     this.togglePopovers = (event) => {
       const composedPath = event.composedPath();
       const popover = this.queryPopover(composedPath);
-      if (popover) {
+      if (popover && !popover.triggerDisabled) {
         popover.toggle();
         return;
       }
@@ -17068,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;
@@ -17085,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;
@@ -17100,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;
@@ -17225,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;
@@ -17236,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;
   }
@@ -17352,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]";
@@ -17454,6 +17792,7 @@ const RadioButton = class extends HTMLElement$1 {
     this.disabled = false;
     /**
      * The focused state of the radio button.
+     *
      * @internal
      */
     this.focused = false;
@@ -17461,6 +17800,7 @@ const RadioButton = class extends HTMLElement$1 {
     this.hidden = false;
     /**
      * The hovered state of the radio button.
+     *
      * @internal
      */
     this.hovered = false;
@@ -18057,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;
@@ -18170,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;
@@ -18606,6 +18952,7 @@ const ShellPanel = class extends HTMLElement$1 {
     this.widthScale = "m";
     /**
      * Accessible label for resize separator.
+     *
      * @default "Resize"
      */
     this.intlResize = TEXT$3.resize;
@@ -18892,6 +19239,7 @@ const Slider = class extends HTMLElement$1 {
     };
     /**
      * Set the reference of the track Element
+     *
      * @internal
      * @param node
      */
@@ -19281,6 +19629,7 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Set the prop value if changed at the component level
+   *
    * @param valueProp
    * @param value
    */
@@ -19299,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) {
@@ -19314,6 +19666,8 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Translate a pixel position to value along the range
+   *
+   * @param x
    * @internal
    */
   translate(x) {
@@ -19330,6 +19684,8 @@ const Slider = class extends HTMLElement$1 {
   }
   /**
    * Get closest allowed value along stepped values
+   *
+   * @param num
    * @internal
    */
   getClosestStep(num) {
@@ -19353,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
    */
@@ -19487,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) {
@@ -19503,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
    */
@@ -19515,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
    */
@@ -19525,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
    */
@@ -22750,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";
@@ -22954,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) {
@@ -23204,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;
@@ -23303,7 +23676,9 @@ const Tab = class extends HTMLElement$1 {
      * Show this tab
      */
     this.active = false;
-    /** @internal Parent tabs component scale value */
+    /**
+     * @internal
+     */
     this.scale = "m";
     this.guid = `calcite-tab-title-${guid()}`;
   }
@@ -23375,6 +23750,8 @@ const Tab = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   async updateAriaInfo(tabIds = [], titleIds = []) {
@@ -23393,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", () => {
@@ -23524,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) {
@@ -23599,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;
@@ -23740,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 = []) {
@@ -23842,6 +24233,7 @@ const Tabs = class extends HTMLElement$1 {
   //
   //--------------------------------------------------------------------------
   /**
+   * @param e
    * @internal
    */
   calciteInternalTabTitleRegister(e) {
@@ -23850,6 +24242,7 @@ const Tabs = class extends HTMLElement$1 {
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
   calciteTabTitleUnregister(e) {
@@ -23858,6 +24251,7 @@ const Tabs = class extends HTMLElement$1 {
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
   calciteInternalTabRegister(e) {
@@ -23866,6 +24260,7 @@ const Tabs = class extends HTMLElement$1 {
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
   calciteTabUnregister(e) {
@@ -23950,6 +24345,7 @@ const Tile = class extends HTMLElement$1 {
     this.embed = false;
     /**
      * The focused state of the tile.
+     *
      * @internal
      */
     this.focused = false;
@@ -24283,56 +24679,81 @@ const TimePicker = class extends HTMLElement$1 {
     //  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";
@@ -24745,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();
@@ -25322,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;
@@ -25337,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";
@@ -25513,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]";
@@ -25552,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)
      */
@@ -25817,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();
@@ -26186,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);
   }
@@ -26230,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;
     /**
@@ -26238,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;
@@ -26296,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);
@@ -26394,7 +26839,7 @@ const CalcitePanel = /*@__PURE__*/proxyCustomElement(Panel, [1,"calcite-panel",{
 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"]]]);