@esri/calcite-components 1.0.0-next.530 → 1.0.0-next.533

package/dist/collection/components/color-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.530
+ * v1.0.0-next.533
  */
 import Color from "color";
 export const CSS = {

package/dist/collection/components/color-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-next.530
+ * v1.0.0-next.533
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.css

@@ -84,7 +84,7 @@
 
 .container {
   display: inline-grid;
-  width: 100%;
+  inline-size: 100%;
   align-items: center;
   grid-template-columns: 1fr auto;
 }
@@ -92,10 +92,8 @@
 .preview {
   grid-column: 2/3;
   pointer-events: none;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+  margin-block: 0px;
+  margin-inline: 0.25rem;
   display: flex;
   align-items: center;
   z-index: 1;
@@ -108,6 +106,6 @@
 
 .input {
   grid-column: 1/3;
-  width: 100%;
+  inline-size: 100%;
   text-transform: uppercase;
 }

package/dist/collection/components/color-picker-hex-input/color-picker-hex-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.530
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";

package/dist/collection/components/color-picker-hex-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.530
+ * v1.0.0-next.533
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.css

@@ -84,24 +84,24 @@
 }
 
 :host([scale=s]) {
-  height: 1.25rem;
-  width: 1.25rem;
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
 }
 
 :host([scale=m]) {
-  height: 1.5rem;
-  width: 1.5rem;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
 }
 
 :host([scale=l]) {
-  height: 2rem;
-  width: 2rem;
+  block-size: 2rem;
+  inline-size: 2rem;
 }
 
 .swatch {
   overflow: visible;
-  height: inherit;
-  width: inherit;
+  block-size: inherit;
+  inline-size: inherit;
 }
 .swatch rect {
   transition-property: all;
@@ -111,10 +111,7 @@
 
 .no-color-icon {
   position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
+  inset: 0px;
+  block-size: 100%;
+  inline-size: 100%;
 }

package/dist/collection/components/color-picker-swatch/color-picker-swatch.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.530
+ * v1.0.0-next.533
  */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-swatch/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.530
+ * v1.0.0-next.533
  */
 export const CSS = {
   swatch: "swatch",

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

@@ -130,7 +130,8 @@
   color: var(--calcite-ui-text-1);
   outline-color: transparent;
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
-  padding: calc(var(--calcite-combobox-item-spacing-unit-s) / 4) var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 :host(:focus-within) .wrapper, 
@@ -140,7 +141,8 @@
 }
 
 .wrapper--single {
-  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
   cursor: pointer;
   flex-wrap: nowrap;
 }
@@ -166,10 +168,10 @@
   font-family: inherit;
   color: var(--calcite-ui-text-1);
   font-size: inherit;
-  height: var(--calcite-combobox-input-height);
+  block-size: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
-  min-width: 120px;
-  margin-bottom: var(--calcite-combobox-item-spacing-unit-s);
+  min-inline-size: 120px;
+  margin-block-end: var(--calcite-combobox-item-spacing-unit-s);
 }
 .input:focus {
   outline: 2px solid transparent;
@@ -181,8 +183,7 @@
 }
 
 .input--single {
-  margin-bottom: 0px;
-  margin-top: 0px;
+  margin-block: 0px;
   padding: 0px;
 }
 
@@ -192,13 +193,14 @@
 
 .input--hidden {
   pointer-events: none;
-  width: 0px;
-  min-width: 0px;
+  inline-size: 0px;
+  min-inline-size: 0px;
   opacity: 0;
 }
 
 .input--icon {
-  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .input-wrap {
@@ -214,28 +216,26 @@
 .label {
   pointer-events: none;
   display: flex;
-  max-width: 100%;
+  max-inline-size: 100%;
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0px;
   font-weight: var(--calcite-font-weight-normal);
-  height: var(--calcite-combobox-input-height);
+  block-size: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
 }
 
 .label--spaced {
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: var(--calcite-combobox-item-spacing-unit-l);
-  padding-right: var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0px;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .icon-end, 
 .icon-start {
   display: flex;
-  width: 1rem;
+  inline-size: 1rem;
   cursor: pointer;
   align-items: center;
 }
@@ -245,7 +245,7 @@
 }
 
 .popper-container {
-  width: 100%;
+  inline-size: 100%;
   display: block;
   position: absolute;
   z-index: 900;
@@ -295,8 +295,8 @@
 }
 .screen-readers-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -306,10 +306,10 @@
 }
 
 .list-container {
-  max-height: 100vh;
+  max-block-size: 100vh;
   overflow-y: auto;
   background-color: var(--calcite-ui-foreground-1);
-  width: var(--calcite-dropdown-width);
+  inline-size: var(--calcite-dropdown-width);
 }
 
 .list {
@@ -319,14 +319,14 @@
 }
 
 .list--hide {
-  height: 0px;
+  block-size: 0px;
   overflow: hidden;
 }
 
 .chip {
   margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
   margin-inline: 0 var(--calcite-combobox-item-spacing-unit-s);
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .chip--active {
@@ -338,15 +338,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/combobox/combobox.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.530
+ * v1.0.0-next.533
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";

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

package/dist/collection/components/combobox/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.530
+ * v1.0.0-next.533
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/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.530
+ * v1.0.0-next.533
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

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

@@ -146,8 +146,8 @@ ul:focus{
   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);
@@ -156,7 +156,8 @@ ul:focus{
   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{
@@ -185,7 +186,8 @@ ul:focus{
 }
 
 .title {
-  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .icon{
@@ -201,7 +203,7 @@ ul:focus{
 }
 
 .icon--custom {
-  margin-top: -1px;
+  margin-block-start: -1px;
   color: var(--calcite-ui-text-3);
 }
 
@@ -212,7 +214,7 @@ ul:focus{
 .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-next.530
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";

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-next.530
+ * v1.0.0-next.533
  */
 export const CSS = {
   icon: "icon",

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

@@ -122,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);
 }
 
@@ -140,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-next.530
+ * v1.0.0-next.533
  */
 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-next.530
+ * v1.0.0-next.533
  */
 export const CSS = {
   list: "list",

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

@@ -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-next.530
+ * v1.0.0-next.533
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";

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-next.530
+ * v1.0.0-next.533
  */
 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-next.530
+ * v1.0.0-next.533
  */
 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-next.530
+ * v1.0.0-next.533
  */
 import { getAssetPath } from "@stencil/core";
 import { locales } from "../../utils/locale";

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

@@ -80,11 +80,11 @@
 
 :host {
   display: flex;
-  min-width: 0px;
+  min-inline-size: 0px;
   cursor: pointer;
   justify-content: center;
   color: var(--calcite-ui-text-3);
-  width: 14.2857142857%;
+  inline-size: 14.2857142857%;
 }
 
 :host([disabled]) {
@@ -127,49 +127,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-next.530
+ * v1.0.0-next.533
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";