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

package/dist/collection/components/notice/notice.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]) {
@@ -91,21 +91,18 @@
 }
 :host([scale=s]) .container slot[name=title]::slotted(*), 
 :host([scale=s]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
 :host([scale=s]) .container slot[name=message]::slotted(*), 
 :host([scale=s]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
 :host([scale=s]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
@@ -119,21 +116,18 @@
 }
 :host([scale=m]) .container slot[name=title]::slotted(*), 
 :host([scale=m]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
 :host([scale=m]) .container slot[name=message]::slotted(*), 
 :host([scale=m]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
 :host([scale=m]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
@@ -144,21 +138,18 @@
 }
 :host([scale=l]) .container slot[name=title]::slotted(*), 
 :host([scale=l]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
 }
 :host([scale=l]) .container slot[name=message]::slotted(*), 
 :host([scale=l]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
 :host([scale=l]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
@@ -176,25 +167,23 @@
 }
 
 :host {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   display: none;
-  max-width: 100%;
+  max-inline-size: 100%;
   align-items: center;
-  width: var(--calcite-notice-width);
+  inline-size: var(--calcite-notice-width);
 }
 
 .container {
   pointer-events: none;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-block: 0px;
   box-sizing: border-box;
   display: none;
-  width: 100%;
+  inline-size: 100%;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  max-height: 0;
+  max-block-size: 0;
   text-align: start;
   border-inline-start: 0px solid;
   box-shadow: 0 0 0 0 transparent;
@@ -212,10 +201,10 @@
   display: flex;
 }
 
-:host([active]) .container {
+:host([open]) .container {
   pointer-events: auto;
   display: flex;
-  max-height: 100%;
+  max-block-size: 100%;
   align-items: center;
   border-width: 2px;
   opacity: 1;
@@ -243,10 +232,10 @@
 .notice-content {
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   display: flex;
-  min-width: 0px;
+  min-inline-size: 0px;
   flex-direction: column;
   overflow-wrap: break-word;
   flex: 1 1 0;
@@ -257,7 +246,8 @@
   padding-inline-start: var(--calcite-notice-spacing-token-large);
 }
 .notice-content:only-of-type {
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
 }
 
 .notice-icon {
@@ -265,7 +255,8 @@
   align-items: center;
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
 }
 
@@ -281,7 +272,8 @@
   outline-offset: 2px;
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   -webkit-appearance: none;
 }

package/dist/collection/components/notice/notice.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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -27,8 +27,14 @@ export class Notice {
     //  Properties
     //
     //---------------------------------------------------------------------------
-    /** When true, the component is active. */
+    /**
+     * When true, the component is active.
+     *
+     * @deprecated Use open instead.
+     */
     this.active = false;
+    /** When true, the component is visible */
+    this.open = false;
     /** The color for the component's top border and icon. */
     this.color = "blue";
     /**
@@ -55,10 +61,16 @@ export class Notice {
     //
     //--------------------------------------------------------------------------
     this.close = () => {
-      this.active = false;
+      this.open = false;
       this.calciteNoticeClose.emit();
     };
   }
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    this.active = value;
+  }
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
@@ -69,6 +81,11 @@ export class Notice {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    const isOpen = this.active || this.open;
+    if (isOpen) {
+      this.activeHandler(isOpen);
+      this.openHandler(isOpen);
+    }
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
@@ -130,13 +147,34 @@ export class Notice {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use open instead."
+          }],
         "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the component is visible"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "color": {
       "type": "string",
       "mutable": false,
@@ -295,8 +333,8 @@ export class Notice {
         "text": "Fired when the component is closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -310,8 +348,8 @@ export class Notice {
         "text": "Fired when the component is opened."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -335,6 +373,12 @@ export class Notice {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "active",
+      "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "openHandler"
+    }, {
       "propName": "icon",
       "methodName": "updateRequestedIcon"
     }, {

package/dist/collection/components/notice/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.86
+ * v1.0.0-beta.87
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.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]) {

package/dist/collection/components/option/option.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.86
+ * v1.0.0-beta.87
  */
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -163,8 +163,8 @@ export class Option {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/option-group/option-group.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]) {

package/dist/collection/components/option-group/option-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-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**
@@ -91,8 +91,8 @@ export class OptionGroup {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/pagination/pagination.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]) {
@@ -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,7 @@
   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: 2px solid transparent;
 }
 .previous:hover, 
 .next:hover, 
@@ -165,12 +161,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-beta.86
+ * v1.0.0-beta.87
  */
 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-beta.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   page: "page",

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

@@ -82,13 +82,21 @@
 }
 
 :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
 *
@@ -101,7 +109,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);
@@ -111,13 +119,6 @@
   --calcite-panel-max-width: unset;
 }
 
-: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 */
@@ -169,17 +170,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);
-  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-block-size: var(--calcite-panel-max-height);
+  inline-size: var(--calcite-panel-width);
+  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 +224,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 +240,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 +251,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 +287,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 +302,7 @@ h5.heading {
 }
 
 .content-height {
-  height: 100%;
+  block-size: 100%;
 }
 
 .content-container {
@@ -319,31 +316,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;
 }