@esri/solutions-components 0.10.3 → 0.10.5

package/dist/components/tabs.js

@@ -4,12 +4,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { c as createObserver } from './observers.js';
+import { h as slotChangeGetAssignedElements, C as getSlotAssignedElements } from './dom.js';
 
 /*!
  * 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.10.1
+ * v2.11.1
  */
 const SLOTS = {
     titleGroup: "title-group",
@@ -23,16 +23,10 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.mutationObserver = createObserver("mutation", (mutationsList) => {
-            for (const mutation of mutationsList) {
-                const target = mutation.target;
-                if (target.nodeName === "CALCITE-TAB-NAV" ||
-                    target.nodeName === "CALCITE-TAB-TITLE" ||
-                    target.nodeName === "CALCITE-TAB") {
-                    this.updateItems();
-                }
-            }
-        });
+        this.defaultSlotChangeHandler = (event) => {
+            this.tabs = slotChangeGetAssignedElements(event, "calcite-tab");
+        };
+        this.setDefaultSlotRef = (el) => (this.slotEl = el);
         this.layout = "inline";
         this.position = "top";
         this.scale = "m";
@@ -45,79 +39,22 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     }
     //--------------------------------------------------------------------------
     //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        this.mutationObserver.observe(this.el, { childList: true });
-        this.updateItems();
-    }
-    async componentWillLoad() {
-        this.updateItems();
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-    render() {
-        return (h(Fragment, { key: '8f47fe2cdeb7897a888891ba33b3fcda0d1d2b10' }, h("slot", { key: 'e19648c5138807be98e46ff6a343989a8d931c86', name: SLOTS.titleGroup }), h("section", { key: '64880a376a2cda485d608ba00fe3431fdb7ea011' }, h("slot", { key: '2cbd9deb8203448212357a4de42f5ac4a1f5daad' }))));
-    }
-    //--------------------------------------------------------------------------
-    //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    /**
-     * @param event
-     * @internal
-     */
-    calciteInternalTabTitleRegister(event) {
-        this.titles = [...this.titles, event.target];
-        this.registryHandler();
-        event.stopPropagation();
-    }
-    /**
-     * @param event
-     * @internal
-     */
-    calciteTabTitleUnregister(event) {
-        this.titles = this.titles.filter((el) => el !== event.detail);
-        this.registryHandler();
-        event.stopPropagation();
-    }
-    /**
-     * @param event
-     * @internal
-     */
-    calciteInternalTabRegister(event) {
-        this.tabs = [...this.tabs, event.target];
-        this.registryHandler();
+    calciteInternalTabNavSlotChangeHandler(event) {
         event.stopPropagation();
+        if (event.detail.length !== this.titles.length) {
+            this.titles = event.detail;
+        }
     }
-    /**
-     * @param event
-     * @internal
-     */
-    calciteTabUnregister(event) {
-        this.tabs = this.tabs.filter((el) => el !== event.detail);
-        this.registryHandler();
-        event.stopPropagation();
+    titlesWatcher() {
+        this.updateAriaSettings();
+        this.updateItems();
     }
-    updateItems() {
-        const { position, scale } = this;
-        const nav = this.el.querySelector("calcite-tab-nav");
-        if (nav) {
-            nav.position = position;
-            nav.scale = scale;
-        }
-        Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab) => {
-            if (tab.parentElement === this.el) {
-                tab.scale = scale;
-            }
-        });
-        Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((title) => {
-            title.position = position;
-            title.scale = scale;
-        });
+    tabsWatcher() {
+        this.updateAriaSettings();
+        this.updateItems();
     }
     //--------------------------------------------------------------------------
     //
@@ -130,14 +67,15 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
      * update the ARIA attributes and link `<calcite-tab>` and
      * `<calcite-tab-title>` components.
      */
-    async registryHandler() {
+    async updateAriaSettings() {
         let tabIds;
         let titleIds;
+        const tabs = getSlotAssignedElements(this.slotEl, "calcite-tab");
         // determine if we are using `tab` based or `index` based tab identifiers.
-        if (this.tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
+        if (tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
             // if we are using `tab` based identifiers sort by `tab` to account for
             // possible out of order tabs and get the id of each tab
-            tabIds = this.tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
+            tabIds = tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
             titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
         }
         else {
@@ -146,12 +84,12 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
             // order of `this.tabs` and `this.titles` might not reflect the DOM state,
             // and might not match each other so we need to get the index of all the
             // tabs and titles in the DOM order to match them up as a source of truth
-            const tabDomIndexes = await Promise.all(this.tabs.map((el) => el.getTabIndex()));
+            const tabDomIndexes = await Promise.all(tabs.map((el) => el.getTabIndex()));
             const titleDomIndexes = await Promise.all(this.titles.map((el) => el.getTabIndex()));
             // once we have the DOM order as a source of truth we can build the
             // matching tabIds and titleIds arrays
             tabIds = tabDomIndexes.reduce((ids, indexInDOM, registryIndex) => {
-                ids[indexInDOM] = this.tabs[registryIndex].id;
+                ids[indexInDOM] = tabs[registryIndex].id;
                 return ids;
             }, []);
             titleIds = titleDomIndexes.reduce((ids, indexInDOM, registryIndex) => {
@@ -162,13 +100,47 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         // pass all our new aria information to each `<calcite-tab>` and
         // `<calcite-tab-title>` which will check if they can update their internal
         // `controlled` or `labeledBy` states and re-render if necessary
-        this.tabs.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
+        tabs.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
         this.titles.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
     }
+    updateItems() {
+        const { position, scale } = this;
+        const nav = this.el.querySelector("calcite-tab-nav");
+        if (nav) {
+            nav.position = position;
+            nav.scale = scale;
+        }
+        Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab) => {
+            if (tab.parentElement === this.el) {
+                tab.scale = scale;
+            }
+        });
+        Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((title) => {
+            title.position = position;
+            title.scale = scale;
+        });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        this.updateItems();
+    }
+    async componentWillLoad() {
+        this.updateItems();
+    }
+    disconnectedCallback() { }
+    render() {
+        return (h(Fragment, { key: 'fbdc57d4dbdde7b3dd75afef8d58139559fce80f' }, h("slot", { key: 'ecbd722566a4372f1d3ba156870bd2a7659d6e03', name: SLOTS.titleGroup }), h("section", { key: '8df862476d3a83acfce631bf815582cab1d7f5d2' }, h("slot", { key: '06c4deb3e46c92fdbd06b66663617c1bee81c26d', onSlotchange: this.defaultSlotChangeHandler, ref: this.setDefaultSlotRef }))));
+    }
     get el() { return this; }
     static get watchers() { return {
         "position": ["handleInheritableProps"],
-        "scale": ["handleInheritableProps"]
+        "scale": ["handleInheritableProps"],
+        "titles": ["titlesWatcher"],
+        "tabs": ["tabsWatcher"]
     }; }
     static get style() { return CalciteTabsStyle0; }
 }, [1, "calcite-tabs", {
@@ -178,9 +150,11 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "bordered": [4],
         "titles": [32],
         "tabs": [32]
-    }, [[0, "calciteInternalTabTitleRegister", "calciteInternalTabTitleRegister"], [16, "calciteTabTitleUnregister", "calciteTabTitleUnregister"], [0, "calciteInternalTabRegister", "calciteInternalTabRegister"], [16, "calciteTabUnregister", "calciteTabUnregister"]], {
+    }, [[0, "calciteInternalTabNavSlotChange", "calciteInternalTabNavSlotChangeHandler"]], {
         "position": ["handleInheritableProps"],
-        "scale": ["handleInheritableProps"]
+        "scale": ["handleInheritableProps"],
+        "titles": ["titlesWatcher"],
+        "tabs": ["tabsWatcher"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/time-picker.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * 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.10.1
+ * v2.11.1
  */
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true, fractionalSecondDigits) {
@@ -124,6 +124,18 @@ function getMeridiem(hour) {
     const hourAsNumber = parseInt(hour);
     return hourAsNumber >= 0 && hourAsNumber <= 11 ? "AM" : "PM";
 }
+function getMeridiemOrder(locale) {
+    const isRtl = locale === "ar" || locale === "he";
+    if (isRtl) {
+        return 0;
+    }
+    const timeParts = getTimeParts({
+        value: "00:00:00",
+        locale,
+        numberingSystem: "latn",
+    });
+    return timeParts.findIndex((value) => value.type === "dayPeriod");
+}
 function isValidTime(value) {
     if (!value || value.startsWith(":") || value.endsWith(":")) {
         return false;
@@ -280,7 +292,7 @@ function toISOTimeString(value, includeSeconds = true) {
 /*!
  * 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.10.1
+ * v2.11.1
  */
 const CSS = {
     button: "button",
@@ -696,8 +708,6 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
                 if (localizedMeridiem) {
                     this.localizedMeridiem = localizedMeridiem;
                     this.meridiem = getMeridiem(this.hour);
-                    const formatParts = getTimeParts({ value, locale, numberingSystem });
-                    this.meridiemOrder = this.getMeridiemOrder(formatParts);
                 }
             }
             else {
@@ -956,21 +966,11 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         this.showSecond = this.step < 60;
         this.showFractionalSecond = decimalPlaces(this.step) > 0;
     }
-    getMeridiemOrder(formatParts) {
-        const locale = this.effectiveLocale;
-        const isRTLKind = locale === "ar" || locale === "he";
-        if (formatParts && !isRTLKind) {
-            const index = formatParts.findIndex((parts) => {
-                return parts.value === this.localizedMeridiem;
-            });
-            return index;
-        }
-        return 0;
-    }
     updateLocale() {
         updateMessages(this, this.effectiveLocale);
         this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
         this.localizedDecimalSeparator = getLocalizedDecimalSeparator(this.effectiveLocale, this.numberingSystem);
+        this.meridiemOrder = getMeridiemOrder(this.effectiveLocale);
         this.setValue(this.sanitizeValue(this.value));
     }
     // --------------------------------------------------------------------------
@@ -983,11 +983,6 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         this.updateLocale();
         connectMessages(this);
         this.toggleSecond();
-        this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
-            value: "0:00:00",
-            locale: this.effectiveLocale,
-            numberingSystem: this.numberingSystem,
-        }));
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -1012,69 +1007,69 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         const secondIsNumber = isValidNumber(this.second);
         const fractionalSecondIsNumber = isValidNumber(this.fractionalSecond);
         const showMeridiem = this.hourCycle === "12";
-        return (h("div", { key: '0b13e9884c7e6795911ece9275702f5f70afc8d8', class: {
+        return (h("div", { key: 'd5039206cbfa6109176b2c8b0658f18bf44b1331', class: {
                 [CSS.timePicker]: true,
                 [CSS.showMeridiem]: showMeridiem,
                 [CSS.showSecond]: this.showSecond,
                 [CSS[`scale-${this.scale}`]]: true,
-            }, dir: "ltr" }, h("div", { key: '40a627116c384a11a65bbaaf5359ed56a9b0a954', class: CSS.column, role: "group" }, h("span", { key: '8d14e974bcce95a1715b809d90d152f956613166', "aria-label": this.messages.hourUp, class: {
+            }, dir: "ltr" }, h("div", { key: '4a39656a37249af5ff6df76fd77db246fa748c9d', class: CSS.column, role: "group" }, h("span", { key: 'ec4eef25dc3b26f896f778ba6c3eff916f64e612', "aria-label": this.messages.hourUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonHourUp]: true,
                 [CSS.buttonTopLeft]: true,
-            }, onClick: this.hourUpClickHandler, role: "button" }, h("calcite-icon", { key: 'bfacb03ba5eb88301232149d29d1763d909de847', icon: "chevron-up", scale: iconScale })), h("span", { key: 'b2e006317fd8997ca45c8a693a45b0cb34e1c012', "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
+            }, onClick: this.hourUpClickHandler, role: "button" }, h("calcite-icon", { key: 'cb00900c5c4eef3b2b274ffc3a0b9260fa791f9b', icon: "chevron-up", scale: iconScale })), h("span", { key: '13f4bfdcd4bbffcf41a51b3fdfd0c365feee1395', "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
                 [CSS.input]: true,
                 [CSS.hour]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.hourEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { key: '94e3b7eb596549e4d5e509bc9d6eacc6e814571f', "aria-label": this.messages.hourDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { key: '0ccfcd3eeb04e85f7da68a93e098cf9512917ce5', "aria-label": this.messages.hourDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonHourDown]: true,
                 [CSS.buttonBottomLeft]: true,
-            }, onClick: this.hourDownClickHandler, role: "button" }, h("calcite-icon", { key: 'e6a6354f3c1528f4d9a7c58f97e763a291404745', icon: "chevron-down", scale: iconScale }))), h("span", { key: 'da9e69c5a2f162704153d2d799689332c6cfe96b', class: CSS.delimiter }, this.localizedHourSuffix), h("div", { key: '538ff4b0daf92d4d1a3bc250c1096303e9343967', class: CSS.column, role: "group" }, h("span", { key: '6df3c2cb459000de7f813f32dc074fb48bf60f55', "aria-label": this.messages.minuteUp, class: {
+            }, onClick: this.hourDownClickHandler, role: "button" }, h("calcite-icon", { key: '4192e90218a65516ecde8a458787610f9b9edd19', icon: "chevron-down", scale: iconScale }))), h("span", { key: 'dcd3c4dd5b288d58399c14fd0ed900c5c5f232c8', class: CSS.delimiter }, this.localizedHourSuffix), h("div", { key: 'c76be45fb0e44c8ebc4eb9b8f3fe1f2bbce6ff2a', class: CSS.column, role: "group" }, h("span", { key: '33ced1cb8a027ff0cf97405d6e237ae8edfc752c', "aria-label": this.messages.minuteUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonMinuteUp]: true,
-            }, onClick: this.minuteUpClickHandler, role: "button" }, h("calcite-icon", { key: 'ecfb35802542db3da0af57ce1ac6356dc031a248', icon: "chevron-up", scale: iconScale })), h("span", { key: '58a1bbcd49a4cf5d8dbac2362b8d06eefe9841ed', "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
+            }, onClick: this.minuteUpClickHandler, role: "button" }, h("calcite-icon", { key: '8e76ca8a979024044251d8fa7238d78b21f1ab7d', icon: "chevron-up", scale: iconScale })), h("span", { key: '1624aa7493b83aa3ebe4ad8f98d747357cb85133', "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
                 [CSS.input]: true,
                 [CSS.minute]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.minuteEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { key: '70a9b29aa4cd256e58c1a97ea3a8dc8b0a2390c7', "aria-label": this.messages.minuteDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { key: 'c49716f1dc2b7b38919ad223aead9238afc578c4', "aria-label": this.messages.minuteDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonMinuteDown]: true,
-            }, onClick: this.minuteDownClickHandler, role: "button" }, h("calcite-icon", { key: 'ab7abba85f6b75bb46d6e774a468fb2976cf93c5', icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { key: '87793f21ee3c354a25b5d717862fcc60aa258597', class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { key: 'f7f674498673ea4fd01e753b18d01fb43c022690', class: CSS.column, role: "group" }, h("span", { key: 'e29e4cf67839dda1db29122ad2caa440f983368b', "aria-label": this.messages.secondUp, class: {
+            }, onClick: this.minuteDownClickHandler, role: "button" }, h("calcite-icon", { key: '71993e8095abe2cc7c59f85570f65d21f79d2a1a', icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { key: '04deb17685d535f071c173306c9f130e40b7dca2', class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { key: 'f9ef625ca2de1e3f4b51eaffe5c110919cfefcaf', class: CSS.column, role: "group" }, h("span", { key: '449a6e446bdeec64f2fc2ff9b3e28b35c9fac974', "aria-label": this.messages.secondUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonSecondUp]: true,
-            }, onClick: this.secondUpClickHandler, role: "button" }, h("calcite-icon", { key: '2cf5d11dc7b9b6687371b6c46bf753bb7174ef6b', icon: "chevron-up", scale: iconScale })), h("span", { key: 'ed2af614eb1ae9c747d0a91999ff0d47761f3c83', "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
+            }, onClick: this.secondUpClickHandler, role: "button" }, h("calcite-icon", { key: '2264a34b57406266a37fb410636b3b90450444ee', icon: "chevron-up", scale: iconScale })), h("span", { key: '354db8faf89154c0e35b916fbce4589983c60391', "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
                 [CSS.input]: true,
                 [CSS.second]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.secondEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { key: '7da3d99f1e8d7e504a6b360f347628cb8201bd19', "aria-label": this.messages.secondDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { key: 'bcbb4dd9b52ee9d181c82872bdf052baf616f36f', "aria-label": this.messages.secondDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonSecondDown]: true,
-            }, onClick: this.secondDownClickHandler, role: "button" }, h("calcite-icon", { key: '4b461d08f3d81395cdbeb09cb433f07b3f5d96ad', icon: "chevron-down", scale: iconScale })))), this.showFractionalSecond && (h("span", { key: 'a243778b6ccd13ff93d1cdd36bc95f7f4f30abf3', class: CSS.delimiter }, this.localizedDecimalSeparator)), this.showFractionalSecond && (h("div", { key: '69d58a727a9b9129a86cdf4229607792f405a872', class: CSS.column, role: "group" }, h("span", { key: '52d582ae745c98da28d46250089c717bc9a465e8', "aria-label": this.messages.fractionalSecondUp, class: {
+            }, onClick: this.secondDownClickHandler, role: "button" }, h("calcite-icon", { key: '929587373f82a19260f9523391dd66c8efb75142', icon: "chevron-down", scale: iconScale })))), this.showFractionalSecond && (h("span", { key: '7a8c6a7617c2e2297f2af95bb7dd86b6e3ab467c', class: CSS.delimiter }, this.localizedDecimalSeparator)), this.showFractionalSecond && (h("div", { key: '30670756880931411b29affce8882a918477a84e', class: CSS.column, role: "group" }, h("span", { key: '21e24abf5a5cf4b2e09e35cf6dd34e2579b239ff', "aria-label": this.messages.fractionalSecondUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonFractionalSecondUp]: true,
-            }, onClick: this.fractionalSecondUpClickHandler, role: "button" }, h("calcite-icon", { key: '5f5e04f54beb477106ae636acab8e77c6ac4ceb6', icon: "chevron-up", scale: iconScale })), h("span", { key: '3826e4fcf70095ae262fe2091573de436e15e8f2', "aria-label": this.messages.fractionalSecond, "aria-valuemax": "999", "aria-valuemin": "1", "aria-valuenow": (fractionalSecondIsNumber && parseInt(this.fractionalSecond)) || "0", "aria-valuetext": this.localizedFractionalSecond, class: {
+            }, onClick: this.fractionalSecondUpClickHandler, role: "button" }, h("calcite-icon", { key: 'f63960ef5b8ba94dcfde877a5afbb8627e7746f8', icon: "chevron-up", scale: iconScale })), h("span", { key: '320dcee216bb975470a901a10704f6d5c3964fea', "aria-label": this.messages.fractionalSecond, "aria-valuemax": "999", "aria-valuemin": "1", "aria-valuenow": (fractionalSecondIsNumber && parseInt(this.fractionalSecond)) || "0", "aria-valuetext": this.localizedFractionalSecond, class: {
                 [CSS.input]: true,
                 [CSS.fractionalSecond]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.fractionalSecondEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.fractionalSecondKeyDownHandler, ref: this.setFractionalSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedFractionalSecond || "--"), h("span", { key: '10eb9f6fc3033f4398dd147e4ad752f041a54c26', "aria-label": this.messages.fractionalSecondDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.fractionalSecondKeyDownHandler, ref: this.setFractionalSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedFractionalSecond || "--"), h("span", { key: 'c50801abf8b63bd907e4bcc74cf89c0645fe8a8d', "aria-label": this.messages.fractionalSecondDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonFractionalSecondDown]: true,
-            }, onClick: this.fractionalSecondDownClickHandler, role: "button" }, h("calcite-icon", { key: '6a9e74fb67f77bbe6c5f03ad433724305ceaff8d', icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { key: 'c60b3cdc1b6afbc0c579d0f2eae9be9d01b0f8cc', class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { key: '69065ed996cac1ac49ee6e93d15cdb2cb87cb7b9', class: {
+            }, onClick: this.fractionalSecondDownClickHandler, role: "button" }, h("calcite-icon", { key: 'fdc6bd9e080141a81e353a2ce1da7e8239481c28', icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { key: '132cccc017aab84aa27e95a70513c85a25ae43bb', class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { key: '9d35ac58eb3febd7365bf8f5d5422a2b82e7b58c', class: {
                 [CSS.column]: true,
                 [CSS.meridiemStart]: this.meridiemOrder === 0,
-            }, role: "group" }, h("span", { key: '69d653fbec25b856caa75f531e33ef93ee2dd52e', "aria-label": this.messages.meridiemUp, class: {
+            }, role: "group" }, h("span", { key: '89f0d5da6089d4497fc1b26c9b49053881225aa0', "aria-label": this.messages.meridiemUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonMeridiemUp]: true,
                 [CSS.buttonTopRight]: true,
-            }, onClick: this.meridiemUpClickHandler, role: "button" }, h("calcite-icon", { key: 'b5994501a7d83a2d76892802cc6a1290d035b20a', icon: "chevron-up", scale: iconScale })), h("span", { key: '005bbc86ba9cc3e28fba696527c16bbabc9898a8', "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
+            }, onClick: this.meridiemUpClickHandler, role: "button" }, h("calcite-icon", { key: 'cbebff3749840bd6de63f96eab55e3e1d7e6fe9a', icon: "chevron-up", scale: iconScale })), h("span", { key: 'b4f0bd3e47d8cbfadfab045a9c87dbd539f0ee06', "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
                 [CSS.input]: true,
                 [CSS.meridiem]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.meridiemEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { key: '74bf7d0880945afa9b15d518d39da2217efac32f', "aria-label": this.messages.meridiemDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { key: '4c4530826eaa567d8a23757601539b3432464b52', "aria-label": this.messages.meridiemDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonMeridiemDown]: true,
                 [CSS.buttonBottomRight]: true,
-            }, onClick: this.meridiemDownClickHandler, role: "button" }, h("calcite-icon", { key: '3c2b9a5f00d2eb194166814ef32ffdf5077f177a', icon: "chevron-down", scale: iconScale }))))));
+            }, onClick: this.meridiemDownClickHandler, role: "button" }, h("calcite-icon", { key: '835a086eb26e6548b89257ba9709863783e7d115', icon: "chevron-down", scale: iconScale }))))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }

package/dist/components/tooltip.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { q as queryElementRoots, G as getShadowRootNode, t as toAriaBoolean } from './dom.js';
+import { q as queryElementRoots, H as getShadowRootNode, t as toAriaBoolean } from './dom.js';
 import { c as connectFloatingUI, d as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
 import { g as guid } from './guid.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
@@ -13,7 +13,7 @@ import { F as FloatingArrow } from './FloatingArrow.js';
 /*!
  * 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.10.1
+ * v2.11.1
  */
 const CSS = {
     container: "container",
@@ -25,7 +25,7 @@ const ARIA_DESCRIBED_BY = "aria-describedby";
 /*!
  * 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.10.1
+ * v2.11.1
  */
 function getEffectiveReferenceElement(tooltip) {
     const { referenceElement } = tooltip;
@@ -36,7 +36,7 @@ function getEffectiveReferenceElement(tooltip) {
 /*!
  * 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.10.1
+ * v2.11.1
  */
 class TooltipManager {
     constructor() {
@@ -49,8 +49,6 @@ class TooltipManager {
         this.registeredShadowRootCounts = new WeakMap();
         this.hoverOpenTimeout = null;
         this.hoverCloseTimeout = null;
-        this.hoveredTooltip = null;
-        this.clickedTooltip = null;
         this.activeTooltip = null;
         this.registeredElementCount = 0;
         // --------------------------------------------------------------------------
@@ -79,37 +77,47 @@ class TooltipManager {
         this.pointerMoveHandler = (event) => {
             const composedPath = event.composedPath();
             const { activeTooltip } = this;
-            const hoveringActiveTooltip = activeTooltip?.open && composedPath.includes(activeTooltip);
-            if (hoveringActiveTooltip) {
-                this.clearHoverTimeout();
-                return;
-            }
             const tooltip = this.queryTooltip(composedPath);
-            this.hoveredTooltip = tooltip;
-            if (this.isClosableClickedTooltip(tooltip)) {
+            if (this.pathHasOpenTooltip(tooltip, composedPath)) {
+                this.clearHoverTimeout();
                 return;
             }
-            this.clickedTooltip = null;
             if (tooltip) {
                 this.openHoveredTooltip(tooltip);
             }
-            else if (activeTooltip) {
+            else if (activeTooltip?.open) {
                 this.closeHoveredTooltip();
             }
         };
         this.clickHandler = (event) => {
-            const clickedTooltip = this.queryTooltip(event.composedPath());
-            this.clickedTooltip = clickedTooltip;
-            if (clickedTooltip?.closeOnClick) {
-                this.toggleTooltip(clickedTooltip, false);
+            const composedPath = event.composedPath();
+            const tooltip = this.queryTooltip(composedPath);
+            if (this.pathHasOpenTooltip(tooltip, composedPath)) {
                 this.clearHoverTimeout();
+                return;
             }
+            this.closeActiveTooltip();
+            if (!tooltip) {
+                return;
+            }
+            this.clearHoverTimeout();
+            if (tooltip.closeOnClick) {
+                this.toggleTooltip(tooltip, false);
+                return;
+            }
+            this.toggleTooltip(tooltip, true);
         };
-        this.focusInHandler = (event) => {
-            this.queryFocusedTooltip(event, true);
+        this.blurHandler = () => {
+            this.closeActiveTooltip();
         };
-        this.focusOutHandler = (event) => {
-            this.queryFocusedTooltip(event, false);
+        this.focusInHandler = (event) => {
+            const composedPath = event.composedPath();
+            const tooltip = this.queryTooltip(composedPath);
+            this.closeTooltipIfNotActive(tooltip);
+            if (!tooltip) {
+                return;
+            }
+            this.toggleFocusedTooltip(tooltip, true);
         };
         this.openHoveredTooltip = (tooltip) => {
             this.hoverOpenTimeout = window.setTimeout(() => {
@@ -117,15 +125,9 @@ class TooltipManager {
                     return;
                 }
                 this.clearHoverCloseTimeout();
-                if (this.activeTooltip === this.hoveredTooltip) {
-                    return;
-                }
-                this.closeActiveTooltip();
-                if (tooltip !== this.hoveredTooltip) {
-                    return;
-                }
+                this.closeTooltipIfNotActive(tooltip);
                 this.toggleTooltip(tooltip, true);
-            }, this.activeTooltip ? 0 : TOOLTIP_OPEN_DELAY_MS);
+            }, this.activeTooltip?.open ? 0 : TOOLTIP_OPEN_DELAY_MS);
         };
         this.closeHoveredTooltip = () => {
             this.hoverCloseTimeout = window.setTimeout(() => {
@@ -164,27 +166,29 @@ class TooltipManager {
             this.removeListeners();
         }
     }
+    pathHasOpenTooltip(tooltip, composedPath) {
+        const { activeTooltip } = this;
+        return ((activeTooltip?.open && composedPath.includes(activeTooltip)) || (tooltip?.open && composedPath.includes(tooltip)));
+    }
     addShadowListeners(shadowRoot) {
         shadowRoot.addEventListener("focusin", this.focusInHandler, { capture: true });
-        shadowRoot.addEventListener("focusout", this.focusOutHandler, { capture: true });
     }
     removeShadowListeners(shadowRoot) {
         shadowRoot.removeEventListener("focusin", this.focusInHandler, { capture: true });
-        shadowRoot.removeEventListener("focusout", this.focusOutHandler, { capture: true });
     }
     addListeners() {
         window.addEventListener("keydown", this.keyDownHandler, { capture: true });
         window.addEventListener("pointermove", this.pointerMoveHandler, { capture: true });
         window.addEventListener("click", this.clickHandler, { capture: true });
         window.addEventListener("focusin", this.focusInHandler, { capture: true });
-        window.addEventListener("focusout", this.focusOutHandler, { capture: true });
+        window.addEventListener("blur", this.blurHandler);
     }
     removeListeners() {
         window.removeEventListener("keydown", this.keyDownHandler, { capture: true });
         window.removeEventListener("pointermove", this.pointerMoveHandler, { capture: true });
         window.removeEventListener("click", this.clickHandler, { capture: true });
         window.removeEventListener("focusin", this.focusInHandler, { capture: true });
-        window.removeEventListener("focusout", this.focusOutHandler, { capture: true });
+        window.removeEventListener("blur", this.blurHandler);
     }
     clearHoverOpenTimeout() {
         window.clearTimeout(this.hoverOpenTimeout);
@@ -198,6 +202,11 @@ class TooltipManager {
         this.clearHoverOpenTimeout();
         this.clearHoverCloseTimeout();
     }
+    closeTooltipIfNotActive(tooltip) {
+        if (this.activeTooltip !== tooltip) {
+            this.closeActiveTooltip();
+        }
+    }
     closeActiveTooltip() {
         const { activeTooltip } = this;
         if (activeTooltip?.open) {
@@ -205,7 +214,6 @@ class TooltipManager {
         }
     }
     toggleFocusedTooltip(tooltip, open) {
-        this.closeActiveTooltip();
         if (open) {
             this.clearHoverTimeout();
         }
@@ -215,19 +223,10 @@ class TooltipManager {
         tooltip.open = open;
         this.activeTooltip = open ? tooltip : null;
     }
-    queryFocusedTooltip(event, open) {
-        const tooltip = this.queryTooltip(event.composedPath());
-        if (!tooltip || this.isClosableClickedTooltip(tooltip)) {
-            return;
-        }
-        this.toggleFocusedTooltip(tooltip, open);
-    }
-    isClosableClickedTooltip(tooltip) {
-        return tooltip?.closeOnClick && tooltip === this.clickedTooltip;
-    }
     registerShadowRoot(shadowRoot) {
         const { registeredShadowRootCounts } = this;
-        const newCount = (registeredShadowRootCounts.get(shadowRoot) ?? 0) + 1;
+        const count = registeredShadowRootCounts.get(shadowRoot);
+        const newCount = Math.min((typeof count === "number" ? count : 0) + 1, 1);
         if (newCount === 1) {
             this.addShadowListeners(shadowRoot);
         }
@@ -235,7 +234,8 @@ class TooltipManager {
     }
     unregisterShadowRoot(shadowRoot) {
         const { registeredShadowRootCounts } = this;
-        const newCount = registeredShadowRootCounts.get(shadowRoot) - 1;
+        const count = registeredShadowRootCounts.get(shadowRoot);
+        const newCount = Math.max((typeof count === "number" ? count : 1) - 1, 0);
         if (newCount === 0) {
             this.removeShadowListeners(shadowRoot);
         }
@@ -406,10 +406,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         const { effectiveReferenceElement, label, open, floatingLayout } = this;
         const displayed = effectiveReferenceElement && open;
         const hidden = !displayed;
-        return (h(Host, { key: 'efe45cfea02c55dc9485e7f1760aef938aff1999', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, h("div", { key: '0110992190776206883f22752e73f2dc215890ed', class: {
+        return (h(Host, { key: 'fc8b3d3b7c730b670afe3d15ad110548841e08cb', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, h("div", { key: '4a0d137962212382b6c1979c5405f31ffab156fc', class: {
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: displayed,
-            }, ref: this.setTransitionEl }, h(FloatingArrow, { key: '993f3df44f2104096966c5865217465868a028c3', floatingLayout: floatingLayout, ref: (arrowEl) => (this.arrowEl = arrowEl) }), h("div", { key: '3289d59eba5264aa5bff0285441452861ac49d8b', class: CSS.container }, h("slot", { key: 'e060c878105353e47ecb5dfc9b85888be791c8c9' })))));
+            }, ref: this.setTransitionEl }, h(FloatingArrow, { key: '6543e9d376fea7bad9bb1691238c7f7d76779f04', floatingLayout: floatingLayout, ref: (arrowEl) => (this.arrowEl = arrowEl) }), h("div", { key: '0e628ca7befad9ffafbf5af533c805e590cfd8e1', class: CSS.container }, h("slot", { key: 'c4e11f40221197e9d717e1975812d85cff4ff5f7' })))));
     }
     get el() { return this; }
     static get watchers() { return {