@esri/calcite-components 1.0.0-next.281 → 1.0.0-next.285

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

@@ -92,9 +92,9 @@
 
 .container {
   display: block;
-  padding: 7px 0;
-  margin: 7px 0;
   position: relative;
+  padding: 7px 0;
+  margin: 7px 0.5rem;
 }
 
 :host([disabled]) {
@@ -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);
 }
 
@@ -407,21 +409,7 @@
 }
 
 .graph {
-  width: 100%;
-  height: 48px;
-  position: relative;
-  color: var(--calcite-ui-foreground-2);
-}
-
-.graph svg {
-  position: absolute;
-  width: 100%;
-  height: 48px;
-}
-
-.graph .graph-path--highlight {
-  fill: var(--calcite-ui-brand);
-  opacity: 0.25;
+  color: var(--calcite-ui-foreground-3);
 }
 
 :host([mirrored]:not([has-histogram])) .tick__label--min {