@esri/calcite-components 1.3.0-next.2 → 1.3.0-next.20

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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -85,8 +85,8 @@ export class Shell {
   renderContent() {
     const defaultSlotNode = h("slot", { key: "default-slot" });
     const deprecatedCenterRowSlotNode = (h("slot", { key: "center-row-slot", name: SLOTS.centerRow }));
-    const panelBottomSlotNode = h("slot", { key: "panel-top-slot", name: SLOTS.panelBottom });
-    const panelTopSlotNode = h("slot", { key: "panel-bottom-slot", name: SLOTS.panelTop });
+    const panelBottomSlotNode = h("slot", { key: "panel-bottom-slot", name: SLOTS.panelBottom });
+    const panelTopSlotNode = h("slot", { key: "panel-top-slot", name: SLOTS.panelTop });
     const contentContainerKey = "content-container";
     const content = !!this.contentBehind
       ? [

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.3.0-next.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.css

@@ -97,6 +97,7 @@
 }
 
 :host {
+  z-index: 1;
   display: flex;
   flex: 1 1 auto;
   overflow: hidden;

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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

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

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

@@ -90,33 +90,49 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @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-detached-max-height: The maximum height of the component when `detached` is true.
+* @prop --calcite-shell-panel-width: Specifies the width of the component.
+* @prop --calcite-shell-panel-max-width: Specifies the maximum width of the component.
+* @prop --calcite-shell-panel-min-width: Specifies the minimum width of the component.
+* @prop --calcite-shell-panel-height: When `layout` is `"horizontal"`, specifies the height of the component.
+* @prop --calcite-shell-panel-max-height: When `layout` is `"horizontal"`, specifies the maximum height of the component.
+* @prop --calcite-shell-panel-min-height: When `layout` is `"horizontal"`, specifies the minimum height of the component.
+* @prop --calcite-shell-panel-detached-max-height: When `detached` is `true`, specifies the maximum height of the component.
+* @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component.
 *
 */
 :host {
   pointer-events: none;
+  position: relative;
   display: flex;
   flex: 0 1 auto;
   align-items: stretch;
   --calcite-shell-panel-detached-max-height: unset;
+  z-index: var(--calcite-shell-panel-z-index, 1);
 }
 
-:host([width-scale=s]) .content {
+:host([layout=vertical]) {
+  z-index: var(--calcite-shell-panel-z-index, calc(1 + 1));
+}
+
+: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 +164,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 +177,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 +193,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 +255,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 +330,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,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.2
+ * v1.3.0-next.20
  */
 import { forceUpdate, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -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,21 +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) => {
-      slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-bar")).forEach((actionBar) => (actionBar.layout = "vertical"));
+      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 */
   }
@@ -173,12 +238,23 @@ 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, onSlotchange: this.handleActionBarSlotChange }));
@@ -207,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);
@@ -219,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"; }
@@ -318,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,
@@ -409,6 +538,7 @@ export class ShellPanel {
   static get states() {
     return {
       "contentWidth": {},
+      "contentHeight": {},
       "defaultMessages": {},
       "effectiveLocale": {}
     };
@@ -416,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.2
+ * v1.3.0-next.20
  */
 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;
@@ -232,8 +236,18 @@
   background-color: var(--calcite-ui-brand);
 }
 .thumb:focus .handle{
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 .thumb:focus .handle-extension{
   background-color: var(--calcite-ui-brand);

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