@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.87

package/dist/collection/components/input-number/input-number.css

@@ -71,69 +71,67 @@
 * 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: block;
 }
 
 :host([scale=s]) input,  :host([scale=s]) .prefix,  :host([scale=s]) .suffix {
-  height: 1.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  block-size: 1.5rem;
+  padding-inline: 0.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 :host([scale=s]) .number-button-wrapper,  :host([scale=s]) .action-wrapper calcite-button,  :host([scale=s]) .action-wrapper calcite-button button {
-  height: 1.5rem;
+  block-size: 1.5rem;
 }
 :host([scale=s]) .clear-button {
-  min-height: 1.5rem;
-  min-width: 1.5rem;
+  min-block-size: 1.5rem;
+  min-inline-size: 1.5rem;
 }
 
 :host([scale=m]) input,  :host([scale=m]) .prefix,  :host([scale=m]) .suffix {
-  height: 2rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  block-size: 2rem;
+  padding-inline: 0.75rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=m]) .number-button-wrapper,  :host([scale=m]) .action-wrapper calcite-button,  :host([scale=m]) .action-wrapper calcite-button button {
-  height: 2rem;
+  block-size: 2rem;
 }
 :host([scale=m]) .clear-button {
-  min-height: 2rem;
-  min-width: 2rem;
+  min-block-size: 2rem;
+  min-inline-size: 2rem;
 }
 
 :host([scale=l]) input,  :host([scale=l]) .prefix,  :host([scale=l]) .suffix {
-  height: 2.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  block-size: 2.75rem;
+  padding-inline: 1rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 :host([scale=l]) .number-button-wrapper,  :host([scale=l]) .action-wrapper calcite-button,  :host([scale=l]) .action-wrapper calcite-button button {
-  height: 2.75rem;
+  block-size: 2.75rem;
 }
 :host([scale=l]) .clear-button {
-  min-height: 2.75rem;
-  min-width: 2.75rem;
+  min-block-size: 2.75rem;
+  min-inline-size: 2.75rem;
 }
 
-: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 */
@@ -141,15 +139,15 @@
 }
 
 :host input {
-  transition: var(--calcite-animation-timing), height 0, outline-offset 0s;
+  transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
   -webkit-appearance: none;
   position: relative;
   margin: 0px;
   box-sizing: border-box;
   display: flex;
-  max-height: 100%;
-  width: 100%;
-  max-width: 100%;
+  max-block-size: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
   flex: 1 1 0%;
   border-radius: 0px;
   background-color: var(--calcite-ui-foreground-1);
@@ -242,7 +240,7 @@
   margin: 0px;
   box-sizing: border-box;
   display: flex;
-  min-height: 100%;
+  min-block-size: 100%;
   cursor: pointer;
   align-items: center;
   justify-content: center;
@@ -277,9 +275,8 @@
 }
 
 .loader {
-  top: 1px;
-  left: 1px;
-  right: 1px;
+  inset-block-start: 1px;
+  inset-inline: 1px;
   pointer-events: none;
   position: absolute;
   display: block;
@@ -294,8 +291,8 @@
 .suffix {
   box-sizing: border-box;
   display: flex;
-  height: auto;
-  min-height: 100%;
+  block-size: auto;
+  min-block-size: 100%;
   -webkit-user-select: none;
           user-select: none;
   align-content: center;
@@ -355,8 +352,8 @@
 
 .number-button-item.number-button-item--horizontal[data-adjustment=down],  .number-button-item.number-button-item--horizontal[data-adjustment=up] {
   order: 1;
-  max-height: 100%;
-  min-height: 100%;
+  max-block-size: 100%;
+  min-block-size: 100%;
   align-self: stretch;
 }
 .number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon, .number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon {
@@ -401,12 +398,12 @@
 }
 
 :host([number-button-type=vertical]) .number-button-item[data-adjustment=down] {
-  border-top-width: 0px;
+  border-block-start-width: 0px;
 }
 
 .number-button-item {
-  max-height: 50%;
-  min-height: 50%;
+  max-block-size: 50%;
+  min-block-size: 50%;
   pointer-events: initial;
   margin: 0px;
   box-sizing: border-box;
@@ -418,10 +415,8 @@
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-foreground-1);
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-block: 0px;
+  padding-inline: 0.5rem;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-inline-start-width: 0px;
 }
@@ -450,18 +445,18 @@
 }
 
 .resize-icon-wrapper {
-  bottom: 2px;
+  inset-block-end: 2px;
   inset-inline-end: 2px;
   pointer-events: none;
   position: absolute;
   z-index: 10;
-  height: 0.75rem;
-  width: 0.75rem;
+  block-size: 0.75rem;
+  inline-size: 0.75rem;
   background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-text-3);
 }
 .resize-icon-wrapper calcite-icon {
-  bottom: 0.25rem;
+  inset-block-end: 0.25rem;
   inset-inline-end: 0.25rem;
   transform: rotate(-45deg);
 }
