@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.87

package/dist/collection/components/alert/alert.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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
@@ -52,9 +52,9 @@ export class Alert {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.setContainerDiv = (el) => {
-      this.containerDiv = el;
-      this.containerDiv.addEventListener("transitionrun", this.transitionRunHandler);
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
+      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
     };
     this.autoDismissTimeoutId = null;
     this.trackTimer = Date.now();
@@ -64,22 +64,18 @@ export class Alert {
       this.autoDismissTimeoutId = null;
       this.queued = false;
       this.active = false;
-      this.queue = this.queue.filter((e) => e !== this.el);
+      this.queue = this.queue.filter((el) => el !== this.el);
       this.determineActiveAlert();
       this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
-    /* *
-    - `transitionrun` fires when the transition is created at the start of any delay and is not cancellable once started.
-    - if there is no transition delay, both `transitionrun` and `transitionstart` are fired at the same time.
-    */
-    this.transitionRunHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("beforeOpen") : this.emitOpenCloseEvent("beforeClose");
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.active ? this.onOpen() : this.onClose();
       }
     };
   }
@@ -88,7 +84,7 @@ export class Alert {
       this.calciteInternalAlertRegister.emit();
     }
     if (!this.active) {
-      this.queue = this.queue.filter((e) => e !== this.el);
+      this.queue = this.queue.filter((el) => el !== this.el);
       this.calciteInternalAlertSync.emit({ queue: this.queue });
     }
   }
