@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.75

package/dist/collection/components/calcite-modal/calcite-modal.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -95,21 +89,20 @@
 * @prop --calcite-modal-title-text: the font-size of the modal title
 * @prop --calcite-scrim-background: the semi-transparent background color behind modal
 */
-
 :host {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   overflow-y: hidden;
   color: var(--calcite-ui-text-2);
   opacity: 0;
   visibility: hidden !important;
-  transition: visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transition: visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   z-index: 101;
 }
 
@@ -137,31 +130,33 @@
 .scrim {
   --calcite-scrim-background: rgba(0, 0, 0, 0.75);
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   display: flex;
   overflow-y: hidden;
 }
 
 .modal {
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
-  box-sizing: border-box;
+  pointer-events: none;
   float: none;
   margin: 1.5rem;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
-  width: 100%;
   opacity: 0;
-  pointer-events: none;
+  --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
+  --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   overflow: hidden;
   z-index: 102;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
-  transition: transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear 300ms, opacity 300ms 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 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   transform: translate3d(0, 20px, 0);
 }
 
@@ -170,85 +165,77 @@
   visibility: visible !important;
   transition-delay: 0ms;
 }
-
 :host([active]) .modal {
-  opacity: 1;
   pointer-events: auto;
   visibility: visible;
+  opacity: 1;
   transform: translate3d(0, 0, 0);
-  transition: transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height 300ms 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-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-delay: 0ms;
 }
 
 /**
  * Header
  */
-
 .header {
   display: flex;
+  min-width: 0px;
   max-width: 100%;
-  min-width: 0;
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
-  background-color: var(--calcite-ui-foreground-1);
-  border-width: 0;
+  border-width: 0px;
   border-bottom-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
+  background-color: var(--calcite-ui-foreground-1);
   flex: 0 0 auto;
   z-index: 2;
 }
 
 .close {
-  margin: 0;
+  order: 2;
+  margin: 0px;
+  cursor: pointer;
   -webkit-appearance: none;
           appearance: none;
   border-style: none;
-  color: var(--calcite-ui-text-3);
-  order: 2;
-  cursor: pointer;
-  border-top-right-radius: 0.25rem;
   background-color: transparent;
+  color: var(--calcite-ui-text-3);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  border-start-end-radius: 0.25rem;
   padding: var(--calcite-modal-padding);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
 }
-
 .close calcite-icon {
   pointer-events: none;
   vertical-align: -2px;
 }
