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

package/dist/collection/components/shell-center-row/shell-center-row.css

@@ -82,7 +82,7 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -99,8 +99,8 @@
 .content {
   margin: 0px;
   display: flex;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   overflow: hidden;
   flex: 1 0 0;
 }
@@ -110,10 +110,8 @@
 }
 
 :host([detached]) {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
+  margin-inline: 0.5rem;
+  margin-block: 0.5rem 1.5rem;
 }
 
 @keyframes in-up {
@@ -145,24 +143,24 @@
 }
 
 :host([height-scale=s]) {
-  height: 33.333333%;
+  block-size: 33.333333%;
 }
 
 :host([height-scale=m]) {
-  height: 70%;
+  block-size: 70%;
 }
 
 :host([height-scale=l]) {
-  height: 100%;
+  block-size: 100%;
 }
 
 :host([height-scale=l][detached]) {
-  height: calc(100% - 2rem);
+  block-size: calc(100% - 2rem);
 }
 
 ::slotted(calcite-panel) {
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 ::slotted(calcite-action-bar),

package/dist/collection/components/shell-center-row/shell-center-row.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, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-panel/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 = {
   container: "container",

package/dist/collection/components/shell-panel/shell-panel.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]) {
@@ -109,12 +109,11 @@
 .separator {
   pointer-events: auto;
   position: absolute;
-  bottom: 0px;
-  top: 0px;
+  inset-block: 0px;
   z-index: 10;
   display: flex;
-  height: 100%;
-  width: 0.125rem;
+  block-size: 100%;
+  inline-size: 0.125rem;
   background-color: transparent;
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
@@ -140,11 +139,11 @@
 
 ::slotted(calcite-panel), 
 ::slotted(calcite-flow) {
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   flex: 1 1 auto;
-  max-height: unset;
-  max-width: unset;
+  max-block-size: unset;
+  max-inline-size: unset;
 }
 
 ::slotted(.calcite-match-height) {
@@ -162,10 +161,10 @@
   align-self: stretch;
   background-color: var(--calcite-ui-background);
   padding: 0px;
-  width: var(--calcite-shell-panel-width);
-  max-width: var(--calcite-shell-panel-max-width);
-  min-width: var(--calcite-shell-panel-min-width);
-  transition: max-height var(--calcite-animation-timing), max-width var(--calcite-animation-timing);
+  inline-size: var(--calcite-shell-panel-width);
+  max-inline-size: var(--calcite-shell-panel-max-width);
+  min-inline-size: var(--calcite-shell-panel-min-width);
+  transition: max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing);
 }
 
 .content__header {
@@ -214,21 +213,19 @@
 }
 
 .content--detached {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  margin-top: 0.5rem;
-  margin-bottom: auto;
-  height: auto;
+  margin-inline: 0.5rem;
+  margin-block: 0.5rem auto;
+  block-size: auto;
   overflow: hidden;
   border-radius: 0.25rem;
   --tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
   --tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  max-height: var(--calcite-shell-panel-detached-max-height);
+  max-block-size: var(--calcite-shell-panel-detached-max-height);
 }
 .content--detached ::slotted(calcite-panel),
 .content--detached ::slotted(calcite-flow) {
-  max-height: unset;
+  max-block-size: unset;
 }
 
 :host([position=start]) .content--detached ::slotted(calcite-panel), 

package/dist/collection/components/shell-panel/shell-panel.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, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -393,8 +393,8 @@ export class ShellPanel {
         "text": "Emitted when collapse has been toggled."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/slider/slider.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 {
   --calcite-slider-handle-size: 10px;
   --calcite-slider-handle-extension-height: 6.5px;
@@ -125,20 +133,15 @@
   display: block;
   overflow-wrap: normal;
   word-break: normal;
-  padding: calc(var(--calcite-slider-handle-size) * 0.5);
-  margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
+  padding-inline: calc(var(--calcite-slider-handle-size) * 0.5);
+  padding-block: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin-block: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin-inline: 0;
   --calcite-slider-full-handle-height: calc(
     var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
   );
 }
 
-:host([disabled]){
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) .track__range,
 :host([disabled]) .tick--active {
   background-color: var(--calcite-ui-text-3);
@@ -167,7 +170,7 @@
 
 .thumb-container{
   position: relative;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 .thumb {
@@ -188,14 +191,13 @@
 }
 .thumb .handle__label.static,  .thumb .handle__label.transformed{
   position: absolute;
-  top: 0px;
-  bottom: 0px;
+  inset-block: 0px;
   opacity: 0;
 }
 .thumb .handle__label.hyphen::after {
   content: "—";
   display: inline-block;
-  width: 1em;
+  inline-size: 1em;
 }
 .thumb .handle__label.hyphen--wrap {
   display: flex;
@@ -205,14 +207,14 @@
   border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
   outline-color: transparent;
-  height: var(--calcite-slider-handle-size);
-  width: var(--calcite-slider-handle-size);
+  block-size: var(--calcite-slider-handle-size);
+  inline-size: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
   transition: border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;
 }
 .thumb .handle-extension{
-  width: 0.125rem;
-  height: var(--calcite-slider-handle-extension-height);
+  inline-size: 0.125rem;
+  block-size: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
 .thumb:hover .handle {
@@ -250,12 +252,12 @@
 
 :host([has-histogram][label-handles]) .handle__label,
 :host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label {
-  margin-top: 0.5em;
+  margin-block-start: 0.5em;
 }
 
 :host(:not([has-histogram]):not([precise])) .handle__label,
 :host([label-handles]:not([has-histogram])) .thumb--value .handle__label {
-  margin-bottom: 0.5em;
+  margin-block-end: 0.5em;
 }
 
 :host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
@@ -282,7 +284,7 @@
 
 .track{
   position: relative;
-  height: 0.125rem;
+  block-size: 0.125rem;
   border-radius: 0px;
   background-color: var(--calcite-ui-border-2);
   transition: all var(--calcite-internal-animation-timing-medium) ease-in;
@@ -290,8 +292,8 @@
 
 .track__range{
   position: absolute;
-  top: 0px;
-  height: 0.125rem;
+  inset-block-start: 0px;
+  block-size: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
 
@@ -300,10 +302,10 @@
 }
 .container--range .track__range:after{
   position: absolute;
-  width: 100%;
+  inline-size: 100%;
   content: "";
-  top: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
-  height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
+  inset-block-start: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
+  block-size: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
 @media (forced-colors: active) {
@@ -335,13 +337,13 @@
 }
 .tick{
   position: absolute;
-  height: 0.25rem;
-  width: 0.125rem;
+  block-size: 0.25rem;
+  inline-size: 0.125rem;
   border-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-border-input);
   border-color: var(--calcite-ui-foreground-1);
-  top: -2px;
+  inset-block-start: -2px;
   pointer-events: none;
   margin-inline-start: calc(-1 * 0.125rem);
 }
@@ -352,7 +354,7 @@
 
 .tick__label{
   pointer-events: none;
-  margin-top: 0.875rem;
+  margin-block-start: 0.875rem;
   display: flex;
   justify-content: center;
 }
@@ -375,49 +377,46 @@
 
 .graph {
   color: var(--calcite-ui-foreground-3);
-  height: 48px;
+  block-size: 48px;
 }
 
 :host([label-ticks][ticks]) .container {
-  padding-bottom: calc(0.875rem + var(--calcite-slider-container-font-size));
+  padding-block-end: calc(0.875rem + var(--calcite-slider-container-font-size));
 }
 
 :host([has-histogram]):host([precise][label-handles]) .container {
-  padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
+  padding-block-end: calc(var(--calcite-slider-full-handle-height) + 1em);
 }
 :host([has-histogram]):host([label-handles]:not([precise])) .container {
-  padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
+  padding-block-end: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
 }
 :host([has-histogram]):host([precise]:not([label-handles])) .container {
-  padding-bottom: var(--calcite-slider-full-handle-height);
+  padding-block-end: var(--calcite-slider-full-handle-height);
 }
 
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
-  padding-top: var(--calcite-slider-full-handle-height);
+  padding-block-start: var(--calcite-slider-full-handle-height);
 }
 :host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
-  padding-bottom: var(--calcite-slider-full-handle-height);
+  padding-block-end: var(--calcite-slider-full-handle-height);
 }
 :host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
-  padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
+  padding-block-start: calc(var(--calcite-slider-full-handle-height) + 4px);
 }
 :host(:not([has-histogram])):host([label-handles][precise]) .container {
-  padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
+  padding-block-start: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 :host(:not([has-histogram])):host([label-handles][precise]) .container--range {
-  padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
+  padding-block-end: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
 ::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/slider/slider.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, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -1247,8 +1247,8 @@ export class Slider {
         "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -1262,8 +1262,8 @@ export class Slider {
         "text": "Fires on when the thumb is released on slider\nIf you need to constantly listen to the drag event,\nplease use calciteSliderInput instead"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -1280,8 +1280,8 @@ export class Slider {
         "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/sortable-list/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 = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-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: flex;
-}
-
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -89,6 +85,11 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+
+:host {
+  display: flex;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */

package/dist/collection/components/sortable-list/sortable-list.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 Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";
@@ -291,8 +291,8 @@ export class SortableList {
         "text": "Emitted when the order of the list has changed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/split-button/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 = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.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-block;
 }
@@ -87,7 +95,7 @@
   align-items: stretch;
 }
 :host .split-button__container > calcite-dropdown > calcite-button {
-  height: 100%;
+  block-size: 100%;
   vertical-align: top;
 }
 
@@ -148,37 +156,35 @@
 }
 
 .width-auto {
-  width: auto;
+  inline-size: auto;
 }
 
 .width-half {
-  width: 50%;
+  inline-size: 50%;
 }
 
 .width-full {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .split-button__divider-container {
   display: flex;
-  width: 1px;
+  inline-size: 1px;
   align-items: stretch;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   background-color: var(--calcite-split-button-background);
 }
 
 .split-button__divider {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
+  margin-block: 0.25rem;
   display: inline-block;
-  width: 1px;
+  inline-size: 1px;
   background-color: var(--calcite-split-button-divider);
 }
 
 :host([appearance=outline]) .split-button__divider-container,
 :host([appearance=clear]) .split-button__divider-container {
-  border-top: 1px solid var(--calcite-split-button-divider);
-  border-bottom: 1px solid var(--calcite-split-button-divider);
+  border-block: 1px solid var(--calcite-split-button-divider);
 }
 :host([appearance=outline]):hover .split-button__divider-container,
 :host([appearance=clear]):hover .split-button__divider-container {
@@ -203,13 +209,6 @@
   background-color: var(--calcite-split-button-divider);
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) .split-button__divider-container {
   opacity: var(--calcite-ui-opacity-disabled);
 }