@esri/calcite-components 1.0.0-next.532 → 1.0.0-next.533

package/dist/collection/components/shell/shell.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.532
+ * v1.0.0-next.533
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-center-row/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.532
+ * v1.0.0-next.533
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.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.532
+ * v1.0.0-next.533
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-panel/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.532
+ * v1.0.0-next.533
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/shell-panel/shell-panel.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.532
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";

package/dist/collection/components/slider/slider.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.532
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/sortable-list/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.532
+ * v1.0.0-next.533
  */
 export const CSS = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.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.532
+ * v1.0.0-next.533
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";

package/dist/collection/components/split-button/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.532
+ * v1.0.0-next.533
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.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.532
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/stepper/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.532
+ * v1.0.0-next.533
  */
 export {};

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

@@ -94,10 +94,7 @@
   flex-direction: column;
 }
 
-:host ::slotted(.calcite-stepper-content) {
-  display: flex;
-  inline-size: 100%;
-  min-inline-size: 100%;
-  flex-direction: column;
-  flex-wrap: wrap;
+:host([layout=horizontal]) {
+  display: grid;
+  grid-template-areas: "items" "content";
 }

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

@@ -1,9 +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.
- * v1.0.0-next.532
+ * v1.0.0-next.533
  */
-import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Listen, Method, Prop } from "@stencil/core";
+import { focusElement } from "../../utils/dom";
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
  */
@@ -33,15 +34,6 @@ export class Stepper {
     /** list of enabled Stepper items */
     this.enabledItems = [];
   }
-  // watch for removal of disabled to register step
-  contentWatcher() {
-    if (this.layout === "horizontal") {
-      if (!this.stepperContentContainer && this.requestedContent) {
-        this.addHorizontalContentContainer();
-      }
-      this.updateContent(this.requestedContent);
-    }
-  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -55,13 +47,15 @@ export class Stepper {
       });
     }
   }
-  componentWillLoad() {
-    if (this.layout === "horizontal" && !this.stepperContentContainer) {
-      this.addHorizontalContentContainer();
-    }
-  }
   render() {
-    return h("slot", null);
+    return (h("slot", { onSlotchange: (event) => {
+        const items = event.currentTarget
+          .assignedElements()
+          .filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
+        const spacing = Array(items.length).fill("1fr").join(" ");
+        this.el.style.gridTemplateAreas = spacing;
+        this.el.style.gridTemplateColumns = spacing;
+      } }));
   }
   //--------------------------------------------------------------------------
   //
