@esri/calcite-components 1.3.0-next.0 → 1.3.0-next.10

package/dist/collection/components/shell-panel/shell-panel.css

@@ -93,6 +93,9 @@
 * @prop --calcite-shell-panel-width: The width of the component.
 * @prop --calcite-shell-panel-max-width: The maximum width of the component.
 * @prop --calcite-shell-panel-min-width: The minimum width of the component.
+* @prop --calcite-shell-panel-height: The height of the component.
+* @prop --calcite-shell-panel-max-height: The maximum height of the component.
+* @prop --calcite-shell-panel-min-height: The minimum height of the component.
 * @prop --calcite-shell-panel-detached-max-height: The maximum height of the component when `detached` is true.
 *
 */
@@ -104,19 +107,25 @@
   --calcite-shell-panel-detached-max-height: unset;
 }
 
-:host([width-scale=s]) .content {
+:host([layout=horizontal]) .content {
+  --calcite-shell-panel-height-internal: var(--calcite-shell-panel-height, 20vh);
+  --calcite-shell-panel-max-height-internal: var(--calcite-shell-panel-max-height, 420px);
+  --calcite-shell-panel-min-height-internal: var(--calcite-shell-panel-min-height, 240px);
+}
+
+:host([layout=vertical][width-scale=s]) .content {
   --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 12vw);
   --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 300px);
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 150px);
 }
 
-:host([width-scale=m]) .content {
+:host([layout=vertical][width-scale=m]) .content {
   --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 20vw);
   --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 420px);
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 240px);
 }
 
-:host([width-scale=l]) .content {
+:host([layout=vertical][width-scale=l]) .content {
   --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 45vw);
   --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 680px);
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px);
@@ -148,6 +157,10 @@
   box-sizing: border-box;
 }
 
+:host([layout=horizontal]) .container {
+  flex-direction: column;
+}
+
 :host(:hover) .separator:not(:hover):not(:focus),
 :host(:focus-within) .separator:not(:hover):not(:focus) {
   opacity: 1;
@@ -157,10 +170,7 @@
 .separator {
   pointer-events: auto;
   position: absolute;
-  inset-block: 0px;
   display: flex;
-  block-size: 100%;
-  inline-size: 0.125rem;
   background-color: transparent;
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
@@ -176,14 +186,44 @@
   opacity: 1;
 }
 
-:host([position=start]) .separator {
+:host([layout=vertical]) .separator {
+  inset-block: 0px;
+  block-size: 100%;
+  inline-size: 0.125rem;
+  cursor: col-resize;
+}
+
+:host([layout=horizontal][position=start]) .separator {
+  inset-block-end: 0px;
+}
+
+:host([layout=horizontal][position=end]) .separator {
+  inset-block-start: 0px;
+}
+
+:host([layout=horizontal]) .separator {
+  inset-inline-end: 0px;
+  block-size: 0.125rem;
+  inline-size: 100%;
+  cursor: row-resize;
+}
+
+:host([layout=vertical][position=start]) .separator {
   inset-inline-end: -2px;
 }
 
-:host([position=end]) .separator {
+:host([layout=horizontal][position=start]) .separator {
+  inset-block-end: -2px;
+}
+
+:host([layout=vertical][position=end]) .separator {
   inset-inline-start: -2px;
 }
 
+:host([layout=horizontal][position=end]) .separator {
+  inset-block-start: -2px;
+}
+
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   block-size: 100%;
@@ -208,10 +248,19 @@
   align-self: stretch;
   background-color: var(--calcite-ui-background);
   padding: 0px;
+  transition: max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing);
+}
+
+:host([layout=vertical]) .content {
   inline-size: var(--calcite-shell-panel-width-internal);
   max-inline-size: var(--calcite-shell-panel-max-width-internal);
   min-inline-size: var(--calcite-shell-panel-min-width-internal);
-  transition: max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing);
+}
+
+:host([layout=horizontal]) .content {
+  block-size: var(--calcite-shell-panel-height-internal);
+  max-block-size: var(--calcite-shell-panel-max-height-internal);
+  min-block-size: var(--calcite-shell-panel-min-height-internal);
 }
 
 .content__header {
@@ -274,4 +323,20 @@ slot[name=action-bar]::slotted(calcite-action-bar),
 :host([position=end]) .content ::slotted(calcite-flow),
 :host([position=end]) .content ::slotted(calcite-panel) {
   border-inline-end: none;
+}
+
+:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar) {
+  border-inline: 0;
+}
+
+:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),
+:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel) {
+  border-inline: 0;
+  border-block-start: 0;
+}
+
+:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),
+:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel) {
+  border-inline: 0;
+  border-block-end: 0;
 }

package/dist/collection/components/shell-panel/shell-panel.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.0
+ * v1.3.0-next.10
  */
 import { forceUpdate, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { getElementDir, getSlotted, isPrimaryPointerButton } from "../../utils/dom";
+import { getElementDir, getSlotted, isPrimaryPointerButton, slotChangeGetAssignedElements } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { clamp } from "../../utils/math";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
@@ -17,17 +17,22 @@ import { CSS, SLOTS } from "./resources";
 export class ShellPanel {
   constructor() {
     this.initialContentWidth = null;
+    this.initialContentHeight = null;
     this.initialClientX = null;
+    this.initialClientY = null;
     this.contentWidthMax = null;
     this.contentWidthMin = null;
+    this.contentHeightMax = null;
+    this.contentHeightMin = null;
     this.step = 1;
     this.stepMultiplier = 10;
+    this.actionBars = [];
     this.storeContentEl = (contentEl) => {
       this.contentEl = contentEl;
     };
-    this.getKeyAdjustedWidth = (event) => {
+    this.getKeyAdjustedSize = (event) => {
       const { key } = event;
-      const { el, step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
+      const { el, step, stepMultiplier, layout, contentWidthMin, contentWidthMax, initialContentWidth, initialContentHeight, contentHeightMin, contentHeightMax, position } = this;
       const multipliedStep = step * stepMultiplier;
       const MOVEMENT_KEYS = [
         "ArrowUp",
@@ -43,50 +48,91 @@ export class ShellPanel {
         event.preventDefault();
       }
       const dir = getElementDir(el);
-      const directionKeys = ["ArrowLeft", "ArrowRight"];
-      const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
-      const increaseKeys = key === "ArrowUp" ||
-        (position === "end" ? key === directionKeys[0] : key === directionKeys[1]);
+      const horizontalKeys = ["ArrowLeft", "ArrowRight"];
+      const verticalKeys = ["ArrowDown", "ArrowUp"];
+      const directionFactor = dir === "rtl" && horizontalKeys.includes(key) ? -1 : 1;
+      const increaseKeys = layout === "horizontal"
+        ? position === "end"
+          ? key === verticalKeys[1] || key === horizontalKeys[0]
+          : key === verticalKeys[0] || key === horizontalKeys[1]
+        : key === verticalKeys[1] ||
+          (position === "end" ? key === horizontalKeys[0] : key === horizontalKeys[1]);
       if (increaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth + directionFactor * stepValue;
+        return layout === "horizontal"
+          ? initialContentHeight + directionFactor * stepValue
+          : initialContentWidth + directionFactor * stepValue;
       }
-      const decreaseKeys = key === "ArrowDown" ||
-        (position === "end" ? key === directionKeys[1] : key === directionKeys[0]);
+      const decreaseKeys = layout === "horizontal"
+        ? position === "end"
+          ? key === verticalKeys[0] || key === horizontalKeys[0]
+          : key === verticalKeys[1] || key === horizontalKeys[1]
+        : key === verticalKeys[0] ||
+          (position === "end" ? key === horizontalKeys[1] : key === horizontalKeys[0]);
       if (decreaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth - directionFactor * stepValue;
+        return layout === "horizontal"
+          ? initialContentHeight - directionFactor * stepValue
+          : initialContentWidth - directionFactor * stepValue;
       }
-      if (typeof contentWidthMin === "number" && key === "Home") {
+      if (key === "Home" && layout === "horizontal" && typeof contentHeightMin === "number") {
+        return contentHeightMin;
+      }
+      if (key === "Home" && layout === "vertical" && typeof contentWidthMin === "number") {
         return contentWidthMin;
       }
-      if (typeof contentWidthMax === "number" && key === "End") {
+      if (key === "End" && layout === "horizontal" && typeof contentHeightMax === "number") {
+        return contentHeightMax;
+      }
+      if (key === "End" && layout === "vertical" && typeof contentWidthMax === "number") {
         return contentWidthMax;
       }
       if (key === "PageDown") {
-        return initialContentWidth - multipliedStep;
+        return layout === "horizontal"
+          ? initialContentHeight - multipliedStep
+          : initialContentWidth - multipliedStep;
       }
       if (key === "PageUp") {
-        return initialContentWidth + multipliedStep;
+        return layout === "horizontal"
+          ? initialContentHeight + multipliedStep
+          : initialContentWidth + multipliedStep;
       }
       return null;
     };
-    this.separatorKeyDown = (event) => {
+    this.initialKeydownWidth = (event) => {
       this.setInitialContentWidth();
-      const width = this.getKeyAdjustedWidth(event);
+      const width = this.getKeyAdjustedSize(event);
       if (typeof width === "number") {
         this.setContentWidth(width);
       }
     };
+    this.initialKeydownHeight = (event) => {
+      this.setInitialContentHeight();
+      const height = this.getKeyAdjustedSize(event);
+      if (typeof height === "number") {
+        this.setContentHeight(height);
+      }
+    };
+    this.separatorKeyDown = (event) => {
+      this.layout === "horizontal"
+        ? this.initialKeydownHeight(event)
+        : this.initialKeydownWidth(event);
+    };
     this.separatorPointerMove = (event) => {
       event.preventDefault();
-      const { el, initialContentWidth, position, initialClientX } = this;
-      const offset = event.clientX - initialClientX;
-      const dir = getElementDir(el);
-      const adjustmentDirection = dir === "rtl" ? -1 : 1;
-      const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
-      const width = initialContentWidth + adjustedOffset;
-      this.setContentWidth(width);
+      const { el, layout, initialContentWidth, initialContentHeight, position, initialClientX, initialClientY } = this;
+      const offset = layout === "horizontal" ? event.clientY - initialClientY : event.clientX - initialClientX;
+      const adjustmentDirection = layout === "vertical" && getElementDir(el) === "rtl" ? -1 : 1;
+      const adjustedOffset = layout === "horizontal"
+        ? position === "end"
+          ? -adjustmentDirection * offset
+          : adjustmentDirection * offset
+        : position === "end"
+          ? -adjustmentDirection * offset
+          : adjustmentDirection * offset;
+      layout === "horizontal"
+        ? this.setContentHeight(initialContentHeight + adjustedOffset)
+        : this.setContentWidth(initialContentWidth + adjustedOffset);
     };
     this.separatorPointerUp = (event) => {
       if (!isPrimaryPointerButton(event)) {
@@ -96,6 +142,9 @@ export class ShellPanel {
       document.removeEventListener("pointerup", this.separatorPointerUp);
       document.removeEventListener("pointermove", this.separatorPointerMove);
     };
+    this.setInitialContentHeight = () => {
+      this.initialContentHeight = this.contentEl?.getBoundingClientRect().height;
+    };
     this.setInitialContentWidth = () => {
       this.initialContentWidth = this.contentEl?.getBoundingClientRect().width;
     };
@@ -106,8 +155,14 @@ export class ShellPanel {
       event.preventDefault();
       const { separatorEl } = this;
       separatorEl && document.activeElement !== separatorEl && separatorEl.focus();
-      this.setInitialContentWidth();
-      this.initialClientX = event.clientX;
+      if (this.layout === "horizontal") {
+        this.setInitialContentHeight();
+        this.initialClientY = event.clientY;
+      }
+      else {
+        this.setInitialContentWidth();
+        this.initialClientX = event.clientX;
+      }
       document.addEventListener("pointerup", this.separatorPointerUp);
       document.addEventListener("pointermove", this.separatorPointerMove);
     };
@@ -119,18 +174,31 @@ export class ShellPanel {
     this.disconnectSeparator = () => {
       this.separatorEl?.removeEventListener("pointerdown", this.separatorPointerDown);
     };
+    this.setActionBarsLayout = (actionBars) => {
+      actionBars.forEach((actionBar) => (actionBar.layout = this.layout));
+    };
+    this.handleActionBarSlotChange = (event) => {
+      const actionBars = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-bar"));
+      this.actionBars = actionBars;
+      this.setActionBarsLayout(actionBars);
+    };
     this.collapsed = false;
     this.detached = false;
     this.detachedHeightScale = "l";
     this.widthScale = "m";
+    this.layout = "vertical";
     this.position = undefined;
     this.resizable = false;
     this.messages = undefined;
     this.messageOverrides = undefined;
     this.contentWidth = null;
+    this.contentHeight = null;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
   }
+  layoutHandler() {
+    this.setActionBarsLayout(this.actionBars);
+  }
   onMessagesChange() {
     /* wired up by t9n util */
   }
@@ -170,15 +238,26 @@ export class ShellPanel {
     return hasHeader ? (h("div", { class: CSS.contentHeader, key: "header" }, h("slot", { name: SLOTS.header }))) : null;
   }
   render() {
-    const { collapsed, detached, position, initialContentWidth, contentWidth, contentWidthMax, contentWidthMin, resizable } = this;
+    const { collapsed, detached, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout } = this;
     const allowResizing = !detached && resizable;
-    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, key: "content", style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null,
+    const style = allowResizing
+      ? layout === "horizontal"
+        ? contentHeight
+          ? { height: `${contentHeight}px` }
+          : null
+        : contentWidth
+          ? { width: `${contentWidth}px` }
+          : null
+      : null;
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, key: "content", style: style,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.storeContentEl }, this.renderHeader(), h("div", { class: CSS.contentBody }, h("slot", null))));
-    const separatorNode = allowResizing ? (h("div", { "aria-label": this.messages.resize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth ?? initialContentWidth, class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, role: "separator", tabIndex: 0, "touch-action": "none",
+    const separatorNode = allowResizing ? (h("div", { "aria-label": this.messages.resize, "aria-orientation": layout === "horizontal" ? "vertical" : "horizontal", "aria-valuemax": layout == "horizontal" ? contentHeightMax : contentWidthMax, "aria-valuemin": layout == "horizontal" ? contentHeightMin : contentWidthMin, "aria-valuenow": layout == "horizontal"
+        ? contentHeight ?? initialContentHeight
+        : contentWidth ?? initialContentWidth, class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, role: "separator", tabIndex: 0, "touch-action": "none",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.connectSeparator })) : null;
-    const actionBarNode = h("slot", { key: "action-bar", name: SLOTS.actionBar });
+    const actionBarNode = (h("slot", { key: "action-bar", name: SLOTS.actionBar, onSlotchange: this.handleActionBarSlotChange }));
     const mainNodes = [actionBarNode, contentNode, separatorNode];
     if (position === "end") {
       mainNodes.reverse();
@@ -204,6 +283,20 @@ export class ShellPanel {
     if (!computedStyle) {
       return;
     }
+    this.layout === "horizontal"
+      ? this.updateHeights(computedStyle)
+      : this.updateWidths(computedStyle);
+    forceUpdate(this);
+  }
+  setContentHeight(height) {
+    const { contentHeightMax, contentHeightMin } = this;
+    const roundedWidth = Math.round(height);
+    this.contentHeight =
+      typeof contentHeightMax === "number" && typeof contentHeightMin === "number"
+        ? clamp(roundedWidth, contentHeightMin, contentHeightMax)
+        : roundedWidth;
+  }
+  updateWidths(computedStyle) {
     const max = parseInt(computedStyle.getPropertyValue("max-width"), 10);
     const min = parseInt(computedStyle.getPropertyValue("min-width"), 10);
     const valueNow = parseInt(computedStyle.getPropertyValue("width"), 10);
@@ -216,7 +309,20 @@ export class ShellPanel {
     if (typeof min === "number" && !isNaN(min)) {
       this.contentWidthMin = min;
     }
-    forceUpdate(this);
+  }
+  updateHeights(computedStyle) {
+    const max = parseInt(computedStyle.getPropertyValue("max-height"), 10);
+    const min = parseInt(computedStyle.getPropertyValue("min-height"), 10);
+    const valueNow = parseInt(computedStyle.getPropertyValue("height"), 10);
+    if (typeof valueNow === "number" && !isNaN(valueNow)) {
+      this.initialContentHeight = valueNow;
+    }
+    if (typeof max === "number" && !isNaN(max)) {
+      this.contentHeightMax = max;
+    }
+    if (typeof min === "number" && !isNaN(min)) {
+      this.contentHeightMin = min;
+    }
   }
   static get is() { return "calcite-shell-panel"; }
   static get encapsulation() { return "shadow"; }
@@ -315,6 +421,32 @@ export class ShellPanel {
         "reflect": true,
         "defaultValue": "\"m\""
       },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\"horizontal\" | \"vertical\", Layout>",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "Layout": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The direction of the component."
+        },
+        "attribute": "layout",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
+      },
       "position": {
         "type": "string",
         "mutable": false,
@@ -406,6 +538,7 @@ export class ShellPanel {
   static get states() {
     return {
       "contentWidth": {},
+      "contentHeight": {},
       "defaultMessages": {},
       "effectiveLocale": {}
     };
@@ -413,6 +546,9 @@ export class ShellPanel {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "layout",
+        "methodName": "layoutHandler"
+      }, {
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"
       }, {

package/dist/collection/components/slider/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.3.0-next.0
+ * v1.3.0-next.10
  */
 export const CSS = {
   handleLabel: "handle__label",

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

@@ -87,13 +87,17 @@
 }
 
 :host([disabled]){
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*){
+  pointer-events: none;
+}
+
 .scale--s {
   --calcite-slider-handle-size: 0.625rem;
   --calcite-slider-handle-extension-height: 0.4rem;

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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -22,6 +22,9 @@ export class Slider {
     this.activeProp = "value";
     this.guid = `calcite-slider-${guid()}`;
     this.dragUpdate = (event) => {
+      if (this.disabled) {
+        return;
+      }
       event.preventDefault();
       if (this.dragProp) {
         const value = this.translate(event.clientX || event.pageX);
@@ -50,12 +53,15 @@ export class Slider {
       }
     };
     this.pointerUpDragEnd = (event) => {
-      if (!isPrimaryPointerButton(event)) {
+      if (this.disabled || !isPrimaryPointerButton(event)) {
         return;
       }
       this.dragEnd(event);
     };
     this.dragEnd = (event) => {
+      if (this.disabled) {
+        return;
+      }
       this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
       if (this.lastDragPropValue != this[this.dragProp]) {
@@ -432,7 +438,7 @@ export class Slider {
     });
   }
   pointerDownHandler(event) {
-    if (!isPrimaryPointerButton(event)) {
+    if (this.disabled || !isPrimaryPointerButton(event)) {
       return;
     }
     const x = event.clientX || event.pageX;

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.3.0-next.0
+ * v1.3.0-next.10
  */
 export const CSS = {
   sortItem: "sort-item",

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

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: flex;
 }

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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h } from "@stencil/core";
 import Sortable from "sortablejs";

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.3.0-next.0
+ * v1.3.0-next.10
  */
 export const CSS = {
   container: "split-button__container",

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

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: inline-block;
 }

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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/stepper/stepper.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.3.0-next.0
+ * v1.3.0-next.10
  */
 import { h } from "@stencil/core";
 import { focusElementInGroup } from "../../utils/dom";

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

@@ -86,13 +86,18 @@
 }
 
 :host([layout=horizontal][disabled]) .stepper-item-header, :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([layout=horizontal][disabled]) .stepper-item-header *, :host([disabled]) *,
+:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host([scale=s]) {
   --calcite-stepper-item-spacing-unit-s: 0.25rem;
   --calcite-stepper-item-spacing-unit-m: 0.75rem;