@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.85

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.82
+ * v1.0.0-beta.85
  */
 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":
@@ -52,17 +56,28 @@ export class StepperItem {
           case "ArrowRight":
           case "Home":
           case "End":
-            this.calciteStepperItemKeyEvent.emit({ item: e });
+            this.calciteInternalStepperItemKeyEvent.emit({ item: e });
             e.preventDefault();
             break;
         }
       }
     };
+    this.emitUserRequestedItem = () => {
+      this.emitRequestedItem();
+      if (!this.disabled) {
+        const position = this.itemPosition;
+        this.calciteInternalUserRequestedStepperItemSelect.emit({
+          position
+        });
+      }
+    };
     this.emitRequestedItem = () => {
       if (!this.disabled) {
-        this.calciteStepperItemSelect.emit({
-          position: this.itemPosition,
-          content: this.itemContent
+        const position = this.itemPosition;
+        const content = this.itemContent;
+        this.calciteInternalStepperItemSelect.emit({
+          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 })))));
   }
@@ -122,6 +142,7 @@ export class StepperItem {
       this.activePosition = event.detail.position;
       this.determineActiveItem();
     }
+    event.stopPropagation();
   }
   renderIcon() {
     const path = this.active
@@ -137,7 +158,7 @@ export class StepperItem {
     this.active = !this.disabled && this.itemPosition === this.activePosition;
   }
   registerStepperItem() {
-    this.calciteStepperItemRegister.emit({
+    this.calciteInternalStepperItemRegister.emit({
       position: this.itemPosition,
       content: this.itemContent
     });
@@ -237,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": {
@@ -255,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": [{
@@ -278,7 +347,8 @@ export class StepperItem {
         "text": ""
       },
       "attribute": "layout",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "\"horizontal\""
     },
     "icon": {
       "type": "boolean",
@@ -350,8 +420,8 @@ export class StepperItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteStepperItemKeyEvent",
-      "name": "calciteStepperItemKeyEvent",
+      "method": "calciteInternalStepperItemKeyEvent",
+      "name": "calciteInternalStepperItemKeyEvent",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -373,8 +443,8 @@ export class StepperItem {
         }
       }
     }, {
-      "method": "calciteStepperItemSelect",
-      "name": "calciteStepperItemSelect",
+      "method": "calciteInternalStepperItemSelect",
+      "name": "calciteInternalStepperItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -396,8 +466,31 @@ export class StepperItem {
         }
       }
     }, {
-      "method": "calciteStepperItemRegister",
-      "name": "calciteStepperItemRegister",
+      "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",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -423,9 +516,12 @@ export class StepperItem {
   static get watchers() { return [{
       "propName": "disabled",
       "methodName": "disabledWatcher"
+    }, {
+      "propName": "active",
+      "methodName": "activeWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "calciteStepperItemChange",
+      "name": "calciteInternalStepperItemChange",
       "method": "updateActiveItemOnChange",
       "target": "body",
       "capture": false,

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

@@ -140,9 +140,7 @@
 
 :host {
   width: auto;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 .track {
@@ -177,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.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -19,7 +19,9 @@ export class Switch {
     this.disabled = false;
     /** The scale of the switch */
     this.scale = "m";
-    /** True if the switch is initially on
+    /**
+     * True if the switch is initially on
+     *
      * @deprecated use 'checked' instead.
      */
     this.switched = false;

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.82
+ * v1.0.0-beta.85
  */
 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.82
+ * v1.0.0-beta.85
  */
 import { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -15,7 +15,9 @@ export class Tab {
      * Show this tab
      */
     this.active = false;
-    /** @internal Parent tabs component scale value */
+    /**
+     * @internal
+     */
     this.scale = "m";
     this.guid = `calcite-tab-title-${guid()}`;
   }
@@ -34,7 +36,7 @@ export class Tab {
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
   componentDidLoad() {
-    this.calciteTabRegister.emit();
+    this.calciteInternalTabRegister.emit();
   }
   componentWillRender() {
     var _a;
@@ -70,6 +72,7 @@ export class Tab {
         this.active = index === event.detail.tab;
       });
     }
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -88,6 +91,8 @@ export class Tab {
   //
   //--------------------------------------------------------------------------
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   async updateAriaInfo(tabIds = [], titleIds = []) {
@@ -155,7 +160,7 @@ export class Tab {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component scale value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -168,8 +173,8 @@ export class Tab {
     "labeledBy": {}
   }; }
   static get events() { return [{
-      "method": "calciteTabRegister",
-      "name": "calciteTabRegister",
+      "method": "calciteInternalTabRegister",
+      "name": "calciteInternalTabRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -207,10 +212,16 @@ export class Tab {
       "complexType": {
         "signature": "(tabIds?: string[], titleIds?: string[]) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "tabIds"
+              }],
             "text": ""
           }, {
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "titleIds"
+              }],
             "text": ""
           }],
         "references": {
@@ -223,6 +234,12 @@ export class Tab {
       "docs": {
         "text": "",
         "tags": [{
+            "name": "param",
+            "text": "tabIds"
+          }, {
+            "name": "param",
+            "text": "titleIds"
+          }, {
             "name": "internal",
             "text": undefined
           }]

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;
 }
@@ -145,4 +151,15 @@
 :host([bordered][position=below]) .tab-nav-active-indicator-container {
   bottom: 0;
   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.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";
@@ -11,13 +11,21 @@ import { createObserver } from "../../utils/observers";
  */
 export class TabNav {
   constructor() {
-    /** @internal Parent tabs component scale value */
+    /**
+     * @internal
+     */
     this.scale = "m";
-    /** @internal Parent tabs component layout value */
+    /**
+     * @internal
+     */
     this.layout = "inline";
-    /** @internal Parent tabs component position value */
-    this.position = "below";
-    /** @internal Parent tabs component bordered value when layout is "inline" */
+    /**
+     * @internal
+     */
+    this.position = "bottom";
+    /**
+     * @internal
+     */
     this.bordered = false;
     this.animationActiveDuration = 0.3;
     this.resizeObserver = createObserver("resize", () => {
@@ -119,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();
   }
@@ -146,6 +154,8 @@ export class TabNav {
   }
   /**
    * Check for active tabs on register and update selected
+   *
+   * @param e
    */
   updateTabTitles(e) {
     if (e.target.active) {
@@ -160,6 +170,7 @@ export class TabNav {
       this.selectedTab = e.detail.tab;
       e.stopPropagation();
     }
+    e.stopPropagation();
   }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;
@@ -252,7 +263,7 @@ export class TabNav {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component scale value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -278,7 +289,7 @@ export class TabNav {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component layout value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -291,7 +302,7 @@ export class TabNav {
       "mutable": true,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",
@@ -304,13 +315,13 @@ export class TabNav {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component position value"
+            "text": undefined
           }],
         "text": ""
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "\"below\""
+      "defaultValue": "\"bottom\""
     },
     "bordered": {
       "type": "boolean",
@@ -325,7 +336,7 @@ export class TabNav {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component bordered value when layout is \"inline\""
+            "text": undefined
           }],
         "text": ""
       },
@@ -434,13 +445,13 @@ export class TabNav {
       "methodName": "selectedTabElChanged"
     }]; }
   static get listeners() { return [{
-      "name": "calciteTabsFocusPrevious",
+      "name": "calciteInternalTabsFocusPrevious",
       "method": "focusPreviousTabHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTabsFocusNext",
+      "name": "calciteInternalTabsFocusNext",
       "method": "focusNextTabHandler",
       "target": undefined,
       "capture": false,
@@ -458,7 +469,7 @@ export class TabNav {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTabTitleRegister",
+      "name": "calciteInternalTabTitleRegister",
       "method": "updateTabTitles",
       "target": undefined,
       "capture": false,