@esri/calcite-components 1.0.0-next.529 → 1.0.0-next.531

package/dist/collection/components/graph/util.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.529
+ * v1.0.0-next.531
  */
 /**
  * Calculate slope of the tangents

package/dist/collection/components/handle/handle.css

@@ -92,7 +92,8 @@
   background-color: transparent;
   outline-color: transparent;
   color: var(--calcite-ui-border-3);
-  padding: 0.75rem 0.25rem;
+  padding-block: 0.75rem;
+  padding-inline: 0.25rem;
   line-height: 0;
 }
 .handle:hover {

package/dist/collection/components/handle/handle.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.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, Method, Prop, h } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/handle/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.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   handle: "handle",

package/dist/collection/components/icon/icon.css

@@ -91,24 +91,24 @@
 }
 
 :host([scale=s]) {
-  height: 1rem;
-  width: 1rem;
-  min-width: 1rem;
-  min-height: 1rem;
+  block-size: 1rem;
+  inline-size: 1rem;
+  min-inline-size: 1rem;
+  min-block-size: 1rem;
 }
 
 :host([scale=m]) {
-  height: 1.5rem;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  min-inline-size: 1.5rem;
+  min-block-size: 1.5rem;
 }
 
 :host([scale=l]) {
-  height: 2rem;
-  width: 2rem;
-  min-width: 2rem;
-  min-height: 2rem;
+  block-size: 2rem;
+  inline-size: 2rem;
+  min-inline-size: 2rem;
+  min-block-size: 2rem;
 }
 
 .flip-rtl {

package/dist/collection/components/icon/icon.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.529
+ * v1.0.0-next.531
  */
 import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/icon/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.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/icon/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-next.529
