@esri/calcite-components 1.0.0-beta.91 → 1.0.0-beta.92

package/dist/collection/components/stepper/stepper.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.91
+ * v1.0.0-beta.92
  */
 import { Component, Element, Event, h, Listen, Method, Prop } from "@stencil/core";
 import { focusElement } from "../../utils/dom";
@@ -15,13 +15,13 @@ export class Stepper {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** optionally display a status icon next to the step title */
+    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
     this.icon = false;
-    /** specify the layout of stepper, defaults to horizontal */
+    /** Defines the layout of the component. */
     this.layout = "horizontal";
-    /** optionally display the number next to the step title */
+    /** When true, displays the step number in the `calcite-stepper-item` heading. */
     this.numbered = false;
-    /** specify the scale of stepper, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -123,7 +123,7 @@ export class Stepper {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** set the next step as active */
+  /** Set the next `calcite-stepper-item` as active. */
   async nextStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
     if (typeof enabledStepIndex !== "number") {
@@ -131,7 +131,7 @@ export class Stepper {
     }
     this.updateStep(enabledStepIndex);
   }
-  /** set the previous step as active */
+  /** Set the previous `calcite-stepper-item` as active. */
   async prevStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
     if (typeof enabledStepIndex !== "number") {
@@ -140,7 +140,7 @@ export class Stepper {
     this.updateStep(enabledStepIndex);
   }
   /**
-   * set the requested step as active
+   * Set a specified `calcite-stepper-item` as active.
    *
    * @param step
    */
@@ -150,7 +150,7 @@ export class Stepper {
       this.updateStep(position);
     }
   }
-  /** set the first step as active */
+  /** Set the first `calcite-stepper-item` as active. */
   async startStep() {
     const enabledStepIndex = this.getEnabledStepIndex(0, "next");
     if (typeof enabledStepIndex !== "number") {
@@ -158,7 +158,7 @@ export class Stepper {
     }
     this.updateStep(enabledStepIndex);
   }
-  /** set the last step as active */
+  /** Set the last `calcite-stepper-item` as active. */
   async endStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
     if (typeof enabledStepIndex !== "number") {
@@ -237,7 +237,7 @@ export class Stepper {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "optionally display a status icon next to the step title"
+        "text": "When true, displays a status icon in the `calcite-stepper-item` heading."
       },
       "attribute": "icon",
       "reflect": true,
@@ -263,7 +263,7 @@ export class Stepper {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the layout of stepper, defaults to horizontal"
+        "text": "Defines the layout of the component."
       },
       "attribute": "layout",
       "reflect": true,
@@ -281,7 +281,7 @@ export class Stepper {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "optionally display the number next to the step title"
+        "text": "When true, displays the step number in the `calcite-stepper-item` heading."
       },
       "attribute": "numbered",
       "reflect": true,
@@ -304,7 +304,7 @@ export class Stepper {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of stepper, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -319,7 +319,7 @@ export class Stepper {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "This event fires when the active stepper item has changed."
+        "text": "Fires when the active `calcite-stepper-item` changes."
       },
       "complexType": {
         "original": "StepperItemChangeEventDetail",
@@ -342,7 +342,7 @@ export class Stepper {
             "name": "internal",
             "text": undefined
           }],
-        "text": "This event fires when the active stepper item has changed."
+        "text": "Fires when the active `calcite-stepper-item` changes."
       },
       "complexType": {
         "original": "StepperItemChangeEventDetail",
@@ -368,7 +368,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the next step as active",
+        "text": "Set the next `calcite-stepper-item` as active.",
         "tags": []
       }
     },
@@ -384,7 +384,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the previous step as active",
+        "text": "Set the previous `calcite-stepper-item` as active.",
         "tags": []
       }
     },
@@ -406,7 +406,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the requested step as active",
+        "text": "Set a specified `calcite-stepper-item` as active.",
         "tags": [{
             "name": "param",
             "text": "step"
@@ -425,7 +425,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the first step as active",
+        "text": "Set the first `calcite-stepper-item` as active.",
         "tags": []
       }
     },