-
 .close:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .close:hover, .close:focus, .close:active {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
 
-.calcite--rtl .close {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0;
-}
-
 .title {
+  order: 1;
   display: flex;
+  min-width: 0px;
   align-items: center;
-  order: 1;
-  min-width: 0;
   flex: 1 1 auto;
   padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
 }
 
-slot[name=header]::slotted(*),
-*::slotted([slot=header]) {
-  margin: 0;
+slot[name=header]::slotted(*), *::slotted([slot=header]) {
+  margin: 0px;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-1);
   font-size: var(--calcite-modal-title-text);
@@ -257,15 +244,14 @@ slot[name=header]::slotted(*),
 /**
  * Content area
  */
-
 .content {
   position: relative;
-  padding: 0;
+  box-sizing: border-box;
+  display: block;
   height: 100%;
   overflow: auto;
-  display: block;
   background-color: var(--calcite-ui-foreground-1);
-  box-sizing: border-box;
+  padding: 0px;
   max-height: calc(100vh - 12rem);
   z-index: 1;
 }
@@ -291,44 +277,37 @@ slot[name=content]::slotted(*),
 /**
  * Footer
  */
-
 .footer {
-  display: flex;
-  justify-content: space-between;
   margin-top: auto;
   box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
-  width: 100%;
-  background-color: var(--calcite-ui-foreground-1);
-  border-width: 0;
+  border-width: 0px;
   border-top-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);
   z-index: 2;
 }
 
-.footer--hide-back .back,
-.footer--hide-secondary .secondary {
+.footer--hide-back .back, .footer--hide-secondary .secondary {
   display: none;
 }
 
 .back {
   display: block;
-  margin-right: auto;
-}
-
-.calcite--rtl .back {
-  margin-left: auto;
-  margin-right: 0;
+  margin-inline-end: auto;
 }
 
 .secondary {
-  display: block;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  display: block;
 }
 
 slot[name=primary] {
@@ -338,7 +317,6 @@ slot[name=primary] {
 /**
  * Sizes
  */
-
 :host([width=small]) .modal {
   width: auto;
 }
@@ -348,15 +326,24 @@ slot[name=primary] {
 }
 
 @media screen and (max-width: 35rem) {
+  :host([width=s]) .modal {
+    margin: 0px;
+  }
   :host([width=s]) .modal {
     height: 100%;
+  }
+  :host([width=s]) .modal {
     max-height: 100%;
+  }
+  :host([width=s]) .modal {
     width: 100%;
+  }
+  :host([width=s]) .modal {
     max-width: 100%;
-    margin: 0;
-    border-radius: 0;
   }
-
+  :host([width=s]) .modal {
+    border-radius: 0px;
+  }
   :host([width=s]) .content {
     flex: 1 1 auto;
     max-height: unset;
@@ -366,21 +353,29 @@ slot[name=primary] {
     align-items: flex-end;
   }
 }
-
 :host([width=m]) .modal {
   max-width: 48rem;
 }
 
 @media screen and (max-width: 51rem) {
+  :host([width=m]) .modal {
+    margin: 0px;
+  }
   :host([width=m]) .modal {
     height: 100%;
+  }
+  :host([width=m]) .modal {
     max-height: 100%;
+  }
+  :host([width=m]) .modal {
     width: 100%;
+  }
+  :host([width=m]) .modal {
     max-width: 100%;
-    margin: 0;
-    border-radius: 0;
   }
-
+  :host([width=m]) .modal {
+    border-radius: 0px;
+  }
   :host([width=m]) .content {
     flex: 1 1 auto;
     max-height: unset;
@@ -390,21 +385,29 @@ slot[name=primary] {
     align-items: flex-end;
   }
 }
-
 :host([width=l]) .modal {
   max-width: 94rem;
 }
 
 @media screen and (max-width: 97rem) {
+  :host([width=l]) .modal {
+    margin: 0px;
+  }
   :host([width=l]) .modal {
     height: 100%;
+  }
+  :host([width=l]) .modal {
     max-height: 100%;
+  }
+  :host([width=l]) .modal {
     width: 100%;
+  }
+  :host([width=l]) .modal {
     max-width: 100%;
-    margin: 0;
-    border-radius: 0;
   }
-
+  :host([width=l]) .modal {
+    border-radius: 0px;
+  }
   :host([width=l]) .content {
     flex: 1 1 auto;
     max-height: unset;
@@ -414,24 +417,20 @@ slot[name=primary] {
     align-items: flex-end;
   }
 }
-
 /**
  * Fullscreen
  */
-
 :host([fullscreen]) {
   background-color: transparent;
 }
-
 :host([fullscreen]) .modal {
+  margin: 0px;
   height: 100%;
   max-height: 100%;
   width: 100%;
   max-width: 100%;
-  margin: 0;
   transform: translate3D(0, 20px, 0) scale(0.95);
 }
-
 :host([fullscreen]) .content {
   max-height: 100%;
   flex: 1 1 auto;
@@ -440,11 +439,9 @@ slot[name=primary] {
 :host([active][fullscreen]) .modal {
   transform: translate3D(0, 0, 0) scale(1);
 }
-
 :host([active][fullscreen]) .header {
   border-radius: 0;
 }
-
 :host([active][fullscreen]) .footer {
   border-radius: 0;
 }
@@ -452,36 +449,25 @@ slot[name=primary] {
 /**
  * Docked
  */
-
 :host([docked]) .modal {
   height: auto;
 }
-
 :host([docked]) .content {
   height: auto;
   flex: 1 1 auto;
 }
-
 @media screen and (max-width: 860px) {
   :host([docked]) .modal {
     border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
   }
-
   :host([docked]) .close {
-    border-radius: 0 var(--calcite-border-radius) 0 0;
-  }
-}
-
-@media screen and (max-width: 860px) {
-  :host([docked]) .calcite--rtl .close {
-    border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
+    border-start-end-radius: var(--calcite-border-radius);
   }
 }
 
 /**
  * Colors
  */
-
 :host([color=red]) .modal {
   border-color: var(--calcite-ui-danger);
 }
@@ -490,49 +476,46 @@ slot[name=primary] {
   border-color: var(--calcite-ui-info);
 }
 
-:host([color=red]) .modal,
-:host([color=blue]) .modal {
-  border-width: 0;
+:host([color=red]) .modal, :host([color=blue]) .modal {
+  border-width: 0px;
   border-top-width: 4px;
   border-style: solid;
 }
-
-:host([color=red]) .header,
-:host([color=blue]) .header {
+:host([color=red]) .header, :host([color=blue]) .header {
   border-radius: 0.25rem;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
 }
 
 /**
  * Tablet
  */
-
 @media screen and (max-width: 860px) {
-  slot[name=header]::slotted(*),
-*::slotted([slot=header]) {
+  slot[name=header]::slotted(*), *::slotted([slot=header]) {
     font-size: var(--calcite-font-size-1);
   }
 
   .footer {
     position: sticky;
-    bottom: 0;
   }
-}
 
+  .footer {
+    bottom: 0px;
+  }
+}
 /**
  * Mobile
  */
-
 @media screen and (max-width: 480px) {
   .footer {
     flex-direction: column;
   }
 
-  .calcite--rtl .back,
-.back,
-.secondary {
-    margin: 0;
+  .back, .secondary {
+    margin: 0px;
+  }
+
+  .back, .secondary {
     margin-bottom: 0.25rem;
   }
 }

package/dist/collection/components/calcite-modal/calcite-modal.js

@@ -3,13 +3,12 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { ensureId, focusElement, getElementDir, getSlotted, isCalciteFocusable } from "../../utils/dom";
-import { getKey } from "../../utils/key";
+import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
 import { queryShadowRoot } from "@a11y/focus-trap/shadow";
 import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
-import { CSS_UTILITY } from "../../utils/resources";
 import { TEXT, SLOTS, CSS, ICONS } from "./resources";
 import { createObserver } from "../../utils/observers";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 const isFocusableExtended = (el) => {
   return isCalciteFocusable(el) || isFocusable(el);
 };
@@ -117,18 +116,19 @@ export class CalciteModal {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.updateFooterVisibility();
+    connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
     var _a;
     this.removeOverflowHiddenClass();
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectConditionalSlotComponent(this);
   }
   render() {
-    const dir = getElementDir(this.el);
     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: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onTransitionEnd: this.transitionEnd },
+      h("div", { class: "modal", onTransitionEnd: this.transitionEnd },
         h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }),
         h("div", { class: CSS.header },
           this.renderCloseButton(),
@@ -144,7 +144,7 @@ export class CalciteModal {
         h("div", { "data-focus-fence": true, onFocus: this.focusFirstElement, tabindex: "0" }))));
   }
   renderFooter() {
-    return this.hasFooter ? (h("div", { class: CSS.footer },
+    return this.hasFooter ? (h("div", { class: CSS.footer, key: "footer" },
       h("span", { class: CSS.back },
         h("slot", { name: SLOTS.back })),
       h("span", { class: CSS.secondary },
@@ -153,7 +153,7 @@ export class CalciteModal {
         h("slot", { name: SLOTS.primary })))) : null;
   }
   renderCloseButton() {
-    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose },
+    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose },
       h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
@@ -184,7 +184,7 @@ export class CalciteModal {
   //
   //--------------------------------------------------------------------------
   handleEscape(e) {
-    if (this.active && !this.disableEscape && getKey(e.key) === "Escape") {
+    if (this.active && !this.disableEscape && e.key === "Escape") {
       this.close();
     }
   }