@esri/calcite-components 1.1.0-next.2 → 1.1.0

package/dist/collection/components/link/link.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.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
@@ -65,7 +65,9 @@ export class Link {
       When the 'download' property of type 'boolean | string' is set to true, the value is "".
       This works around that issue for now.
       */
-      download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
+      download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/list/list.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/list/list.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.1.0-next.2
+ * v1.1.0
  */
 import { h } from "@stencil/core";
 import { debounce } from "lodash-es";
@@ -93,22 +93,6 @@ export class List {
         value: item.value
       }));
     };
-    this.updateListItems = debounce(() => {
-      const { selectionAppearance, selectionMode } = this;
-      const items = this.queryListItems();
-      items.forEach((item) => {
-        item.selectionAppearance = selectionAppearance;
-        item.selectionMode = selectionMode;
-      });
-      this.listItems = items;
-      this.enabledListItems = items.filter((item) => !item.disabled);
-      if (this.filterEnabled) {
-        this.dataForFilter = this.getItemData();
-      }
-      this.setActiveListItem();
-      this.updateSelectedItems();
-      this.updateFilteredItems();
-    }, debounceTimeout);
     this.queryListItems = () => {
       return Array.from(this.el.querySelectorAll(listItemSelector));
     };
@@ -250,7 +234,25 @@ export class List {
   // --------------------------------------------------------------------------
   render() {
     const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText } = this;
-    return (h("div", { class: CSS.container }, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilter, placeholder: filterPlaceholder, ref: (el) => (this.filterEl = el), value: filterText }))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+    return (h("div", { class: CSS.container }, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilter, placeholder: filterPlaceholder, value: filterText,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.filterEl = el) }))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+  }
+  updateListItems() {
+    const { selectionAppearance, selectionMode } = this;
+    const items = this.queryListItems();
+    items.forEach((item) => {
+      item.selectionAppearance = selectionAppearance;
+      item.selectionMode = selectionMode;
+    });
+    this.listItems = items;
+    this.enabledListItems = items.filter((item) => !item.disabled);
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
+    }
+    this.setActiveListItem();
+    this.updateSelectedItems();
+    this.updateFilteredItems();
   }
   static get is() { return "calcite-list"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/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.1.0-next.2
+ * v1.1.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/list-item/list-item.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/list-item/list-item.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.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
@@ -230,11 +230,15 @@ export class ListItem {
   }
   renderActionsStart() {
     const { label, hasActionsStart } = this;
-    return (h("td", { "aria-label": label, class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", ref: (el) => (this.actionsStartEl = el), role: "gridcell" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+    return (h("td", { "aria-label": label, class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
   }
   renderActionsEnd() {
     const { label, hasActionsEnd } = this;
-    return (h("td", { "aria-label": label, class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container", ref: (el) => (this.actionsEndEl = el), role: "gridcell" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+    return (h("td", { "aria-label": label, class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container", role: "gridcell",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
   }
   renderContentStart() {
     const { hasContentStart } = this;
@@ -265,7 +269,9 @@ export class ListItem {
         [CSS.contentContainer]: true,
         [CSS.contentContainerSelectable]: selectionMode !== "none",
         [CSS.contentContainerHasCenterContent]: hasCenterContent
-      }, key: "content-container", onClick: this.itemClicked, ref: (el) => (this.contentEl = el), role: "gridcell" }, content));
+      }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.contentEl = el) }, content));
   }
   render() {
     const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode } = this;
@@ -276,7 +282,9 @@ export class ListItem {
         [CSS.container]: true,
         [CSS.containerBorderSelected]: borderSelected,
         [CSS.containerBorderUnselected]: borderUnselected
-      }, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, ref: (el) => (this.containerEl = el), role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1 }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
+      }, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.containerEl = el) }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
         [CSS.nestedContainer]: true,
         [CSS.nestedContainerHidden]: openable && !open
       } }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));

