@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

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

@@ -1,51 +1,42 @@
 /* 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: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,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]) {
@@ -99,16 +89,15 @@
 * @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;
@@ -141,26 +130,28 @@
 .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;
@@ -174,11 +165,10 @@
   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 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;
@@ -187,70 +177,65 @@
 /**
  * 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;
   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;
-  outline-offset: 0;
-  outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   border-start-end-radius: 0.25rem;
   padding: var(--calcite-modal-padding);
   flex: 0 0 auto;
 }
-
 .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);
 }
 
 .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);
@@ -259,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;
 }
@@ -293,27 +277,25 @@ 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;
 }
 
@@ -323,9 +305,9 @@ slot[name=content]::slotted(*),
 }
 
 .secondary {
-  display: block;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  display: block;
 }
 
 slot[name=primary] {
@@ -335,7 +317,6 @@ slot[name=primary] {
 /**
  * Sizes
  */
-
 :host([width=small]) .modal {
   width: auto;
 }
@@ -345,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;
@@ -363,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;
@@ -387,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;
@@ -411,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;
@@ -437,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;
 }
@@ -449,21 +449,17 @@ 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-start-end-radius: var(--calcite-border-radius);
   }
@@ -472,7 +468,6 @@ slot[name=primary] {
 /**
  * Colors
  */
-
 :host([color=red]) .modal {
   border-color: var(--calcite-ui-danger);
 }
@@ -481,48 +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;
   }
 
-  .back,
-.secondary {
-    margin: 0;
+  .back, .secondary {
+    margin: 0px;
+  }
+
+  .back, .secondary {
     margin-bottom: 0.25rem;
   }
 }

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

@@ -8,6 +8,7 @@ import { queryShadowRoot } from "@a11y/focus-trap/shadow";
 import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
 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);
 };
@@ -97,7 +98,7 @@ export class CalciteModal {
       }
     };
     this.updateFooterVisibility = () => {
-      this.hasFooter = !!this.el.querySelector(`[slot=${SLOTS.back}], [slot=${SLOTS.secondary}], [slot=${SLOTS.primary}]`);
+      this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
     };
   }
   //--------------------------------------------------------------------------
@@ -115,11 +116,13 @@ 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() {
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" },
@@ -141,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 },
@@ -150,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() {