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

package/dist/collection/components/pagination/pagination.css

@@ -89,42 +89,39 @@
   --calcite-pagination-spacing: 0.25rem 0.5rem;
 }
 :host([scale=s]) .previous,  :host([scale=s]) .next,  :host([scale=s]) .page {
-  height: 1.5rem;
+  block-size: 1.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 :host([scale=s]) .previous, 
 :host([scale=s]) .next {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
 
 :host([scale=m]) {
   --calcite-pagination-spacing: 0.5rem 0.75rem;
 }
 :host([scale=m]) .previous,  :host([scale=m]) .next,  :host([scale=m]) .page {
-  height: 2rem;
+  block-size: 2rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=m]) .previous, 
 :host([scale=m]) .next {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline: 0.5rem;
 }
 
 :host([scale=l]) {
   --calcite-pagination-spacing: 0.75rem 1rem;
 }
 :host([scale=l]) .previous,  :host([scale=l]) .next,  :host([scale=l]) .page {
-  height: 2.75rem;
+  block-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 :host([scale=l]) .previous, 
 :host([scale=l]) .next {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-inline: 1rem;
 }
 
 :host {
@@ -154,8 +151,8 @@
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   color: var(--calcite-ui-text-3);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
+  border-block-start: 2px solid transparent;
+  border-block-end: 2px solid transparent;
 }
 .previous:hover, 
 .next:hover, 
@@ -165,12 +162,12 @@
 }
 
 .page:hover {
-  border-bottom-color: var(--calcite-ui-border-2);
+  border-block-end-color: var(--calcite-ui-border-2);
 }
 .page.is-selected {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
-  border-bottom-color: var(--calcite-ui-brand);
+  border-block-end-color: var(--calcite-ui-brand);
 }
 
 .previous:hover, 

package/dist/collection/components/pagination/pagination.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, Prop, Method, Fragment, State } from "@stencil/core";
 import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";