package/dist/collection/components/list-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.1.0-next.2
+ * v1.1.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/list-item/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.1.0-next.2
+ * v1.1.0
  */
 import { Build } from "@stencil/core";
 const listItemGroupSelector = "calcite-list-item-group";

package/dist/collection/components/list-item-group/list-item-group.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/list-item-group/list-item-group.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.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/list-item-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.1.0-next.2
+ * v1.1.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/loader/loader.css

@@ -70,9 +70,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */
@@ -95,6 +96,85 @@
 * @prop --calcite-loader-size-inline: The width and height of an inline loader
 * @prop --calcite-loader-padding : Specifies the padding of the loader.
 */
+@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);
+  --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 {
+  opacity: 0;
+  animation-fill-mode: both;
+  animation-duration: var(--calcite-animation-timing);
+}
+
+.calcite-animate__in {
+  animation-name: in;
+}
+
+.calcite-animate__in-down {
+  animation-name: in-down;
+}
+
+.calcite-animate__in-up {
+  animation-name: in-up;
+}
+
+.calcite-animate__in-scale {
+  animation-name: in-scale;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
+/* helper to properly scale internal durations */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0;
+  }
+}
 :host{
   position: relative;
   margin-inline: auto;
@@ -108,7 +188,7 @@
   stroke-width: 3;
   fill: none;
   transform: scale(1, 1);
-  animation: loader-color-shift calc(var(--calcite-internal-animation-timing-slow) * 2) alternate-reverse infinite linear;
+  animation: loader-color-shift calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2 / var(--calcite-internal-duration-factor)) alternate-reverse infinite linear;
   padding-block: var(--calcite-loader-padding, 4rem);
 }
 
@@ -267,7 +347,7 @@
 */
 .loader__svg--1 {
   stroke-dasharray: 27.9252444444% 139.6262222222%;
-  animation-duration: calc(var(--calcite-internal-animation-timing-slow) * 2.4);
+  animation-duration: calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2.4 / var(--calcite-internal-duration-factor));
 }
 
 @keyframes loader-offset-1 {
@@ -286,7 +366,7 @@
 }
 .loader__svg--2 {
   stroke-dasharray: 55.8504888889% 139.6262222222%;
-  animation-duration: calc(var(--calcite-internal-animation-timing-slow) * 3.2);
+  animation-duration: calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 3.2 / var(--calcite-internal-duration-factor));
 }
 
 @keyframes loader-offset-2 {
@@ -305,7 +385,7 @@
 }
 .loader__svg--3 {
   stroke-dasharray: 13.9626222222% 139.6262222222%;
-  animation-duration: calc(var(--calcite-internal-animation-timing-slow) * 3.867);
+  animation-duration: calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 3.867 / var(--calcite-internal-duration-factor));
 }
 
 @keyframes loader-offset-3 {

package/dist/collection/components/loader/loader.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.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

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

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */
@@ -107,6 +108,11 @@
   --calcite-modal-scrim-background-internal: rgba(0, 0, 0, 0.85);
 }
 
+.content-top[hidden],
+.content-bottom[hidden] {
+  display: none;
+}
+
 .container {
   position: fixed;
   inset: 0px;
@@ -191,12 +197,12 @@
   transition-delay: 0ms;
 }
 
