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

package/dist/collection/components/input-number/input-number.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.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -126,10 +126,7 @@ export class InputNumber {
       this.previousEmittedValue = this.value;
     };
     this.inputNumberBlurHandler = () => {
-      this.calciteInternalInputNumberBlur.emit({
-        element: this.childNumberEl,
-        value: this.value
-      });
+      this.calciteInternalInputNumberBlur.emit();
       this.emitChangeIfUserModified();
     };
     this.inputNumberFocusHandler = (event) => {
@@ -137,10 +134,7 @@ export class InputNumber {
       if (event.target !== slottedActionEl) {
         this.setFocus();
       }
-      this.calciteInternalInputNumberFocus.emit({
-        element: this.childNumberEl,
-        value: this.value
-      });
+      this.calciteInternalInputNumberFocus.emit();
     };
     this.inputNumberInputHandler = (nativeEvent) => {
       if (this.disabled || this.readOnly) {
@@ -1144,8 +1138,8 @@ export class InputNumber {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -1162,8 +1156,8 @@ export class InputNumber {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -1174,12 +1168,17 @@ export class InputNumber {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires each time a new value is typed."
+        "text": "Fires each time a new value is typed.\n\n**Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead"
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteInputNumberChange",

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

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

package/dist/collection/components/input-time-picker/input-time-picker.css

@@ -71,19 +71,13 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host {
-  display: inline-block;
-  -webkit-user-select: none;
-          user-select: none;
-}
-
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -91,6 +85,13 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+
+:host {
+  display: inline-block;
+  -webkit-user-select: none;
+          user-select: none;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */

package/dist/collection/components/input-time-picker/input-time-picker.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.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -43,7 +43,7 @@ export class InputTimePicker {
     /**
      * Determines where the popover will be positioned relative to the input.
      *
-     * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+     * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
      */
     this.placement = "auto";
     /** number (seconds) that specifies the granularity that the value must adhere to */
@@ -87,10 +87,13 @@ export class InputTimePicker {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.keyDownHandler = (event) => {
-      if (event.key === "Enter" && !event.defaultPrevented) {
+    this.keyDownHandler = ({ defaultPrevented, key }) => {
+      if (key === "Enter" && !defaultPrevented) {
         submitForm(this);
       }
+      if (key === "Escape" && this.active) {
+        this.active = false;
+      }
     };
     this.setCalcitePopoverEl = (el) => {
       this.popoverEl = el;
@@ -174,11 +177,6 @@ export class InputTimePicker {
     }
     this.setFocus();
   }
-  keyUpHandler(event) {
-    if (event.key === "Escape" && this.active) {
-      this.active = false;
-    }
-  }
   timePickerBlurHandler(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -606,12 +604,12 @@ export class InputTimePicker {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "PopperPlacement",
-        "resolved": "Placement | PlacementRtl | VariationRtl",
+        "original": "LogicalPlacement",
+        "resolved": "Placement | AutoPlacement | VariationPlacement | DeprecatedPlacement",
         "references": {
-          "PopperPlacement": {
+          "LogicalPlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -620,7 +618,7 @@ export class InputTimePicker {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+            "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
           }],
         "text": "Determines where the popover will be positioned relative to the input."
       },
@@ -741,12 +739,6 @@ export class InputTimePicker {
       "target": undefined,
       "capture": false,
       "passive": false
-    }, {
-      "name": "keyup",
-      "method": "keyUpHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
     }, {
       "name": "calciteInternalTimePickerBlur",
       "method": "timePickerBlurHandler",

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

package/dist/collection/components/label/label.css

@@ -71,13 +71,21 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 /**
 * CSS Custom Properties
 *
@@ -160,13 +168,6 @@
   justify-content: space-between;
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) > .container {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);

package/dist/collection/components/label/label.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.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";

package/dist/collection/components/label/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.536
+ * v1.0.0-next.539
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/link/link.css

@@ -71,13 +71,21 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 :host {
   display: inline;
 }
@@ -164,13 +172,6 @@ calcite-icon {
   background-position: 100% 100%, 100% 100%;
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */

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.0.0-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";

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

@@ -71,17 +71,13 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host {
-  display: block;
-}
-
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -89,6 +85,11 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+
+:host {
+  display: block;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */

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

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

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

@@ -71,18 +71,13 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host {
-  display: flex;
-  flex-direction: column;
-}
-
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -90,6 +85,12 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */

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

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

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.536
+ * 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.536
+ * 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.536
+ * 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.536
+ * 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;
 }