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

package/dist/collection/components/block-section/block-section.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, Prop, h, Host } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/block-section/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/block-section/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 = {
   content: "content",

package/dist/collection/components/button/button.css

@@ -80,7 +80,7 @@
 
 :host {
   display: inline-block;
-  width: auto;
+  inline-size: auto;
   vertical-align: middle;
 }
 
@@ -106,12 +106,13 @@
   --calcite-button-content-margin: 0.5rem;
   --calcite-button-padding-x: 7px;
   --calcite-button-padding-y: 3px;
-  padding: var(--calcite-button-padding-y) var(--calcite-button-padding-x) var(--calcite-button-padding-y) var(--calcite-button-padding-x);
+  padding-block: var(--calcite-button-padding-y);
+  padding-inline: var(--calcite-button-padding-x);
   position: relative;
   box-sizing: border-box;
   display: flex;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
@@ -160,15 +161,15 @@
 }
 
 :host([width=auto]) {
-  width: auto;
+  inline-size: auto;
 }
 
 :host([width=half]) {
-  width: 50%;
+  inline-size: 50%;
 }
 
 :host([width=full]) {
-  width: 100%;
+  inline-size: 100%;
 }
 
 :host([alignment=center]:not([width=auto])) a, 
@@ -244,24 +245,24 @@
 
 @keyframes loader-in {
   0% {
-    width: 0;
+    inline-size: 0;
     opacity: 0;
     transform: scale(0.5);
   }
   100% {
-    width: 1em;
+    inline-size: 1em;
     opacity: 1;
     transform: scale(1);
   }
 }
 @keyframes loader-out {
   0% {
-    width: 1em;
+    inline-size: 1em;
     opacity: 1;
     transform: scale(1);
   }
   100% {
-    width: 0;
+    inline-size: 0;
     opacity: 0;
     transform: scale(0.5);
   }
@@ -271,7 +272,7 @@
 }
 .calcite-button--loader calcite-loader {
   margin: 0px;
-  transition: width var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out;
+  transition: inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out;
 }
 .calcite-button--loader calcite-loader.loading-in {
   animation-name: loader-in;
@@ -673,13 +674,13 @@
 }
 
 :host([appearance=transparent][color=neutral].cancel-editing-button) button {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
+  border-block-start-width: 1px;
+  border-block-end-width: 1px;
   color: var(--calcite-ui-text-3);
-  border-top-color: var(--calcite-ui-border-input);
-  border-bottom-color: var(--calcite-ui-border-input);
-  border-bottom-style: solid;
-  border-top-style: solid;
+  border-block-start-color: var(--calcite-ui-border-input);
+  border-block-end-color: var(--calcite-ui-border-input);
+  border-block-end-style: solid;
+  border-block-start-style: solid;
 }
 :host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted) {
   --calcite-button-padding-y: 0;
@@ -756,10 +757,10 @@
 :host([scale=s]) a:not(.content--slotted) {
   --calcite-button-padding-x: 0.125rem;
   --calcite-button-padding-y: 3px;
-  width: 1.5rem;
+  inline-size: 1.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  min-height: 1.5rem;
+  min-block-size: 1.5rem;
 }
 
 :host([scale=s][appearance=transparent]) button:not(.content--slotted),
@@ -771,10 +772,10 @@
 :host([scale=m]) a:not(.content--slotted) {
   --calcite-button-padding-x: 0.125rem;
   --calcite-button-padding-y: 7px;
-  width: 2rem;
+  inline-size: 2rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  min-height: 2rem;
+  min-block-size: 2rem;
 }
 
 :host([scale=m][appearance=transparent]) button:not(.content--slotted),
@@ -786,10 +787,10 @@
 :host([scale=l]) a:not(.content--slotted) {
   --calcite-button-padding-x: 0.125rem;
   --calcite-button-padding-y: 9px;
-  width: 2.75rem;
+  inline-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  min-height: 2.75rem;
+  min-block-size: 2.75rem;
 }
 
 :host([scale=l][appearance=transparent]) button:not(.content--slotted),
@@ -800,7 +801,7 @@
 :host([scale=s][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=s][icon-start][icon-end]) a:not(.content--slotted) {
   --calcite-button-padding-x: 23px;
-  height: 1.5rem;
+  block-size: 1.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
@@ -813,7 +814,7 @@
 :host([scale=m][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=m][icon-start][icon-end]) a:not(.content--slotted) {
   --calcite-button-padding-x: 2rem;
-  height: 2rem;
+  block-size: 2rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
@@ -826,7 +827,7 @@
 :host([scale=l][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=l][icon-start][icon-end]) a:not(.content--slotted) {
   --calcite-button-padding-x: 43px;
-  height: 2.75rem;
+  block-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }

package/dist/collection/components/button/button.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 "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";

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

package/dist/collection/components/card/card.css

@@ -80,12 +80,12 @@
 
 :host {
   display: block;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 :host .calcite-card-container {
   position: relative;
   display: flex;
-  height: 100%;
+  block-size: 100%;
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
@@ -129,10 +129,7 @@
 
 :host([loading]) .calcite-card-loader-container {
   position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   align-items: center;
 }
@@ -140,10 +137,8 @@
 .header, 
 .footer {
   display: flex;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.25rem;
+  padding-inline: 0.75rem;
+  padding-block: 0.75rem 0.25rem;
 }
 
 .header {
@@ -151,14 +146,12 @@
 }
 
 .footer {
-  margin-top: auto;
+  margin-block-start: auto;
   flex-direction: row;
   align-content: space-between;
   justify-content: space-between;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.75rem;
+  padding-inline: 0.75rem;
+  padding-block: 0.25rem 0.75rem;
 }
 
 .card-content {
@@ -190,7 +183,7 @@ slot[name=title]::slotted(*),
 slot[name=subtitle]::slotted(*), 
 *::slotted([slot=subtitle]) {
   margin: 0px;
-  margin-top: 0.5rem;
+  margin-block-start: 0.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-normal);
@@ -199,8 +192,8 @@ slot[name=subtitle]::slotted(*),
 
 slot[name=thumbnail]::slotted(img), 
 img::slotted([slot=thumbnail]) {
-  min-width: 100%;
-  max-width: 100%;
+  min-inline-size: 100%;
+  max-inline-size: 100%;
 }
 
 slot[name=footer-leading]::slotted(*), 
@@ -222,7 +215,7 @@ slot[name=footer-trailing]::slotted(*),
   position: absolute;
   margin: 0px;
   padding: 0px;
-  top: 0.5rem;
+  inset-block-start: 0.5rem;
   inset-inline-end: 0.5rem;
 }
 
@@ -234,13 +227,19 @@ slot[name=footer-trailing]::slotted(*),
   flex-direction: row;
 }
 .calcite-card-container.inline > .container {
-  width: 60%;
+  inline-size: 60%;
 }
 .calcite-card-container.inline > .thumbnail-wrapper {
-  width: 40%;
+  inline-size: 40%;
   align-items: flex-start;
 }
 .calcite-card-container.inline slot[name=thumbnail]::slotted(img), 
 .calcite-card-container.inline img::slotted([slot=thumbnail]) {
-  width: 100%;
+  inline-size: 100%;
+}
+
+slot[name=footer-leading]::slotted(*), 
+slot[name=footer-trailing]::slotted(*) {
+  display: flex;
+  gap: 0.25rem;
 }

package/dist/collection/components/card/card.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, Prop } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/card/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/checkbox/checkbox.css

@@ -107,8 +107,8 @@
 }
 :host .check-svg,
 :host .toggle {
-  width: var(--calcite-checkbox-size);
-  height: var(--calcite-checkbox-size);
+  inline-size: var(--calcite-checkbox-size);
+  block-size: var(--calcite-checkbox-size);
 }
 :host .check-svg {
   pointer-events: none;
@@ -157,15 +157,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/checkbox/checkbox.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, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/chip/chip.css

@@ -79,37 +79,37 @@
 }
 
 :host([scale=s]) {
-  height: 1.5rem;
+  block-size: 1.5rem;
   font-size: var(--calcite-font-size--2);
   --calcite-chip-spacing-unit-l: 0.5rem;
   --calcite-chip-spacing-unit-s: 0.25rem;
 }
 :host([scale=s]) .image-container {
-  height: 1.25rem;
-  width: 1.25rem;
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
 }
 
 :host([scale=m]) {
-  height: 2rem;
+  block-size: 2rem;
   font-size: var(--calcite-font-size--1);
   --calcite-chip-spacing-unit-l: 0.75rem;
   --calcite-chip-spacing-unit-s: 6px;
 }
 :host([scale=m]) .image-container {
-  height: 1.5rem;
-  width: 1.5rem;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
   padding-inline-start: 0.25rem;
 }
 
 :host([scale=l]) {
-  height: 2.75rem;
+  block-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   --calcite-chip-spacing-unit-l: 1rem;
   --calcite-chip-spacing-unit-s: 0.5rem;
 }
 :host([scale=l]) .image-container {
-  height: 2rem;
-  width: 2rem;
+  block-size: 2rem;
+  inline-size: 2rem;
   padding-inline-start: 0.25rem;
 }
 
@@ -128,8 +128,8 @@
 
 .container {
   display: inline-flex;
-  height: 100%;
-  max-width: 100%;
+  block-size: 100%;
+  max-inline-size: 100%;
   align-items: center;
 }
 
@@ -140,7 +140,8 @@
 }
 
 :host span {
-  padding: 0 var(--calcite-chip-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-chip-spacing-unit-l);
 }
 
 :host([dismissible]) span,
@@ -150,14 +151,15 @@
 
 :host([icon]:not([dismissible])) span,
 :host([icon]:not([closable])) span {
-  padding: 0 var(--calcite-chip-spacing-unit-l);
+  padding-block: 0;
+  padding-inline: var(--calcite-chip-spacing-unit-l);
 }
 
 :host button {
   margin: 0px;
   display: inline-flex;
-  max-height: 100%;
-  min-height: 100%;
+  max-block-size: 100%;
+  min-block-size: 100%;
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -171,7 +173,8 @@
   border-start-end-radius: 50px;
   border-end-end-radius: 50px;
   border-end-start-radius: 0;
-  padding: 0 var(--calcite-chip-spacing-unit-s);
+  padding-block: 0;
+  padding-inline: var(--calcite-chip-spacing-unit-s);
   color: inherit;
   --calcite-chip-transparent-hover: var(--calcite-button-transparent-hover);
   --calcite-chip-transparent-press: var(--calcite-button-transparent-press);
@@ -196,16 +199,15 @@
 
 :host slot[name=image]::slotted(*) {
   display: flex;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   overflow: hidden;
   border-radius: 50%;
 }
 
 .chip-icon {
   position: relative;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-block: 0px;
   display: inline-flex;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/dist/collection/components/chip/chip.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, Method } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";

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

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

@@ -99,7 +99,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 +108,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 +128,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 +157,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 +191,7 @@
 }
 
 .color-field-and-slider {
-  margin-bottom: -16px;
+  margin-block-end: -16px;
   touch-action: none;
 }
 .color-field-and-slider--interactive {
@@ -204,10 +205,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 +221,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 +236,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-next.530
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";

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