@esri/calcite-components 1.0.0-beta.64 → 1.0.0-beta.68

package/dist/collection/components/calcite-sortable-list/calcite-sortable-list.css

@@ -86,4 +86,17 @@
 
 :host {
   display: flex;
+}
+
+.container {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.container--vertical {
+  flex-direction: column;
+}
+
+.container--horizontal {
+  flex-direction: row;
 }

package/dist/collection/components/calcite-sortable-list/calcite-sortable-list.js

@@ -1,8 +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.
+ */
 import Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
+import { CSS } from "./resources";
 /**
- * @slot - A slot for adding sortable items
+ * @slot - A slot for adding sortable items.
  */
 export class CalciteSortableList {
   constructor() {
@@ -10,6 +15,10 @@ export class CalciteSortableList {
      * The selector for the handle elements.
      */
     this.handleSelector = "calcite-handle";
+    /**
+     * Indicates the horizontal or vertical orientation of the component.
+     */
+    this.layout = "vertical";
     /**
      * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
      */
@@ -133,7 +142,14 @@ export class CalciteSortableList {
   //
   // --------------------------------------------------------------------------
   render() {
-    return h("slot", null);
+    const { layout } = this;
+    const horizontal = layout === "horizontal" || false;
+    return (h("div", { class: {
+        [CSS.container]: true,
+        [CSS.containerVertical]: !horizontal,
+        [CSS.containerHorizontal]: horizontal
+      } },
+      h("slot", null)));
   }
   static get is() { return "calcite-sortable-list"; }
   static get encapsulation() { return "shadow"; }
@@ -196,6 +212,29 @@ export class CalciteSortableList {
       "reflect": false,
       "defaultValue": "\"calcite-handle\""
     },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Layout",
+        "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
+        "references": {
+          "Layout": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the horizontal or vertical orientation of the component."
+      },
+      "attribute": "layout",
+      "reflect": false,
+      "defaultValue": "\"vertical\""
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/calcite-sortable-list/resources.js

@@ -1,3 +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.
+ */
 export const CSS = {
-  sortItem: "sort-item"
+  sortItem: "sort-item",
+  container: "container",
+  containerHorizontal: "container--horizontal",
+  containerVertical: "container--vertical"
 };

package/dist/collection/components/calcite-split-button/calcite-split-button.js

@@ -1,6 +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.
+ */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { CSS } from "./resources";
 import { getElementDir } from "../../utils/dom";
+/**
+ * @slot - A slot for adding `calcite-dropdown` content.
+ */
 export class CalciteSplitButton {
   constructor() {
     /** specify the appearance style of the button, defaults to solid. */

package/dist/collection/components/calcite-split-button/resources.js

@@ -1,3 +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.
+ */
 export const CSS = {
   container: "split-button__container",
   dividerContainer: "split-button__divider-container",

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

@@ -1,5 +1,12 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getKey } from "../../utils/key";
+/**
+ * @slot - A slot for adding `calcite-stepper-item`s.
+ */
 export class CalciteStepper {
   constructor() {
     //--------------------------------------------------------------------------

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

@@ -89,13 +89,13 @@
   --calcite-stepper-item-spacing-unit-m: 0.75rem;
   --calcite-stepper-item-spacing-unit-l: 1rem;
   font-size: var(--calcite-font-size--1);
-  line-height: 1.375;
+  line-height: 1rem;
   margin-right: 0.25rem;
 }
 
 :host([scale=s]) .stepper-item-subtitle {
   font-size: var(--calcite-font-size--2);
-  line-height: 1.375;
+  line-height: 1rem;
 }
 
 :host([scale=m]) {
@@ -103,13 +103,13 @@
   --calcite-stepper-item-spacing-unit-m: 1rem;
   --calcite-stepper-item-spacing-unit-l: 1.25rem;
   font-size: var(--calcite-font-size-0);
-  line-height: 1.375;
+  line-height: 1.25rem;
   margin-right: 0.5rem;
 }
 
 :host([scale=m]) .stepper-item-subtitle {
   font-size: var(--calcite-font-size--1);
-  line-height: 1.375;
+  line-height: 1rem;
 }
 
 :host([scale=l]) {
@@ -117,13 +117,13 @@
   --calcite-stepper-item-spacing-unit-m: 1.25rem;
   --calcite-stepper-item-spacing-unit-l: 1.5rem;
   font-size: var(--calcite-font-size-1);
-  line-height: 1.375;
+  line-height: 1.5rem;
   margin-right: 0.75rem;
 }
 
 :host([scale=l]) .stepper-item-subtitle {
   font-size: var(--calcite-font-size-0);
-  line-height: 1.375;
+  line-height: 1.25rem;
 }
 
 :host {
@@ -131,6 +131,7 @@
   flex-grow: 1;
   flex-direction: column;
   position: relative;
+  margin-bottom: var(--calcite-stepper-item-spacing-unit-s);
 }
 
 :host .container {
@@ -354,7 +355,6 @@
   margin-right: 0;
   margin-top: 0;
   padding-left: var(--calcite-stepper-item-spacing-unit-l);
-  margin-bottom: var(--calcite-stepper-item-spacing-unit-s);
 }
 
 :host([layout=vertical]) .container .stepper-item-icon {

package/dist/collection/components/calcite-stepper-item/calcite-stepper-item.js

@@ -1,7 +1,14 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding custom content.
+ */
 export class CalciteStepperItem {
   constructor() {
     //--------------------------------------------------------------------------

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

@@ -194,23 +194,23 @@
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }
 
-:host([switched]) .track {
+:host([checked]) .track {
   background-color: var(--calcite-ui-brand);
   border-color: var(--calcite-ui-brand-hover);
 }
 
-:host([switched]) .handle {
+:host([checked]) .handle {
   left: auto;
   border-color: var(--calcite-ui-brand);
   right: -1px;
 }
 
-:host([switched]:hover) .track {
+:host([checked]:hover) .track {
   background-color: var(--calcite-ui-brand);
   border-color: var(--calcite-ui-brand-hover);
 }
 
-:host([switched]:hover) .handle {
+:host([checked]:hover) .handle {
   border-color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
@@ -220,17 +220,17 @@
   right: -1px;
 }
 
-:host([switched]) .calcite--rtl .handle {
+:host([checked]) .calcite--rtl .handle {
   right: auto;
   left: -1px;
 }
 
-:host([switched]:active) .calcite--rtl .handle {
+:host([checked]:active) .calcite--rtl .handle {
   right: auto;
   left: -1px;
 }
 
-:host([switched]:focus) .calcite--rtl .handle {
+:host([checked]:focus) .calcite--rtl .handle {
   right: auto;
   left: -1px;
 }

package/dist/collection/components/calcite-switch/calcite-switch.js

@@ -1,9 +1,14 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { focusElement, getElementDir, hasLabel } from "../../utils/dom";
+import { getElementDir } from "../../utils/dom";
 import { hiddenInputStyle } from "../../utils/form";
 import { guid } from "../../utils/guid";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 export class CalciteSwitch {
   constructor() {
     //--------------------------------------------------------------------------
@@ -15,14 +20,16 @@ export class CalciteSwitch {
     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;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    //--------------------------------------------------------------------------
+    /** True if the switch is initially on */
+    this.checked = false;
     this.inputEl = document.createElement("input");
+    this.clickHandler = () => {
+      this.toggle();
+    };
   }
   disabledWatcher(newDisabled) {
     this.inputEl.disabled = newDisabled;
@@ -31,8 +38,11 @@ export class CalciteSwitch {
   nameChanged(newName) {
     this.inputEl.name = newName;
   }
-  switchedWatcher(newSwitched) {
-    this.inputEl.checked = newSwitched;
+  switchedWatcher(switched) {
+    this.checked = switched;
+  }
+  checkedWatcher(checked) {
+    this.inputEl.checked = checked;
   }
   //--------------------------------------------------------------------------
   //
@@ -41,15 +51,21 @@ export class CalciteSwitch {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.inputEl);
+    this.el.focus();
   }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  onLabelClick() {
+    if (!this.disabled) {
+      this.toggle();
+      this.setFocus();
+    }
+  }
   setupInput() {
-    this.switched && this.inputEl.setAttribute("checked", "");
+    this.checked && this.inputEl.setAttribute("checked", "");
     this.inputEl.disabled = this.disabled;
     this.inputEl.id = `${this.guid}-input`;
     this.inputEl.name = this.name;
@@ -61,9 +77,11 @@ export class CalciteSwitch {
     this.el.appendChild(this.inputEl);
   }
   toggle() {
-    this.switched = !this.switched;
+    this.checked = !this.checked;
     this.calciteSwitchChange.emit({
-      switched: this.switched
+      // todo: We should remove emmitting redudant props in event payload.
+      // https://github.com/Esri/calcite-components/issues/3163
+      switched: this.checked
     });
   }
   //--------------------------------------------------------------------------
@@ -71,24 +89,6 @@ export class CalciteSwitch {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (!this.disabled &&
-      !this.el.contains(e.detail.interactedEl) &&
-      hasLabel(e.detail.labelEl, this.el)) {
-      this.el.focus();
-    }
-    else {
-      return;
-    }
-  }
-  onClick(e) {
-    // prevent duplicate click events that occur
-    // when the component is wrapped in a label and checkbox is clicked
-    if ((!this.disabled && this.el.closest("label") && e.target === this.inputEl) ||
-      (!this.el.closest("label") && e.target === this.el)) {
-      this.toggle();
-    }
-  }
   keyDownHandler(e) {
     const key = getKey(e.key);
     if (!this.disabled && (key === " " || key === "Enter")) {
@@ -100,6 +100,12 @@ export class CalciteSwitch {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+  }
   componentWillLoad() {
     this.guid = this.el.id || `calcite-switch-${guid()}`;
     this.tabindex = this.el.getAttribute("tabindex") || this.disabled ? -1 : 0;
@@ -112,8 +118,8 @@ export class CalciteSwitch {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    return (h(Host, { tabindex: this.tabindex },
-      h("div", { "aria-checked": this.switched.toString(), class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h(Host, { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), onClick: this.clickHandler, role: "switch", tabindex: this.tabindex },
+      h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
         h("div", { class: "track" },
           h("div", { class: "handle" })))));
   }
@@ -144,6 +150,23 @@ export class CalciteSwitch {
       "reflect": true,
       "defaultValue": "false"
     },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Applies to the aria-label attribute on the switch"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -185,6 +208,27 @@ export class CalciteSwitch {
       "defaultValue": "\"m\""
     },
     "switched": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "use 'checked' instead.",
+            "name": "deprecated"
+          }],
+        "text": "True if the switch is initially on"
+      },
+      "attribute": "switched",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checked": {
       "type": "boolean",
       "mutable": true,
       "complexType": {
@@ -198,7 +242,7 @@ export class CalciteSwitch {
         "tags": [],
         "text": "True if the switch is initially on"
       },
-      "attribute": "switched",
+      "attribute": "checked",
       "reflect": true,
       "defaultValue": "false"
     },
@@ -232,7 +276,7 @@ export class CalciteSwitch {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires when the switched value has changed."
+        "text": "Fires when the checked value has changed."
       },
       "complexType": {
         "original": "any",
@@ -268,20 +312,11 @@ export class CalciteSwitch {
     }, {
       "propName": "switched",
       "methodName": "switchedWatcher"
+    }, {
+      "propName": "checked",
+      "methodName": "checkedWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "keydown",
       "method": "keyDownHandler",
       "target": undefined,

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

@@ -90,7 +90,6 @@
 
 :host {
   display: none;
-  z-index: 10;
   color: var(--calcite-ui-text-3);
 }
 

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

@@ -1,6 +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.
+ */
 import { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { nodeListToArray } from "../../utils/dom";
+/**
+ * @slot - A slot for adding custom content.
+ */
 export class CalciteTab {
   constructor() {
     /**

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

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

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

@@ -85,7 +85,6 @@
 }
 
 :host {
-  z-index: 20;
   position: relative;
   display: flex;
 }

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

@@ -1,5 +1,12 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";
+/**
+ * @slot - A slot for adding `calcite-tab-title`s.
+ */
 export class CalciteTabNav {
   constructor() {
     /** @internal Parent tabs component scale value */

package/dist/collection/components/calcite-tab-title/calcite-tab-title.js

@@ -1,9 +1,16 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Prop, Event, Listen, Element, Method, h, Host, State, Build, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
+/**
+ * @slot - A slot for adding text.
+ */
 export class CalciteTabTitle {
   constructor() {
     //--------------------------------------------------------------------------

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

@@ -1,7 +1,12 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Prop, h, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
 /**
- * @slot tab-nav - a slot for adding a tab navigation component
+ * @slot - A slot for adding `calcite-tab`s.
+ * @slot tab-nav - A slot for adding a tab navigation component.
  */
 export class CalciteTabs {
   constructor() {

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

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/components/calcite-tabs/resources.js

@@ -1,3 +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.
+ */
 export const SLOTS = {
   tabNav: "tab-nav"
 };

package/dist/collection/components/calcite-tile/calcite-tile.css

@@ -113,6 +113,15 @@
   padding: 0;
 }
 
+:host([icon][heading]:not([description])) .icon {
+  display: flex;
+  justify-content: center;
+}
+
+:host([icon][heading]:not([description])) .large-visual {
+  text-align: center;
+}
+
 :host([disabled]) {
   opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: none;

package/dist/collection/components/calcite-tile/calcite-tile.js

@@ -1,3 +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.
+ */
 import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";

package/dist/collection/components/calcite-tile/resources.js

@@ -1,3 +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.
+ */
 export const SLOTS = {
   contentStart: "content-start",
   contentEnd: "content-end"