@esri/calcite-components 1.0.0-next.493 → 1.0.0-next.497

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

@@ -86,7 +86,7 @@
   line-height: 1rem;
   margin-inline-end: 0.25rem;
 }
-:host([scale=s]) .stepper-item-subtitle {
+:host([scale=s]) .stepper-item-description {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
@@ -99,7 +99,7 @@
   line-height: 1.25rem;
   margin-inline-end: 0.5rem;
 }
-:host([scale=m]) .stepper-item-subtitle {
+:host([scale=m]) .stepper-item-description {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -112,7 +112,7 @@
   line-height: 1.5rem;
   margin-inline-end: 0.75rem;
 }
-:host([scale=l]) .stepper-item-subtitle {
+:host([scale=l]) .stepper-item-description {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
@@ -203,19 +203,19 @@
   margin-inline-end: auto;
 }
 
-:host .stepper-item-title, 
-:host .stepper-item-subtitle {
+:host .stepper-item-heading, 
+:host .stepper-item-description {
   display: flex;
   width: 100%;
 }
 
-:host .stepper-item-title {
+:host .stepper-item-heading {
   margin-bottom: 0.25rem;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
 }
 
-:host .stepper-item-subtitle {
+:host .stepper-item-description {
   color: var(--calcite-ui-text-3);
 }
 
@@ -262,12 +262,12 @@
 :host(:focus:not([disabled]):not([active])) .container {
   border-top-color: var(--calcite-ui-brand);
 }
-:host(:hover:not([disabled]):not([active])) .container .stepper-item-title, 
-:host(:focus:not([disabled]):not([active])) .container .stepper-item-title {
+:host(:hover:not([disabled]):not([active])) .container .stepper-item-heading, 
+:host(:focus:not([disabled]):not([active])) .container .stepper-item-heading {
   color: var(--calcite-ui-text-1);
 }
-:host(:hover:not([disabled]):not([active])) .container .stepper-item-subtitle, 
-:host(:focus:not([disabled]):not([active])) .container .stepper-item-subtitle {
+:host(:hover:not([disabled]):not([active])) .container .stepper-item-description, 
+:host(:focus:not([disabled]):not([active])) .container .stepper-item-description {
   color: var(--calcite-ui-text-2);
 }
 
@@ -279,10 +279,10 @@
 :host([active]) .container {
   border-top-color: var(--calcite-ui-brand);
 }
-:host([active]) .container .stepper-item-title {
+:host([active]) .container .stepper-item-heading {
   color: var(--calcite-ui-text-1);
 }
-:host([active]) .container .stepper-item-subtitle {
+:host([active]) .container .stepper-item-description {
   color: var(--calcite-ui-text-2);
 }
 :host([active]) .container .stepper-item-number {

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.493
+ * v1.0.0-next.497
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -43,7 +43,7 @@ export class StepperItem {
         switch (e.key) {
           case " ":
           case "Enter":
-            this.emitRequestedItem();
+            this.emitUserRequestedItem();
             e.preventDefault();
             break;
           case "ArrowUp":
@@ -58,11 +58,22 @@ export class StepperItem {
         }
       }
     };
+    this.emitUserRequestedItem = () => {
+      this.emitRequestedItem();
+      if (!this.disabled) {
+        const position = this.itemPosition;
+        this.calciteInternalUserRequestedStepperItemSelect.emit({
+          position
+        });
+      }
+    };
     this.emitRequestedItem = () => {
       if (!this.disabled) {
+        const position = this.itemPosition;
+        const content = this.itemContent;
         this.calciteInternalStepperItemSelect.emit({
-          position: this.itemPosition,
-          content: this.itemContent
+          position,
+          content
         });
       }
     };
@@ -98,7 +109,7 @@ export class StepperItem {
     updateHostInteraction(this, true);
   }
   render() {
-    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.emitRequestedItem, onKeyDown: this.keyDownHandler },
+    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.emitUserRequestedItem, onKeyDown: this.keyDownHandler },
       h("div", { class: "container" },
         h("div", { class: "stepper-item-header" },
           this.icon ? this.renderIcon() : null,
@@ -106,8 +117,8 @@ export class StepperItem {
             this.getItemPosition() + 1,
             ".")) : null,
           h("div", { class: "stepper-item-header-text" },
-            h("span", { class: "stepper-item-title" }, this.itemTitle),
-            h("span", { class: "stepper-item-subtitle" }, this.itemSubtitle))),
+            h("span", { class: "stepper-item-heading" }, this.heading || this.itemTitle),
+            h("span", { class: "stepper-item-description" }, this.description || this.itemSubtitle))),
         h("div", { class: "stepper-item-content" },
           h("slot", { onSlotchange: this.setItemContent })))));
   }
@@ -238,13 +249,16 @@ export class StepperItem {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use heading instead"
+          }],
         "text": "pass a title for the stepper item"
       },
       "attribute": "item-title",
       "reflect": false
     },
-    "itemSubtitle": {
+    "heading": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -256,11 +270,48 @@ export class StepperItem {
       "optional": true,
       "docs": {
         "tags": [],
+        "text": "stepper item heading"
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "itemSubtitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": "use description instead"
+          }],
         "text": "pass a title for the stepper item"
       },
       "attribute": "item-subtitle",
       "reflect": false
     },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "stepper item description"
