@esri/calcite-components 1.0.0-next.700 → 1.0.0-next.702

package/dist/collection/components/sortable-list/resources.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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.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.700
+ * v1.0.0-next.702
  */
 import Sortable from "sortablejs";
 import { h } from "@stencil/core";

package/dist/collection/components/split-button/resources.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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.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.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 import { CSS } from "./resources";

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

@@ -1,10 +1,10 @@
 /*!
  * 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.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
-import { focusElement } from "../../utils/dom";
+import { focusElementInGroup } from "../../utils/dom";
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
  */
@@ -24,6 +24,7 @@ export class Stepper {
     this.layout = "horizontal";
     this.numbered = false;
     this.numberingSystem = undefined;
+    this.selectedItem = null;
     this.scale = "m";
   }
   //--------------------------------------------------------------------------
@@ -57,32 +58,20 @@ export class Stepper {
   calciteInternalStepperItemKeyEvent(event) {
     const item = event.detail.item;
     const itemToFocus = event.target;
-    const isFirstItem = this.itemIndex(itemToFocus) === 0;
-    const isLastItem = this.itemIndex(itemToFocus) === this.enabledItems.length - 1;
     switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
-        if (isLastItem) {
-          this.focusFirstItem();
-        }
-        else {
-          this.focusNextItem(itemToFocus);
-        }
+        focusElementInGroup(this.enabledItems, itemToFocus, "next");
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        if (isFirstItem) {
-          this.focusLastItem();
-        }
-        else {
-          this.focusPrevItem(itemToFocus);
-        }
+        focusElementInGroup(this.enabledItems, itemToFocus, "previous");
         break;
       case "Home":
-        this.focusFirstItem();
+        focusElementInGroup(this.enabledItems, itemToFocus, "first");
         break;
       case "End":
-        this.focusLastItem();
+        focusElementInGroup(this.enabledItems, itemToFocus, "last");
         break;
     }
     event.stopPropagation();
@@ -99,16 +88,14 @@ export class Stepper {
     const { position } = event.detail;
     if (typeof position === "number") {
       this.currentPosition = position;
+      this.selectedItem = event.target;
     }
     this.calciteInternalStepperItemChange.emit({
       position
     });
   }
-  handleUserRequestedStepperItemSelect(event) {
-    const { position } = event.detail;
-    this.calciteStepperItemChange.emit({
-      position
-    });
+  handleUserRequestedStepperItemSelect() {
+    this.calciteStepperItemChange.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -179,27 +166,6 @@ export class Stepper {
       position
     });
   }
-  focusFirstItem() {
-    const firstItem = this.enabledItems[0];
-    focusElement(firstItem);
-  }
-  focusLastItem() {
-    const lastItem = this.enabledItems[this.enabledItems.length - 1];
-    focusElement(lastItem);
-  }
-  focusNextItem(el) {
-    const index = this.itemIndex(el);
-    const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
-    focusElement(nextItem);
-  }
-  focusPrevItem(el) {
-    const index = this.itemIndex(el);
-    const prevItem = this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
-    focusElement(prevItem);
-  }
-  itemIndex(el) {
-    return this.enabledItems.indexOf(el);
-  }
   sortItems() {
     const { itemMap } = this;
     return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a).position - itemMap.get(b).position);
@@ -305,6 +271,29 @@ export class Stepper {
         "attribute": "numbering-system",
         "reflect": true
       },
