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

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Listen, Event, Element, Build, Method, Watch, Host } from "@stencil/core";
+import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { getElementDir } from "../../utils/dom";
 import { debounce } from "lodash-es";
@@ -7,7 +7,12 @@ import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper
 import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { createObserver } from "../../utils/observers";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
 export class CalciteCombobox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -15,7 +20,7 @@ export class CalciteCombobox {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Open and close combobox */
+    /** Opens or closes the combobox */
     this.active = false;
     /** Disable combobox input */
     this.disabled = false;
@@ -31,11 +36,6 @@ export class CalciteCombobox {
     this.selectionMode = "multi";
     /** Specify the scale of the combobox, defaults to m */
     this.scale = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.items = [];
     this.groupItems = [];
     this.selectedItems = [];
@@ -49,7 +49,7 @@ export class CalciteCombobox {
     /** specifies the item wrapper height; it is updated when maxItems is > 0  **/
     this.maxScrollerHeight = 0;
     this.textInput = null;
-    this.observer = null;
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.guid = guid();
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
@@ -59,6 +59,9 @@ export class CalciteCombobox {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
     this.keydownHandler = (event) => {
       const key = getKey(event.key, getElementDir(this.el));
       switch (key) {
@@ -289,6 +292,7 @@ export class CalciteCombobox {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Updates the position of the component. */
   async reposition() {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
@@ -301,6 +305,7 @@ export class CalciteCombobox {
       })
       : this.createPopper();
   }
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     this.active = true;
@@ -314,18 +319,14 @@ export class CalciteCombobox {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (Build.isBrowser) {
-      this.observer = new MutationObserver(this.updateItems);
-    }
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
+    connectLabel(this);
   }
   componentWillLoad() {
     this.updateItems();
   }
-  componentDidLoad() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-  }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
       this.reposition();
@@ -334,8 +335,9 @@ export class CalciteCombobox {
   }
   disconnectedCallback() {
     var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.destroyPopper();
+    disconnectLabel(this);
   }
   /** when search text is cleared, reset active to  */
   textHandler() {
@@ -603,7 +605,7 @@ export class CalciteCombobox {
     });
   }
   renderInput() {
-    const { active, disabled, placeholder, selectionMode, needsIcon, label, selectedItems } = this;
+    const { active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
     const single = selectionMode === "single";
     const selectedItem = selectedItems[0];
     const showLabel = !active && single && !!selectedItem;
@@ -615,10 +617,10 @@ export class CalciteCombobox {
           label: true,
           "label--spaced": needsIcon
         }, key: "label", onFocus: this.comboboxFocusHandler, tabindex: "0" }, selectedItem.textLabel)),
-      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": guid, "aria-label": label, class: {
+      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": guid, "aria-label": getLabelText(this), class: {
           input: true,
+          "input--single": true,
           "input--transparent": this.activeChipIndex > -1,
-          "input--single": single,
           "input--hidden": showLabel,
           "input--icon": single && needsIcon
         }, disabled: disabled, id: `${guid}-input`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
@@ -658,8 +660,8 @@ export class CalciteCombobox {
     return (h(Host, { onKeyDown: this.keydownHandler },
       h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": labelId, "aria-owns": guid, class: {
           wrapper: true,
-          "wrapper--active": open,
-          "wrapper--single": single
+          "wrapper--single": single || !this.selectedItems.length,
+          "wrapper--active": open
         }, onClick: this.setFocusClick, ref: this.setReferenceEl, role: "combobox" },
         this.renderIconStart(),
         !single && this.renderChips(),
@@ -690,7 +692,7 @@ export class CalciteCombobox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Open and close combobox"
+        "text": "Opens or closes the combobox"
       },
       "attribute": "active",
       "reflect": true,
@@ -992,7 +994,7 @@ export class CalciteCombobox {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Updates the position of the component.",
         "tags": []
       }
     },
@@ -1008,7 +1010,7 @@ export class CalciteCombobox {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-combobox-item/calcite-combobox-item.js

@@ -4,6 +4,9 @@ import { CSS } from "./resources";
 import { guid } from "../../utils/guid";
 import { getAncestors, getDepth } from "../calcite-combobox/utils";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding nested `calcite-combobox-item`s.
+ */
 export class CalciteComboboxItem {
   constructor() {
     // --------------------------------------------------------------------------

package/dist/collection/components/calcite-combobox-item-group/calcite-combobox-item-group.js

@@ -4,6 +4,9 @@ import { getAncestors, getDepth } from "../calcite-combobox/utils";
 import { guid } from "../../utils/guid";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
 export class CalciteComboboxItemGroup {
   constructor() {
     this.guid = guid();

package/dist/collection/components/calcite-date-picker/calcite-date-picker.js

@@ -65,7 +65,7 @@ export class CalciteDatePicker {
     this.monthHoverChange = (e) => {
       if (!this.startAsDate) {
         this.hoverRange = undefined;
-        return this.hoverRange;
+        return;
       }
       const date = new Date(e.detail);
       this.hoverRange = {
@@ -161,7 +161,12 @@ export class CalciteDatePicker {
         if (this.startAsDate) {
           this.setEndDate(new Date(this.startAsDate));
         }
-        this.setStartDate(date);
+        if (this.activeRange == "end") {
+          this.setEndDate(date);
+        }
+        else {
+          this.setStartDate(date);
+        }
       }
       else if (!this.endAsDate) {
         this.setEndDate(date);
@@ -621,7 +626,7 @@ export class CalciteDatePicker {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Range mode activation"
@@ -673,7 +678,7 @@ export class CalciteDatePicker {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range."

package/dist/collection/components/calcite-date-picker/utils.js

@@ -11,12 +11,7 @@ function getSupportedLocale(lang = "") {
   }
   else {
     const base = lang.split("-")[0];
-    if (locales.indexOf(base) > -1) {
-      return base;
-    }
-    else {
-      return "en";
-    }
+    return locales.indexOf(base) > -1 ? base : "en";
   }
 }
 /**

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.js

@@ -18,6 +18,7 @@ export class CalciteDatePickerDay {
     this.startOfRange = false;
     /** Date is the end of date range */
     this.endOfRange = false;
+    /** Date is being hovered and within the set range */
     this.rangeHover = false;
     /** Date is actively in focus for keyboard navigation */
     this.active = false;
@@ -222,7 +223,7 @@ export class CalciteDatePickerDay {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Date is being hovered and within the set range"
       },
       "attribute": "range-hover",
       "reflect": true,

package/dist/collection/components/calcite-date-picker-month/calcite-date-picker-month.js

@@ -188,7 +188,7 @@ export class CalciteDatePickerMonth {
    * Determine if the date is in between the start and end dates
    */
   betweenSelectedRange(date) {
-    return (this.startDate &&
+    return !!(this.startDate &&
       this.endDate &&
       date > this.startDate &&
       date < this.endDate &&
@@ -198,7 +198,7 @@ export class CalciteDatePickerMonth {
    * Determine if the date should be in selected state
    */
   isSelected(date) {
-    return (sameDate(date, this.selectedDate) ||
+    return !!(sameDate(date, this.selectedDate) ||
       (this.startDate && sameDate(date, this.startDate)) ||
       (this.endDate && sameDate(date, this.endDate)));
   }
@@ -206,13 +206,13 @@ export class CalciteDatePickerMonth {
    * Determine if the date is the start of the date range
    */
   isStartOfRange(date) {
-    return (!!this.startDate &&
+    return !!(this.startDate &&
       !sameDate(this.startDate, this.endDate) &&
       sameDate(this.startDate, date) &&
       !this.isEndOfRange(date));
   }
   isEndOfRange(date) {
-    return ((!!this.endDate && !sameDate(this.startDate, this.endDate) && sameDate(this.endDate, date)) ||
+    return !!((this.endDate && !sameDate(this.startDate, this.endDate) && sameDate(this.endDate, date)) ||
       (!this.endDate &&
         this.hoverRange &&
         sameDate(this.startDate, this.hoverRange.end) &&
@@ -244,11 +244,11 @@ export class CalciteDatePickerMonth {
   }
   isHoverInRange() {
     if (!this.hoverRange) {
-      return;
+      return false;
     }
     const { start, end } = this.hoverRange;
-    return ((!this.isFocusedOnStart() && !!this.startDate && (!this.endDate || end < this.endDate)) ||
-      (this.isFocusedOnStart() && !!this.startDate && start > this.startDate));
+    return !!((!this.isFocusedOnStart() && this.startDate && (!this.endDate || end < this.endDate)) ||
+      (this.isFocusedOnStart() && this.startDate && start > this.startDate));
   }
   isRangeHover(date) {
     if (!this.hoverRange) {
@@ -437,21 +437,24 @@ export class CalciteDatePickerMonth {
       }
     },
     "hoverRange": {
-      "type": "any",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "HoverRange",
+        "resolved": "HoverRange",
+        "references": {
+          "HoverRange": {
+            "location": "import",
+            "path": "../../utils/date"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
-      },
-      "attribute": "hover-range",
-      "reflect": false
+        "text": "The range of dates currently being hovered"
+      }
     }
   }; }
   static get events() { return [{

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

@@ -93,7 +93,6 @@
 */
 
 :host {
-  position: relative;
   display: inline-flex;
   flex: 0 1 auto;
 }

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

@@ -2,8 +2,12 @@ import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from
 import { getKey } from "../../utils/key";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { createPopper, CSS as PopperCSS, updatePopper } from "../../utils/popper";
-import { DefaultDropdownPlacement } from "./resources";
+import { DefaultDropdownPlacement, SLOTS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
+ * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
+ */
 export class CalciteDropdown {
   constructor() {
     //--------------------------------------------------------------------------
@@ -11,12 +15,15 @@ export class CalciteDropdown {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
+    /** Opens or closes the dropdown */
     this.active = false;
     /**
      allow the dropdown to remain open after a selection is made
      if the selection-mode of the selected item's containing group is "none", the dropdown will always close
      */
     this.disableCloseOnSelect = false;
+    /** is the dropdown disabled  */
+    this.disabled = false;
     /**
      specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
      this value does not include groupTitles passed to calcite-dropdown-group
@@ -143,14 +150,14 @@ export class CalciteDropdown {
     const dir = getElementDir(this.el);
     return (h(Host, { tabIndex: this.disabled ? -1 : null },
       h("div", { class: { ["calcite-dropdown-trigger-container"]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.openDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
-        h("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: "dropdown-trigger" })),
+        h("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: SLOTS.dropdownTrigger })),
       h("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
         h("div", { class: {
             ["calcite-dropdown-content"]: true,
             [PopperCSS.animation]: true,
             [PopperCSS.animationActive]: active
           }, onTransitionEnd: this.transitionEnd, style: {
-            maxHeight: maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : ""
+            maxHeight: !active || maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : ""
           } },
           h("slot", null)))));
   }
@@ -159,6 +166,7 @@ export class CalciteDropdown {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Updates the position of the component. */
   async reposition() {
     const { popper, menuEl, placement } = this;
     const modifiers = this.getModifiers();
@@ -356,7 +364,7 @@ export class CalciteDropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Opens or closes the dropdown"
       },
       "attribute": "active",
       "reflect": true,
@@ -389,13 +397,14 @@ export class CalciteDropdown {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "is the dropdown disabled"
       },
       "attribute": "disabled",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "maxItems": {
       "type": "number",
@@ -611,7 +620,7 @@ export class CalciteDropdown {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Updates the position of the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-dropdown/resources.js

@@ -1 +1,4 @@
 export const DefaultDropdownPlacement = "bottom-leading";
+export const SLOTS = {
+  dropdownTrigger: "dropdown-trigger"
+};

package/dist/collection/components/calcite-dropdown-group/calcite-dropdown-group.js

@@ -1,6 +1,9 @@
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { CSS } from "./resources";
+/**
+ * @slot - A slot for adding `calcite-dropdown-item`s.
+ */
 export class CalciteDropdownGroup {
   constructor() {
     /** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),

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

@@ -250,6 +250,18 @@
   color: var(--calcite-ui-brand);
 }
 
+.container--s.container--none-selection {
+  padding-left: 0.25rem;
+}
+
+.container--m.container--none-selection {
+  padding-left: 0.5rem;
+}
+
+.container--l.container--none-selection {
+  padding-left: 0.75rem;
+}
+
 .container--multi-selection:before,
 .container--none-selection:before {
   display: none;

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-item.js

@@ -3,6 +3,9 @@ import { getElementDir, getElementProp } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
+/**
+ * @slot - A slot for adding text.
+ */
 export class CalciteDropdownItem {
   constructor() {
     //--------------------------------------------------------------------------
@@ -10,6 +13,7 @@ export class CalciteDropdownItem {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
+    /** Indicates whether the item is active. */
     this.active = false;
   }
   //--------------------------------------------------------------------------
@@ -17,7 +21,7 @@ export class CalciteDropdownItem {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Focuses the selected item. */
+  /** Sets focus on the component. */
   async setFocus() {
     this.el.focus();
   }
@@ -167,7 +171,7 @@ export class CalciteDropdownItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Indicates whether the item is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -371,7 +375,7 @@ export class CalciteDropdownItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Focuses the selected item.",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -43,6 +43,7 @@ export class CalciteFab {
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.buttonEl);
   }
@@ -263,7 +264,7 @@ export class CalciteFab {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -139,6 +139,10 @@ input[type=text]::-ms-clear {
   display: none;
 }
 
+calcite-input {
+  width: 100%;
+}
+
 .search-icon {
   display: flex;
   left: 0;
@@ -157,7 +161,6 @@ input[type=text]:focus {
   outline-offset: 2px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
-  box-shadow: 0 2px 0 var(--calcite-ui-brand);
 }
 
 input[type=text]:focus ~ .search-icon {
@@ -183,6 +186,8 @@ input[type=text]:focus ~ .search-icon {
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
 .clear-button:hover, .clear-button:focus {

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

@@ -68,9 +68,7 @@ export class CalciteFilter {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /**
-   * Focuses the filter input.
-   */
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.textInput);
   }
@@ -86,11 +84,9 @@ export class CalciteFilter {
       disabled ? h("calcite-scrim", null) : null,
       h("div", { class: CSS.container },
         h("label", { class: rtl ? CSS_UTILITY.rtl : null },
-          h("input", { "aria-label": this.intlLabel || TEXT.filterLabel, disabled: this.disabled, onInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+          h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, class: rtl ? CSS_UTILITY.rtl : null, disabled: this.disabled, icon: ICONS.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
               this.textInput = el;
-            }, type: "text", value: "" }),
-          h("div", { class: CSS.searchIcon },
-            h("calcite-icon", { icon: ICONS.search, scale: "s" }))),
+            }, type: "text", value: "" })),
         !this.empty ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, onClick: this.clear },
           h("calcite-icon", { icon: ICONS.close }))) : null)));
   }
@@ -220,7 +216,7 @@ export class CalciteFilter {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Focuses the filter input.",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -1,5 +1,6 @@
 import { Component, Element, Listen, Method, State, h } from "@stencil/core";
 import { CSS } from "./resources";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-panel`s to the flow.
  */
@@ -39,7 +40,7 @@ export class CalciteFlow {
         this.flowDirection = flowDirection;
       }
     };
-    this.panelItemObserver = new MutationObserver(this.updateFlowProps);
+    this.panelItemMutationObserver = createObserver("mutation", this.updateFlowProps);
   }
   // --------------------------------------------------------------------------
   //
@@ -68,11 +69,13 @@ export class CalciteFlow {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    this.panelItemObserver.observe(this.el, { childList: true, subtree: true });
+    var _a;
+    (_a = this.panelItemMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.updateFlowProps();
   }
   disconnectedCallback() {
-    this.panelItemObserver.disconnect();
+    var _a;
+    (_a = this.panelItemMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //

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

@@ -94,4 +94,13 @@
   margin: 0;
   padding: 0;
   display: block;
+}
+
+:host([data-style=slider-histogram]) svg {
+  width: 100%;
+}
+
+:host([data-style=slider-histogram]) svg .graph-path--highlight {
+  fill: var(--calcite-ui-brand);
+  opacity: 0.5;
 }

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

@@ -44,6 +44,7 @@ export class CalciteHandle {
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     this.handleButton.focus();
   }
@@ -138,7 +139,7 @@ export class CalciteHandle {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-icon/assets/calcite-icon/beacon16.json

@@ -0,0 +1 @@
+"M8 7a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1zm-2.985 3.91a4.68 4.68 0 0 1-.003-5.817l.783.622a3.68 3.68 0 0 0 .002 4.572zm-1.99 2.052a7.132 7.132 0 0 1 0-9.924l.72.693a6.135 6.135 0 0 0 0 8.538zm7.963-2.055l-.783-.622a3.68 3.68 0 0 0-.002-4.572l.782-.623a4.68 4.68 0 0 1 .003 5.817zm1.988 2.055l-.721-.693a6.135 6.135 0 0 0 0-8.538l.72-.693a7.132 7.132 0 0 1 0 9.924z"