@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

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

@@ -1,11 +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.81
+ * v1.0.0-beta.84
  */
 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";
@@ -26,17 +26,18 @@ export class ActionMenu {
     //
     // --------------------------------------------------------------------------
     /**
-     * Indicates whether widget is expanded.
+     * When true, the component is expanded.
      */
     this.expanded = false;
     /**
-     * Opens the action menu.
+     * When true, the component is open.
      */
     this.open = false;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /** Determines the type of positioning to use for the overlaid content. If your element is in a fixed container, use the "fixed" value. */
     this.overlayPositioning = "absolute";
     /**
-     * Determines where the component will be positioned relative to the referenceElement.
+     * 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";
@@ -65,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;
@@ -105,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) => {
@@ -237,6 +245,7 @@ export class ActionMenu {
       this.menuButtonEl.active = open;
     }
     this.calciteActionMenuOpenChange.emit(open);
+    this.setTooltipReferenceElement();
   }
   closeCalciteActionMenuOnClick(event) {
     const composedPath = event.composedPath();
@@ -258,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;
@@ -275,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);
@@ -306,7 +310,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether widget is expanded."
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -344,7 +348,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Text string for the actions menu."
+        "text": "Specifies the text string for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -361,7 +365,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Opens the action menu."
+        "text": "When true, the component is open."
       },
       "attribute": "open",
       "reflect": true,
@@ -384,7 +388,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Determines the type of positioning to use for the overlaid content. If your element is in a fixed container, use the \"fixed\" value."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -410,7 +414,7 @@ export class ActionMenu {
             "name": "see",
             "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
-        "text": "Determines where the component will be positioned relative to the referenceElement."
+        "text": "Determines where the component will be positioned relative to the `referenceElement`."
       },
       "attribute": "placement",
       "reflect": true,
@@ -433,7 +437,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the size of the menu trigger action."
+        "text": "Specifies the size of the component's trigger `calcite-action`."
       },
       "attribute": "scale",
       "reflect": true
@@ -450,7 +454,7 @@ export class ActionMenu {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the open property has changed."
+        "text": "Emits when the `open` property has changed."
       },
       "complexType": {
         "original": "any",

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

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

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

@@ -1,7 +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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -9,8 +9,8 @@ import { focusElement, getSlotted } from "../../utils/dom";
 import { CSS, TEXT, SLOTS } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding `calcite-action`s to the action pad.
- * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
+ * @slot - A slot for adding `calcite-action`s to the component.
+ * @slot expand-tooltip - Used to set the `calcite-tooltip` for the expand toggle.
  */
 export class ActionPad {
   constructor() {
@@ -20,15 +20,15 @@ export class ActionPad {
     //
     // --------------------------------------------------------------------------
     /**
-     * When set to true, the expand-toggling behavior will be disabled.
+     * When true, the expand-toggling behavior is disabled.
      */
     this.expandDisabled = false;
     /**
-     * Indicates whether widget is expanded.
+     * When true, the component is expanded.
      */
     this.expanded = false;
     /**
-     * Indicates the horizontal or vertical layout of the component.
+     * Indicates the layout of the component.
      */
     this.layout = "vertical";
     // --------------------------------------------------------------------------
@@ -48,6 +48,7 @@ export class ActionPad {
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
+      this.calciteActionPadToggle.emit();
     };
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
@@ -55,7 +56,6 @@ export class ActionPad {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
-    this.calciteActionPadToggle.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -77,13 +77,18 @@ export class ActionPad {
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
+    var _a;
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
       return;
     }
-    this.el.focus();
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -127,7 +132,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When set to true, the expand-toggling behavior will be disabled."
+        "text": "When true, the expand-toggling behavior is disabled."
       },
       "attribute": "expand-disabled",
       "reflect": true,
@@ -145,7 +150,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether widget is expanded."
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -168,7 +173,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates the horizontal or vertical layout of the component."
+        "text": "Indicates the layout of the component."
       },
       "attribute": "layout",
       "reflect": true,
@@ -186,7 +191,7 @@ export class ActionPad {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Updates the label of the expand icon when the component is not expanded."
+        "text": "Specifies the label of the expand icon when the component is collapsed."
       },
       "attribute": "intl-expand",
       "reflect": false
@@ -203,7 +208,7 @@ export class ActionPad {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Updates the label of the collapse icon when the component is expanded."
+        "text": "Specifies the label of the collapse icon when the component is expanded."
       },
       "attribute": "intl-collapse",
       "reflect": false
@@ -225,7 +230,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Arranges the component depending on the elements 'dir' property."
+        "text": "Arranges the component depending on the element's `dir` property."
       },
       "attribute": "position",
       "reflect": true
@@ -247,7 +252,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the size of the expand action."
+        "text": "Specifies the size of the expand `calcite-action`."
       },
       "attribute": "scale",
       "reflect": true
@@ -261,7 +266,7 @@ export class ActionPad {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when expanded has been toggled."
+        "text": "Emits when the `expanded` property is toggled."
       },
       "complexType": {
         "original": "any",
@@ -274,7 +279,10 @@ export class ActionPad {
       "complexType": {
         "signature": "(focusId?: \"expand-toggle\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -286,7 +294,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,7 +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.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",

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

@@ -83,22 +83,25 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-alert-width: the width of the alert
+* @prop --calcite-alert-width: Specifies the width of the component.
 */
 :host([scale=s]) {
   --calcite-alert-width: 40em;
   --calcite-alert-spacing-token-small: 0.5rem;
   --calcite-alert-spacing-token-large: 0.75rem;
 }
-:host([scale=s]) slot[name=title]::slotted(*), :host([scale=s]) *::slotted([slot=title]) {
+:host([scale=s]) slot[name=title]::slotted(*), 
+:host([scale=s]) *::slotted([slot=title]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-:host([scale=s]) slot[name=message]::slotted(*), :host([scale=s]) *::slotted([slot=message]) {
+:host([scale=s]) slot[name=message]::slotted(*), 
+:host([scale=s]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
-:host([scale=s]) slot[name=link]::slotted(*), :host([scale=s]) *::slotted([slot=link]) {
+:host([scale=s]) slot[name=link]::slotted(*), 
+:host([scale=s]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
@@ -118,15 +121,18 @@
   --calcite-alert-spacing-token-small: 0.75rem;
   --calcite-alert-spacing-token-large: 1rem;
 }
-:host([scale=m]) slot[name=title]::slotted(*), :host([scale=m]) *::slotted([slot=title]) {
+:host([scale=m]) slot[name=title]::slotted(*), 
+:host([scale=m]) *::slotted([slot=title]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-:host([scale=m]) slot[name=message]::slotted(*), :host([scale=m]) *::slotted([slot=message]) {
+:host([scale=m]) slot[name=message]::slotted(*), 
+:host([scale=m]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-:host([scale=m]) slot[name=link]::slotted(*), :host([scale=m]) *::slotted([slot=link]) {
+:host([scale=m]) slot[name=link]::slotted(*), 
+:host([scale=m]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
@@ -143,16 +149,19 @@
   --calcite-alert-spacing-token-small: 1rem;
   --calcite-alert-spacing-token-large: 1.25rem;
 }
-:host([scale=l]) slot[name=title]::slotted(*), :host([scale=l]) *::slotted([slot=title]) {
+:host([scale=l]) slot[name=title]::slotted(*), 
+:host([scale=l]) *::slotted([slot=title]) {
   margin-bottom: 0.25rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
 }
-:host([scale=l]) slot[name=message]::slotted(*), :host([scale=l]) *::slotted([slot=message]) {
+:host([scale=l]) slot[name=message]::slotted(*), 
+:host([scale=l]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-:host([scale=l]) slot[name=link]::slotted(*), :host([scale=l]) *::slotted([slot=link]) {
+:host([scale=l]) slot[name=link]::slotted(*), 
+:host([scale=l]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
@@ -216,6 +225,11 @@
   inset-inline-start: auto;
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 .container {
   display: flex;
   width: 100%;
@@ -224,9 +238,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);
@@ -246,14 +258,16 @@
   transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);
 }
 
-slot[name=title]::slotted(*), *::slotted([slot=title]) {
+slot[name=title]::slotted(*), 
+*::slotted([slot=title]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
 
-slot[name=message]::slotted(*), *::slotted([slot=message]) {
+slot[name=message]::slotted(*), 
+*::slotted([slot=message]) {
   margin: 0px;
   display: inline;
   font-size: var(--calcite-font-size--1);
@@ -263,16 +277,14 @@ slot[name=message]::slotted(*), *::slotted([slot=message]) {
   margin-inline-end: 0.5rem;
 }
 
-slot[name=link]::slotted(*), *::slotted([slot=link]) {
+slot[name=link]::slotted(*), 
+*::slotted([slot=link]) {
   display: inline-flex;
   color: var(--calcite-ui-text-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 +304,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 +316,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,10 +329,9 @@ 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 {
+.alert-close:hover,  .alert-close:focus {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
@@ -340,16 +346,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 +432,10 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
 @keyframes dismissProgress {
   0% {
     width: 0px;
-  }
-  0% {
     opacity: 0.75;
   }
   100% {
     width: 100%;
-  }
-  100% {
     opacity: 1;
   }
 }