@@ -441,7 +441,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the last step as active",
+        "text": "Set the last `calcite-stepper-item` as active.",
         "tags": []
       }
     }

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

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none !important;
+  display: none;
 }
 
 :host([layout=horizontal][disabled]) .stepper-item-header,  :host([disabled]) {
@@ -259,42 +259,42 @@
   color: var(--calcite-ui-danger);
 }
 
-:host(:hover:not([disabled]):not([active])) .container, 
-:host(:focus:not([disabled]):not([active])) .container {
+:host(:hover:not([disabled]):not([selected])) .container, 
+:host(:focus:not([disabled]):not([selected])) .container {
   border-block-start-color: var(--calcite-ui-brand);
 }
-:host(:hover:not([disabled]):not([active])) .container .stepper-item-heading, 
-:host(:focus:not([disabled]):not([active])) .container .stepper-item-heading {
+:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading, 
+:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading {
   color: var(--calcite-ui-text-1);
 }
-:host(:hover:not([disabled]):not([active])) .container .stepper-item-description, 
-:host(:focus:not([disabled]):not([active])) .container .stepper-item-description {
+:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description, 
+:host(:focus:not([disabled]):not([selected])) .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([selected])) .container, 
+:host([error]:focus:not([disabled]):not([selected])) .container {
   border-block-start-color: var(--calcite-ui-danger-hover);
 }
 
-:host([active]) .container {
+:host([selected]) .container {
   border-block-start-color: var(--calcite-ui-brand);
 }
-:host([active]) .container .stepper-item-heading {
+:host([selected]) .container .stepper-item-heading {
   color: var(--calcite-ui-text-1);
 }
-:host([active]) .container .stepper-item-description {
+:host([selected]) .container .stepper-item-description {
   color: var(--calcite-ui-text-2);
 }
-:host([active]) .container .stepper-item-number {
+:host([selected]) .container .stepper-item-number {
   color: var(--calcite-ui-brand);
 }
-:host([active]) .container .stepper-item-icon {
+:host([selected]) .container .stepper-item-icon {
   color: var(--calcite-ui-brand);
   opacity: 1;
 }
 
-:host([active]) .container .stepper-item-content {
+:host([selected]) .container .stepper-item-content {
   display: flex;
 }
 
@@ -326,8 +326,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([selected])) .container, 
+:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container {
   border-color: var(--calcite-ui-brand);
 }
 
@@ -335,20 +335,20 @@
   border-color: var(--calcite-ui-danger);
 }
 
-:host([layout=vertical][active]) .container {
+:host([layout=vertical][selected]) .container {
   border-color: var(--calcite-ui-brand);
 }
-:host([layout=vertical][active]) .container .stepper-item-content ::slotted(:last-child) {
+:host([layout=vertical][selected]) .container .stepper-item-content ::slotted(:last-child) {
   margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
 }
 
-:host([layout=vertical]:hover:not([disabled]):not([active])) .container,
-:host([layout=vertical]:focus:not([disabled]):not([active])) .container {
+:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,
+:host([layout=vertical]:focus:not([disabled]):not([selected])) .container {
   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([selected])) .container, 
+:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container {
   border-color: var(--calcite-ui-danger-hover);
 }
 
@@ -381,7 +381,7 @@
   text-align: start;
 }
 
-:host([layout=horizontal][active]) .stepper-item-content {
+:host([layout=horizontal][selected]) .stepper-item-content {
   grid-area: 2/1/2/-1;
 }
 
@@ -399,8 +399,8 @@
   border-color: rgba(0, 122, 194, 0.5);
 }
 
-:host([layout=horizontal][complete]:hover:not([disabled]):not([active])) .stepper-item-header, 
-:host([layout=horizontal][complete]:focus:not([disabled]):not([active])) .stepper-item-header {
+:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header, 
+:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header {
   border-color: var(--calcite-ui-brand);
 }
 
@@ -408,17 +408,17 @@
   border-color: var(--calcite-ui-danger);
 }
 
-:host([layout=horizontal][active]) .stepper-item-header {
+:host([layout=horizontal][selected]) .stepper-item-header {
   border-color: var(--calcite-ui-brand);
 }
 
-:host([layout=horizontal]:hover:not([disabled]):not([active])) .stepper-item-header,
-:host([layout=horizontal]:focus:not([disabled]):not([active])) .stepper-item-header {
+:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,
+:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header {
   border-color: rgba(0, 122, 194, 0.5);
 }
 
-:host([layout=horizontal][error]:hover:not([disabled]):not([active])) .stepper-item-header, 
-:host([layout=horizontal][error]:focus:not([disabled]):not([active])) .stepper-item-header {
+:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header, 
+:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header {
   border-color: var(--calcite-ui-danger-hover);
 }
 
@@ -433,17 +433,17 @@
     outline-color: canvasText;
   }
 
-  :host([active]) .container {
+  :host([selected]) .container {
     border-block-start-color: highlight;
   }
-  :host([active]) .container .stepper-item-number {
+  :host([selected]) .container .stepper-item-number {
     color: highlight;
   }
-  :host([active]) .container .stepper-item-icon {
+  :host([selected]) .container .stepper-item-icon {
     color: highlight;
   }
 
-  :host([layout=vertical][active]) .container {
+  :host([layout=vertical][selected]) .container {
     border-color: highlight;
   }
 }

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.91
+ * v1.0.0-beta.92
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -16,25 +16,33 @@ export class StepperItem {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** is the step active */
+    /**
+     *  is the step active
+     *
+     * @deprecated Use selected instead.
+     */
     this.active = false;
+    /**
+     * When true, step is selected
+     */
+    this.selected = false;
     /** has the step been completed */
     this.complete = false;
-    /** does the step contain an error that needs to be resolved by the user */
+    /** When true, the component contains an error that requires resolution from the user. */
     this.error = false;
-    /** is the step disabled and not navigable to by a user */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     // internal props inherited from wrapping calcite-stepper
-    /** pass a title for the stepper item */
+    /** Defines the layout of the component. */
     /** @internal */
     this.layout = "horizontal";
-    /** should the items display an icon based on status */
+    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
     /** @internal */
     this.icon = false;
-    /** optionally display the step number next to the title and subtitle */
+    /** When true, displays the step number in the `calcite-stepper-item` heading. */
     /** @internal */
     this.numbered = false;
-    /** the scale of the item */
+    /** Specifies the size of the component. */
     /** @internal */
     this.scale = "m";
     //--------------------------------------------------------------------------
@@ -62,6 +70,15 @@ export class StepperItem {
         }
       }
     };
+    this.handleItemClick = (event) => {
+      if (this.layout === "horizontal" &&
+        event
+          .composedPath()
+          .some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("stepper-item-content"); })) {
+        return;
+      }
+      this.emitUserRequestedItem();
+    };
     this.emitUserRequestedItem = () => {
       this.emitRequestedItem();
       if (!this.disabled) {
@@ -80,20 +97,33 @@ export class StepperItem {
       }
     };
   }
-  // watch for removal of disabled to register step
-  disabledWatcher() {
-    this.registerStepperItem();
+  activeHandler(value) {
+    this.selected = value;
   }
-  activeWatcher(active) {
-    if (active) {
+  selectedHandler(value) {
+    this.active = value;
+    if (this.selected) {
       this.emitRequestedItem();
     }
   }
+  // watch for removal of disabled to register step
+  disabledWatcher() {
+    this.registerStepperItem();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    const { selected, active } = this;
+    if (selected) {
+      this.active = selected;
+    }
+    else if (active) {
+      this.selected = active;
+    }
+  }
   componentWillLoad() {
     this.icon = getElementProp(this.el, "icon", false);
     this.numbered = getElementProp(this.el, "numbered", false);
@@ -102,7 +132,7 @@ export class StepperItem {
     this.parentStepperEl = this.el.parentElement;
     this.itemPosition = this.getItemPosition();
     this.registerStepperItem();
-    if (this.active) {
+    if (this.selected) {
       this.emitRequestedItem();
     }
   }
@@ -110,7 +140,7 @@ export class StepperItem {
     updateHostInteraction(this, true);
   }
   render() {
-    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.emitUserRequestedItem, onKeyDown: this.keyDownHandler },
+    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.handleItemClick, onKeyDown: this.keyDownHandler },
       h("div", { class: "container" },
         h("div", { class: "stepper-item-header", ref: (el) => (this.headerEl = el), tabIndex: 
           /* additional tab index logic needed because of display: contents */
@@ -133,8 +163,8 @@ export class StepperItem {
   updateActiveItemOnChange(event) {
     if (event.target === this.parentStepperEl ||
       event.composedPath().includes(this.parentStepperEl)) {
-      this.activePosition = event.detail.position;
-      this.determineActiveItem();
+      this.selectedPosition = event.detail.position;
+      this.determineSelectedItem();
     }
   }
   //--------------------------------------------------------------------------
@@ -147,7 +177,7 @@ export class StepperItem {
     (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   renderIcon() {
-    const path = this.active
+    const path = this.selected
       ? "circleF"
       : this.error
         ? "exclamationMarkCircleF"
@@ -156,8 +186,8 @@ export class StepperItem {
           : "circle";
     return h("calcite-icon", { class: "stepper-item-icon", icon: path, scale: "s" });
   }
-  determineActiveItem() {
-    this.active = !this.disabled && this.itemPosition === this.activePosition;
+  determineSelectedItem() {
+    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;
   }
   registerStepperItem() {
     this.calciteInternalStepperItemRegister.emit({
@@ -188,13 +218,34 @@ export class StepperItem {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use selected instead."
+          }],
         "text": "is the step active"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, step is selected"
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "complete": {
       "type": "boolean",
       "mutable": false,
@@ -225,7 +276,7 @@ export class StepperItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "does the step contain an error that needs to be resolved by the user"
+        "text": "When true, the component contains an error that requires resolution from the user."
       },
       "attribute": "error",
       "reflect": false,
@@ -243,7 +294,7 @@ export class StepperItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "is the step disabled and not navigable to by a user"
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -262,9 +313,9 @@ export class StepperItem {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use heading instead"
+            "text": "use \"heading\" instead."
           }],
-        "text": "pass a title for the stepper item"
+        "text": "The component header text."
       },
       "attribute": "item-title",
       "reflect": false
@@ -281,7 +332,7 @@ export class StepperItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "stepper item heading"
+        "text": "The component header text."
       },
       "attribute": "heading",
       "reflect": false
@@ -299,9 +350,9 @@ export class StepperItem {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use description instead"
+            "text": "use \"description\" instead."
           }],
-        "text": "pass a title for the stepper item"
+        "text": "A description for the component. Displays below the header text."
       },
       "attribute": "item-subtitle",
       "reflect": false
@@ -318,7 +369,7 @@ export class StepperItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "stepper item description"
+        "text": "A description for the component. Displays below the header text."
       },
       "attribute": "description",
       "reflect": false
@@ -534,11 +585,14 @@ export class StepperItem {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "active",
+      "methodName": "activeHandler"
+    }, {
+      "propName": "selected",
+      "methodName": "selectedHandler"
+    }, {
       "propName": "disabled",
       "methodName": "disabledWatcher"
-    }, {
-      "propName": "active",
-      "methodName": "activeWatcher"
     }]; }
   static get listeners() { return [{
       "name": "calciteInternalStepperItemChange",

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

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none !important;
+  display: none;
 }
 
 :host([disabled]) {