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

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

@@ -123,7 +123,7 @@
   flex-grow: 1;
   flex-direction: column;
   align-self: flex-start;
-  margin-bottom: var(--calcite-stepper-item-spacing-unit-s);
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
 }
 
 :host .container {
@@ -133,7 +133,7 @@
   cursor: pointer;
   flex-direction: column;
   border-width: 0px;
-  border-top-width: 2px;
+  border-block-start-width: 2px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   color: var(--calcite-ui-text-3);
@@ -178,7 +178,7 @@
 
 :host .stepper-item-content {
   display: none;
-  width: 100%;
+  inline-size: 100%;
   flex-direction: column;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
@@ -186,9 +186,9 @@
 
 :host .stepper-item-icon {
   margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
-  margin-top: 1px;
+  margin-block-start: 1px;
   display: inline-flex;
-  height: 0.75rem;
+  block-size: 0.75rem;
   flex-shrink: 0;
   align-self: flex-start;
   color: var(--calcite-ui-text-3);
@@ -206,11 +206,11 @@
 :host .stepper-item-heading, 
 :host .stepper-item-description {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 }
 
 :host .stepper-item-heading {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
 }
@@ -248,7 +248,7 @@
 }
 
 :host([error]) .container {
-  border-top-color: var(--calcite-ui-danger);
+  border-block-start-color: var(--calcite-ui-danger);
 }
 :host([error]) .container .stepper-item-number {
   color: var(--calcite-ui-danger);
@@ -260,7 +260,7 @@
 
 :host(:hover:not([disabled]):not([active])) .container, 
 :host(:focus:not([disabled]):not([active])) .container {
-  border-top-color: var(--calcite-ui-brand);
+  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 {
@@ -273,11 +273,11 @@
 
 :host([error]:hover:not([disabled]):not([active])) .container, 
 :host([error]:focus:not([disabled]):not([active])) .container {
-  border-top-color: var(--calcite-ui-danger-hover);
+  border-block-start-color: var(--calcite-ui-danger-hover);
 }
 
 :host([active]) .container {
-  border-top-color: var(--calcite-ui-brand);
+  border-block-start-color: var(--calcite-ui-brand);
 }
 :host([active]) .container .stepper-item-heading {
   color: var(--calcite-ui-text-1);
@@ -293,23 +293,27 @@
   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-left: 0px;
-  margin-right: 0px;
-  margin-top: 0px;
+  margin-inline: 0px;
+  margin-block-start: 0px;
   flex: 1 1 auto;
-  border-top-width: 0px;
+  border-block-start-width: 0px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-block: 0px;
   border-inline-start-width: 2px;
   padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
 }
 :host([layout=vertical]) .container .stepper-item-icon {
   order: 3;
-  margin-top: 1px;
-  margin-bottom: 0px;
+  margin-block: 1px 0px;
   padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);
   margin-inline-start: auto;
 }
@@ -320,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-bottom: var(--calcite-stepper-item-spacing-unit-l);
-}
-
 :host([layout=vertical][complete]) .container {
   border-color: rgba(0, 122, 194, 0.5);
 }
@@ -354,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;
@@ -366,7 +432,7 @@
   }
 
   :host([active]) .container {
-    border-top-color: highlight;
+    border-block-start-color: highlight;
   }
   :host([active]) .container .stepper-item-number {
     color: highlight;

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.530
+ * 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.css

@@ -79,45 +79,45 @@
 }
 
 :host([scale=s]) .container {
-  height: 0.75rem;
+  block-size: 0.75rem;
 }
 :host([scale=s]) .track {
-  height: 0.75rem;
-  width: 1.5rem;
+  block-size: 0.75rem;
+  inline-size: 1.5rem;
 }
 :host([scale=s]) .handle {
-  height: 0.5rem;
-  width: 0.5rem;
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
 }
 
 :host([scale=m]) .container {
-  height: 1rem;
+  block-size: 1rem;
 }
 :host([scale=m]) .track {
-  height: 1rem;
-  width: 2rem;
+  block-size: 1rem;
+  inline-size: 2rem;
 }
 :host([scale=m]) .handle {
-  height: 0.75rem;
-  width: 0.75rem;
+  block-size: 0.75rem;
+  inline-size: 0.75rem;
 }
 
 :host([scale=l]) .container {
-  height: 1.5rem;
+  block-size: 1.5rem;
 }
 :host([scale=l]) .track {
-  height: 1.5rem;
-  width: 3rem;
+  block-size: 1.5rem;
+  inline-size: 3rem;
 }
 :host([scale=l]) .handle {
-  height: 1.25rem;
-  width: 1.25rem;
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
 }
 
 :host {
   position: relative;
   display: inline-block;
-  width: auto;
+  inline-size: auto;
   cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
@@ -139,7 +139,7 @@
 }
 
 :host {
-  width: auto;
+  inline-size: auto;
   outline-color: transparent;
 }
 
@@ -171,7 +171,7 @@
   transition-property: all;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  top: -1px;
+  inset-block-start: -1px;
   inset-inline: -1px auto;
 }
 
@@ -210,15 +210,12 @@
 }
 
 ::slotted(input[slot=hidden-form-input]) {
-  bottom: 0 !important;
-  left: 0 !important;
   margin: 0 !important;
   opacity: 0 !important;
   outline: none !important;
   padding: 0 !important;
   position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
+  inset: 0 !important;
   transform: none !important;
   -webkit-appearance: none !important;
   z-index: -1 !important;

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.530
+ * 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.530
+ * v1.0.0-next.533
  */
 export {};

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

@@ -84,40 +84,37 @@
 
 :host {
   display: none;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 :host([active]) {
   display: block;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   overflow: auto;
 }
 
 section {
   display: none;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 :host([scale=s]) {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=m]) {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
 :host([scale=l]) {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }

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.530
+ * 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.css

@@ -84,39 +84,38 @@
 }
 
 :host([scale=s]) {
-  min-height: 1.5rem;
+  min-block-size: 1.5rem;
 }
 
 :host([scale=m]) {
-  min-height: 2rem;
+  min-block-size: 2rem;
 }
 
 :host([scale=l]) {
-  min-height: 2.75rem;
+  min-block-size: 2.75rem;
 }
 
 .tab-nav {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: flex-start;
   overflow: auto;
 }
 
 .tab-nav-active-indicator-container {
   position: absolute;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  height: 0.125rem;
-  width: 100%;
+  inset-inline: 0px;
+  inset-block-end: 0px;
+  block-size: 0.125rem;
+  inline-size: 100%;
   overflow: hidden;
 }
 
 .tab-nav-active-indicator {
   position: absolute;
-  bottom: 0px;
+  inset-block-end: 0px;
   display: block;
-  height: 0.125rem;
+  block-size: 0.125rem;
   background-color: var(--calcite-ui-brand);
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -125,37 +124,37 @@
 }
 
 :host([position=below]) .tab-nav-active-indicator {
-  bottom: unset;
-  top: 0px;
+  inset-block-end: unset;
+  inset-block-start: 0px;
 }
 
 :host([position=bottom]) .tab-nav-active-indicator {
-  bottom: unset;
-  top: 0px;
+  inset-block-end: unset;
+  inset-block-start: 0px;
 }
 
 :host([position=below]) .tab-nav-active-indicator-container {
-  bottom: unset;
-  top: 0px;
+  inset-block-start: 0px;
+  inset-block-end: unset;
 }
 
 :host([position=bottom]) .tab-nav-active-indicator-container {
-  bottom: unset;
-  top: 0px;
+  inset-block-end: unset;
+  inset-block-start: 0px;
 }
 
 :host([bordered]) .tab-nav-active-indicator-container {
-  bottom: unset;
+  inset-block-end: unset;
 }
 
 :host([bordered][position=below]) .tab-nav-active-indicator-container {
-  bottom: 0;
-  top: unset;
+  inset-block-end: 0;
+  inset-block-start: unset;
 }
 
 :host([bordered][position=bottom]) .tab-nav-active-indicator-container {
-  bottom: 0;
-  top: unset;
+  inset-block-end: 0;
+  inset-block-start: unset;
 }
 
 @media (forced-colors: active) {

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