@esri/calcite-components 1.0.0-beta.83 → 1.0.0-beta.86

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;
 }
@@ -160,7 +160,8 @@
   align-items: flex-start;
 }
 
-:host .stepper-item-content, :host .stepper-item-header {
+:host .stepper-item-content, 
+:host .stepper-item-header {
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   padding-block: var(--calcite-stepper-item-spacing-unit-l);
@@ -202,18 +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);
 }
 
@@ -256,27 +258,31 @@
   color: var(--calcite-ui-danger);
 }
 
-:host(:hover:not([disabled]):not([active])) .container, :host(:focus:not([disabled]):not([active])) .container {
+:host(:hover:not([disabled]):not([active])) .container, 
+: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);
 }
 
-:host([error]:hover:not([disabled]):not([active])) .container, :host([error]:focus:not([disabled]):not([active])) .container {
+:host([error]:hover:not([disabled]):not([active])) .container, 
+:host([error]:focus:not([disabled]):not([active])) .container {
   border-top-color: var(--calcite-ui-danger-hover);
 }
 
 :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 {
@@ -325,7 +331,8 @@
   border-color: rgba(0, 122, 194, 0.5);
 }
 
-:host([layout=vertical][complete]:hover:not([disabled]):not([active])) .container, :host([layout=vertical][complete]:focus:not([disabled]):not([active])) .container {
+:host([layout=vertical][complete]:hover:not([disabled]):not([active])) .container, 
+:host([layout=vertical][complete]:focus:not([disabled]):not([active])) .container {
   border-color: var(--calcite-ui-brand);
 }
 
@@ -342,7 +349,8 @@
   border-color: rgba(0, 122, 194, 0.5);
 }
 
-:host([layout=vertical][error]:hover:not([disabled]):not([active])) .container, :host([layout=vertical][error]:focus:not([disabled]):not([active])) .container {
+:host([layout=vertical][error]:hover:not([disabled]):not([active])) .container, 
+:host([layout=vertical][error]:focus:not([disabled]):not([active])) .container {
   border-color: var(--calcite-ui-danger-hover);
 }
 

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-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -24,6 +24,10 @@ export class StepperItem {
     this.error = false;
     /** is the step disabled and not navigable to by a user */
     this.disabled = false;
+    // internal props inherited from wrapping calcite-stepper
+    /** pass a title for the stepper item */
+    /** @internal */
+    this.layout = "horizontal";
     /** should the items display an icon based on status */
     /** @internal */
     this.icon = false;
@@ -43,7 +47,7 @@ export class StepperItem {
         switch (e.key) {
           case " ":
           case "Enter":
-            this.emitRequestedItem();
+            this.emitUserRequestedItem();
             e.preventDefault();
             break;
           case "ArrowUp":
@@ -58,11 +62,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
         });
       }
     };
@@ -82,6 +97,11 @@ export class StepperItem {
   disabledWatcher() {
     this.registerStepperItem();
   }
+  activeWatcher(active) {
+    if (active) {
+      this.emitRequestedItem();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -98,7 +118,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 +126,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 +258,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,20 +279,65 @@ 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
     },
-    "layout": {
+    "description": {
       "type": "string",
-      "mutable": true,
+      "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,
+      "complexType": {
+        "original": "Extract<\"horizontal\" | \"vertical\", Layout>",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "Extract": {
+            "location": "global"
+          },
+          "Layout": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
       "optional": true,
       "docs": {
         "tags": [{
@@ -279,7 +347,8 @@ export class StepperItem {
         "text": ""
       },
       "attribute": "layout",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "\"horizontal\""
     },
     "icon": {
       "type": "boolean",
@@ -396,6 +465,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",
@@ -424,6 +516,9 @@ export class StepperItem {
   static get watchers() { return [{
       "propName": "disabled",
       "methodName": "disabledWatcher"
+    }, {
+      "propName": "active",
+      "methodName": "activeWatcher"
     }]; }
   static get listeners() { return [{
       "name": "calciteInternalStepperItemChange",

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

@@ -175,7 +175,8 @@
   inset-inline: -1px auto;
 }
 
-:host(:hover) .handle, :host(:focus) .handle {
+:host(:hover) .handle, 
+:host(:focus) .handle {
   border-color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }

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-beta.83
+ * v1.0.0-beta.86
  */
 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-beta.83
+ * v1.0.0-beta.86
  */
 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-beta.83
+ * v1.0.0-beta.86
  */
 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

@@ -102,10 +102,6 @@
   overflow: auto;
 }
 
-:host([layout=center]) .tab-nav {
-  justify-content: center;
-}
-
 .tab-nav-active-indicator-container {
   position: absolute;
   left: 0px;
@@ -133,11 +129,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 +153,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-beta.83
+ * v1.0.0-beta.86
  */
 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;
 }
@@ -112,7 +119,9 @@
   outline-offset: -2px;
 }
 
-:host(:active) a, :host(:focus) a, :host(:hover) a {
+:host(:active) a, 
+:host(:focus) a, 
+:host(:hover) a {
   border-color: var(--calcite-ui-border-2);
   color: var(--calcite-ui-text-1);
   -webkit-text-decoration-line: none;
@@ -131,7 +140,8 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
-:host([disabled]) span, :host([disabled]) a {
+:host([disabled]) span, 
+:host([disabled]) a {
   pointer-events: none;
   opacity: 0.5;
 }
@@ -144,14 +154,16 @@
 :host([scale=s]) {
   margin-inline-end: 1rem;
 }
-:host([scale=s]) a, :host([scale=s]) span {
+:host([scale=s]) a, 
+:host([scale=s]) span {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
-:host([scale=m]) a, :host([scale=m]) span {
+:host([scale=m]) a, 
+:host([scale=m]) span {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   font-size: var(--calcite-font-size--1);
@@ -161,14 +173,16 @@
 :host([scale=l]) {
   margin-inline-end: 1.5rem;
 }
-:host([scale=l]) a, :host([scale=l]) span {
+:host([scale=l]) a, 
+:host([scale=l]) span {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 
-a, span {
+a, 
+span {
   box-sizing: border-box;
   display: flex;
   height: 100%;
@@ -235,39 +249,53 @@ span {
   box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
 }
 
-:host([bordered]:hover) a, :host([bordered]:focus) a, :host([bordered]:active) a {
+: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 {
   position: relative;
 }
 
 :host([bordered]:hover) a {
   background-color: var(--calcite-button-transparent-hover);
-  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 :host([bordered]) a {
   border-bottom-style: unset;
+  border-inline-start: 1px solid transparent;
+  border-inline-end: 1px solid transparent;
 }
 
 :host([bordered][position=below]) a {
   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);
+  border-inline-start-color: var(--calcite-ui-border-1);
+  border-inline-end-color: var(--calcite-ui-border-1);
 }
 
-:host([bordered]) a, :host([bordered]) span {
+:host([bordered]) a, 
+:host([bordered]) span {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
 
-:host([bordered][scale=s]) a, :host([bordered][scale=s]) span {
+:host([bordered][scale=s]) a, 
+:host([bordered][scale=s]) span {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
-:host([bordered][scale=l]) a, :host([bordered][scale=l]) span {
+:host([bordered][scale=l]) a, 
+:host([bordered][scale=l]) span {
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -290,6 +318,10 @@ span {
     border-top-style: solid;
   }
 
+  :host([bordered][position=bottom]) a {
+    border-top-style: solid;
+  }
+
   :host([bordered][active]) a {
     border-bottom-style: none;
   }
@@ -297,4 +329,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-beta.83
+ * v1.0.0-beta.86
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -83,14 +83,13 @@ export class TabTitle {
   }
   render() {
     const id = this.el.id || this.guid;
-    const showSideBorders = this.bordered && !this.disabled && this.layout !== "center";
     const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     return (h(Host, { "aria-controls": this.controls, "aria-expanded": toAriaBoolean(this.active), id: id, role: "tab" },
       h("a", { class: {
           container: true,
           "container--has-text": this.hasText
-        }, style: showSideBorders && { width: `${this.parentTabNavEl.indicatorWidth}px` } },
+        } },
         this.iconStart ? iconStartEl : null,
         h("slot", null),
         this.iconEnd ? iconEndEl : null)));
@@ -324,7 +323,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-beta.83
+ * v1.0.0-beta.86
  */
 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-beta.83
+ * v1.0.0-beta.86
  */
 export const SLOTS = {
   tabNav: "tab-nav"