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

package/dist/collection/components/block/block.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, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -67,7 +67,11 @@ export class Block {
      * When true, the block's content will be displayed.
      */
     this.open = false;
-    /** When true, removes padding for the slotted content */
+    /**
+     * When true, removes padding for the slotted content
+     *
+     * @deprecated Use `--calcite-block-padding` CSS variable instead.
+     */
     this.disablePadding = false;
     this.guid = guid();
     // --------------------------------------------------------------------------
@@ -451,7 +455,10 @@ export class Block {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `--calcite-block-padding` CSS variable instead."
+          }],
         "text": "When true, removes padding for the slotted content"
       },
       "attribute": "disable-padding",
@@ -470,8 +477,8 @@ export class Block {
         "text": "Emitted when the header has been clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

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

package/dist/collection/components/block-section/block-section.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]) {
@@ -88,17 +88,17 @@
 
 :host([open]) {
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
-  border-bottom-color: var(--calcite-ui-border-3);
+  border-block-end-color: var(--calcite-ui-border-3);
 }
 
 :host(:last-child) {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
 }
 
 .toggle {
-  width: 100%;
+  inline-size: 100%;
   border-width: 0px;
   background-color: transparent;
   font-family: var(--calcite-sans-family);
@@ -108,19 +108,15 @@
 
 .toggle--switch, 
 .section-header {
-  margin-left: 0px;
-  margin-right: 0px;
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
+  margin-inline: 0px;
+  margin-block: 0.25rem;
   display: flex;
   cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
   align-items: center;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-inline: 0px;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   outline-color: transparent;
 }
@@ -139,10 +135,8 @@
 }
 
 .section-header__text {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-inline: 0.75rem;
+  margin-block: 0px;
   flex: 1 1 auto;
   text-align: initial;
   word-wrap: anywhere;

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-beta.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";
@@ -222,8 +222,8 @@ export class BlockSection {
         "text": "Emitted when the header has been clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

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

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

@@ -71,16 +71,24 @@
 * 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;
-  width: auto;
+  inline-size: auto;
   vertical-align: middle;
 }
 
@@ -106,12 +114,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;
@@ -137,8 +146,7 @@
 .content {
   display: flex;
   flex-basis: auto;
-  margin-inline-start: var(--calcite-button-content-margin);
-  margin-inline-end: var(--calcite-button-content-margin);
+  margin-inline: var(--calcite-button-content-margin);
 }
 
 .icon-start-empty .content {
@@ -160,15 +168,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, 
@@ -220,13 +228,6 @@
   line-height: inherit;
 }
 
-: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 */
@@ -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,12 @@
 }
 
 :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-style: solid;
 }
 :host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted) {
   --calcite-button-padding-y: 0;
@@ -756,10 +756,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 +771,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 +786,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 +800,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 +813,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 +826,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-beta.84
+ * v1.0.0-beta.87
  */
 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-beta.84
+ * v1.0.0-beta.87
  */
 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-beta.84
+ * v1.0.0-beta.87
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.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]) {
@@ -80,14 +80,15 @@
 
 :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;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-2);
@@ -128,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;
 }
@@ -139,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 {
@@ -150,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 {
@@ -189,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);
@@ -198,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(*), 
@@ -221,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;
 }
 
@@ -233,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-beta.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";
@@ -64,12 +64,12 @@ export class Card {
     this.cardSelectClick = () => {
       this.selectCard();
     };
-    this.cardSelectKeyDown = (e) => {
-      switch (e.key) {
+    this.cardSelectKeyDown = (event) => {
+      switch (event.key) {
         case " ":
         case "Enter":
           this.selectCard();
-          e.preventDefault();
+          event.preventDefault();
           break;
       }
     };
@@ -292,8 +292,8 @@ export class Card {
         "text": "Fired when a selectable card is selected"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

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

package/dist/collection/components/checkbox/checkbox.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
 *
@@ -107,8 +115,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;
@@ -143,13 +151,6 @@
   outline-offset: 2px;
 }
 
-: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 */
@@ -157,15 +158,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-beta.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -340,8 +340,8 @@ export class Checkbox {
         "text": "Emitted when the checkbox is blurred"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       }
     }, {
@@ -355,8 +355,8 @@ export class Checkbox {
         "text": "Emitted when the checkbox checked status changes"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -373,8 +373,8 @@ export class Checkbox {
         "text": "Emitted when the checkbox is focused"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       }
     }]; }