@@ -104,33 +98,25 @@ export class Stepper {
   registerItem(event) {
     const item = event.target;
     const { content, position } = event.detail;
-    if (content && item.active) {
-      this.requestedContent = content;
-    }
     this.itemMap.set(item, { position, content });
     this.items = this.sortItems();
     this.enabledItems = this.filterItems();
     event.stopPropagation();
   }
   updateItem(event) {
-    const { content, position } = event.detail;
-    if (content) {
-      this.requestedContent = content;
-    }
+    const { position } = event.detail;
     if (typeof position === "number") {
       this.currentPosition = position;
     }
     this.calciteInternalStepperItemChange.emit({
       position
     });
-    event.stopPropagation();
   }
   handleUserRequestedStepperItemSelect(event) {
     const { position } = event.detail;
     this.calciteStepperItemChange.emit({
       position
     });
-    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -196,47 +182,33 @@ export class Stepper {
       ? newIndex
       : null;
   }
-  addHorizontalContentContainer() {
-    this.stepperContentContainer = document.createElement("div");
-    this.stepperContentContainer.classList.add("calcite-stepper-content");
-    this.el.insertAdjacentElement("beforeend", this.stepperContentContainer);
-  }
   updateStep(position) {
-    var _a;
-    const { itemMap, items } = this;
     this.currentPosition = position;
-    const content = (_a = itemMap.get(items[position])) === null || _a === void 0 ? void 0 : _a.content;
-    if (content) {
-      this.requestedContent = content;
-    }
     this.calciteInternalStepperItemChange.emit({
       position
     });
   }
   focusFirstItem() {
     const firstItem = this.enabledItems[0];
-    this.focusElement(firstItem);
+    focusElement(firstItem);
   }
   focusLastItem() {
     const lastItem = this.enabledItems[this.enabledItems.length - 1];
-    this.focusElement(lastItem);
+    focusElement(lastItem);
   }
   focusNextItem(e) {
     const index = this.itemIndex(e);
     const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
-    this.focusElement(nextItem);
+    focusElement(nextItem);
   }
   focusPrevItem(e) {
     const index = this.itemIndex(e);
     const prevItem = this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
-    this.focusElement(prevItem);
+    focusElement(prevItem);
   }
   itemIndex(e) {
     return this.enabledItems.indexOf(e);
   }
-  focusElement(item) {
-    item === null || item === void 0 ? void 0 : item.focus();
-  }
   sortItems() {
     const { itemMap } = this;
     return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a).position - itemMap.get(b).position);
@@ -244,10 +216,6 @@ export class Stepper {
   filterItems() {
     return this.items.filter((item) => !item.disabled);
   }
-  updateContent(content) {
-    this.stepperContentContainer.innerHTML = "";
-    this.stepperContentContainer.append(...content);
-  }
   static get is() { return "calcite-stepper"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -341,28 +309,6 @@ export class Stepper {
       "attribute": "scale",
       "reflect": true,
       "defaultValue": "\"m\""
-    },
-    "requestedContent": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Node[]",
-        "resolved": "Node[]",
-        "references": {
-          "Node": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      }
     }
   }; }
   static get events() { return [{
@@ -501,10 +447,6 @@ export class Stepper {
     }
   }; }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "requestedContent",
-      "methodName": "contentWatcher"
-    }]; }
   static get listeners() { return [{
       "name": "calciteInternalStepperItemKeyEvent",
       "method": "calciteInternalStepperItemKeyEvent",

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

@@ -293,6 +293,13 @@
   opacity: 1;
 }
 
+:host([active]) .container .stepper-item-content {
+  display: flex;
+}
+:host([active]) .container .stepper-item-content ::slotted(:last-child) {
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
+}
+
 :host([layout=vertical]) .container {
   margin-inline: 0px;
   margin-block-start: 0px;
@@ -317,13 +324,6 @@
   padding: 0px;
 }
 
-:host([layout=vertical][active]) .container .stepper-item-content {
-  display: flex;
-}
-:host([layout=vertical][active]) .container .stepper-item-content ::slotted(:last-child) {
-  margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
-}
-
 :host([layout=vertical][complete]) .container {
   border-color: rgba(0, 122, 194, 0.5);
 }
@@ -351,6 +351,75 @@
   border-color: var(--calcite-ui-danger-hover);
 }
 
+:host([layout=horizontal]) {
+  display: contents;
+}
+:host([layout=horizontal]) .container {
+  display: contents;
+}
+:host([layout=horizontal]) .stepper-item-header {
+  border-width: 0px;
+  border-block-start-width: 2px;
+  border-style: solid;
+  border-color: var(--calcite-ui-border-3);
+  outline-color: transparent;
+  grid-row: items;
+  margin-inline-end: 0.5rem;
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
+}
+:host([layout=horizontal]) .stepper-item-header:focus {
+  outline: 2px solid var(--calcite-ui-brand);
+  outline-offset: 2px;
+}
+:host([layout=horizontal]) .stepper-item-content {
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  padding-block: 0;
+  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+  text-align: start;
+}
+
+:host([layout=horizontal][active]) .stepper-item-content {
+  grid-area: 2/1/2/-1;
+}
+
+:host([layout=horizontal][scale=s]) .stepper-item-header {
+  margin-inline-end: 0.25rem;
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
+}
+
+:host([layout=horizontal][scale=l]) .stepper-item-header {
+  margin-inline-end: 0.75rem;
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
+}
+
+:host([layout=horizontal][complete]) .stepper-item-header {
+  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 {
+  border-color: var(--calcite-ui-brand);
+}
+
+:host([layout=horizontal][error]) .stepper-item-header {
+  border-color: var(--calcite-ui-danger);
+}
+
+:host([layout=horizontal][active]) .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 {
+  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 {
+  border-color: var(--calcite-ui-danger-hover);
+}
+
 @media (forced-colors: active) {
   :host .container {
     outline-width: 0;

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

@@ -1,9 +1,9 @@
 /*!
  * 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.532
+ * v1.0.0-next.533
  */
-import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -74,19 +74,13 @@ export class StepperItem {
     this.emitRequestedItem = () => {
       if (!this.disabled) {
         const position = this.itemPosition;
-        const content = this.itemContent;
         this.calciteInternalStepperItemSelect.emit({
-          position,
-          content
+          position
         });
       }
     };
-    this.setItemContent = (event) => {
+    this.setItemContent = () => {
       this.itemPosition = this.getItemPosition();
-      const itemContent = event.target.assignedNodes({ flatten: true });
-      if (itemContent.length) {
-        this.itemContent = itemContent;
-      }
       this.registerStepperItem();
       if (this.active) {
         this.emitRequestedItem();
@@ -120,7 +114,9 @@ export class StepperItem {
   render() {
     return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.emitUserRequestedItem, onKeyDown: this.keyDownHandler },
       h("div", { class: "container" },
-        h("div", { class: "stepper-item-header" },
+        h("div", { class: "stepper-item-header", ref: (el) => (this.headerEl = el), tabIndex: 
+          /* additional tab index logic needed because of display: contents */
+          this.layout === "horizontal" && !this.disabled ? 0 : null },
           this.icon ? this.renderIcon() : null,
           this.numbered ? (h("div", { class: "stepper-item-number" },
             this.getItemPosition() + 1,
@@ -142,7 +138,15 @@ export class StepperItem {
       this.activePosition = event.detail.position;
       this.determineActiveItem();
     }
-    event.stopPropagation();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  async setFocus() {
+    var _a;
+    (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   renderIcon() {
     const path = this.active
@@ -159,8 +163,7 @@ export class StepperItem {
   }
   registerStepperItem() {
     this.calciteInternalStepperItemRegister.emit({
-      position: this.itemPosition,
-      content: this.itemContent
+      position: this.itemPosition
     });
   }
   getItemPosition() {
@@ -512,6 +515,24 @@ export class StepperItem {
         }
       }
     }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "disabled",

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.532
+ * v1.0.0-next.533
  */
 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.532
+ * v1.0.0-next.533
  */
 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.532
+ * v1.0.0-next.533
  */
 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.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.532
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";

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

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

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

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

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