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

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

@@ -72,13 +72,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);
+}
+
 .scale--s{
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -115,13 +123,6 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-: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 */
@@ -134,6 +135,10 @@ ul{
   display: flex;
   flex-direction: column;
   padding: 0px;
+}
+
+:host(:focus), 
+ul:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -142,8 +147,8 @@ ul{
   position: relative;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
-  min-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 100%;
   cursor: pointer;
   align-items: center;
   color: var(--calcite-ui-text-3);
@@ -152,7 +157,8 @@ ul{
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   outline-color: transparent;
-  padding: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: var(--calcite-combobox-item-spacing-unit-s);
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 :host([disabled]) .label{
@@ -181,7 +187,8 @@ ul{
 }
 
 .title {
-  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .icon{
@@ -197,7 +204,7 @@ ul{
 }
 
 .icon--custom {
-  margin-top: -1px;
+  margin-block-start: -1px;
   color: var(--calcite-ui-text-3);
 }
 
@@ -208,7 +215,7 @@ ul{
 .icon--dot{
   display: flex;
   justify-content: flex-end;
-  min-width: var(--calcite-combobox-item-spacing-unit-l);
+  min-inline-size: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .icon--dot:before {

package/dist/collection/components/combobox-item/combobox-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-beta.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";
@@ -321,12 +321,17 @@ export class ComboboxItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the item is selected or unselected."
+        "text": "Emitted whenever the item is selected or unselected.\n\n**Note:**: The event's payload is deprecated, please use the event's target/currentTarget instead"
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }]; }
   static get methods() { return {

package/dist/collection/components/combobox-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-beta.84
+ * v1.0.0-beta.87
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-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]) {
@@ -111,6 +111,10 @@
   display: flex;
   flex-direction: column;
   padding: 0px;
+}
+
+:host(:focus), 
+.list:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -118,9 +122,9 @@
 .label {
   box-sizing: border-box;
   display: flex;
-  width: 100%;
-  min-width: 0px;
-  max-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 0px;
+  max-inline-size: 100%;
   color: var(--calcite-ui-text-3);
 }
 
@@ -136,13 +140,13 @@
   border: 0 solid;
   display: block;
   flex: 1 1 0%;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   font-weight: var(--calcite-font-weight-bold);
   color: var(--calcite-ui-text-2);
   word-wrap: break-word;
   word-break: break-word;
-  border-bottom-color: var(--calcite-ui-border-3);
-  padding: var(--calcite-combobox-item-spacing-unit-l) 0;
-  margin-left: var(--calcite-combobox-item-spacing-unit-s);
-  margin-right: var(--calcite-combobox-item-spacing-unit-s);
+  border-block-end-color: var(--calcite-ui-border-3);
+  padding-block: var(--calcite-combobox-item-spacing-unit-l);
+  padding-inline: 0;
+  margin-inline: var(--calcite-combobox-item-spacing-unit-s);
 }

package/dist/collection/components/combobox-item-group/combobox-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-beta.84
+ * v1.0.0-beta.87
  */
 import { Component, Prop, h, Element } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/combobox-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-beta.84
+ * v1.0.0-beta.87
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/date-picker.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]) {
@@ -81,7 +81,7 @@
 :host {
   position: relative;
   display: inline-block;
-  width: 100%;
+  inline-size: 100%;
   overflow: visible;
   border-radius: 0px;
   border-width: 1px;
@@ -92,13 +92,13 @@
 }
 
 :host([scale=s]) {
-  max-width: 216px;
+  max-inline-size: 216px;
 }
 
 :host([scale=m]) {
-  max-width: 286px;
+  max-inline-size: 286px;
 }
 
 :host([scale=l]) {
-  max-width: 398px;
+  max-inline-size: 398px;
 }

package/dist/collection/components/date-picker/date-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.84
+ * v1.0.0-beta.87
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
@@ -40,13 +40,13 @@ export class DatePicker {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.keyUpHandler = (e) => {
-      if (e.key === "Escape") {
+    this.keyDownHandler = (event) => {
+      if (event.key === "Escape") {
         this.reset();
       }
     };
-    this.monthHeaderSelectChange = (e) => {
-      const date = new Date(e.detail);
+    this.monthHeaderSelectChange = (event) => {
+      const date = new Date(event.detail);
       if (!this.range) {
         this.activeDate = date;
       }
@@ -60,8 +60,8 @@ export class DatePicker {
         this.mostRecentRangeValue = date;
       }
     };
-    this.monthActiveDateChange = (e) => {
-      const date = new Date(e.detail);
+    this.monthActiveDateChange = (event) => {
+      const date = new Date(event.detail);
       if (!this.range) {
         this.activeDate = date;
       }
@@ -75,12 +75,12 @@ export class DatePicker {
         this.mostRecentRangeValue = date;
       }
     };
-    this.monthHoverChange = (e) => {
+    this.monthHoverChange = (event) => {
       if (!this.startAsDate) {
         this.hoverRange = undefined;
         return;
       }
-      const date = new Date(e.detail);
+      const date = new Date(event.detail);
       this.hoverRange = {
         focused: this.activeRange || "start",
         start: this.startAsDate,
@@ -139,7 +139,7 @@ export class DatePicker {
           this.hoverRange = undefined;
         }
       }
-      e.stopPropagation();
+      event.stopPropagation();
     };
     this.monthMouseOutChange = () => {
       if (this.hoverRange) {
@@ -166,10 +166,10 @@ export class DatePicker {
     /**
      * Event handler for when the selected date changes
      *
-     * @param e
+     * @param event
      */
-    this.monthDateChange = (e) => {
-      const date = new Date(e.detail);
+    this.monthDateChange = (event) => {
+      const date = new Date(event.detail);
       if (!this.range) {
         this.value = date ? dateToISO(date) : "";
         this.valueAsDate = date || null;
@@ -307,7 +307,7 @@ export class DatePicker {
         ? endDate || this.maxAsDate
         : this.maxAsDate
       : this.maxAsDate;
-    return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
+    return (h(Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
   valueHandler(value) {
     if (Array.isArray(value)) {

package/dist/collection/components/date-picker/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.84
+ * v1.0.0-beta.87
  */
 export {};

package/dist/collection/components/date-picker/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.84
+ * v1.0.0-beta.87
  */
 export const HEADING_LEVEL = 2;
 export const TEXT = {

package/dist/collection/components/date-picker/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.0.0-beta.84
+ * v1.0.0-beta.87
  */
 import { getAssetPath } from "@stencil/core";
 import { locales } from "../../utils/locale";

package/dist/collection/components/date-picker-day/date-picker-day.css

@@ -71,22 +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;
-  min-width: 0px;
-  cursor: pointer;
-  justify-content: center;
-  color: var(--calcite-ui-text-3);
-  width: 14.2857142857%;
-}
-
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -94,6 +85,16 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+
+:host {
+  display: flex;
+  min-inline-size: 0px;
+  cursor: pointer;
+  justify-content: center;
+  color: var(--calcite-ui-text-3);
+  inline-size: 14.2857142857%;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -127,49 +128,43 @@
 }
 
 .text {
-  margin-top: 1px;
-  margin-bottom: 0px;
+  margin-block: 1px 0px;
   margin-inline-start: 0px;
 }
 
 :host([scale=s]) .day-v-wrapper {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+  padding-block: 0.125rem;
 }
 :host([scale=s]) .day-wrapper {
   padding: 0px;
 }
 :host([scale=s]) .day {
-  height: 27px;
-  width: 27px;
+  block-size: 27px;
+  inline-size: 27px;
   font-size: var(--calcite-font-size--2);
 }
 
 :host([scale=m]) .day-v-wrapper {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
 }
 :host([scale=m]) .day-wrapper {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
 :host([scale=m]) .day {
-  height: 33px;
-  width: 33px;
+  block-size: 33px;
+  inline-size: 33px;
   font-size: var(--calcite-font-size--1);
 }
 
 :host([scale=l]) .day-v-wrapper {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
 }
 :host([scale=l]) .day-wrapper {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
 :host([scale=l]) .day {
-  height: 43px;
-  width: 43px;
+  block-size: 43px;
+  inline-size: 43px;
   font-size: var(--calcite-font-size-0);
 }
 

package/dist/collection/components/date-picker-day/date-picker-day.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.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -35,17 +35,15 @@ export class DatePickerDay {
     this.onClick = () => {
       !this.disabled && this.calciteDaySelect.emit();
     };
-    this.keyDownHandler = (e) => {
-      const key = e.key;
+    this.keyDownHandler = (event) => {
+      const key = event.key;
       if (key === " " || key === "Enter") {
         !this.disabled && this.calciteDaySelect.emit();
       }
     };
   }
   mouseoverHandler() {
-    this.calciteInternalDayHover.emit({
-      disabled: this.disabled
-    });
+    this.calciteInternalDayHover.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -331,8 +329,8 @@ export class DatePickerDay {
         "text": "Emitted when user selects day"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -349,8 +347,8 @@ export class DatePickerDay {
         "text": "Emitted when user hovers over a day"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/date-picker-month/date-picker-month.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]) {
@@ -79,51 +79,43 @@
 }
 
 .calender {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
 }
 
 .week-headers {
   display: flex;
   border-width: 0px;
-  border-top-width: 1px;
+  border-block-start-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-block: 0px;
+  padding-inline: 0.25rem;
 }
 
 .week-header {
   text-align: center;
   font-weight: var(--calcite-font-weight-bold);
   color: var(--calcite-ui-text-3);
-  width: 14.2857142857%;
+  inline-size: 14.2857142857%;
 }
 
 :host([scale=s]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-inline: 0px;
+  padding-block: 0.5rem 0.75rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=m]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.75rem;
-  padding-bottom: 1rem;
+  padding-inline: 0px;
+  padding-block: 0.75rem 1rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=l]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 1rem;
-  padding-bottom: 1.25rem;
+  padding-inline: 0px;
+  padding-block: 1rem 1.25rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -131,10 +123,8 @@
 .week-days {
   display: flex;
   flex-direction: row;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-block: 0px;
+  padding-inline: 6px;
 }
 .week-days:focus {
   outline: 2px solid transparent;