+      "selectedItem": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteStepperItemElement",
+          "resolved": "HTMLCalciteStepperItemElement",
+          "references": {
+            "HTMLCalciteStepperItemElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "Specifies the component's selected item."
+        },
+        "defaultValue": "null"
+      },
       "scale": {
         "type": "string",
         "mutable": false,
@@ -342,14 +331,9 @@ export class Stepper {
           "text": "Fires when the active `calcite-stepper-item` changes."
         },
         "complexType": {
-          "original": "StepperItemChangeEventDetail",
-          "resolved": "StepperItemChangeEventDetail",
-          "references": {
-            "StepperItemChangeEventDetail": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }, {
         "method": "calciteInternalStepperItemChange",

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-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

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-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";

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-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

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

@@ -1,10 +1,10 @@
 /*!
  * 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.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
-import { getElementDir, filterDirectChildren } from "../../utils/dom";
+import { getElementDir, filterDirectChildren, focusElementInGroup } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-tab-title`s.
@@ -23,8 +23,8 @@ export class TabNav {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.handleTabFocus = (event, tabTitle) => {
-      tabTitle?.focus();
+    this.handleTabFocus = (event, el, destination) => {
+      focusElementInGroup(this.enabledTabTitles, el, destination);
       event.stopPropagation();
       event.preventDefault();
     };
@@ -35,28 +35,28 @@ export class TabNav {
     };
     this.storageId = undefined;
     this.syncId = undefined;
+    this.selectedTitle = null;
     this.scale = "m";
     this.layout = "inline";
     this.position = "bottom";
     this.bordered = false;
     this.indicatorOffset = undefined;
     this.indicatorWidth = undefined;
-    this.selectedTab = undefined;
-    this.selectedTabEl = undefined;
+    this.selectedTabId = undefined;
   }
-  async selectedTabChanged() {
+  async selectedTabIdChanged() {
     if (localStorage &&
       this.storageId &&
-      this.selectedTab !== undefined &&
-      this.selectedTab !== null) {
-      localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTab));
+      this.selectedTabId !== undefined &&
+      this.selectedTabId !== null) {
+      localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
     }
     this.calciteInternalTabChange.emit({
-      tab: this.selectedTab
+      tab: this.selectedTabId
     });
-    this.selectedTabEl = await this.getTabTitleById(this.selectedTab);
+    this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
   }
-  selectedTabElChanged() {
+  selectedTitleChanged() {
     this.updateOffsetPosition();
     this.updateActiveWidth();
     // reset the animation time on tab selection
@@ -78,7 +78,7 @@ export class TabNav {
     const storageKey = `calcite-tab-nav-${this.storageId}`;
     if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
       const storedTab = JSON.parse(localStorage.getItem(storageKey));
-      this.selectedTab = storedTab;
+      this.selectedTabId = storedTab;
     }
   }
   componentWillRender() {
@@ -88,7 +88,7 @@ export class TabNav {
     this.scale = parentTabsEl?.scale;
     this.bordered = parentTabsEl?.bordered;
     // fix issue with active tab-title not lining up with blue indicator
-    if (this.selectedTabEl) {
+    if (this.selectedTitle) {
       this.updateOffsetPosition();
     }
   }
@@ -96,7 +96,7 @@ export class TabNav {
     // if every tab title is active select the first tab.
     if (this.tabTitles.length &&
       this.tabTitles.every((title) => !title.selected) &&
-      !this.selectedTab) {
+      !this.selectedTabId) {
       this.tabTitles[0].getTabIdentifier().then((tab) => {
         this.calciteInternalTabChange.emit({
           tab
@@ -117,22 +117,19 @@ export class TabNav {
   //
   //--------------------------------------------------------------------------
   focusPreviousTabHandler(event) {
-    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);
-    this.handleTabFocus(event, this.enabledTabTitles[currentIndex - 1] ||
-      this.enabledTabTitles[this.enabledTabTitles.length - 1]);
+    this.handleTabFocus(event, event.target, "previous");
   }
   focusNextTabHandler(event) {
-    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);
-    this.handleTabFocus(event, this.enabledTabTitles[currentIndex + 1] || this.enabledTabTitles[0]);
+    this.handleTabFocus(event, event.target, "next");
   }
   focusFirstTabHandler(event) {
-    this.handleTabFocus(event, this.enabledTabTitles[0]);
+    this.handleTabFocus(event, event.target, "first");
   }
   focusLastTabHandler(event) {
-    this.handleTabFocus(event, this.enabledTabTitles[this.enabledTabTitles.length - 1]);
+    this.handleTabFocus(event, event.target, "last");
   }
   internalActivateTabHandler(event) {
-    this.selectedTab = event.detail.tab
+    this.selectedTabId = event.detail.tab
       ? event.detail.tab
       : this.getIndexOfTabTitle(event.target);
     event.stopPropagation();
@@ -150,15 +147,15 @@ export class TabNav {
    */
   updateTabTitles(event) {
     if (event.target.selected) {
-      this.selectedTab = event.detail;
+      this.selectedTabId = event.detail;
     }
   }
   globalInternalTabChangeHandler(event) {
     if (this.syncId &&
       event.target !== this.el &&
       event.target.syncId === this.syncId &&
-      this.selectedTab !== event.detail.tab) {
-      this.selectedTab = event.detail.tab;
+      this.selectedTabId !== event.detail.tab) {
+      this.selectedTabId = event.detail.tab;
     }
     event.stopPropagation();
   }
@@ -168,14 +165,14 @@ export class TabNav {
   updateOffsetPosition() {
     const dir = getElementDir(this.el);
     const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
-    const tabLeft = this.selectedTabEl?.offsetLeft;
-    const tabWidth = this.selectedTabEl?.offsetWidth;
+    const tabLeft = this.selectedTitle?.offsetLeft;
+    const tabWidth = this.selectedTitle?.offsetWidth;
     const offsetRight = navWidth - (tabLeft + tabWidth);
     this.indicatorOffset =
       dir !== "rtl" ? tabLeft - this.tabNavEl?.scrollLeft : offsetRight + this.tabNavEl?.scrollLeft;
   }
   updateActiveWidth() {
-    this.indicatorWidth = this.selectedTabEl?.offsetWidth;
+    this.indicatorWidth = this.selectedTitle?.offsetWidth;
   }
   getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
     // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
@@ -241,6 +238,29 @@ export class TabNav {
         "attribute": "sync-id",
         "reflect": true
       },
+      "selectedTitle": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteTabTitleElement",
+          "resolved": "HTMLCalciteTabTitleElement",
+          "references": {
+            "HTMLCalciteTabTitleElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "Specifies the component's selected tab-title."
+        },
+        "defaultValue": "null"
+      },
       "scale": {
         "type": "string",
         "mutable": true,
@@ -384,8 +404,7 @@ export class TabNav {
   }
   static get states() {
     return {
-      "selectedTab": {},
-      "selectedTabEl": {}
+      "selectedTabId": {}
     };
   }
   static get events() {
@@ -432,11 +451,11 @@ export class TabNav {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "selectedTab",
-        "methodName": "selectedTabChanged"
+        "propName": "selectedTabId",
+        "methodName": "selectedTabIdChanged"
       }, {
-        "propName": "selectedTabEl",
-        "methodName": "selectedTabElChanged"
+        "propName": "selectedTitle",
+        "methodName": "selectedTitleChanged"
       }];
   }
   static get listeners() {

package/dist/collection/components/tab-title/tab-title.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.700
+ * v1.0.0-next.702
  */
 import { Build, h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -435,7 +435,7 @@ export class TabTitle {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires when a `calcite-tab` is selected. Emits the `tab` property, or the index position."
+          "text": "Fires when a `calcite-tab` is selected."
         },
         "complexType": {
           "original": "void",

package/dist/collection/components/tabs/resources.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.700
+ * v1.0.0-next.702
  */
 export const SLOTS = {
   titleGroup: "title-group"

package/dist/collection/components/tabs/tabs.js

@@ -1,13 +1,13 @@
 /*!
  * 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.700
+ * v1.0.0-next.702
  */
 import { h, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
 /**
  * @slot - A slot for adding `calcite-tab`s.
- * @slot tab-nav - A slot for adding a `calcite-tab-nav`.
+ * @slot title-group - A slot for adding a `calcite-tab-nav`.
  */
 export class Tabs {
   constructor() {

package/dist/collection/components/tile/resources.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.700
+ * v1.0.0-next.702
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.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.700
+ * v1.0.0-next.702
  */
 import { Fragment, h } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/tile-select/resources.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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   checked: "checked",

package/dist/collection/components/tile-select/tile-select.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.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/tile-select-group/tile-select-group.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.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/time-picker/assets/time-picker/t9n/index.d.ts

@@ -1,4 +1,4 @@
-export type Messages = {
+export type TimePickerMessages = {
   hour: string;
   hourDown: string;
   hourUp: string;

package/dist/collection/components/time-picker/resources.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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.css

@@ -119,6 +119,8 @@
   background-color: var(--calcite-ui-foreground-2);
   outline: 2px solid transparent;
   outline-offset: 2px;
+  z-index: 400;
+  outline-offset: 0;
 }
 .time-picker .button:active {
   background-color: var(--calcite-ui-foreground-3);
@@ -148,11 +150,14 @@
 }
 .time-picker .input:hover {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-2);
+  z-index: 400;
 }
 .time-picker .input:focus, .time-picker .input:hover:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+  z-index: 400;
+  outline-offset: 0;
 }
 .time-picker.scale-s {
   font-size: var(--calcite-font-size--1);