@@ -115,10 +111,9 @@ export class Alert {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
   disconnectedCallback() {
+    var _a;
     window.clearTimeout(this.autoDismissTimeoutId);
-    if (this.containerDiv) {
-      this.containerDiv.removeEventListener("transitionrun", this.transitionRunHandler);
-    }
+    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   render() {
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" },
@@ -134,7 +129,7 @@ export class Alert {
           container: true,
           queued,
           [placement]: true
-        }, onTransitionEnd: this.transitionEnd, ref: this.setContainerDiv },
+        }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl },
         requestedIcon ? (h("div", { class: "alert-icon" },
           h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
         h("div", { class: "alert-content" },
@@ -200,25 +195,23 @@ export class Alert {
       return;
     }
   }
+  onBeforeOpen() {
+    this.calciteAlertBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteAlertOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteAlertBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteAlertClose.emit();
+  }
   /** remove queued class after animation completes */
   openAlert() {
     window.clearTimeout(this.queueTimeout);
     this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
   }
-  emitOpenCloseEvent(componentVisibilityState) {
-    const payload = {
-      el: this.el,
-      queue: this.queue
-    };
-    const emitComponentState = {
-      beforeOpen: () => this.calciteAlertBeforeOpen.emit(payload),
-      open: () => this.calciteAlertOpen.emit(payload),
-      beforeClose: () => this.calciteAlertBeforeClose.emit(payload),
-      close: () => this.calciteAlertClose.emit(payload)
-    };
-    (emitComponentState[componentVisibilityState] ||
-      emitComponentState["The component state is unknown."])();
-  }
   static get is() { return "calcite-alert"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -426,16 +419,12 @@ export class Alert {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is requested to be closed and before the closing transition begins."
       },
       "complexType": {
-        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
-        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
-        "references": {
-          "HTMLCalciteAlertElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
       "method": "calciteAlertClose",
@@ -445,16 +434,12 @@ export class Alert {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is closed and animation is complete."
       },
       "complexType": {
-        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
-        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
-        "references": {
-          "HTMLCalciteAlertElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
       "method": "calciteAlertBeforeOpen",
@@ -464,16 +449,12 @@ export class Alert {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
       },
       "complexType": {
-        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
-        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
-        "references": {
-          "HTMLCalciteAlertElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
       "method": "calciteAlertOpen",
@@ -483,16 +464,12 @@ export class Alert {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is open and animation is complete."
       },
       "complexType": {
-        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
-        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
-        "references": {
-          "HTMLCalciteAlertElement": {
-            "location": "global"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
       "method": "calciteInternalAlertSync",
@@ -508,9 +485,14 @@ export class Alert {
         "text": "Fires to sync queue when opened or closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "Sync",
+        "resolved": "Sync",
+        "references": {
+          "Sync": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteInternalAlertRegister",
@@ -526,8 +508,8 @@ export class Alert {
         "text": "Fires when the component is added to DOM - used to receive initial queue."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/alert/interfaces.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.86
+ * v1.0.0-beta.87
  */
 export var StatusIcons;
 (function (StatusIcons) {

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.0.0-beta.86
+ * v1.0.0-beta.87
  */
 export const TEXT = {
   intlClose: "Close"

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -85,20 +85,20 @@
 }
 
 :host([scale=s]) {
-  height: 1.5rem;
-  width: 1.5rem;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
   font-size: var(--calcite-font-size--3);
 }
 
 :host([scale=m]) {
-  height: 2rem;
-  width: 2rem;
+  block-size: 2rem;
+  inline-size: 2rem;
   font-size: var(--calcite-font-size--2);
 }
 
 :host([scale=l]) {
-  height: 2.75rem;
-  width: 2.75rem;
+  block-size: 2.75rem;
+  inline-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
 }
 
@@ -108,8 +108,8 @@
 
 .background {
   display: flex;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
@@ -122,7 +122,7 @@
 }
 
 .thumbnail {
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   border-radius: 50%;
 }

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

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.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import { hexToRGB } from "../color-picker/utils";
 /**

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

@@ -98,20 +98,28 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 :host {
   display: flex;
   flex-shrink: 0;
   flex-grow: 0;
   flex-direction: column;
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   padding: 0px;
@@ -122,13 +130,6 @@
   flex-basis: auto;
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -246,7 +247,7 @@ calcite-handle {
 }
 
 .description {
-  margin-top: 0.125rem;
+  margin-block-start: 0.125rem;
   padding: 0px;
   font-size: var(--calcite-font-size--2);
   color: var(--calcite-ui-text-3);
@@ -284,8 +285,7 @@ calcite-handle {
   }
 }
 .toggle-icon {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-block: 0.75rem;
   align-self: center;
   justify-self: end;
   color: var(--calcite-ui-text-3);
@@ -318,10 +318,8 @@ calcite-handle {
 }
 
 .content--spaced {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-block: var(--calcite-block-padding, 0.5rem);
+  padding-inline: var(--calcite-block-padding, 0.625rem);
 }
 
 .control-container {
@@ -335,8 +333,7 @@ calcite-action-menu {
 }
 
 :host([open]) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-block: 0.5rem;
 }
 :host([open]) .header .title .heading {
   color: var(--calcite-ui-text-1);

package/dist/collection/components/block/block.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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -67,7 +67,11 @@ export class Block {
      * When true, the block's content will be displayed.
      */
     this.open = false;
-    /** When true, removes padding for the slotted content */
+    /**
+     * When true, removes padding for the slotted content
+     *
+     * @deprecated Use `--calcite-block-padding` CSS variable instead.
+     */
     this.disablePadding = false;
     this.guid = guid();
     // --------------------------------------------------------------------------
@@ -451,7 +455,10 @@ export class Block {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `--calcite-block-padding` CSS variable instead."
+          }],
         "text": "When true, removes padding for the slotted content"
       },
       "attribute": "disable-padding",
@@ -470,8 +477,8 @@ export class Block {
         "text": "Emitted when the header has been clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/block/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.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   article: "article",

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

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -88,17 +88,17 @@
 
 :host([open]) {
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
-  border-bottom-color: var(--calcite-ui-border-3);
+  border-block-end-color: var(--calcite-ui-border-3);
 }
 
 :host(:last-child) {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
 }
 
 .toggle {
-  width: 100%;
+  inline-size: 100%;
   border-width: 0px;
   background-color: transparent;
   font-family: var(--calcite-sans-family);
@@ -108,19 +108,15 @@
 
 .toggle--switch, 
 .section-header {
-  margin-left: 0px;
-  margin-right: 0px;
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
+  margin-inline: 0px;
+  margin-block: 0.25rem;
   display: flex;
   cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
   align-items: center;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-inline: 0px;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   outline-color: transparent;
 }
@@ -139,10 +135,8 @@
 }
 
 .section-header__text {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-inline: 0.75rem;
+  margin-block: 0px;
   flex: 1 1 auto;
   text-align: initial;
   word-wrap: anywhere;

package/dist/collection/components/block-section/block-section.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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";
@@ -222,8 +222,8 @@ export class BlockSection {
         "text": "Emitted when the header has been clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/block-section/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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.86
+ * v1.0.0-beta.87
  */
 export {};

package/dist/collection/components/block-section/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.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   content: "content",