@esri/calcite-components 1.0.0-beta.69 → 1.0.0-beta.72

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

@@ -4,10 +4,10 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getKey } from "../../utils/key";
 import { intersects } from "../../utils/dom";
-import { clamp } from "../../utils/math";
+import { clamp, decimalPlaces } from "../../utils/math";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSlider {
   constructor() {
     //--------------------------------------------------------------------------
@@ -35,12 +35,20 @@ export class CalciteSlider {
     this.mirrored = false;
     /** Use finer point for handles */
     this.precise = false;
+    /**
+     * When true, makes the component required for form-submission.
+     */
+    this.required = false;
     /** When true, enables snap selection along the step interval */
     this.snap = false;
     /** Interval to move on up/down keys */
     this.step = 1;
     /** Currently selected number (if single select) */
     this.value = null;
+    /**
+     * Specify the scale of the slider, defaults to m
+     */
+    this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -74,11 +82,11 @@ export class CalciteSlider {
         }
       }
     };
-    this.dragEnd = () => {
+    this.dragEnd = (event) => {
       document.removeEventListener("pointermove", this.dragUpdate);
       document.removeEventListener("pointerup", this.dragEnd);
       document.removeEventListener("pointercancel", this.dragEnd);
-      this.focusActiveHandle();
+      this.focusActiveHandle(event.clientX);
       if (this.lastDragPropValue != this[this.dragProp]) {
         this.emitChange();
       }
@@ -107,14 +115,17 @@ export class CalciteSlider {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
     this.tickValues = this.generateTickValues();
     this.value = this.clamp(this.value);
+    afterConnectDefaultValueSet(this, this.value);
     if (this.snap) {
       this.value = this.getClosestStep(this.value);
     }
@@ -252,7 +263,11 @@ export class CalciteSlider {
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
-      h("div", { class: { container: true, "container--range": this.isRange } },
+      h("div", { class: {
+          ["container"]: true,
+          ["container--range"]: this.isRange,
+          [`scale--${this.scale}`]: true
+        } },
         this.renderGraph(),
         h("div", { class: "track", ref: this.storeTrackRef },
           h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
@@ -273,26 +288,31 @@ export class CalciteSlider {
                 right: mirror ? tickOffset : ""
               } }, this.renderTickLabel(tick)));
           }))),
-        !this.precise && !this.labelHandles && this.isRange && minHandle,
-        !this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minLabeledHandle,
-        this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
-        this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
-        this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minHistogramLabeledHandle,
-        !this.precise && !this.labelHandles && handle,
-        !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
-        !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
-        this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
-        !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
-        this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
-        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle)));
+        h("div", { class: "thumb-container" },
+          !this.precise && !this.labelHandles && this.isRange && minHandle,
+          !this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minLabeledHandle,
+          this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
+          this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
+          this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minHistogramLabeledHandle,
+          !this.precise && !this.labelHandles && handle,
+          !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
+          !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
+          this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
+          !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
+          this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
+          this.hasHistogram &&
+            this.precise &&
+            this.labelHandles &&
+            histogramLabeledPreciseHandle,
+          h(HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
@@ -305,7 +325,7 @@ export class CalciteSlider {
         tick__label: true,
         "tick__label--min": isMinTickLabel,
         "tick__label--max": isMaxTickLabel
-      } }, Math.min(tick, this.max).toLocaleString()));
+      } }, tick.toLocaleString()));
     if (this.labelTicks && !this.hasHistogram && !this.isRange) {
       return tickLabel;
     }
@@ -365,7 +385,7 @@ export class CalciteSlider {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
     const value = this[activeProp];
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Enter" || key === " ") {
       event.preventDefault();
       return;
@@ -399,10 +419,11 @@ export class CalciteSlider {
       return;
     }
     event.preventDefault();
-    this.setValue(activeProp, this.clamp(adjustment, activeProp));
+    const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
+    this.setValue(activeProp, this.clamp(fixedDecimalAdjustment, activeProp));
   }
