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

package/dist/collection/components/slider/slider.css

@@ -125,8 +125,10 @@
   display: block;
   overflow-wrap: normal;
   word-break: normal;
-  padding: calc(var(--calcite-slider-handle-size) * 0.5);
-  margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
+  padding-inline: calc(var(--calcite-slider-handle-size) * 0.5);
+  padding-block: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin-block: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin-inline: 0;
   --calcite-slider-full-handle-height: calc(
     var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
   );
@@ -167,7 +169,7 @@
 
 .thumb-container{
   position: relative;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .thumb {
@@ -188,14 +190,13 @@
 }
 .thumb .handle__label.static,  .thumb .handle__label.transformed{
   position: absolute;
-  top: 0px;
-  bottom: 0px;
+  inset-block: 0px;
   opacity: 0;
 }
 .thumb .handle__label.hyphen::after {
   content: "—";
   display: inline-block;
-  width: 1em;
+  inline-size: 1em;
 }
 .thumb .handle__label.hyphen--wrap {
   display: flex;
@@ -205,14 +206,14 @@
   border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
   outline-color: transparent;
-  height: var(--calcite-slider-handle-size);
-  width: var(--calcite-slider-handle-size);
+  block-size: var(--calcite-slider-handle-size);
+  inline-size: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
   transition: border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;
 }
 .thumb .handle-extension{
-  width: 0.125rem;
-  height: var(--calcite-slider-handle-extension-height);
+  inline-size: 0.125rem;
+  block-size: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
 .thumb:hover .handle {
@@ -250,12 +251,12 @@
 
 :host([has-histogram][label-handles]) .handle__label,
 :host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label {
-  margin-top: 0.5em;
+  margin-block-start: 0.5em;
 }
 
 :host(:not([has-histogram]):not([precise])) .handle__label,
 :host([label-handles]:not([has-histogram])) .thumb--value .handle__label {
-  margin-bottom: 0.5em;
+  margin-block-end: 0.5em;
 }
 
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
@@ -282,7 +283,7 @@
 
 .track{
   position: relative;
-  height: 0.125rem;
+  block-size: 0.125rem;
   border-radius: 0px;
   background-color: var(--calcite-ui-border-2);
   transition: all var(--calcite-internal-animation-timing-medium) ease-in;
@@ -290,8 +291,8 @@
 
 .track__range{
   position: absolute;
-  top: 0px;
-  height: 0.125rem;
+  inset-block-start: 0px;
+  block-size: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
 
@@ -300,10 +301,10 @@
 }
 .container--range .track__range:after{
   position: absolute;
-  width: 100%;
+  inline-size: 100%;
   content: "";
-  top: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
-  height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
+  inset-block-start: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
+  block-size: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
 @media (forced-colors: active) {
@@ -335,13 +336,13 @@
 }
 .tick{
   position: absolute;
-  height: 0.25rem;
-  width: 0.125rem;
+  block-size: 0.25rem;
+  inline-size: 0.125rem;
   border-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-border-input);
   border-color: var(--calcite-ui-foreground-1);
-  top: -2px;
+  inset-block-start: -2px;
   pointer-events: none;
   margin-inline-start: calc(-1 * 0.125rem);
 }
@@ -352,7 +353,7 @@
 
 .tick__label{
   pointer-events: none;
-  margin-top: 0.875rem;
+  margin-block-start: 0.875rem;
   display: flex;
   justify-content: center;
 }
@@ -375,49 +376,46 @@
 
 .graph {
   color: var(--calcite-ui-foreground-3);
-  height: 48px;
+  block-size: 48px;
 }
 
 :host([label-ticks][ticks]) .container {
-  padding-bottom: calc(0.875rem + var(--calcite-slider-container-font-size));
+  padding-block-end: calc(0.875rem + var(--calcite-slider-container-font-size));
 }
 
 :host([has-histogram]):host([precise][label-handles]) .container {
-  padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
+  padding-block-end: calc(var(--calcite-slider-full-handle-height) + 1em);
 }
 :host([has-histogram]):host([label-handles]:not([precise])) .container {
-  padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
+  padding-block-end: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
 }
 :host([has-histogram]):host([precise]:not([label-handles])) .container {
-  padding-bottom: var(--calcite-slider-full-handle-height);
+  padding-block-end: var(--calcite-slider-full-handle-height);
 }
 
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
-  padding-top: var(--calcite-slider-full-handle-height);
+  padding-block-start: var(--calcite-slider-full-handle-height);
 }
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
-  padding-bottom: var(--calcite-slider-full-handle-height);
+  padding-block-end: var(--calcite-slider-full-handle-height);
 }
 :host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
-  padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
+  padding-block-start: calc(var(--calcite-slider-full-handle-height) + 4px);
 }
 :host(:not([has-histogram])):host([label-handles][precise]) .container {
-  padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
+  padding-block-start: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 :host(:not([has-histogram])):host([label-handles][precise]) .container--range {
-  padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
+  padding-block-end: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
 ::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/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.530
+ * 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.530
+ * 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.530
+ * 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.530
+ * v1.0.0-next.533
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.css

@@ -87,7 +87,7 @@
   align-items: stretch;
 }
 :host .split-button__container > calcite-dropdown > calcite-button {
-  height: 100%;
+  block-size: 100%;
   vertical-align: top;
 }
 
@@ -148,37 +148,36 @@
 }
 
 .width-auto {
-  width: auto;
+  inline-size: auto;
 }
 
 .width-half {
-  width: 50%;
+  inline-size: 50%;
 }
 
 .width-full {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .split-button__divider-container {
   display: flex;
-  width: 1px;
+  inline-size: 1px;
   align-items: stretch;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   background-color: var(--calcite-split-button-background);
 }
 
 .split-button__divider {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
+  margin-block: 0.25rem;
   display: inline-block;
-  width: 1px;
+  inline-size: 1px;
   background-color: var(--calcite-split-button-divider);
 }
 
 :host([appearance=outline]) .split-button__divider-container,
 :host([appearance=clear]) .split-button__divider-container {
-  border-top: 1px solid var(--calcite-split-button-divider);
-  border-bottom: 1px solid var(--calcite-split-button-divider);
+  border-block-start: 1px solid var(--calcite-split-button-divider);
+  border-block-end: 1px solid var(--calcite-split-button-divider);
 }
 :host([appearance=outline]):hover .split-button__divider-container,
 :host([appearance=clear]):hover .split-button__divider-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.530
+ * 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.530
+ * v1.0.0-next.533
  */
 export {};

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

@@ -81,8 +81,8 @@
 :host {
   position: relative;
   display: flex;
-  width: 100%;
-  min-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 100%;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
@@ -94,10 +94,7 @@
   flex-direction: column;
 }
 
-:host ::slotted(.calcite-stepper-content) {
-  display: flex;
-  width: 100%;
-  min-width: 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.530
+ * 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",