+ * v1.0.0-next.531
  */
 import { getAssetPath } from "@stencil/core";
 /**

package/dist/collection/components/inline-editable/inline-editable.css

@@ -83,15 +83,15 @@
 }
 
 :host([scale=s]) .controls-wrapper {
-  height: 1.5rem;
+  block-size: 1.5rem;
 }
 
 :host([scale=m]) .controls-wrapper {
-  height: 2rem;
+  block-size: 2rem;
 }
 
 :host([scale=l]) .controls-wrapper {
-  height: 2.75rem;
+  block-size: 2.75rem;
 }
 
 :host(:not([editing-enabled]):not([disabled])) .wrapper:hover {

package/dist/collection/components/inline-editable/inline-editable.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.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";

package/dist/collection/components/inline-editable/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.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   wrapper: "wrapper",

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

@@ -83,92 +83,83 @@
 }
 
 :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]) textarea {
-  height: 1.5rem;
-  min-height: 1.5rem;
+  block-size: 1.5rem;
+  min-block-size: 1.5rem;
 }
 :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]) input[type=file] {
-  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=s]) textarea {
-  height: auto;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  block-size: auto;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :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]) textarea {
-  min-height: 2rem;
+  min-block-size: 2rem;
 }
 :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]) input[type=file] {
-  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=m]) textarea {
-  height: auto;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  block-size: auto;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
 :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]) textarea {
-  min-height: 2.75rem;
+  min-block-size: 2.75rem;
 }
 :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]) input[type=file] {
-  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([scale=l]) textarea {
-  height: auto;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  block-size: auto;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
@@ -191,15 +182,15 @@
 
 :host textarea,
 :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);
@@ -299,8 +290,8 @@
 input[type=text]::-ms-clear, 
 input[type=text]::-ms-reveal {
   display: none;
-  height: 0px;
-  width: 0px;
+  block-size: 0px;
+  inline-size: 0px;
 }
 
 input[type=search]::-webkit-search-decoration, 
@@ -318,7 +309,7 @@ input[type=time]::-webkit-clear-button {
   margin: 0px;
   box-sizing: border-box;
   display: flex;
-  min-height: 100%;
+  min-block-size: 100%;
   cursor: pointer;
   align-items: center;
   justify-content: center;
@@ -353,9 +344,8 @@ input[type=time]::-webkit-clear-button {
 }
 
 .loader {
-  top: 1px;
-  left: 1px;
-  right: 1px;
+  inset-block-start: 1px;
+  inset-inline: 1px;
   pointer-events: none;
   position: absolute;
   display: block;
@@ -370,8 +360,8 @@ input[type=time]::-webkit-clear-button {
 .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;
@@ -441,8 +431,8 @@ input[type=time]::-webkit-clear-button {
 
 .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 {
@@ -487,12 +477,12 @@ input[type=time]::-webkit-clear-button {
 }
 
 :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;
@@ -504,10 +494,8 @@ input[type=time]::-webkit-clear-button {
   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;
 }
@@ -545,28 +533,26 @@ input[type=time]::-webkit-clear-button {
 
 :host textarea::-webkit-resizer {
   position: absolute;
-  bottom: 0px;
+  inset-block-end: 0px;
   box-sizing: border-box;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-block: 0px;
+  padding-inline: 0.25rem;
   inset-inline-end: 0;
 }
 
 .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);
 }
@@ -589,32 +575,26 @@ input[type=time]::-webkit-clear-button {
 }
 
 :host([type=file][scale=s]) input {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-block: 1px;
+  padding-inline: 0.5rem;
 }
 
 :host([type=file][scale=m]) input {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.75rem;
 }
 
 :host([type=file][scale=l]) input {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
 }
 
 :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 {
@@ -633,15 +613,12 @@ input[type=time]::-webkit-clear-button {
 }
 
 ::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/input.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.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";

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

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

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

@@ -97,7 +97,7 @@
 :host {
   position: relative;
   display: inline-block;
-  width: 100%;
+  inline-size: 100%;
   overflow: visible;
   vertical-align: top;
   --tw-shadow: 0 0 #0000;
@@ -120,7 +120,7 @@
 
 .calendar-picker-wrapper {
   position: static;
-  width: 100%;
+  inline-size: 100%;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -141,19 +141,17 @@
   display: flex;
   align-items: center;
   border-width: 1px;
-  border-left-width: 0px;
-  border-right-width: 0px;
+  border-inline-start-width: 0px;
+  border-inline-end-width: 0px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-background);
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-block: 0px;
+  padding-inline: 0.25rem;
 }
 
 :host([range][layout=vertical]) .input-wrapper {
-  width: 100%;
+  inline-size: 100%;
 }
 :host([range][layout=vertical]) .input-container {
   flex-direction: column;
@@ -163,27 +161,25 @@
   transform: translate3d(0, 0, 0);
 }
 :host([range][layout=vertical]) .vertical-arrow-container {
-  top: 1.5rem;
+  inset-block-start: 1.5rem;
   position: absolute;
-  left: 0px;
+  inset-inline-start: 0px;
   z-index: 10;
-  margin-left: 1px;
-  margin-right: 1px;
+  margin-inline: 1px;
   background-color: var(--calcite-ui-foreground-1);
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
+  padding-inline: 0.625rem;
 }
 
 :host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper {
-  width: 216px;
+  inline-size: 216px;
 }
 
 :host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper {
-  width: 286px;
+  inline-size: 286px;
 }
 
 :host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper {
-  width: 398px;
+  inline-size: 398px;
 }
 
 .menu-container {
@@ -257,23 +253,22 @@
 }
 
 .input .calcite-input__wrapper {
-  margin-top: 0px;
+  margin-block-start: 0px;
 }
 
 :host([range][layout=vertical][scale=m]) .vertical-arrow-container {
-  top: 1.5rem;
+  inset-block-start: 1.5rem;
   padding-inline-start: 0.75rem;
 }
 :host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon {
-  height: 0.75rem;
-  width: 0.75rem;
-  min-width: 0px;
+  block-size: 0.75rem;
+  inline-size: 0.75rem;
+  min-inline-size: 0px;
 }
 
 :host([range][layout=vertical][scale=l]) .vertical-arrow-container {
-  top: 2.25rem;
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
+  inset-block-start: 2.25rem;
+  padding-inline: 0.875rem;
 }
 
 :host([range][layout=vertical][active]) .vertical-arrow-container {
@@ -281,15 +276,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-date-picker/input-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-next.529
+ * v1.0.0-next.531
  */
 import { Component, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
 import { getLocaleData } from "../date-picker/utils";

package/dist/collection/components/input-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-next.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   menu: "menu-container",