+      },
+      "attribute": "description",
+      "reflect": false
+    },
     "layout": {
       "type": "string",
       "mutable": true,
@@ -396,6 +447,29 @@ export class StepperItem {
           }
         }
       }
+    }, {
+      "method": "calciteInternalUserRequestedStepperItemSelect",
+      "name": "calciteInternalUserRequestedStepperItemSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "StepperItemChangeEventDetail",
+        "resolved": "StepperItemChangeEventDetail",
+        "references": {
+          "StepperItemChangeEventDetail": {
+            "location": "import",
+            "path": "../stepper/interfaces"
+          }
+        }
+      }
     }, {
       "method": "calciteInternalStepperItemRegister",
       "name": "calciteInternalStepperItemRegister",

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.493
+ * v1.0.0-next.497
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";

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

@@ -1,6 +1,6 @@
 /*!
  * 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.493
+ * v1.0.0-next.497
  */
 export {};

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.493
+ * v1.0.0-next.497
  */
 import { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

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

@@ -133,11 +133,21 @@
   top: 0px;
 }
 
+:host([position=bottom]) .tab-nav-active-indicator {
+  bottom: unset;
+  top: 0px;
+}
+
 :host([position=below]) .tab-nav-active-indicator-container {
   bottom: unset;
   top: 0px;
 }
 
+:host([position=bottom]) .tab-nav-active-indicator-container {
+  bottom: unset;
+  top: 0px;
+}
+
 :host([bordered]) .tab-nav-active-indicator-container {
   bottom: unset;
 }
@@ -147,6 +157,11 @@
   top: unset;
 }
 