package/dist/collection/components/pagination/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 = {
   page: "page",

package/dist/collection/components/panel/panel.css

@@ -101,7 +101,7 @@
 :host {
   position: relative;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex: 1 1 auto;
   overflow: hidden;
   --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
@@ -169,17 +169,17 @@ h5.heading {
 .container {
   margin: 0px;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex: 1 1 auto;
   flex-direction: column;
   align-items: stretch;
   background-color: var(--calcite-ui-background);
   padding: 0px;
-  max-height: var(--calcite-panel-max-height);
+  max-block-size: var(--calcite-panel-max-height);
   width: var(--calcite-panel-width);
-  max-width: var(--calcite-panel-max-width);
-  min-width: var(--calcite-panel-min-width);
-  transition: max-height var(--calcite-animation-timing), width var(--calcite-animation-timing);
+  max-inline-size: var(--calcite-panel-max-width);
+  min-inline-size: var(--calcite-panel-min-width);
+  transition: max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing);
 }
 
 :host([height-scale=s]) {
@@ -223,14 +223,14 @@ h5.heading {
 }
 
 .header {
-  border-bottom: 1px solid;
+  border-block-end: 1px solid;
   position: sticky;
-  top: 0px;
-  width: 100%;
+  inset-block-start: 0px;
+  inline-size: 100%;
   align-items: stretch;
   justify-content: flex-start;
   background-color: var(--calcite-ui-foreground-1);
-  border-bottom-color: var(--calcite-ui-border-3);
+  border-block-end-color: var(--calcite-ui-border-3);
   flex: 0 0 auto;
   z-index: 2;
 }
@@ -239,10 +239,8 @@ h5.heading {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.875rem;
-  padding-bottom: 0.875rem;
+  padding-inline: 0.75rem;
+  padding-block: 0.875rem;
   margin-inline-end: auto;
 }
 .header-content .heading, 
@@ -252,16 +250,14 @@ h5.heading {
   padding: 0px;
 }
 .header-content .heading {
-  margin-left: 0px;
-  margin-right: 0px;
-  margin-top: 0px;
-  margin-bottom: 0.25rem;
+  margin-inline: 0px;
+  margin-block: 0px 0.25rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   font-weight: var(--calcite-font-weight-medium);
 }
 .header-content .heading:only-child {
-  margin-bottom: 0px;
+  margin-block-end: 0px;
 }
 .header-content .description {
   font-size: var(--calcite-font-size--1);
@@ -290,13 +286,13 @@ h5.heading {
 
 .menu-button {
   position: relative;
-  height: 100%;
+  block-size: 100%;
   flex: 0 1 auto;
   align-self: stretch;
 }
 
 .menu {
-  min-width: 10rem;
+  min-inline-size: 10rem;
   flex-flow: column nowrap;
 }
 
@@ -305,7 +301,7 @@ h5.heading {
 }
 
 .content-height {
-  height: 100%;
+  block-size: 100%;
 }
 
 .content-container {
@@ -319,31 +315,28 @@ h5.heading {
 }
 
 .footer {
-  border-top: 1px solid;
+  border-block-start: 1px solid;
   position: sticky;
-  bottom: 0px;
+  inset-block-end: 0px;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: space-evenly;
   background-color: var(--calcite-ui-foreground-1);
-  border-top-color: var(--calcite-ui-border-3);
+  border-block-start-color: var(--calcite-ui-border-3);
   flex: 0 0 auto;
-  min-height: 3rem;
+  min-block-size: 3rem;
   padding: 0.5rem;
 }
 
 .fab-container {
   position: sticky;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-left: auto;
-  margin-right: auto;
+  inset-block-end: 0px;
+  inset-inline: 0px;
+  margin-block: 0px;
+  margin-inline: auto;
   display: block;
   padding: 0.5rem;
-  width: -moz-fit-content;
-  width: fit-content;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
   z-index: 1;
 }

package/dist/collection/components/panel/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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";

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

package/dist/collection/components/pick-list/pick-list.css

@@ -109,7 +109,7 @@
 }
 
 :host([filter-enabled]) header {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   display: flex;
   align-items: stretch;
   justify-content: flex-end;
@@ -120,14 +120,14 @@
 }
 :host([filter-enabled]) header.sticky-pos {
   position: sticky;
-  top: 0px;
+  inset-block-start: 0px;
   z-index: 1;
 }
 
 calcite-filter {
-  margin-bottom: 0px;
+  margin-block-end: 0px;
 }
 
 :host([loading][disabled]) {
-  min-height: 2rem;
+  min-block-size: 2rem;
 }

package/dist/collection/components/pick-list/pick-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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, Listen, Method, Prop, State, h } from "@stencil/core";
 import { ICON_TYPES } from "./resources";

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

package/dist/collection/components/pick-list/shared-list-logic.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 { debounce } from "lodash-es";
 import { focusElement, getSlotted } from "../../utils/dom";

package/dist/collection/components/pick-list/shared-list-render.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 { h, Host } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/pick-list-group/pick-list-group.css

@@ -79,7 +79,7 @@
 }
 
 :host {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   box-sizing: border-box;
   display: block;
   background-color: transparent;
@@ -91,7 +91,7 @@
 }
 
 :host(:last-child) {
-  margin-bottom: 0px;
+  margin-block-end: 0px;
 }
 
 /* Shared styles for header elements */
@@ -137,10 +137,8 @@ h5.heading {
 }
 
 h3.heading {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-block: 0.5rem;
+  margin-inline: 1rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
   color: var(--calcite-ui-text-3);

package/dist/collection/components/pick-list-group/pick-list-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.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

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

package/dist/collection/components/pick-list-item/pick-list-item.css

@@ -81,7 +81,7 @@
 
 :host{
   margin: 0px;
-  margin-bottom: 1px;
+  margin-block-end: 1px;
   box-sizing: border-box;
   display: flex;
   align-items: stretch;
@@ -125,8 +125,7 @@
 }
 
 .icon{
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-block: 0px;
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -141,7 +140,7 @@
 
 .icon-dot{
   display: flex;
-  width: 1.5rem;
+  inline-size: 1.5rem;
   align-items: center;
   padding: 0.5rem;
 }
@@ -166,10 +165,8 @@
   flex-direction: column;
   flex-wrap: nowrap;
   overflow: hidden;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
   word-wrap: break-word;
@@ -182,7 +179,7 @@
 }
 
 .description{
-  margin-top: 0.125rem;
+  margin-block-start: 0.125rem;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }

package/dist/collection/components/pick-list-item/pick-list-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.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";

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

package/dist/collection/components/popover/PopoverManager.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 default class PopoverManager {
   constructor() {

package/dist/collection/components/popover/popover.css

@@ -131,8 +131,8 @@
 .arrow,
 .arrow::before {
   position: absolute;
-  width: 8px;
-  height: 8px;
+  inline-size: 8px;
+  block-size: 8px;
   z-index: -1;
 }
 
@@ -146,19 +146,21 @@
 }
 
 :host([data-popper-placement^=top]) .arrow {
-  bottom: -4px;
+  inset-block-end: -4px;
 }
 
 :host([data-popper-placement^=bottom]) .arrow {
-  top: -4px;
+  inset-block-start: -4px;
 }
 
 :host([data-popper-placement^=left]) .arrow {
-  right: -4px;
+  direction: ltr;
+  inset-inline-end: -4px;
 }
 
 :host([data-popper-placement^=right]) .arrow {
-  left: -4px;
+  direction: ltr;
+  inset-inline-start: -4px;
 }
 
 :host {
@@ -187,10 +189,10 @@
   align-items: stretch;
   justify-content: flex-start;
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-foreground-1);
-  border-bottom-color: var(--calcite-ui-border-3);
+  border-block-end-color: var(--calcite-ui-border-3);
 }
 
 .heading {
@@ -199,10 +201,8 @@
   flex: 1 1 auto;
   align-self: center;
   white-space: normal;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-inline: 1rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-medium);
@@ -214,7 +214,7 @@
 .container {
   position: relative;
   display: flex;
-  height: 100%;
+  block-size: 100%;
   flex-direction: row;
   flex-wrap: nowrap;
   border-radius: 0.25rem;
@@ -227,8 +227,8 @@
 
 .content {
   display: flex;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   flex-direction: column;
   flex-wrap: nowrap;
   align-self: center;
@@ -246,5 +246,5 @@
 
 ::slotted(calcite-panel), 
 ::slotted(calcite-flow) {
-  height: 100%;
+  block-size: 100%;
 }

package/dist/collection/components/popover/popover.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, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";

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

package/dist/collection/components/popover-manager/popover-manager.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, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/progress/progress.css

@@ -81,19 +81,19 @@
 :host {
   position: relative;
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .track, 
 .bar {
   position: absolute;
-  top: 0px;
-  height: 2px;
+  inset-block-start: 0px;
+  block-size: 2px;
 }
 
 .track {
   z-index: 0;
-  width: 100%;
+  inline-size: 100%;
   overflow: hidden;
   background: var(--calcite-ui-border-3);
 }
@@ -113,7 +113,7 @@
   }
 }
 .indeterminate {
-  width: 20%;
+  inline-size: 20%;
   animation: looping-progress-bar-ani 2200ms linear infinite;
 }
 
@@ -122,10 +122,8 @@
 }
 
 .text {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 1rem;
-  padding-bottom: 0px;
+  padding-inline: 0px;
+  padding-block: 1rem 0px;
   text-align: center;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -137,7 +135,7 @@
     transform: translate3d(-100%, 0, 0);
   }
   50% {
-    width: 40%;
+    inline-size: 40%;
   }
   100% {
     transform: translate3d(600%, 0, 0);

package/dist/collection/components/progress/progress.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, h, Prop } from "@stencil/core";
 export class Progress {