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

package/dist/collection/components/modal/modal.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]) {
@@ -83,18 +83,15 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-modal-content-text: The component content's font size.
-* @prop --calcite-modal-padding: The top/bottom padding around items within the component.
-* @prop --calcite-modal-padding-large: The left/right padding around items within the component.
-* @prop --calcite-modal-title-text: The component title's font size.
-* @prop --calcite-scrim-background: The component's semi-transparent background color.
+* @prop --calcite-modal-content-text: [Deprecated] The component content's font size.
+* @prop --calcite-modal-padding: [Deprecated] The padding around content area slot.
+* @prop --calcite-modal-padding-large: [Deprecated] The left/right padding around items within the component.
+* @prop --calcite-modal-title-text: [Deprecated] The component title's font size.
+* @prop --calcite-scrim-background: [Deprecated] The component's semi-transparent background color.
 */
 :host {
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -111,6 +108,10 @@
   --calcite-modal-padding-large: 1rem;
   --calcite-modal-title-text: var(--calcite-font-size-1);
   --calcite-modal-content-text: var(--calcite-font-size--1);
+  --calcite-modal-padding-internal: 0.75rem;
+  --calcite-modal-padding-large-internal: 1rem;
+  --calcite-modal-title-text-internal: var(--calcite-font-size-1);
+  --calcite-modal-content-text-internal: var(--calcite-font-size--1);
 }
 
 :host([scale=m]) {
@@ -118,6 +119,10 @@
   --calcite-modal-padding-large: 1.25rem;
   --calcite-modal-title-text: var(--calcite-font-size-2);
   --calcite-modal-content-text: var(--calcite-font-size-0);
+  --calcite-modal-padding-internal: 1rem;
+  --calcite-modal-padding-large-internal: 1.25rem;
+  --calcite-modal-title-text-internal: var(--calcite-font-size-2);
+  --calcite-modal-content-text-internal: var(--calcite-font-size-0);
 }
 
 :host([scale=l]) {
@@ -125,15 +130,16 @@
   --calcite-modal-padding-large: 1.5rem;
   --calcite-modal-title-text: var(--calcite-font-size-3);
   --calcite-modal-content-text: var(--calcite-font-size-1);
+  --calcite-modal-padding-internal: 1.25rem;
+  --calcite-modal-padding-large-internal: 1.5rem;
+  --calcite-modal-title-text-internal: var(--calcite-font-size-3);
+  --calcite-modal-content-text-internal: var(--calcite-font-size-1);
 }
 
 .scrim {
   --calcite-scrim-background: rgba(0, 0, 0, 0.75);
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   overflow-y: hidden;
 }
@@ -144,7 +150,7 @@
   margin: 1.5rem;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex-direction: column;
   overflow: hidden;
   border-radius: 0.25rem;
@@ -172,7 +178,7 @@
   visibility: visible;
   opacity: 1;
   transform: translate3d(0, 0, 0);
-  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   transition-delay: 0ms;
 }
 
@@ -181,12 +187,12 @@
  */
 .header {
   display: flex;
-  min-width: 0px;
-  max-width: 100%;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+  min-inline-size: 0px;
+  max-inline-size: 100%;
+  border-start-start-radius: 0.25rem;
+  border-start-end-radius: 0.25rem;
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   background-color: var(--calcite-ui-foreground-1);
@@ -206,7 +212,7 @@
   outline-color: transparent;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-start-end-radius: 0.25rem;
-  padding: var(--calcite-modal-padding);
+  padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
   flex: 0 0 auto;
 }
 .close calcite-icon {
@@ -225,10 +231,11 @@
 .title {
   order: 1;
   display: flex;
-  min-width: 0px;
+  min-inline-size: 0px;
   align-items: center;
   flex: 1 1 auto;
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding-block: var(--calcite-modal-padding, var(--calcite-model-padding-internal));
+  padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));
 }
 
 slot[name=header]::slotted(*), 
@@ -236,7 +243,7 @@ slot[name=header]::slotted(*),
   margin: 0px;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-1);
-  font-size: var(--calcite-modal-title-text);
+  font-size: var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal));
 }
 
 /**
@@ -246,26 +253,26 @@ slot[name=header]::slotted(*),
   position: relative;
   box-sizing: border-box;
   display: block;
-  height: 100%;
+  block-size: 100%;
   overflow: auto;
   background-color: var(--calcite-ui-foreground-1);
   padding: 0px;
-  max-height: calc(100vh - 12rem);
+  max-block-size: calc(100vh - 12rem);
   z-index: 1;
 }
 
 .content--spaced {
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding: var(--calcite-modal-padding);
 }
 
 .content--no-footer {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
 }
 
 slot[name=content]::slotted(*),
 *::slotted([slot=content]) {
-  font-size: var(--calcite-modal-content-text);
+  font-size: var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal));
 }
 
 :host([background-color=grey]) .content {
@@ -276,20 +283,21 @@ slot[name=content]::slotted(*),
  * Footer
  */
 .footer {
-  margin-top: auto;
+  margin-block-start: auto;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: space-between;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
   border-width: 0px;
-  border-top-width: 1px;
+  border-block-start-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   background-color: var(--calcite-ui-foreground-1);
   flex: 0 0 auto;
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
+  padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));
   z-index: 2;
 }
 
@@ -304,8 +312,7 @@ slot[name=content]::slotted(*),
 }
 
 .secondary {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+  margin-inline: 0.25rem;
   display: block;
 }
 
