@esri/calcite-components 2.11.0-next.21 → 2.11.0-next.22

package/dist/collection/components/stepper-item/stepper-item.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:33 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:14 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/stepper-item/stepper-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.22
  */
 import { h, Host, } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, InteractiveContainer, updateHostInteraction, } from "../../utils/interactive";

package/dist/collection/components/switch/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.22
  */
 export const CSS = {
     container: "container",

package/dist/collection/components/switch/switch.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:33 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:14 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/switch/switch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.22
  */
 import { h, Host, } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/tab/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.22
  */
 export const CSS = {
     container: "container",

package/dist/collection/components/tab/tab.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:33 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:14 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/tab/tab.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.22
  */
 import { h, Host } from "@stencil/core";
 import { nodeListToArray } from "../../utils/dom";

package/dist/collection/components/tab-nav/resources.js

@@ -1,14 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.22
  */
 export const ICON = {
     chevronRight: "chevron-right",
     chevronLeft: "chevron-left",
 };
 export const CSS = {
-    activeIndicatorContainer: "tab-nav-active-indicator-container",
     container: "tab-nav",
     containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
     containerHasStartTabTitleOverflow: "tab-nav--start-overflow",

package/dist/collection/components/tab-nav/resources.js.map

@@ -1 +1 @@
-{"version":3,"file":"resources.js","sourceRoot":"","sources":["../../../../src/components/tab-nav/resources.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,eAAe;IAC7B,WAAW,EAAE,cAAc;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,wBAAwB,EAAE,oCAAoC;IAC9D,SAAS,EAAE,SAAS;IACpB,+BAA+B,EAAE,uBAAuB;IACxD,iCAAiC,EAAE,yBAAyB;IAC5D,YAAY,EAAE,eAAe;IAC7B,qBAAqB,EAAE,yBAAyB;IAChD,6BAA6B,EAAE,mCAAmC;IAClE,4BAA4B,EAAE,kCAAkC;IAChE,mBAAmB,EAAE,yBAAyB;CAC/C,CAAC","sourcesContent":["export const ICON = {\n  chevronRight: \"chevron-right\",\n  chevronLeft: \"chevron-left\",\n} as const;\n\nexport const CSS = {\n  activeIndicatorContainer: \"tab-nav-active-indicator-container\",\n  container: \"tab-nav\",\n  containerHasEndTabTitleOverflow: \"tab-nav--end-overflow\",\n  containerHasStartTabTitleOverflow: \"tab-nav--start-overflow\",\n  scrollButton: \"scroll-button\",\n  scrollButtonContainer: \"scroll-button-container\",\n  scrollBackwardContainerButton: \"scroll-button-container--backward\",\n  scrollForwardContainerButton: \"scroll-button-container--forward\",\n  tabTitleSlotWrapper: \"tab-titles-slot-wrapper\",\n};\n"]}
+{"version":3,"file":"resources.js","sourceRoot":"","sources":["../../../../src/components/tab-nav/resources.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,eAAe;IAC7B,WAAW,EAAE,cAAc;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,SAAS;IACpB,+BAA+B,EAAE,uBAAuB;IACxD,iCAAiC,EAAE,yBAAyB;IAC5D,YAAY,EAAE,eAAe;IAC7B,qBAAqB,EAAE,yBAAyB;IAChD,6BAA6B,EAAE,mCAAmC;IAClE,4BAA4B,EAAE,kCAAkC;IAChE,mBAAmB,EAAE,yBAAyB;CAC/C,CAAC","sourcesContent":["export const ICON = {\n  chevronRight: \"chevron-right\",\n  chevronLeft: \"chevron-left\",\n} as const;\n\nexport const CSS = {\n  container: \"tab-nav\",\n  containerHasEndTabTitleOverflow: \"tab-nav--end-overflow\",\n  containerHasStartTabTitleOverflow: \"tab-nav--start-overflow\",\n  scrollButton: \"scroll-button\",\n  scrollButtonContainer: \"scroll-button-container\",\n  scrollBackwardContainerButton: \"scroll-button-container--backward\",\n  scrollForwardContainerButton: \"scroll-button-container--forward\",\n  tabTitleSlotWrapper: \"tab-titles-slot-wrapper\",\n};\n"]}

package/dist/collection/components/tab-nav/tab-nav.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:35 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jul 2024 23:11:33 GMT
+ * Generated on Thu, 25 Jul 2024 16:55:14 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */
@@ -50,17 +50,14 @@
   --calcite-internal-tab-nav-gradient-end-side: left;
 }
 
-.tab-nav--start-overflow .tab-nav-active-indicator-container,
 .tab-nav--start-overflow .tab-titles-slot-wrapper {
   mask-image: linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);
 }
 
-.tab-nav--end-overflow .tab-nav-active-indicator-container,
 .tab-nav--end-overflow .tab-titles-slot-wrapper {
   mask-image: linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);
 }
 
-.tab-nav--start-overflow.tab-nav--end-overflow .tab-nav-active-indicator-container,
 .tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper {
   mask-image: linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%);
 }
@@ -108,27 +105,6 @@
   white-space: nowrap;
 }
 
-.tab-nav-active-indicator-container {
-  position: absolute;
-  inset-inline: 0px;
-  inset-block-end: 0px;
-  block-size: 0.125rem;
-  inline-size: 100%;
-  overflow: hidden;
-}
-
-.tab-nav-active-indicator {
-  position: absolute;
-  inset-block-end: 0px;
-  display: block;
-  block-size: 0.125rem;
-  background-color: var(--calcite-color-brand);
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
 .scroll-button-container {
   position: absolute;
   inset-block: 0px;
@@ -170,30 +146,6 @@
   inset-inline-start: 0;
 }
 
-:host .position-bottom .tab-nav-active-indicator {
-  inset-block-end: unset;
-  inset-block-start: 0px;
-}
-
-:host .position-bottom .tab-nav-active-indicator-container {
-  inset-block-end: unset;
-  inset-block-start: 0px;
-}
-
-:host([bordered]) .tab-nav-active-indicator-container {
-  inset-block-end: unset;
-}
-
-:host([bordered]) .position-bottom .tab-nav-active-indicator-container {
-  inset-block-end: 0;
-  inset-block-start: unset;
-}
-
-@media (forced-colors: active) {
-  .tab-nav-active-indicator {
-    background-color: highlight;
-  }
-}
 :host([hidden]) {
   display: none;
 }

package/dist/collection/components/tab-nav/tab-nav.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.22
  */
 import { h, Host, readTask, } from "@stencil/core";
 import { calciteSize24, calciteSize32, calciteSize44, } from "@esri/calcite-design-tokens/dist/es6/core";
@@ -20,11 +20,12 @@ export class TabNav {
         this.lastScrollWheelAxis = "x";
         this.resizeObserver = createObserver("resize", () => {
             this.updateScrollingState();
-            if (!this.activeIndicatorEl) {
-                return;
-            }
-            this.updateActiveIndicator();
         });
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
         this.onTabTitleWheel = (event) => {
             event.preventDefault();
             const { deltaX, deltaY } = event;
@@ -44,7 +45,6 @@ export class TabNav {
             }
             const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
             event.currentTarget.scrollBy(scrollByX, 0);
-            requestAnimationFrame(() => this.updateActiveIndicator());
         };
         this.onSlotChange = (event) => {
             this.intersectionObserver?.disconnect();
@@ -54,7 +54,6 @@ export class TabNav {
             });
             this.calciteInternalTabNavSlotChange.emit(slottedElements);
         };
-        this.storeContainerRef = (el) => (this.containerEl = el);
         this.storeTabTitleWrapperRef = (el) => {
             this.tabTitleContainerEl = el;
             this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
@@ -124,7 +123,6 @@ export class TabNav {
             event.stopPropagation();
         };
         this.onTabTitleScroll = () => {
-            this.updateActiveIndicator();
             this.updateScrollingState();
         };
         this.renderScrollButton = (overflowDirection) => {
@@ -145,8 +143,6 @@ export class TabNav {
         this.layout = "inline";
         this.position = "bottom";
         this.bordered = false;
-        this.indicatorOffset = undefined;
-        this.indicatorWidth = undefined;
         this.messages = undefined;
         this.messageOverrides = undefined;
         this.defaultMessages = undefined;
@@ -159,7 +155,6 @@ export class TabNav {
         this.calciteInternalTabChange.emit({
             tab: this.selectedTabId,
         });
-        this.updateActiveIndicator();
     }
     onMessagesChange() {
         /* wired up by t9n util */
@@ -191,9 +186,6 @@ export class TabNav {
         this.layout = parentTabsEl?.layout;
         this.bordered = parentTabsEl?.bordered;
         this.effectiveDir = getElementDir(this.el);
-        if (this.selectedTitle) {
-            this.updateActiveIndicator();
-        }
     }
     componentDidRender() {
         // if every tab title is active select the first tab.
@@ -218,21 +210,16 @@ export class TabNav {
     //
     //--------------------------------------------------------------------------
     render() {
-        const width = `${this.indicatorWidth}px`;
-        const offset = `${this.indicatorOffset}px`;
-        const indicatorStyle = this.effectiveDir !== "rtl" ? { width, left: offset } : { width, right: offset };
-        return (h(Host, { key: '03a7e31efc324cf2f7f627828b634282158a1d4f', role: "tablist" }, h("div", { key: 'b718384a646328943a023329c3eec6425a3c4935', class: {
+        return (h(Host, { key: '1e35ab32be6d2a978d46f3f6d74f40ca103236d6', role: "tablist" }, h("div", { key: 'e69c99975a0e592601b71774c2b8370dc9a27a63', class: {
                 [CSS.container]: true,
                 [CSS.containerHasStartTabTitleOverflow]: !!this.hasOverflowingStartTabTitle,
                 [CSS.containerHasEndTabTitleOverflow]: !!this.hasOverflowingEndTabTitle,
                 [`scale-${this.scale}`]: true,
                 [`position-${this.position}`]: true,
                 [CSS_UTILITY.rtl]: this.effectiveDir === "rtl",
-            }, ref: this.storeContainerRef }, this.renderScrollButton("start"), h("div", { key: '50d3c33b30379f2b2d08374bfa0addfc0ce5954f', class: {
+            } }, this.renderScrollButton("start"), h("div", { key: '5123b631919613f7cb4cdcf80eb2a2c17de7b8b9', class: {
                 [CSS.tabTitleSlotWrapper]: true,
-            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel, ref: this.storeTabTitleWrapperRef }, h("slot", { key: '94f8b54ec53391f0f58f572f637153594df35a57', onSlotchange: this.onSlotChange })), h("div", { key: '773ebbcc7b2bbab16e068d00667b2c7d8de19571', class: {
-                [CSS.activeIndicatorContainer]: true,
-            }, ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { key: '167234b76ea91436674ee1443652214f6843e023', class: "tab-nav-active-indicator", ref: (el) => (this.activeIndicatorEl = el), style: indicatorStyle })), this.renderScrollButton("end"))));
+            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel, ref: this.storeTabTitleWrapperRef }, h("slot", { key: 'a18d8dd6c2163b1e3c777b396395c6dc2143aca5', onSlotchange: this.onSlotChange })), this.renderScrollButton("end"))));
     }
     //--------------------------------------------------------------------------
     //
@@ -319,9 +306,6 @@ export class TabNav {
         }
         event.stopPropagation();
     }
-    iconStartChangeHandler() {
-        this.updateActiveIndicator();
-    }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);
     }
@@ -340,23 +324,6 @@ export class TabNav {
         const { scale } = this;
         return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    updateActiveIndicator() {
-        const tabTitleScrollLeft = this.tabTitleContainerEl?.scrollLeft;
-        const containerScrollLeft = this.containerEl?.scrollLeft;
-        const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
-        const tabLeft = this.selectedTitle?.offsetLeft;
-        const tabWidth = this.selectedTitle?.offsetWidth;
-        const offsetRight = navWidth - tabLeft - tabWidth;
-        const offsetBase = this.effectiveDir === "ltr" ? tabLeft : offsetRight;
-        const multiplier = this.effectiveDir === "ltr" ? -1 : 1;
-        this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
-        this.indicatorWidth = this.selectedTitle?.offsetWidth;
-    }
     updateScrollingState() {
         const tabTitleContainer = this.tabTitleContainerEl;
         if (!tabTitleContainer) {
@@ -415,7 +382,6 @@ export class TabNav {
             }
         }
         requestAnimationFrame(() => {
-            this.updateActiveIndicator();
             tabTitles[this.selectedTabId].focus();
         });
     }
@@ -594,46 +560,6 @@ export class TabNav {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "indicatorOffset": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "indicator-offset",
-                "reflect": false
-            },
-            "indicatorWidth": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "indicator-width",
-                "reflect": false
-            },
             "messages": {
                 "type": "unknown",
                 "mutable": true,
@@ -831,12 +757,6 @@ export class TabNav {
                 "target": "body",
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "calciteInternalTabIconChanged",
-                "method": "iconStartChangeHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }