@esri/calcite-components 1.0.0-beta.63 → 1.0.0-beta.67

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

@@ -1,13 +1,18 @@
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
+import { connectLabel, disconnectLabel } from "../../utils/label";
 import { CSS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+import { createObserver } from "../../utils/observers";
 function isOption(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION";
 }
 function isOptionGroup(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION-GROUP";
 }
+/**
+ * @slot - A slot for adding `calcite-option`s.
+ */
 export class CalciteSelect {
   constructor() {
     //--------------------------------------------------------------------------
@@ -28,12 +33,20 @@ export class CalciteSelect {
      */
     this.width = "auto";
     this.componentToNativeEl = new Map();
-    this.mutationObserver = new MutationObserver(() => this.populateInternalSelect());
+    this.mutationObserver = createObserver("mutation", () => this.populateInternalSelect());
     this.handleInternalSelectChange = () => {
       const selected = this.selectEl.selectedOptions[0];
       this.selectFromNativeOption(selected);
       requestAnimationFrame(() => this.emitChangeEvent());
     };
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
     this.populateInternalSelect = () => {
       const optionsAndGroups = Array.from(this.el.children);
       this.clearInternalSelect();
@@ -55,20 +68,25 @@ export class CalciteSelect {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     const { el } = this;
-    this.mutationObserver.observe(el, {
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
       subtree: true,
       childList: true
     });
+    connectLabel(this);
   }
   disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectLabel(this);
   }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.selectEl);
   }
@@ -84,19 +102,6 @@ export class CalciteSelect {
       this.deselectAllExcept(optionOrGroup);
     }
   }
-  handleLabelFocus(event) {
-    const { requestedInput, labelEl } = event.detail;
-    const { el } = this;
-    if (labelEl.contains(el) || (requestedInput && requestedInput === el.getAttribute("id"))) {
-      this.setFocus();
-      event.stopImmediatePropagation();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   updateNativeElement(optionOrGroup, nativeOptionOrGroup) {
     nativeOptionOrGroup.disabled = optionOrGroup.disabled;
     nativeOptionOrGroup.label = optionOrGroup.label;
@@ -315,7 +320,7 @@ export class CalciteSelect {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
@@ -333,11 +338,5 @@ export class CalciteSelect {
       "target": undefined,
       "capture": false,
       "passive": false
-    }, {
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
     }]; }
 }

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

@@ -2,14 +2,25 @@ import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
+ * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
  * @slot header - A slot for adding header content. This content will be positioned at the top of the shell.
  * @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the shell.
  * @slot primary-panel - A slot for adding the leading `calcite-shell-panel`.
  * @slot contextual-panel - A slot for adding the trailing `calcite-shell-panel`.
- * @slot bottom-panel - A slot for adding a bottom floating panel such as a chart or `calcite-tip-manager`.
- * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
+ * @slot center-row - A slot for adding custom content in the center row.
  */
 export class CalciteShell {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Positions the center content behind any calcite-shell-panels.
+     */
+    this.contentBehind = false;
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -76,13 +87,14 @@ export class CalciteShell {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Positions the center content behind any calcite-shell-panels."
       },
       "attribute": "content-behind",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "el"; }

package/dist/collection/components/calcite-shell-center-row/calcite-shell-center-row.js

@@ -3,8 +3,8 @@ import { CSS, SLOTS } from "./resources";
 import { getElementDir, getSlotted } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 /**
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  * @slot - A slot for adding content to the shell panel.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  */
 export class CalciteShellCenterRow {
   constructor() {

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

@@ -2,8 +2,8 @@ import { Component, Element, Event, Prop, Watch, h, Fragment } from "@stencil/co
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  * @slot - A slot for adding content to the shell panel.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  */
 export class CalciteShellPanel {
   constructor() {

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

@@ -136,16 +136,18 @@
 
 .thumb {
   position: absolute;
-  border: none;
-  background: transparent;
+  border-style: none;
+  background-color: transparent;
   cursor: pointer;
-  font-family: inherit;
-  z-index: 2;
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   padding: 0;
+  margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
+  font-family: inherit;
+  z-index: 2;
   transform: translate(7px, -8px);
 }
 

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

@@ -1,8 +1,9 @@
 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 { hasLabel, intersects } from "../../utils/dom";
+import { intersects } from "../../utils/dom";
 import { clamp } from "../../utils/math";
+import { connectLabel, disconnectLabel } from "../../utils/label";
 export class CalciteSlider {
   constructor() {
     //--------------------------------------------------------------------------
@@ -14,6 +15,10 @@ export class CalciteSlider {
     this.disabled = false;
     /** Indicates if a histogram is present */
     this.hasHistogram = false;
+    /** Label handles with their numeric value */
+    this.labelHandles = false;
+    /** Label tick marks with their numeric value. */
+    this.labelTicks = false;
     /** Maximum selectable value */
     this.max = 100;
     /** Minimum selectable value */
@@ -24,17 +29,14 @@ export class CalciteSlider {
      * Note that this value will be ignored if the slider has an associated histogram.
      */
     this.mirrored = false;
+    /** Use finer point for handles */
+    this.precise = 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;
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -42,6 +44,14 @@ export class CalciteSlider {
     this.minValueDragRange = null;
     this.maxValueDragRange = null;
     this.tickValues = [];
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
     this.dragUpdate = (event) => {
       event.preventDefault();
       if (this.dragProp) {
@@ -64,22 +74,32 @@ export class CalciteSlider {
           }
         }
         else {
-          this[this.dragProp] = this.clamp(value, this.dragProp);
+          this.setValue(this.dragProp, this.clamp(value, this.dragProp));
         }
-        this.emitChange();
       }
     };
     this.dragEnd = () => {
       document.removeEventListener("pointermove", this.dragUpdate);
       document.removeEventListener("pointerup", this.dragEnd);
       document.removeEventListener("pointercancel", this.dragEnd);
-      this.emitChange();
       this.focusActiveHandle();
+      if (this.lastDragPropValue != this[this.dragProp]) {
+        this.emitChange();
+      }
       this.dragProp = null;
+      this.lastDragPropValue = null;
       this.minValueDragRange = null;
       this.maxValueDragRange = null;
       this.minMaxValueRange = null;
     };
+    /**
+     * Set the reference of the track Element
+     * @internal
+     * @param node
+     */
+    this.storeTrackRef = (node) => {
+      this.trackEl = node;
+    };
   }
   histogramWatcher(newHistogram) {
     this.hasHistogram = !!newHistogram;
@@ -89,6 +109,12 @@ export class CalciteSlider {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+  }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
     this.tickValues = this.generateTickValues();
@@ -99,7 +125,6 @@ export class CalciteSlider {
     if (this.histogram) {
       this.hasHistogram = true;
     }
-    this.emitChange();
   }
   componentDidRender() {
     if (this.labelHandles) {
@@ -119,7 +144,8 @@ export class CalciteSlider {
     const max = this.maxValue || this.value;
     const maxProp = this.isRange ? "maxValue" : "value";
     const value = this[maxProp];
-    const minInterval = this.getUnitInterval(min) * 100;
+    const useMinValue = this.shouldUseMinValue();
+    const minInterval = this.getUnitInterval(useMinValue ? this.minValue : min) * 100;
     const maxInterval = this.getUnitInterval(max) * 100;
     const mirror = this.shouldMirror();
     const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
@@ -232,16 +258,20 @@ export class CalciteSlider {
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
       h("div", { class: { container: true, "container--range": this.isRange } },
         this.renderGraph(),
-        h("div", { class: "track" },
+        h("div", { class: "track", ref: this.storeTrackRef },
           h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
               left: `${mirror ? 100 - maxInterval : minInterval}%`,
               right: `${mirror ? minInterval : 100 - maxInterval}%`
             } }),
           h("div", { class: "ticks" }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
+            let activeTicks = tick >= min && tick <= max;
+            if (useMinValue) {
+              activeTicks = tick >= this.minValue && tick <= this.maxValue;
+            }
             return (h("span", { class: {
                 tick: true,
-                "tick--active": tick >= min && tick <= max
+                "tick--active": activeTicks
               }, style: {
                 left: mirror ? "" : tickOffset,
                 right: mirror ? tickOffset : ""
@@ -335,11 +365,6 @@ export class CalciteSlider {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (e.detail.interactedEl !== this.el && hasLabel(e.detail.labelEl, this.el)) {
-      this.setFocus();
-    }
-  }
   keyDownHandler(event) {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
@@ -378,8 +403,7 @@ export class CalciteSlider {
       return;
     }
     event.preventDefault();
-    this[activeProp] = this.clamp(adjustment, activeProp);
-    this.emitChange();
+    this.setValue(activeProp, this.clamp(adjustment, activeProp));
   }
   clickHandler() {
     this.focusActiveHandle();
@@ -395,11 +419,15 @@ export class CalciteSlider {
       }
       else {
         const closerToMax = Math.abs(this.maxValue - position) < Math.abs(this.minValue - position);
-        prop = closerToMax ? "maxValue" : "minValue";
+        prop = closerToMax || position > this.maxValue ? "maxValue" : "minValue";
       }
     }
-    this[prop] = this.clamp(position, prop);
+    this.lastDragPropValue = this[prop];
     this.dragStart(prop);
+    const isThumbActive = this.el.shadowRoot.querySelector(".thumb:active");
+    if (!isThumbActive) {
+      this.setValue(prop, this.clamp(position, prop));
+    }
   }
   handleTouchStart(event) {
     // needed to prevent extra click at the end of a handle drag
@@ -410,18 +438,20 @@ export class CalciteSlider {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     const handle = this.minHandle ? this.minHandle : this.maxHandle;
     handle.focus();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   shouldMirror() {
     return this.mirrored && !this.hasHistogram;
   }
+  shouldUseMinValue() {
+    if (!this.isRange) {
+      return false;
+    }
+    return ((this.hasHistogram && this.maxValue === 0) || (!this.hasHistogram && this.minValue === 0));
+  }
   generateTickValues() {
     const ticks = [];
     let current = this.min;
@@ -452,9 +482,30 @@ export class CalciteSlider {
         break;
     }
   }
+  emitInput() {
+    this.calciteSliderInput.emit();
+    this.calciteSliderUpdate.emit();
+  }
   emitChange() {
     this.calciteSliderChange.emit();
-    this.calciteSliderUpdate.emit();
+  }
+  /**
+   * Set the prop value if changed at the component level
+   * @param valueProp
+   * @param value
+   */
+  setValue(valueProp, value) {
+    const oldValue = this[valueProp];
+    const valueChanged = oldValue !== value;
+    if (!valueChanged) {
+      return;
+    }
+    this[valueProp] = value;
+    const dragging = this.dragProp;
+    if (!dragging) {
+      this.emitChange();
+    }
+    this.emitInput();
   }
   /**
    * If number is outside range, constrain to min or max
@@ -477,7 +528,7 @@ export class CalciteSlider {
    */
   translate(x) {
     const range = this.max - this.min;
-    const { left, width } = this.el.getBoundingClientRect();
+    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));
@@ -542,12 +593,10 @@ export class CalciteSlider {
       if (rightValueLabelStaticHostOffset === 0 && leftValueLabelStaticHostOffset === 0) {
         // Neither handle overlaps the host boundary
         let leftValueLabelTranslate = labelTransformedOverlap / 2 - labelOffset;
-        if (Math.sign(leftValueLabelTranslate) === -1) {
-          leftValueLabelTranslate = Math.abs(leftValueLabelTranslate);
-        }
-        else {
-          leftValueLabelTranslate = -leftValueLabelTranslate;
-        }
+        leftValueLabelTranslate =
+          Math.sign(leftValueLabelTranslate) === -1
+            ? Math.abs(leftValueLabelTranslate)
+            : -leftValueLabelTranslate;
         const leftValueLabelTransformedHostOffset = this.getHostOffset(leftValueLabelTransformed.getBoundingClientRect().left +
           leftValueLabelTranslate -
           labelOffset, leftValueLabelTransformed.getBoundingClientRect().right +
@@ -577,12 +626,10 @@ export class CalciteSlider {
       else if (leftValueLabelStaticHostOffset < 0 || rightValueLabelStaticHostOffset < 0) {
         // labels overlap host boundary on the right side
         let leftValueLabelTranslate = Math.abs(leftValueLabelStaticHostOffset) + labelTransformedOverlap - labelOffset;
-        if (Math.sign(leftValueLabelTranslate) === -1) {
-          leftValueLabelTranslate = Math.abs(leftValueLabelTranslate);
-        }
-        else {
-          leftValueLabelTranslate = -leftValueLabelTranslate;
-        }
+        leftValueLabelTranslate =
+          Math.sign(leftValueLabelTranslate) === -1
+            ? Math.abs(leftValueLabelTranslate)
+            : -leftValueLabelTranslate;
         leftValueLabel.style.transform = `translateX(${leftValueLabelTranslate}px)`;
         leftValueLabelTransformed.style.transform = `translateX(${leftValueLabelTranslate - labelOffset}px)`;
       }
@@ -622,34 +669,20 @@ export class CalciteSlider {
     const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
     const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
     if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
-      if (this.isMinTickLabelObscured(minTickLabel, maxHandle)) {
-        minTickLabel.style.opacity = "0";
-      }
-      else {
-        minTickLabel.style.opacity = "1";
-      }
-      if (this.isMaxTickLabelObscured(maxTickLabel, maxHandle)) {
-        maxTickLabel.style.opacity = "0";
-      }
-      else {
-        maxTickLabel.style.opacity = "1";
-      }
+      minTickLabel.style.opacity = this.isMinTickLabelObscured(minTickLabel, maxHandle) ? "0" : "1";
+      maxTickLabel.style.opacity = this.isMaxTickLabelObscured(maxTickLabel, maxHandle) ? "0" : "1";
     }
     if (minHandle && maxHandle && minTickLabel && maxTickLabel) {
-      if (this.isMinTickLabelObscured(minTickLabel, minHandle) ||
-        this.isMinTickLabelObscured(minTickLabel, maxHandle)) {
-        minTickLabel.style.opacity = "0";
-      }
-      else {
-        minTickLabel.style.opacity = "1";
-      }
-      if (this.isMaxTickLabelObscured(maxTickLabel, minHandle) ||
-        (this.isMaxTickLabelObscured(maxTickLabel, maxHandle) && this.hasHistogram)) {
-        maxTickLabel.style.opacity = "0";
-      }
-      else {
-        maxTickLabel.style.opacity = "1";
-      }
+      minTickLabel.style.opacity =
+        this.isMinTickLabelObscured(minTickLabel, minHandle) ||
+          this.isMinTickLabelObscured(minTickLabel, maxHandle)
+          ? "0"
+          : "1";
+      maxTickLabel.style.opacity =
+        this.isMaxTickLabelObscured(maxTickLabel, minHandle) ||
+          (this.isMaxTickLabelObscured(maxTickLabel, maxHandle) && this.hasHistogram)
+          ? "0"
+          : "1";
     }
   }
   /**
@@ -794,13 +827,14 @@ export class CalciteSlider {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Label handles with their numeric value"
       },
       "attribute": "label-handles",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "labelTicks": {
       "type": "boolean",
@@ -811,13 +845,14 @@ export class CalciteSlider {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Label tick marks with their numeric value."
       },
       "attribute": "label-ticks",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "max": {
       "type": "number",
@@ -849,7 +884,7 @@ export class CalciteSlider {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Label for second handle if needed (ex. \"Temperature, upper bound\")"
+        "text": "Used as an accessible label (aria-label) for second handle if needed (ex. \"Temperature, upper bound\")"
       },
       "attribute": "max-label",
       "reflect": false
@@ -901,7 +936,7 @@ export class CalciteSlider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label for first (or only) handle (ex. \"Temperature, lower bound\")"
+        "text": "Used as an accessible label (aria-label) for first (or only) handle (ex. \"Temperature, lower bound\")"
       },
       "attribute": "min-label",
       "reflect": false
@@ -967,13 +1002,14 @@ export class CalciteSlider {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Use finer point for handles"
       },
       "attribute": "precise",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
     "snap": {
       "type": "boolean",
@@ -984,7 +1020,7 @@ export class CalciteSlider {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "When true, enables snap selection along the step interval"
@@ -1055,6 +1091,21 @@ export class CalciteSlider {
     "tickValues": {}
   }; }
   static get events() { return [{
+      "method": "calciteSliderInput",
+      "name": "calciteSliderInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "calciteSliderChange",
       "name": "calciteSliderChange",
       "bubbles": true,
@@ -1062,7 +1113,7 @@ export class CalciteSlider {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
+        "text": "Fires on when the thumb is released on slider\nIf you need to constantly listen to the drag event,\nplease use calciteSliderInput instead"
       },
       "complexType": {
         "original": "any",
@@ -1077,7 +1128,7 @@ export class CalciteSlider {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calciteSliderChange instead",
+            "text": "use calciteSliderInput instead",
             "name": "deprecated"
           }],
         "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
@@ -1101,7 +1152,7 @@ export class CalciteSlider {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
@@ -1112,12 +1163,6 @@ export class CalciteSlider {
       "methodName": "histogramWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
       "name": "keydown",
       "method": "keyDownHandler",
       "target": undefined,

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

@@ -86,4 +86,17 @@
 
 :host {
   display: flex;
+}
+
+.container {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.container--vertical {
+  flex-direction: column;
+}
+
+.container--horizontal {
+  flex-direction: row;
 }