@esri/calcite-components 1.5.0-next.2 → 1.5.0-next.20

package/dist/collection/components/accordion-item/accordion-item.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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { closestElementCrossShadowBoundary, getElementDir, getElementProp, getSlotted, toAriaBoolean } from "../../utils/dom";
+import { getElementDir, getSlotted, toAriaBoolean } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { SLOTS, CSS } from "./resources";
 /**
@@ -15,18 +15,19 @@ import { SLOTS, CSS } from "./resources";
  */
 export class AccordionItem {
   constructor() {
-    /** what icon position does the parent accordion specify */
-    this.iconPosition = "end";
     /** handle clicks on item header */
     this.itemHeaderClickHandler = () => this.emitRequestedItem();
-    /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */
-    this.scale = "m";
     this.expanded = false;
     this.heading = undefined;
     this.description = undefined;
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.iconFlipRtl = undefined;
+    this.iconPosition = undefined;
+    this.iconType = undefined;
+    this.accordionParent = undefined;
+    this.selectionMode = undefined;
+    this.scale = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -34,19 +35,8 @@ export class AccordionItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.parent = this.el.parentElement;
-    this.iconType = getElementProp(this.el, "icon-type", "chevron");
-    this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition);
-    this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
   }
-  componentDidLoad() {
-    this.itemPosition = this.getItemPosition();
-    this.calciteInternalAccordionItemRegister.emit({
-      parent: this.parent,
-      position: this.itemPosition
-    });
-  }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
@@ -111,7 +101,6 @@ export class AccordionItem {
   //
   //--------------------------------------------------------------------------
   determineActiveItem() {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "multiple");
     switch (this.selectionMode) {
       case "multiple":
         if (this.el === this.requestedAccordionItem) {
@@ -131,11 +120,6 @@ export class AccordionItem {
       requestedAccordionItem: this.el
     });
   }
-  getItemPosition() {
-    const { el } = this;
-    const items = closestElementCrossShadowBoundary(el, "calcite-accordion")?.querySelectorAll("calcite-accordion-item");
-    return items ? Array.from(items).indexOf(el) : -1;
-  }
   static get is() { return "calcite-accordion-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -257,6 +241,126 @@ export class AccordionItem {
         },
         "attribute": "icon-flip-rtl",
         "reflect": true
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Position",
+          "resolved": "\"end\" | \"start\"",
+          "references": {
+            "Position": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the placement of the icon in the header inherited from the `calcite-accordion`."
+        },
+        "attribute": "icon-position",
+        "reflect": false
+      },
+      "iconType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"chevron\" | \"caret\" | \"plus-minus\"",
+          "resolved": "\"caret\" | \"chevron\" | \"plus-minus\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the type of the icon in the header inherited from the `calcite-accordion`."
+        },
+        "attribute": "icon-type",
+        "reflect": false
+      },
+      "accordionParent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLCalciteAccordionElement",
+          "resolved": "HTMLCalciteAccordionElement",
+          "references": {
+            "HTMLCalciteAccordionElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "The containing `accordion` element."
+        }
+      },
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\"single\" | \"single-persist\" | \"multiple\", SelectionMode>",
+          "resolved": "\"multiple\" | \"single\" | \"single-persist\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "SelectionMode": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the `selectionMode` of the component inherited from the `calcite-accordion`."
+        },
+        "attribute": "selection-mode",
+        "reflect": false
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the size of the component inherited from the `calcite-accordion`."
+        },
+        "attribute": "scale",
+        "reflect": false
       }
     };
   }
@@ -302,29 +406,6 @@ export class AccordionItem {
           "resolved": "void",
           "references": {}
         }
