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

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

@@ -71,20 +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;
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
-  font-weight: var(--calcite-font-weight-normal);
-}
-
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -92,6 +85,14 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+
+:host {
+  display: inline-block;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
+  font-weight: var(--calcite-font-weight-normal);
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -99,7 +100,7 @@
 }
 
 :host([scale=s]) .container {
-  width: 160px;
+  inline-size: 160px;
 }
 :host([scale=s]) .saved-colors {
   grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
@@ -108,19 +109,19 @@
   flex-direction: column;
 }
 :host([scale=s]) .channel {
-  width: 100%;
-  margin-bottom: 4px;
+  inline-size: 100%;
+  margin-block-end: 4px;
 }
 :host([scale=s]) .channel:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 :host([scale=m]) .container {
-  width: 272px;
+  inline-size: 272px;
 }
 
 :host([scale=l]) .header {
-  padding-bottom: 0px;
+  padding-block-end: 0px;
 }
 
 :host([scale=l]) {
@@ -128,21 +129,22 @@
   line-height: 1rem;
 }
 :host([scale=l]) .container {
-  width: 464px;
+  inline-size: 464px;
 }
 :host([scale=l]) .color-field-and-slider {
-  margin-bottom: -20px;
+  margin-block-end: -20px;
 }
 :host([scale=l]) .section {
-  padding: 0 16px 16px;
+  padding-block: 0 16px;
+  padding-inline: 16px;
 }
 :host([scale=l]) .section:first-of-type {
-  padding-top: 16px;
+  padding-block-start: 16px;
 }
 :host([scale=l]) .saved-colors {
   grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
   grid-gap: 12px;
-  padding-top: 16px;
+  padding-block-start: 16px;
 }
 :host([scale=l]) .control-section {
   flex-wrap: nowrap;
@@ -156,8 +158,8 @@
   flex-shrink: 1;
   flex-direction: column;
   justify-content: space-around;
-  min-height: 98px;
-  width: 160px;
+  min-block-size: 98px;
+  inline-size: 160px;
 }
 :host([scale=l]) .color-mode-container {
   flex-shrink: 3;
@@ -190,7 +192,7 @@
 }
 
 .color-field-and-slider {
-  margin-bottom: -16px;
+  margin-block-end: -16px;
   touch-action: none;
 }
 .color-field-and-slider--interactive {
@@ -204,10 +206,11 @@
 }
 
 .section {
-  padding: 0 12px 12px;
+  padding-block: 0 12px;
+  padding-inline: 12px;
 }
 .section:first-of-type {
-  padding-top: 12px;
+  padding-block-start: 12px;
 }
 
 .color-hex-options,
@@ -219,13 +222,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: 0.25rem;
+  padding-block-end: 0.25rem;
   color: var(--calcite-ui-text-1);
 }
 
 .header--hex,
 .color-mode-container {
-  padding-top: 12px;
+  padding-block-start: 12px;
 }
 
 .channels {
@@ -234,15 +237,15 @@
 }
 
 .channel {
-  width: 31%;
+  inline-size: 31%;
 }
 
 .saved-colors {
-  padding-top: 12px;
+  padding-block-start: 12px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
   grid-gap: 8px;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .saved-colors-buttons {

package/dist/collection/components/color-picker/color-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, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
@@ -1523,8 +1523,8 @@ export class ColorPicker {
         "text": "Fires when the color value has changed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -1538,8 +1538,8 @@ export class ColorPicker {
         "text": "Fires as the color value changes.\n\nThis is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

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

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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.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]) {
@@ -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-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -324,8 +324,8 @@ export class ColorPickerHexInput {
         "text": "Emitted when the hex value changes."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

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-beta.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.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]) {
@@ -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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.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
 *
@@ -90,13 +98,6 @@
   display: block;
 }
 
-: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 */
@@ -130,7 +131,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 +142,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 +169,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 +184,7 @@
 }
 
 .input--single {
-  margin-bottom: 0px;
-  margin-top: 0px;
+  margin-block: 0px;
   padding: 0px;
 }
 
@@ -192,13 +194,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 +217,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;
 }
@@ -244,8 +245,8 @@
   flex: none;
 }
 
-.popper-container {
-  width: 100%;
+.floating-ui-container {
+  inline-size: 100%;
   display: block;
   position: absolute;
   z-index: 900;
@@ -254,49 +255,49 @@
   pointer-events: none;
 }
 
-.popper-container .calcite-popper-anim {
+.floating-ui-container .calcite-floating-ui-anim {
   position: relative;
   z-index: 1;
-  transition: var(--calcite-popper-transition);
+  transition: var(--calcite-floating-ui-transition);
   visibility: hidden;
   transition-property: transform, visibility, opacity;
   opacity: 0;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   border-radius: 0.25rem;
 }
-.popper-container[data-popper-placement^=bottom] .calcite-popper-anim {
+.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim {
   transform: translateY(-5px);
 }
-.popper-container[data-popper-placement^=top] .calcite-popper-anim {
+.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim {
   transform: translateY(5px);
 }
-.popper-container[data-popper-placement^=left] .calcite-popper-anim {
+.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim {
   transform: translateX(5px);
 }
-.popper-container[data-popper-placement^=right] .calcite-popper-anim {
+.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim {
   transform: translateX(-5px);
 }
-.popper-container[data-popper-placement] .calcite-popper-anim--active {
+.floating-ui-container[data-placement] .calcite-floating-ui-anim--active {
   opacity: 1;
   visibility: visible;
   transform: translate(0);
 }
 
-.popper-container--active {
+.floating-ui-container--active {
   pointer-events: initial;
   visibility: visible;
 }
 
 @media (forced-colors: active) {
   .wrapper,
-.popper-container--active {
+.floating-ui-container--active {
     border: 1px solid canvasText;
   }
 }
 .screen-readers-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -306,10 +307,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 +320,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 +339,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;