+:host([bordered][position=bottom]) .tab-nav-active-indicator-container {
+  bottom: 0;
+  top: unset;
+}
+
 @media (forced-colors: active) {
   .tab-nav-active-indicator {
     background-color: highlight;

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-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.493
+ * v1.0.0-next.497
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";
@@ -22,7 +22,7 @@ export class TabNav {
     /**
      * @internal
      */
-    this.position = "below";
+    this.position = "bottom";
     /**
      * @internal
      */
@@ -127,14 +127,14 @@ export class TabNav {
     const currentIndex = this.getIndexOfTabTitle(e.target, this.enabledTabTitles);
     const previousTab = this.enabledTabTitles[currentIndex - 1] ||
       this.enabledTabTitles[this.enabledTabTitles.length - 1];
-    previousTab.focus();
+    previousTab === null || previousTab === void 0 ? void 0 : previousTab.focus();
     e.stopPropagation();
     e.preventDefault();
   }
   focusNextTabHandler(e) {
     const currentIndex = this.getIndexOfTabTitle(e.target, this.enabledTabTitles);
     const nextTab = this.enabledTabTitles[currentIndex + 1] || this.enabledTabTitles[0];
-    nextTab.focus();
+    nextTab === null || nextTab === void 0 ? void 0 : nextTab.focus();
     e.stopPropagation();
     e.preventDefault();
   }
@@ -302,7 +302,7 @@ export class TabNav {
       "mutable": true,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",
@@ -321,7 +321,7 @@ export class TabNav {
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "\"below\""
+      "defaultValue": "\"bottom\""
     },
     "bordered": {
       "type": "boolean",

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

@@ -103,6 +103,13 @@
   border-top-style: solid;
 }
 
+:host([position=bottom]) a {
+  border-bottom-width: 0px;
+  border-top-width: 2px;
+  border-top-color: transparent;
+  border-top-style: solid;
+}
+
 :host a {
   outline-color: transparent;
 }
@@ -242,6 +249,10 @@ span {
   box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
 }
 
+:host([bordered][active][position=bottom]) {
+  box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
+}
+
 :host([bordered]:hover) a, 
 :host([bordered]:focus) a, 
 :host([bordered]:active) a {
@@ -261,6 +272,10 @@ span {
   border-top-style: unset;
 }
 
+:host([bordered][position=bottom]) a {
+  border-top-style: unset;
+}
+
 :host([active][bordered]) a {
   border-left: 1px solid var(--calcite-ui-border-1);
   border-right: 1px solid var(--calcite-ui-border-1);
@@ -302,6 +317,10 @@ span {
     border-top-style: solid;
   }
 
+  :host([bordered][position=bottom]) a {
+    border-top-style: solid;
+  }
+
   :host([bordered][active]) a {
     border-bottom-style: none;
   }
@@ -309,4 +328,8 @@ span {
   :host([bordered][position=below][active]) a {
     border-top-style: none;
   }
+
+  :host([bordered][position=bottom][active]) a {
+    border-top-style: none;
+  }
 }

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.493
+ * v1.0.0-next.497
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -324,7 +324,7 @@ export class TabTitle {
       "mutable": true,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",

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

@@ -1,6 +1,6 @@
 /*!
  * 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.493
+ * v1.0.0-next.497
  */
 export {};

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.493
+ * v1.0.0-next.497
  */
 export const SLOTS = {
   tabNav: "tab-nav"

package/dist/collection/components/tabs/tabs.css

@@ -92,6 +92,10 @@
   margin-bottom: -1px;
 }
 
+:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav) {
+  margin-bottom: -1px;
+}
+
 :host([bordered][position=below]) ::slotted(calcite-tab-nav) {
   margin-top: -1px;
 }
@@ -100,6 +104,10 @@
   box-shadow: inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);
 }
 
+:host([bordered][position=bottom]) {
+  box-shadow: inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);
+}
+
 :host([bordered]) section {
   border-width: 1px;
   border-style: solid;
@@ -122,6 +130,10 @@
   flex-direction: column-reverse;
 }
 
+:host([position=bottom]) {
+  flex-direction: column-reverse;
+}
+
 section {
   display: flex;
   flex-grow: 1;
@@ -138,10 +150,21 @@ section {
   border-bottom-color: var(--calcite-ui-border-1);
 }
 
+:host([position=bottom]) section {
+  flex-direction: column-reverse;
+  border-top-width: 0px;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--calcite-ui-border-1);
+}
+
 :host([position=below]:not([bordered])) section {
   border-bottom-style: solid;
 }
 
+:host([position=bottom]:not([bordered])) section {
+  border-bottom-style: solid;
+}
+
 @media (forced-colors: active) {
   :host([bordered]) section {
     border-top-width: 0px;
@@ -152,4 +175,9 @@ section {
     border-top-width: 1px;
     border-bottom-width: 0px;
   }
+
+  :host([position=bottom][bordered]) section {
+    border-top-width: 1px;
+    border-bottom-width: 0px;
+  }
 }

package/dist/collection/components/tabs/tabs.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.493
+ * v1.0.0-next.497
  */
 import { Component, Prop, h, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -21,9 +21,10 @@ export class Tabs {
      */
     this.layout = "inline";
     /**
-     * Display the tabs above (default) or below the tab content
+     * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
+     *
      */
-    this.position = "above";
+    this.position = "top";
     /**
      * Specify the scale of the tabs component, defaults to m
      */
@@ -194,7 +195,7 @@ export class Tabs {
       "mutable": false,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",
@@ -206,11 +207,11 @@ export class Tabs {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display the tabs above (default) or below the tab content"
+        "text": "Display the tabs top (default) or bottom of the tab content. above and below are deprecated."
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "\"above\""
+      "defaultValue": "\"top\""
     },
     "scale": {
       "type": "string",

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.493
+ * v1.0.0-next.497
  */
 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.493
+ * v1.0.0-next.497
  */
 import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/tile-select/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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.493
+ * v1.0.0-next.497
  */
 export {};

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.493
+ * v1.0.0-next.497
  */
 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.493
+ * v1.0.0-next.497
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -53,7 +53,8 @@ export class TileSelect {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.input.setFocus();
+    var _a;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/tile-select-group/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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.493
+ * v1.0.0-next.497
  */
 export {};

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.493
+ * v1.0.0-next.497
  */
 import { Component, h, Prop, Element } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

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.493
+ * v1.0.0-next.497
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.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.493
+ * v1.0.0-next.497
  */
 import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";

package/dist/collection/components/tip/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.493
+ * v1.0.0-next.497
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

package/dist/collection/components/tip/tip.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.493
+ * v1.0.0-next.497
  */
 import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";