-      }, {
-        "method": "calciteInternalAccordionItemRegister",
-        "name": "calciteInternalAccordionItemRegister",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "RegistryEntry",
-          "resolved": "RegistryEntry",
-          "references": {
-            "RegistryEntry": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/accordion-item/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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 export const SLOTS = {
   actionsStart: "actions-start",

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

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { Build, forceUpdate, h, Host } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
@@ -97,7 +97,7 @@ export class Action {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.buttonEl?.focus();
   }
   // --------------------------------------------------------------------------

package/dist/collection/components/action/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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 export const CSS = {
   button: "button",

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

@@ -141,10 +141,16 @@
 :host([layout=vertical]) {
   flex-direction: column;
 }
+:host([layout=vertical]) .action-group--bottom {
+  margin-block-start: auto;
+}
 
 :host([layout=horizontal]) {
   flex-direction: row;
 }
+:host([layout=horizontal]) .action-group--bottom {
+  margin-inline-start: auto;
+}
 
 :host([layout=vertical][overflow-actions-disabled]) {
   overflow-y: auto;
@@ -177,6 +183,5 @@
 }
 
 .action-group--bottom {
-  flex-grow: 1;
   justify-content: flex-end;
 }

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

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { debounce } from "lodash-es";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { focusFirstTabbable, getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
@@ -21,6 +21,11 @@ import { geActionDimensions, getOverflowCount, overflowActions, overflowActionsD
  */
 export class ActionBar {
   constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
     this.mutationObserver = createObserver("mutation", () => {
       const { el, expanded } = this;
       toggleChildActionText({ el, expanded });
@@ -174,8 +179,8 @@ export class ActionBar {
    * Sets focus on the component's first focusable element.
    */
   async setFocus() {
-    await componentLoaded(this);
-    this.el?.focus();
+    await componentFocusable(this);
+    focusFirstTabbable(this.el);
   }
   updateGroups() {
     this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
@@ -201,7 +206,6 @@ export class ActionBar {
   }
   static get is() { return "calcite-action-bar"; }
   static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["action-bar.scss"]

package/dist/collection/components/action-bar/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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom"

package/dist/collection/components/action-bar/utils.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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources";

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

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { getSlotted } from "../../utils/dom";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
@@ -52,7 +52,7 @@ export class ActionGroup {
   //--------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   // --------------------------------------------------------------------------

package/dist/collection/components/action-group/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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 export const SLOTS = {
   menuActions: "menu-actions",

package/dist/collection/components/action-menu/action-menu.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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { h } from "@stencil/core";
 import { Fragment } from "@stencil/core/internal";
@@ -9,7 +9,7 @@ import { getRoundRobinIndex } from "../../utils/array";
 import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { CSS, ICONS, SLOTS } from "./resources";
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 /**
@@ -247,8 +247,8 @@ export class ActionMenu {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
-    focusElement(this.menuButtonEl);
+    await componentFocusable(this);
+    return focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;

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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 export const CSS = {
   menu: "menu",

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

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -100,7 +100,7 @@ export class ActionPad {
    * Sets focus on the component's first focusable element.
    */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el?.focus();
   }
   updateGroups() {

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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",

package/dist/collection/components/alert/alert.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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { getSlotted, setRequestedIcon, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
@@ -125,6 +125,9 @@ export class Alert {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    window.dispatchEvent(new CustomEvent("calciteInternalAlertUnregister", {
+      detail: { alert: this.el }
+    }));
     window.clearTimeout(this.autoCloseTimeoutId);
     window.clearTimeout(this.queueTimeout);
     disconnectOpenCloseComponent(this);
@@ -176,6 +179,14 @@ export class Alert {
     this.calciteInternalAlertSync.emit({ queue: this.queue });
     this.determineActiveAlert();
   }
+  // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur.
+  alertUnregister(event) {
+    const queue = this.queue.filter((el) => el !== event.detail.alert);
+    this.queue = queue;
+    window.dispatchEvent(new CustomEvent("calciteInternalAlertSync", {
+      detail: { queue }
+    }));
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -183,13 +194,13 @@ export class Alert {
   //--------------------------------------------------------------------------
   /** Sets focus on the component's "close" button (the first focusable item). */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
     if (!this.closeButton && !alertLinkEl) {
       return;
     }
     else if (alertLinkEl) {
-      alertLinkEl.setFocus();
+      return alertLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();
@@ -689,6 +700,12 @@ export class Alert {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "calciteInternalAlertUnregister",
+        "method": "alertUnregister",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/alert/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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 export const DURATIONS = {
   slow: 14000,

package/dist/collection/components/avatar/avatar.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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { h } from "@stencil/core";
 import { getModeName } from "../../utils/dom";

package/dist/collection/components/avatar/utils.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.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.20
  */
 import { hexToRGB } from "../color-picker/utils";
 /**

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

@@ -407,10 +407,6 @@ calcite-handle {
   color: var(--calcite-ui-danger);
 }
 
-.status-icon.loading {
-  animation: spin calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2 / var(--calcite-internal-duration-factor)) linear infinite;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);