-  clickHandler() {
-    this.focusActiveHandle();
+  clickHandler(event) {
+    this.focusActiveHandle(event.clientX);
   }
   pointerDownHandler(event) {
     const x = event.clientX || event.pageX;
@@ -460,7 +481,7 @@ export class CalciteSlider {
     const ticks = [];
     let current = this.min;
     while (this.ticks && current < this.max + this.ticks) {
-      ticks.push(current);
+      ticks.push(Math.min(current, this.max));
       current = current + this.ticks;
     }
     return ticks;
@@ -473,16 +494,18 @@ export class CalciteSlider {
     document.addEventListener("pointerup", this.dragEnd);
     document.addEventListener("pointercancel", this.dragEnd);
   }
-  focusActiveHandle() {
+  focusActiveHandle(valueX) {
     switch (this.dragProp) {
-      default:
-      case "maxValue":
-        this.maxHandle.focus();
-        break;
       case "minValue":
         this.minHandle.focus();
         break;
+      case "maxValue":
+        this.maxHandle.focus();
+        break;
       case "minMaxValue":
+        this.getClosestHandle(valueX).focus();
+        break;
+      default:
         break;
     }
   }
@@ -535,7 +558,8 @@ export class CalciteSlider {
     const { left, width } = this.trackEl.getBoundingClientRect();
     const percent = (x - left) / width;
     const mirror = this.shouldMirror();
-    let value = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
+    const clampedValue = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
+    let value = Number(clampedValue.toFixed(decimalPlaces(this.step)));
     if (this.snap && this.step) {
       value = this.getClosestStep(value);
     }
@@ -546,13 +570,21 @@ export class CalciteSlider {
    * @internal
    */
   getClosestStep(num) {
-    num = this.clamp(num);
+    num = Number(this.clamp(num).toFixed(decimalPlaces(this.step)));
     if (this.step) {
       const step = Math.round(num / this.step) * this.step;
-      num = this.clamp(step);
+      num = Number(this.clamp(step).toFixed(decimalPlaces(this.step)));
     }
     return num;
   }
+  getClosestHandle(valueX) {
+    return this.getDistanceX(this.maxHandle, valueX) > this.getDistanceX(this.minHandle, valueX)
+      ? this.minHandle
+      : this.maxHandle;
+  }
+  getDistanceX(el, valueX) {
+    return Math.abs(el.getBoundingClientRect().left - valueX);
+  }
   getFontSizeForElement(element) {
     return Number(window.getComputedStyle(element).getPropertyValue("font-size").match(/\d+/)[0]);
   }
@@ -798,8 +830,11 @@ export class CalciteSlider {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
-        "text": "Display a histogram above the slider"
+        "tags": [{
+            "name": "see",
+            "text": " [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-graph/interfaces.ts#L5)"
+          }],
+        "text": "List of x,y coordinates within the slider's min and max, displays above the slider track."
       }
     },
     "histogramStops": {
@@ -980,6 +1015,23 @@ export class CalciteSlider {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the slider"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
     "pageStep": {
       "type": "number",
       "mutable": false,
@@ -1015,6 +1067,24 @@ export class CalciteSlider {
       "reflect": false,
       "defaultValue": "false"
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "snap": {
       "type": "boolean",
       "mutable": false,
@@ -1085,6 +1155,29 @@ export class CalciteSlider {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "null"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the scale of the slider, defaults to m"
+      },
+      "attribute": "scale",
+      "reflect": false,
+      "defaultValue": "\"m\""
     }
   }; }
   static get states() { return {

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -175,7 +179,10 @@
   width: 1px;
   display: flex;
   align-items: stretch;
-  transition: 0.15s ease-in-out;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   background-color: var(--calcite-split-button-background);
 }
 

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

@@ -4,7 +4,6 @@
  */
 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.
  */
@@ -26,6 +25,8 @@ export class CalciteSplitButton {
     /** optionally add a calcite-loader component to the control,
      disabling interaction. with the primary button */
     this.loading = false;
+    /** Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */
+    this.overlayPositioning = "absolute";
     /** specify the scale of the control, defaults to m */
     this.scale = "m";
     /** specify the width of the button, defaults to auto */
@@ -34,7 +35,6 @@ export class CalciteSplitButton {
     this.calciteSplitButtonSecondaryClickHandler = (e) => this.calciteSplitButtonSecondaryClick.emit(e);
   }
   render() {
-    const dir = getElementDir(this.el);
     const widthClasses = {
       [CSS.container]: true,
       [CSS.widthAuto]: this.width === "auto",
@@ -42,12 +42,12 @@ export class CalciteSplitButton {
       [CSS.widthFull]: this.width === "full"
     };
     const buttonWidth = this.width === "auto" ? "auto" : "full";
-    return (h("div", { class: widthClasses, dir: dir },
-      h("calcite-button", { appearance: this.appearance, color: this.color, dir: dir, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", width: buttonWidth }, this.primaryText),
+    return (h("div", { class: widthClasses },
+      h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", width: buttonWidth }, this.primaryText),
       h("div", { class: CSS.dividerContainer },
         h("div", { class: CSS.divider })),
-      h("calcite-dropdown", { active: this.active, dir: dir, onClick: this.calciteSplitButtonSecondaryClickHandler, placement: "bottom-trailing", scale: this.scale, width: this.scale },
-        h("calcite-button", { appearance: this.appearance, color: this.color, dir: dir, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary" }),
+      h("calcite-dropdown", { active: this.active, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-trailing", scale: this.scale, width: this.scale },
+        h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary" }),
         h("slot", null))));
   }
   get dropdownIcon() {
@@ -211,6 +211,29 @@ export class CalciteSplitButton {
       "reflect": true,
       "defaultValue": "false"
     },
+    "overlayPositioning": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "OverlayPositioning",
+        "resolved": "\"absolute\" | \"fixed\"",
+        "references": {
+          "OverlayPositioning": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value."
+      },
+      "attribute": "overlay-positioning",
+      "reflect": false,
+      "defaultValue": "\"absolute\""
+    },
     "primaryIconEnd": {
       "type": "string",
       "mutable": false,

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {

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

@@ -3,7 +3,6 @@
  * 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.
  */
@@ -72,7 +71,7 @@ export class CalciteStepper {
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.sortedItems.length - 1;
-    switch (getKey(item.key)) {
+    switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
         if (isLastItem) {

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -90,7 +94,7 @@
   --calcite-stepper-item-spacing-unit-l: 1rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  margin-right: 0.25rem;
+  margin-inline-end: 0.25rem;
 }
 
 :host([scale=s]) .stepper-item-subtitle {
@@ -104,7 +108,7 @@
   --calcite-stepper-item-spacing-unit-l: 1.25rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 
 :host([scale=m]) .stepper-item-subtitle {
@@ -118,7 +122,7 @@
   --calcite-stepper-item-spacing-unit-l: 1.5rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.5rem;
-  margin-right: 0.75rem;
+  margin-inline-end: 0.75rem;
 }
 
 :host([scale=l]) .stepper-item-subtitle {
@@ -152,11 +156,6 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.calcite--rtl {
-  margin-left: var(--calcite-stepper-item-spacing-unit-l);
-  margin-right: 0;
-}
-
 :host {
   outline-offset: 0;
   outline-color: transparent;
@@ -176,20 +175,11 @@
 
 :host .stepper-item-content,
 :host .stepper-item-header {
-  padding: var(--calcite-stepper-item-spacing-unit-l) var(--calcite-stepper-item-spacing-unit-m);
-  padding-left: 0;
-  text-align: left;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.calcite--rtl .stepper-item-content,
-.calcite--rtl .stepper-item-header {
-  padding-right: 0;
-  text-align: right;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  padding-left: initial;
+  padding-block: var(--calcite-stepper-item-spacing-unit-l);
+  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+  text-align: start;
 }
 
 :host .stepper-item-header * {
@@ -208,7 +198,7 @@
 }
 
 :host .stepper-item-icon {
-  margin-right: var(--calcite-stepper-item-spacing-unit-m);
+  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
   color: var(--calcite-ui-text-3);
   margin-top: 1px;
   opacity: var(--calcite-ui-opacity-disabled);
@@ -220,20 +210,10 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.calcite--rtl .stepper-item-icon {
-  margin-left: var(--calcite-stepper-item-spacing-unit-l);
-  margin-right: 0;
-}
-
 :host .stepper-item-header-text {
-  margin-right: auto;
   flex-direction: column;
   text-align: initial;
-}
-
-.calcite--rtl .stepper-item-header-text {
-  margin-left: auto;
-  margin-right: 0;
+  margin-inline-end: auto;
 }
 
 :host .stepper-item-title,
@@ -252,22 +232,12 @@
   color: var(--calcite-ui-text-3);
 }
 
-.calcite--rtl .stepper-item-title {
-  margin-right: 0;
-  margin-left: auto;
-}
-
 :host .stepper-item-number {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-3);
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  margin-right: var(--calcite-stepper-item-spacing-unit-m);
-}
-
-.calcite--rtl .stepper-item-number {
-  margin-left: var(--calcite-stepper-item-spacing-unit-m);
-  margin-right: initial;
+  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
 }
 
 :host([disabled]) {
@@ -345,29 +315,27 @@
 :host([layout=vertical]) .container {
   flex: 1 1 auto;
   border-top-width: 0;
-  border-left-width: 2px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   padding-top: 0;
   padding-bottom: 0;
-  padding-right: 0;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
-  padding-left: var(--calcite-stepper-item-spacing-unit-l);
+  border-inline-start-width: 2px;
+  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
 }
 
 :host([layout=vertical]) .container .stepper-item-icon {
   margin-top: 1px;
-  margin-right: 0;
   margin-bottom: 0;
-  margin-left: auto;
   order: 3;
-  padding-left: var(--calcite-stepper-item-spacing-unit-s);
+  padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);
+  margin-inline-start: auto;
 }
 
 :host([layout=vertical]) .container .stepper-item-header {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 :host([layout=vertical]) .container .stepper-item-content {
@@ -382,28 +350,6 @@
   margin-bottom: var(--calcite-stepper-item-spacing-unit-l);
 }
 
-:host([layout=vertical]) .calcite--rtl {
-  border-left-width: 0;
-  border-right-width: 2px;
-  border-color: var(--calcite-ui-border-3);
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: var(--calcite-stepper-item-spacing-unit-l);
-}
-
-:host([layout=vertical]) .calcite--rtl .stepper-item-icon {
-  margin-bottom: 0;
-  margin-left: 0;
-  padding-left: 0;
-  padding-right: var(--calcite-stepper-item-spacing-unit-l);
-}
-
-:host([layout=vertical]) .calcite--rtl .stepper-item-header {
-  padding-left: 0;
-  padding-right: intial;
-}
-
 :host([layout=vertical][complete]) .container {
   border-color: rgba(0, 122, 194, 0.5);
 }