-:host([open]) .container {
+.container--open {
   opacity: 1;
   visibility: visible !important;
   transition-delay: 0ms;
 }
-:host([open]) .container .modal--open {
+.container--open .modal {
   pointer-events: auto;
   visibility: visible;
   opacity: 1;
@@ -278,12 +284,43 @@ slot[name=header]::slotted(*),
   block-size: 100%;
   overflow: auto;
   padding: 0px;
-  max-block-size: 100%;
   background-color: var(--calcite-modal-content-background, var(--calcite-ui-foreground-1));
-  padding-block: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
-  padding-inline: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
+  max-block-size: 100%;
+  padding: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
 }
 
+.content-top,
+.content-bottom {
+  z-index: 400;
+  display: flex;
+  border-width: 0px;
+  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-internal);
+}
+
+.content-top {
+  min-inline-size: 0px;
+  max-inline-size: 100%;
+  border-block-end-width: 1px;
+}
+
+.content-bottom {
+  margin-block-start: auto;
+  box-sizing: border-box;
+  inline-size: 100%;
+  justify-content: space-between;
+  border-block-start-width: 1px;
+}
+
+.content-top:not(.header ~ .content-top) {
+  border-start-start-radius: 0.25rem;
+  border-start-end-radius: 0.25rem;
+}
+
+.content-bottom:not(.content-bottom ~ .footer),
 .content--no-footer {
   border-end-end-radius: 0.25rem;
   border-end-start-radius: 0.25rem;
@@ -432,10 +469,10 @@ slot[name=primary] {
   flex: 1 1 auto;
 }
 
-:host([open][fullscreen]) .header {
-  border-radius: 0;
-}
-:host([open][fullscreen]) .footer {
+:host([open][fullscreen]) .header,
+:host([open][fullscreen]) .footer,
+:host([open][fullscreen]) .content-top,
+:host([open][fullscreen]) .content-bottom {
   border-radius: 0;
 }
 
@@ -483,10 +520,15 @@ slot[name=primary] {
   border-style: solid;
 }
 :host([kind=brand]) .header,
+:host([kind=brand]) .content-top,
 :host([kind=danger]) .header,
+:host([kind=danger]) .content-top,
 :host([kind=info]) .header,
+:host([kind=info]) .content-top,
 :host([kind=success]) .header,
-:host([kind=warning]) .header {
+:host([kind=success]) .content-top,
+:host([kind=warning]) .header,
+:host([kind=warning]) .content-top {
   border-radius: 0.25rem;
   border-end-end-radius: 0px;
   border-end-start-radius: 0px;
@@ -496,12 +538,13 @@ slot[name=primary] {
  * Tablet
  */
 @media screen and (max-width: 860px) {
-  slot[name=header]::slotted(*),
-*::slotted([slot=header]) {
+  * slot[name=header]::slotted(content-top),
+* content-top::slotted([slot=header]) {
     font-size: var(--calcite-font-size-1);
   }
 
-  .footer {
+  .footer,
+.content-bottom {
     position: sticky;
     inset-block-end: 0px;
   }
@@ -510,7 +553,8 @@ slot[name=primary] {
  * Mobile
  */
 @media screen and (max-width: 480px) {
-  .footer {
+  .footer,
+.content-bottom {
     flex-direction: column;
   }
 

package/dist/collection/components/modal/modal.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.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { ensureId, focusFirstTabbable, getSlotted } from "../../utils/dom";
+import { ensureId, focusFirstTabbable, getSlotted, slotChangeHasAssignedElement } from "../../utils/dom";
 import { activateFocusTrap, connectFocusTrap, deactivateFocusTrap, updateFocusTrapElements } from "../../utils/focusTrapComponent";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
@@ -16,6 +16,8 @@ import { connectMessages, disconnectMessages, setUpMessages, updateMessages } fr
 /**
  * @slot header - A slot for adding header text.
  * @slot content - A slot for adding the component's content.
+ * @slot contentTop - A slot for adding the component's content header.
+ * @slot contentBottom - A slot for adding the component's content footer.
  * @slot primary - A slot for adding a primary button.
  * @slot secondary - A slot for adding a secondary button.
  * @slot back - A slot for adding a back button.
@@ -64,6 +66,12 @@ export class Modal {
       this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width");
       this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height");
     };
+    this.contentTopSlotChangeHandler = (event) => {
+      this.hasContentTop = slotChangeHasAssignedElement(event);
+    };
+    this.contentBottomSlotChangeHandler = (event) => {
+      this.hasContentBottom = slotChangeHasAssignedElement(event);
+    };
     this.open = false;
     this.beforeClose = () => Promise.resolve();
     this.closeButtonDisabled = false;
@@ -81,6 +89,8 @@ export class Modal {
     this.cssWidth = undefined;
     this.cssHeight = undefined;
     this.hasFooter = true;
+    this.hasContentTop = false;
+    this.hasContentBottom = false;
     this.isOpen = false;
     this.effectiveLocale = undefined;
     this.defaultMessages = undefined;
@@ -114,8 +124,8 @@ export class Modal {
   connectedCallback() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] });
-    this.updateFooterVisibility();
     this.updateSizeCssVars();
+    this.updateFooterVisibility();
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
@@ -133,20 +143,32 @@ export class Modal {
   render() {
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("div", { class: {
         [CSS.container]: true,
+        [CSS.containerOpen]: this.isOpen,
         [CSS.slottedInShell]: this.slottedInShell
       } }, h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: {
-        [CSS.modal]: true,
-        [CSS.modalOpen]: this.isOpen
-      }, ref: this.setTransitionEl }, h("div", { class: CSS.header }, this.renderCloseButton(), h("header", { class: CSS.title }, h("slot", { name: CSS.header }))), h("div", { class: {
+        [CSS.modal]: true
+      },
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setTransitionEl }, h("div", { class: CSS.header }, this.renderCloseButton(), h("header", { class: CSS.title }, h("slot", { name: CSS.header }))), this.renderContentTop(), h("div", { class: {
         [CSS.content]: true,
         [CSS.contentNoFooter]: !this.hasFooter
-      }, ref: (el) => (this.modalContent = el) }, h("slot", { name: SLOTS.content })), this.renderFooter()))));
+      },
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.modalContent = el) }, h("slot", { name: SLOTS.content })), this.renderContentBottom(), this.renderFooter()))));
   }
   renderFooter() {
     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 }, h("slot", { name: SLOTS.secondary })), h("span", { class: CSS.primary }, h("slot", { name: SLOTS.primary })))) : null;
   }
+  renderContentTop() {
+    return (h("div", { class: CSS.contentTop, hidden: !this.hasContentTop }, h("slot", { name: SLOTS.contentTop, onSlotchange: this.contentTopSlotChangeHandler })));
+  }
+  renderContentBottom() {
+    return (h("div", { class: CSS.contentBottom, hidden: !this.hasContentBottom }, h("slot", { name: SLOTS.contentBottom, onSlotchange: this.contentBottomSlotChangeHandler })));
+  }
   renderCloseButton() {
-    return !this.closeButtonDisabled ? (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.messages.close }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
+    return !this.closeButtonDisabled ? (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "button", onClick: this.close, title: this.messages.close,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {
@@ -580,6 +602,8 @@ export class Modal {
       "cssWidth": {},
       "cssHeight": {},
       "hasFooter": {},
+      "hasContentTop": {},
+      "hasContentBottom": {},
       "isOpen": {},
       "effectiveLocale": {},
       "defaultMessages": {}

package/dist/collection/components/modal/resources.js

@@ -1,11 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.2
+ * v1.1.0
  */
 export const CSS = {
   modal: "modal",
-  modalOpen: "modal--open",
   title: "title",
   header: "header",
   footer: "footer",
@@ -16,8 +15,11 @@ export const CSS = {
   primary: "primary",
   overflowHidden: "overflow-hidden",
   container: "container",
+  containerOpen: "container--open",
   content: "content",
   contentNoFooter: "content--no-footer",
+  contentBottom: "content-bottom",
+  contentTop: "content-top",
   slottedInShell: "slotted-in-shell",
   // these classes help apply the animation in phases to only set transform on open/close
   // this helps avoid a positioning issue for any floating-ui-owning children
@@ -37,6 +39,8 @@ export const ICONS = {
 };
 export const SLOTS = {
   content: "content",
+  contentBottom: "content-bottom",
+  contentTop: "content-top",
   header: "header",
   back: "back",
   secondary: "secondary",

package/dist/collection/components/notice/notice.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */