@esri/calcite-components 1.0.0-next.538 → 1.0.0-next.539

package/dist/collection/components/list-item-group/list-item-group.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]) {

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.0.0-next.538
+ * v1.0.0-next.539
  */
 import { Component, Element, Prop, h, Host } from "@stencil/core";
 import { CSS } from "./resources";

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.0.0-next.538
+ * v1.0.0-next.539
  */
 export const CSS = {
   heading: "heading",

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

@@ -72,7 +72,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -94,7 +94,6 @@
   display: none;
   align-items: center;
   justify-content: center;
-  padding-block: 4rem;
   opacity: 1;
   min-block-size: var(--calcite-loader-size);
   font-size: var(--calcite-loader-font-size);
@@ -103,6 +102,7 @@
   fill: none;
   transform: scale(1, 1);
   animation: loader-color-shift 6s alternate-reverse infinite linear;
+  padding-block: var(--calcite-loader-padding, 4rem);
 }
 
 :host([scale=s]) {

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.0.0-next.538
+ * v1.0.0-next.539
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -22,7 +22,11 @@ export class Loader {
     this.value = 0;
     /** Text that displays under the component's indicator. */
     this.text = "";
-    /** Disables spacing around the component. */
+    /**
+     * Disables spacing around the component.
+     *
+     * @deprecated Use `--calcite-loader-padding` CSS variable instead.
+     */
     this.noPadding = false;
   }
   //--------------------------------------------------------------------------
@@ -234,7 +238,10 @@ export class Loader {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `--calcite-loader-padding` CSS variable instead."
+          }],
         "text": "Disables spacing around the component."
       },
       "attribute": "no-padding",

package/dist/collection/components/modal/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-next.538
+ * v1.0.0-next.539
  */
 export {};

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,11 +83,11 @@
 *
 * 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;
@@ -108,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]) {
@@ -115,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]) {
@@ -122,6 +130,10 @@
   --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 {
@@ -200,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 {
@@ -222,8 +234,8 @@
   min-inline-size: 0px;
   align-items: center;
   flex: 1 1 auto;
-  padding-block: var(--calcite-modal-padding);
-  padding-inline: 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(*), 
@@ -231,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));
 }
 
 /**
@@ -250,8 +262,7 @@ slot[name=header]::slotted(*),
 }
 
 .content--spaced {
-  padding-block: var(--calcite-modal-padding);
-  padding-inline: var(--calcite-modal-padding-large);
+  padding: var(--calcite-modal-padding);
 }
 
 .content--no-footer {
@@ -261,7 +272,7 @@ slot[name=header]::slotted(*),
 
 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 {
@@ -285,8 +296,8 @@ slot[name=content]::slotted(*),
   border-color: var(--calcite-ui-border-3);
   background-color: var(--calcite-ui-foreground-1);
   flex: 0 0 auto;
-  padding-block: var(--calcite-modal-padding);
-  padding-inline: 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;
 }
 

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-next.538
+ * v1.0.0-next.539
  */
 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;
     //--------------------------------------------------------------------------
     //
@@ -201,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();
     }
   }
@@ -563,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",
@@ -582,7 +589,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is requested to be closed and before the closing transition begins."
       },
       "complexType": {
         "original": "void",
@@ -597,7 +604,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is closed and animation is complete."
       },
       "complexType": {
         "original": "void",
@@ -612,7 +619,7 @@ export class Modal {
       "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": "void",
@@ -627,7 +634,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fires when the component is open and animation is complete."
       },
       "complexType": {
         "original": "void",
@@ -736,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-next.538
+ * v1.0.0-next.539
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/notice/notice.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]) {
@@ -201,7 +201,7 @@
   display: flex;
 }
 
-:host([active]) .container {
+:host([open]) .container {
   pointer-events: auto;
   display: flex;
   max-block-size: 100%;

package/dist/collection/components/notice/notice.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-next.538
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -27,8 +27,14 @@ export class Notice {
     //  Properties
     //
     //---------------------------------------------------------------------------
-    /** When true, the component is active. */
+    /**
+     * When true, the component is active.
+     *
+     * @deprecated Use open instead.
+     */
     this.active = false;
+    /** When true, the component is visible */
+    this.open = false;
     /** The color for the component's top border and icon. */
     this.color = "blue";
     /**
@@ -55,10 +61,16 @@ export class Notice {
     //
     //--------------------------------------------------------------------------
     this.close = () => {
-      this.active = false;
+      this.open = false;
       this.calciteNoticeClose.emit();
     };
   }
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    this.active = value;
+  }
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
@@ -69,6 +81,11 @@ export class Notice {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    const isOpen = this.active || this.open;
+    if (isOpen) {
+      this.activeHandler(isOpen);
+      this.openHandler(isOpen);
+    }
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
@@ -130,13 +147,34 @@ export class Notice {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use open instead."
+          }],
         "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the component is visible"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "color": {
       "type": "string",
       "mutable": false,
@@ -295,8 +333,8 @@ export class Notice {
         "text": "Fired when the component is closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -310,8 +348,8 @@ export class Notice {
         "text": "Fired when the component is opened."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -335,6 +373,12 @@ export class Notice {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "active",
+      "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "openHandler"
+    }, {
       "propName": "icon",
       "methodName": "updateRequestedIcon"
     }, {

package/dist/collection/components/notice/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-next.538
+ * v1.0.0-next.539
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.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]) {

package/dist/collection/components/option/option.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-next.538
+ * v1.0.0-next.539
  */
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -163,8 +163,8 @@ export class Option {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/option-group/option-group.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]) {

package/dist/collection/components/option-group/option-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.0.0-next.538
+ * v1.0.0-next.539
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**
@@ -91,8 +91,8 @@ export class OptionGroup {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/pagination/pagination.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]) {

package/dist/collection/components/pagination/pagination.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-next.538
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, h, Prop, Method, Fragment, State } from "@stencil/core";
 import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";

package/dist/collection/components/pagination/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-next.538
+ * v1.0.0-next.539
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/panel.css

@@ -82,7 +82,7 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {