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

package/dist/collection/components/loader/loader.css

@@ -72,7 +72,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -90,21 +90,19 @@
 */
 :host{
   position: relative;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   display: none;
   align-items: center;
   justify-content: center;
-  padding-top: 4rem;
-  padding-bottom: 4rem;
   opacity: 1;
-  min-height: var(--calcite-loader-size);
+  min-block-size: var(--calcite-loader-size);
   font-size: var(--calcite-loader-font-size);
   stroke: var(--calcite-ui-brand);
   stroke-width: 3;
   fill: none;
   transform: scale(1, 1);
   animation: loader-color-shift 6s alternate-reverse infinite linear;
+  padding-block: var(--calcite-loader-padding, 4rem);
 }
 
 :host([scale=s]) {
@@ -126,8 +124,7 @@
 }
 
 :host([no-padding]){
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-block: 0px;
 }
 
 :host{
@@ -144,7 +141,7 @@
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   color: var(--calcite-ui-text-1);
-  margin-top: calc(var(--calcite-loader-size) + 1.5rem);
+  margin-block-start: calc(var(--calcite-loader-size) + 1.5rem);
 }
 
 .loader__percentage{
@@ -153,9 +150,9 @@
   text-align: center;
   color: var(--calcite-ui-text-1);
   font-size: var(--calcite-loader-font-size);
-  width: var(--calcite-loader-size);
-  left: 50%;
-  margin-left: calc(var(--calcite-loader-size) / 2 * -1);
+  inline-size: var(--calcite-loader-size);
+  inset-inline-start: 50%;
+  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);
   line-height: 0.25;
   transform: scale(1, 1);
 }
@@ -164,21 +161,21 @@
   position: absolute;
   overflow: visible;
   opacity: 1;
-  width: var(--calcite-loader-size);
-  height: var(--calcite-loader-size);
-  left: 50%;
-  margin-left: calc(var(--calcite-loader-size) / 2 * -1);
+  inline-size: var(--calcite-loader-size);
+  block-size: var(--calcite-loader-size);
+  inset-inline-start: 50%;
+  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);
   transform: scale(1, 1);
 }
 
 .loader__svg{
   position: absolute;
-  top: 0px;
-  left: 0px;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
   transform-origin: center;
   overflow: visible;
-  width: var(--calcite-loader-size);
-  height: var(--calcite-loader-size);
+  inline-size: var(--calcite-loader-size);
+  block-size: var(--calcite-loader-size);
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-name: loader-clockwise;
@@ -215,11 +212,10 @@
   animation: none;
   stroke: currentColor;
   stroke-width: 2;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  height: var(--calcite-loader-size-inline);
-  min-height: var(--calcite-loader-size-inline);
-  width: var(--calcite-loader-size-inline);
+  padding-block: 0px;
+  block-size: var(--calcite-loader-size-inline);
+  min-block-size: var(--calcite-loader-size-inline);
+  inline-size: var(--calcite-loader-size-inline);
   margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);
   vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);
 }
@@ -229,16 +225,16 @@
 }
 
 :host([inline]) .loader__svgs{
-  top: 0px;
-  left: 0px;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
   margin: 0px;
-  width: var(--calcite-loader-size-inline);
-  height: var(--calcite-loader-size-inline);
+  inline-size: var(--calcite-loader-size-inline);
+  block-size: var(--calcite-loader-size-inline);
 }
 
 :host([inline]) .loader__svg {
-  width: var(--calcite-loader-size-inline);
-  height: var(--calcite-loader-size-inline);
+  inline-size: var(--calcite-loader-size-inline);
+  block-size: var(--calcite-loader-size-inline);
 }
 
 :host([complete]){

package/dist/collection/components/loader/loader.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, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -22,7 +22,11 @@ export class Loader {
     this.value = 0;
     /** Text that displays under the component's indicator. */
     this.text = "";
-    /** Disables spacing around the component. */
+    /**
+     * Disables spacing around the component.
+     *
+     * @deprecated Use `--calcite-loader-padding` CSS variable instead.
+     */
     this.noPadding = false;
   }
   //--------------------------------------------------------------------------
@@ -234,7 +238,10 @@ export class Loader {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `--calcite-loader-padding` CSS variable instead."
+          }],
         "text": "Disables spacing around the component."
       },
       "attribute": "no-padding",

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

package/dist/collection/components/modal/modal.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]) {
@@ -83,18 +83,15 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-modal-content-text: The component content's font size.
-* @prop --calcite-modal-padding: The top/bottom padding around items within the component.
-* @prop --calcite-modal-padding-large: The left/right padding around items within the component.
-* @prop --calcite-modal-title-text: The component title's font size.
-* @prop --calcite-scrim-background: The component's semi-transparent background color.
+* @prop --calcite-modal-content-text: [Deprecated] The component content's font size.
+* @prop --calcite-modal-padding: [Deprecated] The padding around content area slot.
+* @prop --calcite-modal-padding-large: [Deprecated] The left/right padding around items within the component.
+* @prop --calcite-modal-title-text: [Deprecated] The component title's font size.
+* @prop --calcite-scrim-background: [Deprecated] The component's semi-transparent background color.
 */
 :host {
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -111,6 +108,10 @@
   --calcite-modal-padding-large: 1rem;
   --calcite-modal-title-text: var(--calcite-font-size-1);
   --calcite-modal-content-text: var(--calcite-font-size--1);
+  --calcite-modal-padding-internal: 0.75rem;
+  --calcite-modal-padding-large-internal: 1rem;
+  --calcite-modal-title-text-internal: var(--calcite-font-size-1);
+  --calcite-modal-content-text-internal: var(--calcite-font-size--1);
 }
 
 :host([scale=m]) {
@@ -118,6 +119,10 @@
   --calcite-modal-padding-large: 1.25rem;
   --calcite-modal-title-text: var(--calcite-font-size-2);
   --calcite-modal-content-text: var(--calcite-font-size-0);
+  --calcite-modal-padding-internal: 1rem;
+  --calcite-modal-padding-large-internal: 1.25rem;
+  --calcite-modal-title-text-internal: var(--calcite-font-size-2);
+  --calcite-modal-content-text-internal: var(--calcite-font-size-0);
 }
 
 :host([scale=l]) {
@@ -125,15 +130,16 @@
   --calcite-modal-padding-large: 1.5rem;
   --calcite-modal-title-text: var(--calcite-font-size-3);
   --calcite-modal-content-text: var(--calcite-font-size-1);
+  --calcite-modal-padding-internal: 1.25rem;
+  --calcite-modal-padding-large-internal: 1.5rem;
+  --calcite-modal-title-text-internal: var(--calcite-font-size-3);
+  --calcite-modal-content-text-internal: var(--calcite-font-size-1);
 }
 
 .scrim {
   --calcite-scrim-background: rgba(0, 0, 0, 0.75);
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   overflow-y: hidden;
 }
@@ -144,7 +150,7 @@
   margin: 1.5rem;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex-direction: column;
   overflow: hidden;
   border-radius: 0.25rem;
@@ -172,7 +178,7 @@
   visibility: visible;
   opacity: 1;
   transform: translate3d(0, 0, 0);
-  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   transition-delay: 0ms;
 }
 
@@ -181,12 +187,12 @@
  */
 .header {
   display: flex;
-  min-width: 0px;
-  max-width: 100%;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+  min-inline-size: 0px;
+  max-inline-size: 100%;
+  border-start-start-radius: 0.25rem;
+  border-start-end-radius: 0.25rem;
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   background-color: var(--calcite-ui-foreground-1);
@@ -206,7 +212,7 @@
   outline-color: transparent;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-start-end-radius: 0.25rem;
-  padding: var(--calcite-modal-padding);
+  padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
   flex: 0 0 auto;
 }
 .close calcite-icon {
@@ -225,10 +231,11 @@
 .title {
   order: 1;
   display: flex;
-  min-width: 0px;
+  min-inline-size: 0px;
   align-items: center;
   flex: 1 1 auto;
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding-block: var(--calcite-modal-padding, var(--calcite-model-padding-internal));
+  padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));
 }
 
 slot[name=header]::slotted(*), 
@@ -236,7 +243,7 @@ slot[name=header]::slotted(*),
   margin: 0px;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-1);
-  font-size: var(--calcite-modal-title-text);
+  font-size: var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal));
 }
 
 /**
@@ -246,26 +253,26 @@ slot[name=header]::slotted(*),
   position: relative;
   box-sizing: border-box;
   display: block;
-  height: 100%;
+  block-size: 100%;
   overflow: auto;
   background-color: var(--calcite-ui-foreground-1);
   padding: 0px;
-  max-height: calc(100vh - 12rem);
+  max-block-size: calc(100vh - 12rem);
   z-index: 1;
 }
 
 .content--spaced {
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding: var(--calcite-modal-padding);
 }
 
 .content--no-footer {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
 }
 
 slot[name=content]::slotted(*),
 *::slotted([slot=content]) {
-  font-size: var(--calcite-modal-content-text);
+  font-size: var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal));
 }
 
 :host([background-color=grey]) .content {
@@ -276,20 +283,21 @@ slot[name=content]::slotted(*),
  * Footer
  */
 .footer {
-  margin-top: auto;
+  margin-block-start: auto;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: space-between;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
   border-width: 0px;
-  border-top-width: 1px;
+  border-block-start-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   background-color: var(--calcite-ui-foreground-1);
   flex: 0 0 auto;
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
+  padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));
   z-index: 2;
 }
 
@@ -304,8 +312,7 @@ slot[name=content]::slotted(*),
 }
 
 .secondary {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+  margin-inline: 0.25rem;
   display: block;
 }
 
@@ -317,25 +324,25 @@ slot[name=primary] {
  * Sizes
  */
 :host([width=small]) .modal {
-  width: auto;
+  inline-size: auto;
 }
 
 :host([width=s]) .modal {
-  max-width: 32rem;
+  max-inline-size: 32rem;
 }
 
 @media screen and (max-width: 35rem) {
   :host([width=s]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=s]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=s][docked]) {
@@ -343,21 +350,21 @@ slot[name=primary] {
   }
 }
 :host([width=m]) .modal {
-  max-width: 48rem;
+  max-inline-size: 48rem;
 }
 
 @media screen and (max-width: 51rem) {
   :host([width=m]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=m]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=m][docked]) {
@@ -365,21 +372,21 @@ slot[name=primary] {
   }
 }
 :host([width=l]) .modal {
-  max-width: 94rem;
+  max-inline-size: 94rem;
 }
 
 @media screen and (max-width: 97rem) {
   :host([width=l]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=l]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=l][docked]) {
@@ -394,14 +401,14 @@ slot[name=primary] {
 }
 :host([fullscreen]) .modal {
   margin: 0px;
-  height: 100%;
-  max-height: 100%;
-  width: 100%;
-  max-width: 100%;
+  block-size: 100%;
+  max-block-size: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
   transform: translate3D(0, 20px, 0) scale(0.95);
 }
 :host([fullscreen]) .content {
-  max-height: 100%;
+  max-block-size: 100%;
   flex: 1 1 auto;
 }
 
@@ -422,10 +429,10 @@ slot[name=primary] {
  * Docked
  */
 :host([docked]) .modal {
-  height: auto;
+  block-size: auto;
 }
 :host([docked]) .content {
-  height: auto;
+  block-size: auto;
   flex: 1 1 auto;
 }
 @media screen and (max-width: 860px) {
@@ -451,14 +458,14 @@ slot[name=primary] {
 :host([color=red]) .modal, 
 :host([color=blue]) .modal {
   border-width: 0px;
-  border-top-width: 4px;
+  border-block-start-width: 4px;
   border-style: solid;
 }
 :host([color=red]) .header, 
 :host([color=blue]) .header {
   border-radius: 0.25rem;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-end-end-radius: 0px;
+  border-end-start-radius: 0px;
 }
 
 /**
@@ -472,7 +479,7 @@ slot[name=primary] {
 
   .footer {
     position: sticky;
-    bottom: 0px;
+    inset-block-end: 0px;
   }
 }
 /**
@@ -486,6 +493,6 @@ slot[name=primary] {
   .back, 
 .secondary {
     margin: 0px;
-    margin-bottom: 0.25rem;
+    margin-block-end: 0.25rem;
   }
 }