@@ -317,25 +324,25 @@ slot[name=primary] {
  * Sizes
  */
 :host([width=small]) .modal {
-  width: auto;
+  inline-size: auto;
 }
 
 :host([width=s]) .modal {
-  max-width: 32rem;
+  max-inline-size: 32rem;
 }
 
 @media screen and (max-width: 35rem) {
   :host([width=s]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=s]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=s][docked]) {
@@ -343,21 +350,21 @@ slot[name=primary] {
   }
 }
 :host([width=m]) .modal {
-  max-width: 48rem;
+  max-inline-size: 48rem;
 }
 
 @media screen and (max-width: 51rem) {
   :host([width=m]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=m]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=m][docked]) {
@@ -365,21 +372,21 @@ slot[name=primary] {
   }
 }
 :host([width=l]) .modal {
-  max-width: 94rem;
+  max-inline-size: 94rem;
 }
 
 @media screen and (max-width: 97rem) {
   :host([width=l]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=l]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=l][docked]) {
@@ -394,14 +401,14 @@ slot[name=primary] {
 }
 :host([fullscreen]) .modal {
   margin: 0px;
-  height: 100%;
-  max-height: 100%;
-  width: 100%;
-  max-width: 100%;
+  block-size: 100%;
+  max-block-size: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
   transform: translate3D(0, 20px, 0) scale(0.95);
 }
 :host([fullscreen]) .content {
-  max-height: 100%;
+  max-block-size: 100%;
   flex: 1 1 auto;
 }
 
@@ -422,10 +429,10 @@ slot[name=primary] {
  * Docked
  */
 :host([docked]) .modal {
-  height: auto;
+  block-size: auto;
 }
 :host([docked]) .content {
-  height: auto;
+  block-size: auto;
   flex: 1 1 auto;
 }
 @media screen and (max-width: 860px) {
@@ -451,14 +458,14 @@ slot[name=primary] {
 :host([color=red]) .modal, 
 :host([color=blue]) .modal {
   border-width: 0px;
-  border-top-width: 4px;
+  border-block-start-width: 4px;
   border-style: solid;
 }
 :host([color=red]) .header, 
 :host([color=blue]) .header {
   border-radius: 0.25rem;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-end-end-radius: 0px;
+  border-end-start-radius: 0px;
 }
 
 /**
@@ -472,7 +479,7 @@ slot[name=primary] {
 
   .footer {
     position: sticky;
-    bottom: 0px;
+    inset-block-end: 0px;
   }
 }
 /**
@@ -486,6 +493,6 @@ slot[name=primary] {
   .back, 
 .secondary {
     margin: 0px;
-    margin-bottom: 0.25rem;
+    margin-block-end: 0.25rem;
   }
 }

package/dist/collection/components/modal/modal.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.89
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -54,7 +54,11 @@ export class Modal {
     this.width = "m";
     /** Sets the background color of the component's content. */
     this.backgroundColor = "white";
-    /** When true, disables spacing to the content area slot. */
+    /**
+     * When true, disables spacing to the content area slot.
+     *
+     * @deprecated  Use `--calcite-modal-padding` CSS variable instead.
+     */
     this.noPadding = false;
     //--------------------------------------------------------------------------
     //
@@ -69,9 +73,18 @@ export class Modal {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
+      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
+    };
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
+      }
+    };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.open || this.active ? this.calciteModalOpen.emit() : this.calciteModalClose.emit();
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.open || this.active ? this.onOpen() : this.onClose();
       }
     };
     this.openEnd = () => {
@@ -127,16 +140,17 @@ export class Modal {
     connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
+    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     this.removeOverflowHiddenClass();
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     disconnectConditionalSlotComponent(this);
   }
   render() {
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" },
       h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }),
       this.renderStyle(),
-      h("div", { class: "modal", onTransitionEnd: this.transitionEnd },
+      h("div", { class: "modal", onTransitionEnd: this.transitionEnd, ref: this.setContainerEl },
         h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }),
         h("div", { class: CSS.header },
           this.renderCloseButton(),
@@ -191,8 +205,8 @@ export class Modal {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  handleEscape(e) {
-    if ((this.open || this.active) && !this.disableEscape && e.key === "Escape") {
+  handleEscape(event) {
+    if ((this.open || this.active) && !this.disableEscape && event.key === "Escape") {
       this.close();
     }
   }
@@ -242,6 +256,18 @@ export class Modal {
       }
     }
   }
+  onBeforeOpen() {
+    this.calciteModalBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteModalOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteModalBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteModalClose.emit();
+  }
   async toggleModal(value, oldValue) {
     if (value !== oldValue) {
       if (value) {
@@ -541,7 +567,10 @@ export class Modal {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `--calcite-modal-padding` CSS variable instead."
+          }],
         "text": "When true, disables spacing to the content area slot."
       },
       "attribute": "no-padding",
@@ -553,18 +582,18 @@ export class Modal {
     "hasFooter": {}
   }; }
   static get events() { return [{
-      "method": "calciteModalOpen",
-      "name": "calciteModalOpen",
+      "method": "calciteModalBeforeClose",
+      "name": "calciteModalBeforeClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when the component finishes the open animation."
+        "text": "Fires when the component is requested to be closed and before the closing transition begins."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -575,11 +604,41 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when the component finishes the close animation."
+        "text": "Fires when the component is closed and animation is complete."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "calciteModalBeforeOpen",
+      "name": "calciteModalBeforeOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "calciteModalOpen",
+      "name": "calciteModalOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the component is open and animation is complete."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -684,7 +743,7 @@ export class Modal {
       "methodName": "toggleModal"
     }]; }
   static get listeners() { return [{
-      "name": "keyup",
+      "name": "keydown",
       "method": "handleEscape",
       "target": "window",
       "capture": false,

package/dist/collection/components/modal/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.89
  */
 export const CSS = {
   title: "title",