@@ -471,11 +466,11 @@
 }
 
 :host(.no-bottom-border) input {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
 }
 
 :host(.border-top-color-one) input {
-  border-top-color: var(--calcite-ui-border-1);
+  border-block-start-color: var(--calcite-ui-border-1);
 }
 
 :host .inline-child {
@@ -494,15 +489,12 @@
 }
 
 ::slotted(input[slot=hidden-form-input]) {
-  bottom: 0 !important;
-  left: 0 !important;
   margin: 0 !important;
   opacity: 0 !important;
   outline: none !important;
   padding: 0 !important;
   position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
+  inset: 0 !important;
   transform: none !important;
   -webkit-appearance: none !important;
   z-index: -1 !important;

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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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 */
@@ -98,15 +99,12 @@
 }
 
 ::slotted(input[slot=hidden-form-input]) {
-  bottom: 0 !important;
-  left: 0 !important;
   margin: 0 !important;
   opacity: 0 !important;
   outline: none !important;
   padding: 0 !important;
   position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
+  inset: 0 !important;
   transform: none !important;
   -webkit-appearance: none !important;
   z-index: -1 !important;

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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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
 *
@@ -108,7 +116,7 @@
 }
 
 :host(:not([disable-spacing])[scale=s]) .container {
-  margin-bottom: var(--calcite-label-margin-bottom, 0.5rem);
+  margin-block-end: var(--calcite-label-margin-bottom, 0.5rem);
 }
 
 :host([scale=m]) .container {
@@ -118,7 +126,7 @@
 }
 
 :host(:not([disable-spacing])[scale=m]) .container {
-  margin-bottom: var(--calcite-label-margin-bottom, 0.75rem);
+  margin-block-end: var(--calcite-label-margin-bottom, 0.75rem);
 }
 
 :host([scale=l]) .container {
@@ -128,14 +136,13 @@
 }
 
 :host(:not([disable-spacing])[scale=l]) .container {
-  margin-bottom: var(--calcite-label-margin-bottom, 1rem);
+  margin-block-end: var(--calcite-label-margin-bottom, 1rem);
 }
 
 :host .container {
-  margin-left: 0px;
-  margin-right: 0px;
-  margin-top: 0px;
-  width: 100%;
+  margin-inline: 0px;
+  margin-block-start: 0px;
+  inline-size: 100%;
   line-height: 1.375;
   color: var(--calcite-ui-text-1);
 }
@@ -161,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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 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;
 }
@@ -114,16 +122,16 @@
 }
 
 calcite-icon {
-  width: 1em;
-  height: 1em;
-  min-width: unset;
-  min-height: unset;
+  inline-size: 1em;
+  block-size: 1em;
+  min-inline-size: unset;
+  min-block-size: unset;
 }
 
 .calcite-link--icon {
   vertical-align: text-top;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  margin-top: 0.125rem;
+  margin-block-start: 0.125rem;
 }
 
 :host .calcite-link--icon.icon-start {
@@ -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-beta.86
+ * v1.0.0-beta.87
  */
 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 */
@@ -98,7 +99,7 @@
 .container {
   box-sizing: border-box;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex-direction: column;
   background-color: transparent;
 }
@@ -107,7 +108,7 @@
 }
 
 ::slotted(calcite-list-item) {
-  margin-bottom: 1px;
+  margin-block-end: 1px;
   --tw-shadow: 0 1px 0 var(--calcite-ui-border-3);
   --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);