@esri/calcite-components 1.0.0-next.435 → 1.0.0-next.438

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.435
+ * v1.0.0-next.438
  */
 (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/color-picker-hex-input/color-picker-hex-input.d.ts

@@ -45,6 +45,7 @@ export declare class ColorPickerHexInput {
   render(): VNode;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  private internalSetValue;
   private storeInputRef;
   private formatForInternalInput;
   private nudgeRGBChannels;

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/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.435
+ * v1.0.0-next.438
  */
 '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;
@@ -12750,14 +12760,10 @@ class ColorPicker {
     this.drawColorFieldAndSlider();
     this.updateChannelsFromColor(color);
     this.previousColor = oldColor;
-    if (this.internalColorUpdateContext) {
-      return;
-    }
-    this.value = this.toValue(color);
   }
   handleFormatChange(format) {
     this.setMode(format);
-    this.value = this.toValue(this.color);
+    this.internalColorSet(this.color, false);
   }
   handleScaleChange(scale = "m") {
     this.updateDimensions(scale);
@@ -12777,10 +12783,10 @@ class ColorPicker {
       this.setMode(nextMode);
     }
     const dragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
-    if (this.internalColorUpdateContext) {
-      if (this.internalColorUpdateContext === "initial") {
-        return;
-      }
+    if (this.internalColorUpdateContext === "initial") {
+      return;
+    }
+    if (this.internalColorUpdateContext === "internal") {
       this.calciteColorPickerInput.emit();
       if (!dragging) {
         this.calciteColorPickerChange.emit();
@@ -12790,11 +12796,7 @@ class ColorPicker {
     const color$1 = allowEmpty && !value ? null : color(value);
     const colorChanged = !colorEqual(color$1, this.color);
     if (modeChanged || colorChanged) {
-      this.color = color$1;
-      this.calciteColorPickerInput.emit();
-      if (!dragging) {
-        this.calciteColorPickerChange.emit();
-      }
+      this.internalColorSet(color$1);
     }
   }
   //--------------------------------------------------------------------------
@@ -13179,32 +13181,13 @@ class ColorPickerHexInput {
           : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
     };
     this.onInputChange = () => {
-      const inputValue = this.inputNode.value;
-      let value;
-      if (inputValue) {
-        const hex = inputValue;
-        const color = hexToRGB(`#${hex}`);
-        if (!color) {
-          return;
-        }
-        value = normalizeHex(hex);
-      }
-      else if (this.allowEmpty) {
-        value = null;
-      }
-      this.value = value;
-      this.calciteColorPickerHexInputChange.emit();
+      this.internalSetValue(this.inputNode.value, this.value);
     };
     /**
      * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
      */
     this.internalColor = DEFAULT_COLOR;
     this.previousNonNullValue = this.value;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.storeInputRef = (node) => {
       this.inputNode = node;
     };
@@ -13219,38 +13202,16 @@ class ColorPickerHexInput {
     if (value) {
       const normalized = normalizeHex(value);
       if (isValidHex(normalized)) {
-        this.internalColor = color(normalized);
-        this.value = normalized;
+        this.internalSetValue(normalized, normalized, false);
       }
       return;
     }
     if (allowEmpty) {
-      this.internalColor = null;
-      this.value = null;
+      this.internalSetValue(null, null, false);
     }
   }
   handleValueChange(value, oldValue) {
-    if (value) {
-      const normalized = normalizeHex(value);
-      if (isValidHex(normalized)) {
-        const { internalColor } = this;
-        const changed = !internalColor || normalized !== normalizeHex(internalColor.hex());
-        this.internalColor = color(normalized);
-        this.previousNonNullValue = normalized;
-        this.value = normalized;
-        if (changed) {
-          this.calciteColorPickerHexInputChange.emit();
-        }
-        return;
-      }
-    }
-    else if (this.allowEmpty) {
-      this.internalColor = null;
-      this.value = null;
-      this.calciteColorPickerHexInputChange.emit();
-      return;
-    }
-    this.value = oldValue;
+    this.internalSetValue(value, oldValue, false);
   }
   // using @Listen as a workaround for VDOM listener not firing
   onInputKeyDown(event) {
@@ -13262,15 +13223,16 @@ class ColorPickerHexInput {
       return;
     }
     const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
+    const oldValue = this.value;
     if (isNudgeKey) {
       if (!value) {
-        this.value = this.previousNonNullValue;
+        this.internalSetValue(this.previousNonNullValue, oldValue);
         event.preventDefault();
         return;
       }
       const direction = key === "ArrowUp" ? 1 : -1;
       const bump = shiftKey ? 10 : 1;
-      this.value = normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex());
+      this.internalSetValue(normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex()), oldValue);
       event.preventDefault();
       return;
     }
@@ -13300,6 +13262,36 @@ class ColorPickerHexInput {
   async setFocus() {
     focusElement(this.inputNode);
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  internalSetValue(value, oldValue, emit = true) {
+    if (value) {
+      const normalized = normalizeHex(value);
+      if (isValidHex(normalized)) {
+        const { internalColor } = this;
+        const changed = !internalColor || normalized !== normalizeHex(internalColor.hex());
+        this.internalColor = color(normalized);
+        this.previousNonNullValue = normalized;
+        this.value = normalized;
+        if (changed && emit) {
+          this.calciteColorPickerHexInputChange.emit();
+        }
+        return;
+      }
+    }
+    else if (this.allowEmpty) {
+      this.internalColor = null;
+      this.value = null;
+      if (emit) {
+        this.calciteColorPickerHexInputChange.emit();
+      }
+      return;
+    }
+    this.value = oldValue;
+  }
   formatForInternalInput(hex) {
     return hex ? hex.replace("#", "") : "";
   }
@@ -29901,7 +29893,7 @@ class Tab {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  tabChangeHandler(event) {
+  internalTabChangeHandler(event) {
     const targetTabsEl = event
       .composedPath()
       .find((el) => el.tagName === "CALCITE-TABS");
@@ -29955,7 +29947,7 @@ class Tab {
       "getTabIndex": [64],
       "updateAriaInfo": [64]
     },
-    "$listeners$": [[16, "calciteTabChange", "tabChangeHandler"]],
+    "$listeners$": [[16, "calciteInternalTabChange", "internalTabChangeHandler"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["tab", "tab"], ["active", "active"], ["scale", "scale"]]
   }; }
@@ -29970,6 +29962,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 */
@@ -29998,7 +29991,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);
@@ -30028,9 +30021,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() {
@@ -30050,7 +30040,7 @@ class TabNav {
       this.tabTitles.every((title) => !title.active) &&
       !this.selectedTab) {
       this.tabTitles[0].getTabIdentifier().then((tab) => {
-        this.calciteTabChange.emit({
+        this.calciteInternalTabChange.emit({
           tab
         });
       });
@@ -30083,13 +30073,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
    */
@@ -30098,12 +30095,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() {
@@ -30157,7 +30155,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"]]
   }; }
@@ -30172,6 +30170,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);
@@ -30199,7 +30198,7 @@ class TabTitle {
   }
   activeTabChanged() {
     if (this.active) {
-      this.emitActiveTab();
+      this.emitActiveTab(false);
     }
   }
   //--------------------------------------------------------------------------
@@ -30222,7 +30221,7 @@ class TabTitle {
   }
   componentWillLoad() {
     if (this.tab && this.active) {
-      this.emitActiveTab();
+      this.emitActiveTab(false);
     }
   }
   componentWillRender() {
@@ -30259,7 +30258,7 @@ class TabTitle {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  tabChangeHandler(event) {
+  internalTabChangeHandler(event) {
     const targetTabsEl = event
       .composedPath()
       .find((el) => el.tagName === "CALCITE-TABS");
@@ -30274,6 +30273,7 @@ class TabTitle {
         this.active = index === event.detail.tab;
       });
     }
+    event.stopPropagation();
   }
   onClick() {
     this.emitActiveTab();
@@ -30333,11 +30333,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); }
@@ -30365,7 +30368,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"]]
   }; }