@esri/calcite-components 1.0.0-next.436 → 1.0.0-next.439

package/dist/loader/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.436
+ * v1.0.0-next.439
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/tab/tab.d.ts

@@ -26,7 +26,7 @@ export declare class Tab {
    * @internal
    */
   calciteTabRegister: EventEmitter;
-  tabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
+  internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
   /**
    * Return the index of this tab within the tab array
    */

package/dist/types/components/tab-nav/tab-nav.d.ts

@@ -42,17 +42,22 @@ export declare class TabNav {
   render(): VNode;
   focusPreviousTabHandler(e: CustomEvent): void;
   focusNextTabHandler(e: CustomEvent): void;
+  internalActivateTabHandler(e: CustomEvent<TabChangeEventDetail>): void;
   activateTabHandler(e: CustomEvent<TabChangeEventDetail>): void;
   /**
    * Check for active tabs on register and update selected
    */
   updateTabTitles(e: CustomEvent<TabID>): void;
-  globalTabChangeHandler(e: CustomEvent<TabChangeEventDetail>): void;
+  globalInternalTabChangeHandler(e: CustomEvent<TabChangeEventDetail>): void;
   /**
    * Emitted when the active tab changes
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */
   calciteTabChange: EventEmitter<TabChangeEventDetail>;
+  /**
+   * @internal
+   */
+  calciteInternalTabChange: EventEmitter<TabChangeEventDetail>;
   selectedTab: TabID;
   selectedTabEl: HTMLCalciteTabTitleElement;
   parentTabsEl: HTMLCalciteTabsElement;

package/dist/types/components/tab-title/tab-title.d.ts

@@ -39,7 +39,7 @@ export declare class TabTitle implements InteractiveComponent {
   render(): VNode;
   componentDidLoad(): Promise<void>;
   componentDidRender(): void;
-  tabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
+  internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
   onClick(): void;
   keyDownHandler(e: KeyboardEvent): void;
   /**
@@ -47,6 +47,12 @@ export declare class TabTitle implements InteractiveComponent {
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */
   calciteTabsActivate: EventEmitter<TabChangeEventDetail>;
+  /**
+   * Fires when a specific tab is activated (`event.details`)
+   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
+   * @internal
+   */
+  calciteInternalTabsActivate: EventEmitter<TabChangeEventDetail>;
   /**
    * @internal
    */
@@ -80,6 +86,6 @@ export declare class TabTitle implements InteractiveComponent {
   parentTabsEl: HTMLCalciteTabsElement;
   updateHasText(): void;
   setupTextContentObserver(): void;
-  emitActiveTab(): void;
+  emitActiveTab(userTriggered?: boolean): void;
   guid: string;
 }

package/dist/types/preact.d.ts

@@ -309,12 +309,14 @@ declare module "preact/src/jsx" {
         "oncalciteTabRegister"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-tab-nav": Omit<JSX.CalciteTabNav, "onCalciteTabChange"> & JSXInternal.HTMLAttributes<HTMLCalciteTabNavElement> & {
+      "calcite-tab-nav": Omit<JSX.CalciteTabNav, "onCalciteTabChange" | "onCalciteInternalTabChange"> & JSXInternal.HTMLAttributes<HTMLCalciteTabNavElement> & {
         "oncalciteTabChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalTabChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-tab-title": Omit<JSX.CalciteTabTitle, "onCalciteTabsActivate" | "onCalciteTabsFocusNext" | "onCalciteTabsFocusPrevious" | "onCalciteTabTitleRegister"> & JSXInternal.HTMLAttributes<HTMLCalciteTabTitleElement> & {
+      "calcite-tab-title": Omit<JSX.CalciteTabTitle, "onCalciteTabsActivate" | "onCalciteInternalTabsActivate" | "onCalciteTabsFocusNext" | "onCalciteTabsFocusPrevious" | "onCalciteTabTitleRegister"> & JSXInternal.HTMLAttributes<HTMLCalciteTabTitleElement> & {
         "oncalciteTabsActivate"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalTabsActivate"?: (event: CustomEvent<any>) => void;
         "oncalciteTabsFocusNext"?: (event: CustomEvent<any>) => void;
         "oncalciteTabsFocusPrevious"?: (event: CustomEvent<any>) => void;
         "oncalciteTabTitleRegister"?: (event: CustomEvent<any>) => void;

package/dist/types/utils/locale.d.ts

@@ -2,4 +2,5 @@ export declare const locales: string[];
 export declare function delocalizeNumberString(numberString: string, locale: string): string;
 export declare function getGroupSeparator(locale: string): string;
 export declare function getDecimalSeparator(locale: string): string;
+export declare function getMinusSign(locale: string): string;
 export declare function localizeNumberString(numberString: string, locale: string, displayGroupSeparator?: boolean): string;

package/hydrate/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.436
+ * v1.0.0-next.439
  */
 'use strict';
 
@@ -11705,7 +11705,6 @@ models.forEach(fromModel => {
 });
 var colorConvert = convert;
 
-const _slice = [].slice;
 const skippedModels = [// To be honest, I don't really feel like keyword belongs in color convert, but eh.
 'keyword', // Gray conflicts with some method names, and has its own method defined.
 'gray', // Shouldn't really be in color-convert either...
@@ -11713,7 +11712,7 @@ const skippedModels = [// To be honest, I don't really feel like keyword belongs
 const hashedModelKeys = {};
 
 for (const model of Object.keys(colorConvert)) {
-  hashedModelKeys[_slice.call(colorConvert[model].labels).sort().join('')] = model;
+  hashedModelKeys[[...colorConvert[model].labels].sort().join('')] = model;
 }
 
 const limiters = {};
@@ -11741,7 +11740,7 @@ function Color(object, model) {
     this.valpha = 1;
   } else if (object instanceof Color) {
     this.model = object.model;
-    this.color = object.color.slice();
+    this.color = [...object.color];
     this.valpha = object.valpha;
   } else if (typeof object === 'string') {
     const result = colorString.get(object);
@@ -11757,9 +11756,7 @@ function Color(object, model) {
   } else if (object.length > 0) {
     this.model = model || 'rgb';
     channels = colorConvert[this.model].channels;
-
-    const newArray = _slice.call(object, 0, channels);
-
+    const newArray = Array.prototype.slice.call(object, 0, channels);
     this.color = zeroArray(newArray, channels);
     this.valpha = typeof object[channels] === 'number' ? object[channels] : 1;
   } else if (typeof object === 'number') {
@@ -11783,7 +11780,9 @@ function Color(object, model) {
     }
 
     this.model = hashedModelKeys[hashedKeys];
-    const labels = colorConvert[this.model].labels;
+    const {
+      labels
+    } = colorConvert[this.model];
     const color = [];
 
     for (i = 0; i < labels.length; i++) {
@@ -11825,24 +11824,28 @@ Color.prototype = {
   string(places) {
     let self = this.model in colorString.to ? this : this.rgb();
     self = self.round(typeof places === 'number' ? places : 1);
-    const args = self.valpha === 1 ? self.color : self.color.concat(this.valpha);
+    const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
     return colorString.to[self.model](args);
   },
 
   percentString(places) {
     const self = this.rgb().round(typeof places === 'number' ? places : 1);
-    const args = self.valpha === 1 ? self.color : self.color.concat(this.valpha);
+    const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
     return colorString.to.rgb.percent(args);
   },
 
   array() {
-    return this.valpha === 1 ? this.color.slice() : this.color.concat(this.valpha);
+    return this.valpha === 1 ? [...this.color] : [...this.color, this.valpha];
   },
 
   object() {
     const result = {};
-    const channels = colorConvert[this.model].channels;
-    const labels = colorConvert[this.model].labels;
+    const {
+      channels
+    } = colorConvert[this.model];
+    const {
+      labels
+    } = colorConvert[this.model];
 
     for (let i = 0; i < channels; i++) {
       result[labels[i]] = this.color[i];
@@ -11883,12 +11886,12 @@ Color.prototype = {
 
   round(places) {
     places = Math.max(places || 0, 0);
-    return new Color(this.color.map(roundToPlace(places)).concat(this.valpha), this.model);
+    return new Color([...this.color.map(roundToPlace(places)), this.valpha], this.model);
   },
 
   alpha(value) {
-    if (arguments.length > 0) {
-      return new Color(this.color.concat(Math.max(0, Math.min(1, value))), this.model);
+    if (value !== undefined) {
+      return new Color([...this.color, Math.max(0, Math.min(1, value))], this.model);
     }
 
     return this.valpha;
@@ -11911,15 +11914,15 @@ Color.prototype = {
   magenta: getset('cmyk', 1, maxfn(100)),
   yellow: getset('cmyk', 2, maxfn(100)),
   black: getset('cmyk', 3, maxfn(100)),
-  x: getset('xyz', 0, maxfn(100)),
+  x: getset('xyz', 0, maxfn(95.047)),
   y: getset('xyz', 1, maxfn(100)),
-  z: getset('xyz', 2, maxfn(100)),
+  z: getset('xyz', 2, maxfn(108.833)),
   l: getset('lab', 0, maxfn(100)),
   a: getset('lab', 1),
   b: getset('lab', 2),
 
   keyword(value) {
-    if (arguments.length > 0) {
+    if (value !== undefined) {
       return new Color(value);
     }
 
@@ -11927,7 +11930,7 @@ Color.prototype = {
   },
 
   hex(value) {
-    if (arguments.length > 0) {
+    if (value !== undefined) {
       return new Color(value);
     }
 
@@ -11935,7 +11938,7 @@ Color.prototype = {
   },
 
   hexa(value) {
-    if (arguments.length > 0) {
+    if (value !== undefined) {
       return new Color(value);
     }
 
@@ -11961,7 +11964,7 @@ Color.prototype = {
 
     for (const [i, element] of rgb.entries()) {
       const chan = element / 255;
-      lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
+      lum[i] = chan <= 0.04045 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
     }
 
     return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
@@ -11980,9 +11983,10 @@ Color.prototype = {
   },
 
   level(color2) {
+    // https://www.w3.org/TR/WCAG/#contrast-enhanced
     const contrastRatio = this.contrast(color2);
 
-    if (contrastRatio >= 7.1) {
+    if (contrastRatio >= 7) {
       return 'AAA';
     }
 
@@ -11992,7 +11996,7 @@ Color.prototype = {
   isDark() {
     // YIQ equation from http://24ways.org/2010/calculating-color-contrast
     const rgb = this.rgb().color;
-    const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+    const yiq = (rgb[0] * 2126 + rgb[1] * 7152 + rgb[2] * 722) / 10000;
     return yiq < 128;
   },
 
@@ -12094,25 +12098,28 @@ for (const model of Object.keys(colorConvert)) {
     continue;
   }
 
-  const channels = colorConvert[model].channels; // Conversion methods
+  const {
+    channels
+  } = colorConvert[model]; // Conversion methods
 
-  Color.prototype[model] = function () {
+  Color.prototype[model] = function (...args) {
     if (this.model === model) {
       return new Color(this);
     }
 
-    if (arguments.length > 0) {
-      return new Color(arguments, model);
+    if (args.length > 0) {
+      return new Color(args, model);
     }
 
-    const newAlpha = typeof arguments[channels] === 'number' ? channels : this.valpha;
-    return new Color(assertArray(colorConvert[this.model][model].raw(this.color)).concat(newAlpha), model);
+    return new Color([...assertArray(colorConvert[this.model][model].raw(this.color)), this.valpha], model);
   }; // 'static' construction methods
 
 
-  Color[model] = function (color) {
+  Color[model] = function (...args) {
+    let color = args[0];
+
     if (typeof color === 'number') {
-      color = zeroArray(_slice.call(arguments), channels);
+      color = zeroArray(args, channels);
     }
 
     return new Color(color, model);
@@ -12140,7 +12147,7 @@ function getset(model, channel, modifier) {
   return function (value) {
     let result;
 
-    if (arguments.length > 0) {
+    if (value !== undefined) {
       if (modifier) {
         value = modifier(value);
       }
@@ -12693,9 +12700,12 @@ class ColorPicker {
       const channelAriaLabels = isRgb
         ? [intlRed, intlGreen, intlBlue]
         : [intlHue, intlSaturation, intlValue];
-      return (hAsync("calcite-tab", { active: active, class: CSS$G.control, key: channelMode }, hAsync("div", { class: CSS$G.channels }, channels.map((channel, index) => this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index])))));
+      const direction = getElementDir(this.el);
+      return (hAsync("calcite-tab", { active: active, class: CSS$G.control, key: channelMode }, hAsync("div", { class: CSS$G.channels, dir: "ltr" }, channels.map((channel, index) => 
+      /* the channel container is ltr, so we apply the host's direction */
+      this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
     };
-    this.renderChannel = (value, index, label, ariaLabel) => (hAsync("calcite-input", { class: CSS$G.channel, "data-channel-index": index, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
+    this.renderChannel = (value, index, label, ariaLabel, direction) => (hAsync("calcite-input", { class: CSS$G.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
     this.deleteColor = () => {
       const colorToDelete = this.color.hex();
       const inStorage = this.savedColors.indexOf(colorToDelete) > -1;
@@ -16312,7 +16322,7 @@ function parseNumberString(numberString) {
       return numberKeys.includes(value);
     })
       .reduce((string, part) => string + part);
-    return isValidNumber(result) ? Number(result).toString() : null;
+    return isValidNumber(result) ? Number(result).toString() : "";
   });
 }
 function sanitizeDecimalString(decimalString) {
@@ -16367,6 +16377,7 @@ function delocalizeNumberString(numberString, locale) {
     if (nonExpoNumString) {
       const groupSeparator = getGroupSeparator(locale);
       const decimalSeparator = getDecimalSeparator(locale);
+      const minusSign = getMinusSign(locale);
       const splitNumberString = nonExpoNumString.split("");
       const decimalIndex = splitNumberString.lastIndexOf(decimalSeparator);
       const delocalizedNumberString = splitNumberString
@@ -16377,7 +16388,8 @@ function delocalizeNumberString(numberString, locale) {
         return value;
       })
         .reduce((string, part) => string + part)
-        .replace(decimalSeparator, ".");
+        .replace(decimalSeparator, ".")
+        .replace(minusSign, "-");
       return isNaN(Number(delocalizedNumberString)) ? nonExpoNumString : delocalizedNumberString;
     }
     return nonExpoNumString;
@@ -16395,6 +16407,12 @@ function getDecimalSeparator(locale) {
   const value = parts.find((part) => part.type === "decimal").value;
   return value.trim().length === 0 ? " " : value;
 }
+function getMinusSign(locale) {
+  const formatter = createLocaleNumberFormatter(locale);
+  const parts = formatter.formatToParts(-1234567.8);
+  const value = parts.find((part) => part.type === "minusSign").value;
+  return value.trim().length === 0 ? "-" : value;
+}
 function localizeNumberString(numberString, locale, displayGroupSeparator = false) {
   return sanitizeExponentialNumberString(numberString, (nonExpoNumString) => {
     if (nonExpoNumString) {
@@ -19427,7 +19445,7 @@ class Input {
       else {
         this.setValue({
           nativeEvent,
-          value: delocalizeNumberString(value, this.locale)
+          value: delocalizedValue
         });
       }
     };
@@ -29883,7 +29901,7 @@ class Tab {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  tabChangeHandler(event) {
+  internalTabChangeHandler(event) {
     const targetTabsEl = event
       .composedPath()
       .find((el) => el.tagName === "CALCITE-TABS");
@@ -29937,7 +29955,7 @@ class Tab {
       "getTabIndex": [64],
       "updateAriaInfo": [64]
     },
-    "$listeners$": [[16, "calciteTabChange", "tabChangeHandler"]],
+    "$listeners$": [[16, "calciteInternalTabChange", "internalTabChangeHandler"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["tab", "tab"], ["active", "active"], ["scale", "scale"]]
   }; }
@@ -29952,6 +29970,7 @@ class TabNav {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteTabChange = createEvent(this, "calciteTabChange", 7);
+    this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 7);
     /** @internal Parent tabs component scale value */
     this.scale = "m";
     /** @internal Parent tabs component layout value */
@@ -29980,7 +29999,7 @@ class TabNav {
       this.selectedTab !== null) {
       localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTab));
     }
-    this.calciteTabChange.emit({
+    this.calciteInternalTabChange.emit({
       tab: this.selectedTab
     });
     this.selectedTabEl = await this.getTabTitleById(this.selectedTab);
@@ -30010,9 +30029,6 @@ class TabNav {
     if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
       const storedTab = JSON.parse(localStorage.getItem(storageKey));
       this.selectedTab = storedTab;
-      this.calciteTabChange.emit({
-        tab: this.selectedTab
-      });
     }
   }
   componentWillRender() {
@@ -30032,7 +30048,7 @@ class TabNav {
       this.tabTitles.every((title) => !title.active) &&
       !this.selectedTab) {
       this.tabTitles[0].getTabIdentifier().then((tab) => {
-        this.calciteTabChange.emit({
+        this.calciteInternalTabChange.emit({
           tab
         });
       });
@@ -30065,13 +30081,20 @@ class TabNav {
     e.stopPropagation();
     e.preventDefault();
   }
-  activateTabHandler(e) {
+  internalActivateTabHandler(e) {
     this.selectedTab = e.detail.tab
       ? e.detail.tab
       : this.getIndexOfTabTitle(e.target);
     e.stopPropagation();
     e.preventDefault();
   }
+  activateTabHandler(e) {
+    this.calciteTabChange.emit({
+      tab: this.selectedTab
+    });
+    e.stopPropagation();
+    e.preventDefault();
+  }
   /**
    * Check for active tabs on register and update selected
    */
@@ -30080,12 +30103,13 @@ class TabNav {
       this.selectedTab = e.detail;
     }
   }
-  globalTabChangeHandler(e) {
+  globalInternalTabChangeHandler(e) {
     if (this.syncId &&
       e.target !== this.el &&
       e.target.syncId === this.syncId &&
       this.selectedTab !== e.detail.tab) {
       this.selectedTab = e.detail.tab;
+      e.stopPropagation();
     }
   }
   updateOffsetPosition() {
@@ -30139,7 +30163,7 @@ class TabNav {
       "selectedTab": [32],
       "selectedTabEl": [32]
     },
-    "$listeners$": [[0, "calciteTabsFocusPrevious", "focusPreviousTabHandler"], [0, "calciteTabsFocusNext", "focusNextTabHandler"], [0, "calciteTabsActivate", "activateTabHandler"], [0, "calciteTabTitleRegister", "updateTabTitles"], [16, "calciteTabChange", "globalTabChangeHandler"]],
+    "$listeners$": [[0, "calciteTabsFocusPrevious", "focusPreviousTabHandler"], [0, "calciteTabsFocusNext", "focusNextTabHandler"], [0, "calciteInternalTabsActivate", "internalActivateTabHandler"], [0, "calciteTabsActivate", "activateTabHandler"], [0, "calciteTabTitleRegister", "updateTabTitles"], [16, "calciteInternalTabChange", "globalInternalTabChangeHandler"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["scale", "scale"], ["layout", "layout"], ["position", "position"], ["bordered", "bordered"]]
   }; }
@@ -30154,6 +30178,7 @@ class TabTitle {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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);
@@ -30181,7 +30206,7 @@ class TabTitle {
   }
   activeTabChanged() {
     if (this.active) {
-      this.emitActiveTab();
+      this.emitActiveTab(false);
     }
   }
   //--------------------------------------------------------------------------
@@ -30204,7 +30229,7 @@ class TabTitle {
   }
   componentWillLoad() {
     if (this.tab && this.active) {
-      this.emitActiveTab();
+      this.emitActiveTab(false);
     }
   }
   componentWillRender() {
@@ -30241,7 +30266,7 @@ class TabTitle {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  tabChangeHandler(event) {
+  internalTabChangeHandler(event) {
     const targetTabsEl = event
       .composedPath()
       .find((el) => el.tagName === "CALCITE-TABS");
@@ -30256,6 +30281,7 @@ class TabTitle {
         this.active = index === event.detail.tab;
       });
     }
+    event.stopPropagation();
   }
   onClick() {
     this.emitActiveTab();
@@ -30315,11 +30341,14 @@ class TabTitle {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
-  emitActiveTab() {
-    if (!this.disabled) {
-      this.calciteTabsActivate.emit({
-        tab: this.tab
-      });
+  emitActiveTab(userTriggered = true) {
+    if (this.disabled) {
+      return;
+    }
+    const payload = { tab: this.tab };
+    this.calciteInternalTabsActivate.emit(payload);
+    if (userTriggered) {
+      this.calciteTabsActivate.emit(payload);
     }
   }
   get el() { return getElement(this); }
@@ -30347,7 +30376,7 @@ class TabTitle {
       "getTabIdentifier": [64],
       "updateAriaInfo": [64]
     },
-    "$listeners$": [[16, "calciteTabChange", "tabChangeHandler"], [0, "click", "onClick"], [0, "keydown", "keyDownHandler"]],
+    "$listeners$": [[16, "calciteInternalTabChange", "internalTabChangeHandler"], [0, "click", "onClick"], [0, "keydown", "keyDownHandler"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["active", "active"], ["disabled", "disabled"], ["iconEnd", "icon-end"], ["iconFlipRtl", "icon-flip-rtl"], ["iconStart", "icon-start"], ["layout", "layout"], ["position", "position"], ["scale", "scale"], ["bordered", "bordered"], ["tab", "tab"]]
   }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.436",
+  "version": "1.0.0-next.439",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -59,10 +59,10 @@
   },
   "dependencies": {
     "@a11y/focus-trap": "1.0.5",
-    "@popperjs/core": "2.11.4",
+    "@popperjs/core": "2.11.5",
     "@stencil/core": "2.15.0",
     "@types/color": "3.0.3",
-    "color": "4.2.1",
+    "color": "4.2.3",
     "form-request-submit-polyfill": "2.0.0",
     "lodash-es": "4.17.21",
     "sortablejs": "1.15.0"
@@ -128,7 +128,7 @@
     "puppeteer": "10.0.0",
     "rimraf": "3.0.2",
     "screener-storybook": "0.23.0",
-    "semver": "7.3.5",
+    "semver": "7.3.6",
     "shell-quote": "1.7.3",
     "standard-version": "9.3.2",
     "stencil-eslint-core": "0.3.1",