@esri/calcite-components 1.0.0-beta.80 → 1.0.0-beta.83

package/dist/collection/components/action/resources.js

@@ -1,6 +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.0.0-beta.83
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/action-bar/action-bar.js

@@ -1,6 +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.0.0-beta.83
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -93,6 +94,7 @@ export class ActionBar {
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
+      this.calciteActionBarToggle.emit();
     };
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
@@ -103,7 +105,6 @@ export class ActionBar {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
-    this.calciteActionBarToggle.emit();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
     overflowActionsDisabled
@@ -142,12 +143,17 @@ export class ActionBar {
   // --------------------------------------------------------------------------
   /**
    * Overflows actions that won't fit into menus.
+   *
    * @internal
    */
   async overflowActions() {
     this.resize(this.el.clientHeight);
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
@@ -358,7 +364,10 @@ export class ActionBar {
       "complexType": {
         "signature": "(focusId?: \"expand-toggle\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -370,7 +379,10 @@ export class ActionBar {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }

package/dist/collection/components/action-bar/resources.js

@@ -1,6 +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.0.0-beta.83
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom"

package/dist/collection/components/action-bar/utils.js

@@ -1,6 +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.0.0-beta.83
  */
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";

package/dist/collection/components/action-group/action-group.js

@@ -1,6 +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.0.0-beta.83
  */
 import { Component, h, Prop, Watch, Element } from "@stencil/core";
 import { SLOTS, TEXT, ICONS } from "./resources";

package/dist/collection/components/action-group/resources.js

@@ -1,6 +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.0.0-beta.83
  */
 export const SLOTS = {
   menuActions: "menu-actions",

package/dist/collection/components/action-menu/action-menu.css

@@ -90,9 +90,7 @@
 .menu ::slotted(calcite-action) {
   margin: 0.125rem;
   display: flex;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 ::slotted(calcite-action[active]) {

package/dist/collection/components/action-menu/action-menu.js

@@ -1,10 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, h, Element, Event, Listen, Prop, Watch, Method, State } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
-import { focusElement, getSlotted } from "../../utils/dom";
+import { focusElement, getSlotted, toAriaBoolean } from "../../utils/dom";
 import { Fragment } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { guid } from "../../utils/guid";
@@ -36,6 +37,7 @@ export class ActionMenu {
     this.overlayPositioning = "absolute";
     /**
      * Determines where the component will be positioned relative to the referenceElement.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = "auto";
@@ -64,7 +66,7 @@ export class ActionMenu {
       }
       menuButtonEl.active = open;
       menuButtonEl.setAttribute("aria-controls", menuId);
-      menuButtonEl.setAttribute("aria-expanded", open.toString());
+      menuButtonEl.setAttribute("aria-expanded", toAriaBoolean(open));
       menuButtonEl.setAttribute("aria-haspopup", "true");
       if (!menuButtonEl.id) {
         menuButtonEl.id = menuButtonId;
@@ -104,12 +106,19 @@ export class ActionMenu {
     this.menuButtonClick = () => {
       this.toggleOpen();
     };
+    this.updateTooltip = (event) => {
+      const tooltips = event.target
+        .assignedElements({
+        flatten: true
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+      this.tooltipEl = tooltips[0];
+      this.setTooltipReferenceElement();
+    };
     this.setTooltipReferenceElement = () => {
-      const { el, expanded, menuButtonEl } = this;
-      const slotted = getSlotted(el, SLOTS.tooltip);
-      const tooltip = (slotted === null || slotted === void 0 ? void 0 : slotted.tagName) === "SLOT" ? slotted.assignedElements()[0] : slotted;
-      if ((tooltip === null || tooltip === void 0 ? void 0 : tooltip.tagName) === "CALCITE-TOOLTIP") {
-        tooltip.referenceElement = !expanded ? menuButtonEl : null;
+      const { tooltipEl, expanded, menuButtonEl, open } = this;
+      if (tooltipEl) {
+        tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : null;
       }
     };
     this.updateAction = (action, index) => {
@@ -236,6 +245,7 @@ export class ActionMenu {
       this.menuButtonEl.active = open;
     }
     this.calciteActionMenuOpenChange.emit(open);
+    this.setTooltipReferenceElement();
   }
   closeCalciteActionMenuOnClick(event) {
     const composedPath = event.composedPath();
@@ -257,10 +267,10 @@ export class ActionMenu {
     focusElement(this.open ? this.menuEl : this.menuButtonEl);
   }
   renderMenuButton() {
-    const { el, label, scale } = this;
+    const { label, scale, expanded } = this;
     const menuButtonSlot = (h("slot", { name: SLOTS.trigger },
-      h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label })));
-    return getSlotted(el, SLOTS.tooltip) ? (h("calcite-tooltip-manager", null, menuButtonSlot)) : (menuButtonSlot);
+      h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
+    return menuButtonSlot;
   }
   renderMenuItems() {
     const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
@@ -274,12 +284,7 @@ export class ActionMenu {
     return (h(Fragment, null,
       this.renderMenuButton(),
       this.renderMenuItems(),
-      h("slot", { name: SLOTS.tooltip })));
-  }
-  getAssignedElements() {
-    return Array.from(this.el.querySelectorAll("slot"))
-      .map((slot) => slot.assignedElements({ flatten: true }))
-      .reduce((ar, val) => ar.concat(val), []);
+      h("slot", { name: SLOTS.tooltip, onSlotchange: this.updateTooltip })));
   }
   isValidKey(key, supportedKeys) {
     return !!supportedKeys.find((k) => k === key);

package/dist/collection/components/action-menu/resources.js

@@ -1,6 +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.0.0-beta.83
  */
 export const CSS = {
   menu: "menu",

package/dist/collection/components/action-pad/action-pad.js

@@ -1,6 +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.0.0-beta.83
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -47,6 +48,7 @@ export class ActionPad {
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
+      this.calciteActionPadToggle.emit();
     };
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
@@ -54,7 +56,6 @@ export class ActionPad {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
-    this.calciteActionPadToggle.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -76,7 +77,11 @@ export class ActionPad {
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
@@ -273,7 +278,10 @@ export class ActionPad {
       "complexType": {
         "signature": "(focusId?: \"expand-toggle\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -285,7 +293,10 @@ export class ActionPad {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }

package/dist/collection/components/action-pad/resources.js

@@ -1,6 +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.0.0-beta.83
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",

package/dist/collection/components/alert/alert.css

@@ -216,6 +216,11 @@
   inset-inline-start: auto;
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 .container {
   display: flex;
   width: 100%;
@@ -224,9 +229,7 @@
 }
 
 .alert-close {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .alert-close:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -269,10 +272,7 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
 }
 
 .alert-content {
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
   overflow-wrap: break-word;
@@ -292,10 +292,7 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
 }
 
 .alert-icon {
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
   display: flex;
@@ -307,14 +304,12 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
 }
 
 .alert-close {
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
   cursor: pointer;
   align-self: stretch;
+  overflow: hidden;
   border-style: none;
   background-color: var(--calcite-ui-foreground-1);
   padding-top: 0px;
@@ -322,7 +317,6 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
   color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  overflow: hidden;
   border-end-end-radius: var(--calcite-border-radius);
 }
 .alert-close:hover, .alert-close:focus {
@@ -340,16 +334,13 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
   align-items: center;
   justify-content: space-around;
   align-self: stretch;
+  overflow: hidden;
   background-color: var(--calcite-ui-foreground-1);
   text-align: center;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
   opacity: 0;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
-  overflow: hidden;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-left: 0px solid transparent;
   border-right: 0px solid transparent;
   border-top-right-radius: 0;
@@ -429,14 +420,10 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
 @keyframes dismissProgress {
   0% {
     width: 0px;
-  }
-  0% {
     opacity: 0.75;
   }
   100% {
     width: 100%;
-  }
-  100% {
     opacity: 1;
   }
 }

package/dist/collection/components/alert/alert.js

@@ -1,12 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { getSlotted, setRequestedIcon } from "../../utils/dom";
+import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "./interfaces";
-/** Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
+/**
+ * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  */
 /**
@@ -29,7 +31,9 @@ export class Alert {
     this.autoDismissDuration = this.autoDismiss ? "medium" : null;
     /** Color for the alert (will apply to top border and icon) */
     this.color = "blue";
-    /** string to override English close text
+    /**
+     * string to override English close text
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.intlClose;
@@ -58,7 +62,7 @@ export class Alert {
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
       this.determineActiveAlert();
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
@@ -76,11 +80,11 @@ export class Alert {
   }
   watchActive() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
     if (!this.active) {
       this.queue = this.queue.filter((e) => e !== this.el);
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     }
   }
   updateRequestedIcon() {
@@ -99,7 +103,7 @@ export class Alert {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
   }
   componentWillLoad() {
@@ -117,7 +121,7 @@ export class Alert {
     const { active, autoDismiss, label, placement, queued, requestedIcon } = this;
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
-    return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
       h("div", { class: {
           container: true,
           queued,
@@ -140,6 +144,7 @@ export class Alert {
     }
     this.queueLength = this.queue.length;
     this.determineActiveAlert();
+    event.stopPropagation();
   }
   // when an alert is first registered, trigger a queue sync to get queue
   alertRegister() {
@@ -147,7 +152,7 @@ export class Alert {
       this.queued = true;
       this.queue.push(this.el);
     }
-    this.calciteAlertSync.emit({ queue: this.queue });
+    this.calciteInternalAlertSync.emit({ queue: this.queue });
     this.determineActiveAlert();
   }
   //--------------------------------------------------------------------------
@@ -422,8 +427,8 @@ export class Alert {
         "references": {}
       }
     }, {
-      "method": "calciteAlertSync",
-      "name": "calciteAlertSync",
+      "method": "calciteInternalAlertSync",
+      "name": "calciteInternalAlertSync",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -440,8 +445,8 @@ export class Alert {
         "references": {}
       }
     }, {
-      "method": "calciteAlertRegister",
-      "name": "calciteAlertRegister",
+      "method": "calciteInternalAlertRegister",
+      "name": "calciteInternalAlertRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -494,13 +499,13 @@ export class Alert {
       "methodName": "updateDuration"
     }]; }
   static get listeners() { return [{
-      "name": "calciteAlertSync",
+      "name": "calciteInternalAlertSync",
       "method": "alertSync",
       "target": "window",
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteAlertRegister",
+      "name": "calciteInternalAlertRegister",
       "method": "alertRegister",
       "target": "window",
       "capture": false,

package/dist/collection/components/alert/interfaces.js

@@ -1,6 +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.0.0-beta.83
  */
 export var StatusIcons;
 (function (StatusIcons) {

package/dist/collection/components/alert/resources.js

@@ -1,6 +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.0.0-beta.83
  */
 export const TEXT = {
   intlClose: "Close"

package/dist/collection/components/avatar/avatar.css

@@ -80,8 +80,8 @@
 
 :host {
   display: inline-block;
-  border-radius: 50%;
   overflow: hidden;
+  border-radius: 50%;
 }
 
 :host([scale=s]) {

package/dist/collection/components/avatar/avatar.js

@@ -1,6 +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.0.0-beta.83
  */
 import { Component, Element, h, Prop, State } from "@stencil/core";
 import { isValidHex } from "../color-picker/utils";

package/dist/collection/components/avatar/utils.js

@@ -1,11 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { hexToRGB } from "../color-picker/utils";
 /**
  * Convert a string to a valid hex by hashing its contents
  * and using the hash as a seed for three distinct color values
+ *
+ * @param str
  */
 export function stringToHex(str) {
   let hash = 0;
@@ -21,6 +24,8 @@ export function stringToHex(str) {
 }
 /**
  * Find the hue of a color given the separate RGB color channels
+ *
+ * @param rgb
  */
 export function rgbToHue(rgb) {
   let { r, g, b } = rgb;
@@ -49,6 +54,7 @@ export function rgbToHue(rgb) {
 }
 /**
  * For a hex color, find the hue
+ *
  * @param hex {string} - form of "#------"
  */
 export function hexToHue(hex) {

package/dist/collection/components/block/block.css

@@ -205,9 +205,7 @@ h4.heading, h5.heading {
   border-style: none;
   padding: 0px;
   font-family: inherit;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   text-align: initial;
   background-color: transparent;
 }