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

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

@@ -125,38 +125,41 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 .container {
@@ -233,10 +236,7 @@ h5.heading {
   display: block;
   overflow: hidden;
   margin-right: auto;
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 1rem;
 }
 
 .header-content .heading,

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

@@ -5,13 +5,14 @@ import { CSS_UTILITY } from "../../utils/resources";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
 /**
- * @slot header-actions-start - a slot for adding actions or content to the start side of the panel header.
- * @slot header-actions-end - a slot for adding actions or content to the end side of the panel header.
- * @slot header-content - a slot for adding custom content to the header.
- * @slot header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
- * @slot fab - a slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer-actions - a slot for adding buttons to the footer.
- * @slot footer - a slot for adding custom content to the footer.
+ * @slot - A slot for adding custom content.
+ * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
+ * @slot header-actions-end - A slot for adding actions or content to the end side of the panel header.
+ * @slot header-content - A slot for adding custom content to the header.
+ * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a dropdown.
+ * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
+ * @slot footer-actions - A slot for adding buttons to the footer.
+ * @slot footer - A slot for adding custom content to the footer.
  */
 export class CalcitePanel {
   constructor() {
@@ -81,6 +82,7 @@ export class CalcitePanel {
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     var _a, _b, _c;
     if (focusId === "dismiss-button") {
@@ -104,7 +106,7 @@ export class CalcitePanel {
     const { showBackButton, intlBack, backButtonClick } = this;
     const label = intlBack || TEXT.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-    return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "m", slot: SLOTS.headerActionsStart, text: label })) : null;
+    return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: SLOTS.headerActionsStart, text: label })) : null;
   }
   renderHeaderContent() {
     const { heading, headingLevel, summary } = this;
@@ -555,7 +557,7 @@ export class CalcitePanel {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -98,12 +86,20 @@
 
 :host {
   align-items: stretch;
+  box-sizing: border-box;
   background-color: transparent;
   display: flex;
   flex-direction: column;
   position: relative;
   flex-grow: 1;
   flex-shrink: 0;
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
+}
+
+:host * {
+  box-sizing: border-box;
 }
 
 :host([filter-enabled]) header {
@@ -122,7 +118,7 @@
 }
 
 calcite-filter {
-  margin-bottom: 1px;
+  margin-bottom: 0;
 }
 
 :host([loading][disabled]) {

package/dist/collection/components/calcite-pick-list/calcite-pick-list.js

@@ -2,6 +2,7 @@ import { Component, Element, Event, Listen, Method, Prop, State, h } from "@sten
 import { ICON_TYPES } from "./resources";
 import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, getItemData, handleFilter, calciteListFocusOutHandler, initialize, initializeObserver, mutationObserverCallback, selectSiblings, setUpItems, keyDownHandler, setFocus, removeItem } from "./shared-list-logic";
 import List from "./shared-list-render";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
@@ -44,7 +45,7 @@ export class CalcitePickList {
     this.selectedValues = new Map();
     this.dataForFilter = [];
     this.lastSelectedItem = null;
-    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
@@ -100,9 +101,11 @@ export class CalcitePickList {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Returns the currently selected items */
   async getSelectedItems() {
     return this.selectedValues;
   }
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -295,7 +298,7 @@ export class CalcitePickList {
         "return": "Promise<Map<string, HTMLCalcitePickListItemElement>>"
       },
       "docs": {
-        "text": "",
+        "text": "Returns the currently selected items",
         "tags": []
       }
     },
@@ -318,7 +321,7 @@ export class CalcitePickList {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-pick-list/shared-list-logic.js

@@ -17,10 +17,12 @@ export function initialize() {
   this.emitCalciteListChange = debounce(internalCalciteListChangeEvent.bind(this), 0);
 }
 export function initializeObserver() {
-  this.observer.observe(this.el, { childList: true, subtree: true });
+  var _a;
+  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
 }
 export function cleanUpObserver() {
-  this.observer.disconnect();
+  var _a;
+  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
 }
 // --------------------------------------------------------------------------
 //

package/dist/collection/components/calcite-pick-list-group/calcite-pick-list-group.css

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -98,8 +86,15 @@
 
 :host {
   background-color: transparent;
+  box-sizing: border-box;
   display: block;
   margin-bottom: 0.25rem;
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+}
+
+:host * {
+  box-sizing: border-box;
 }
 
 :host(:last-child) {
@@ -112,45 +107,51 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
   color: var(--calcite-ui-text-3);
-  margin: 0.5rem 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 
 .container--indented {

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.css

@@ -78,18 +78,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -99,16 +87,26 @@
 }
 
 :host {
+  background-color: var(--calcite-ui-foreground-1);
+  box-sizing: border-box;
   align-items: stretch;
   display: flex;
+  font-size: var(--calcite-font-size--1);
   color: var(--calcite-ui-text-1);
   box-shadow: 0 1px 0 var(--calcite-ui-border-3);
   margin: 0;
   margin-bottom: 1px;
+  background-color: var(--calcite-ui-foreground-1);
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
   transition: background-color 150ms ease-in-out;
   animation: calcite-fade-in 150ms ease-in-out;
 }
 
+:host * {
+  box-sizing: border-box;
+}
+
 .label {
   background-color: transparent;
   display: flex;
@@ -188,16 +186,19 @@
   line-height: 1.375;
   word-wrap: break-word;
   word-break: break-word;
-  flex-flow: column nowrap;
+  flex-direction: column;
+  flex-wrap: nowrap;
 }
 
 .title {
   color: var(--calcite-ui-text-1);
+  font-weight: var(--calcite-font-weight-normal);
 }
 
 .description {
   margin-top: 0.125rem;
   color: var(--calcite-ui-text-3);
+  font-weight: var(--calcite-font-weight-normal);
 }
 
 .actions {

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.js

@@ -34,7 +34,7 @@ export class CalcitePickListItem {
      */
     this.selected = false;
     /**
-     * The text for the remove item buttons. Only applicable if removable is true.
+     * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
      * @default "Remove"
      */
     this.intlRemove = TEXT.remove;
@@ -99,6 +99,7 @@ export class CalcitePickListItem {
     }
     this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
   }
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
@@ -341,7 +342,7 @@ export class CalcitePickListItem {
             "text": "\"Remove\"",
             "name": "default"
           }],
-        "text": "The text for the remove item buttons. Only applicable if removable is true."
+        "text": "Used as an accessible label (aria-label) for the \"remove item\" action. Only applicable if removable is true."
       },
       "attribute": "intl-remove",
       "reflect": true,
@@ -468,7 +469,7 @@ export class CalcitePickListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -5,6 +5,9 @@ import { guid } from "../../utils/guid";
 import { getElementDir, queryElementRoots } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CalciteHeading } from "../functional/CalciteHeading";
+/**
+ * @slot - A slot for adding custom content.
+ */
 export class CalcitePopover {
   constructor() {
     // --------------------------------------------------------------------------
@@ -146,6 +149,7 @@ export class CalcitePopover {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
   async reposition() {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
@@ -158,6 +162,7 @@ export class CalcitePopover {
       })
       : this.createPopper();
   }
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     var _a;
     const { closeButtonEl } = this;
@@ -168,6 +173,7 @@ export class CalcitePopover {
     }
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  /** Toggles the popover's open property. */
   async toggle(value = !this.open) {
     this.open = value;
   }
@@ -620,7 +626,7 @@ export class CalcitePopover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Updates the position of the component.",
         "tags": []
       }
     },
@@ -639,7 +645,7 @@ export class CalcitePopover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     },
@@ -658,7 +664,7 @@ export class CalcitePopover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Toggles the popover's open property.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-popover-manager/calcite-popover-manager.js

@@ -16,6 +16,10 @@ export class CalcitePopoverManager {
      * @default `[data-calcite-popover-reference]`
      */
     this.selector = `[${POPOVER_REFERENCE}]`;
+    /**
+     * Automatically closes any currently open popovers when clicking outside of a popover.
+     */
+    this.autoClose = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -96,13 +100,14 @@ export class CalcitePopoverManager {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Automatically closes any currently open popovers when clicking outside of a popover."
       },
       "attribute": "auto-close",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "el"; }

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

@@ -12,14 +12,14 @@ export class CalciteRadio {
     this.disabled = false;
     /**
      * The focused state of the radio.
-     * @private
+     * @internal
      */
     this.focused = false;
     /** The radio's hidden status. */
     this.hidden = false;
     /**
      * The hovered state of the radio.
-     * @private
+     * @internal
      */
     this.hovered = false;
     /** The scale (size) of the radio. */
@@ -69,7 +69,7 @@ export class CalciteRadio {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The disabled state of the radio."
@@ -91,7 +91,7 @@ export class CalciteRadio {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The focused state of the radio."
       },
@@ -130,7 +130,7 @@ export class CalciteRadio {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The hovered state of the radio."
       },