@esri/calcite-components 1.0.0-beta.85 → 1.0.0-beta.88

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;
 }

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-beta.85
+ * v1.0.0-beta.88
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -30,16 +30,24 @@ export class Panel {
     // --------------------------------------------------------------------------
     /**
      * When true, hides the component.
+     *
+     * @deprecated use closed instead
      */
     this.dismissed = false;
+    /** When true, panel will be hidden */
+    this.closed = false;
     /**
      *  When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
      * When true, a close button is added to the component.
+     *
+     * @deprecated use closable instead
      */
     this.dismissible = false;
+    /** When true, displays a close button in the trailing side of the header */
+    this.closable = false;
     /**
      * When true, displays a back button in the header.
      */
@@ -70,19 +78,19 @@ export class Panel {
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
-    this.setDismissRef = (node) => {
-      this.dismissButtonEl = node;
+    this.setCloseRef = (node) => {
+      this.closeButtonEl = node;
     };
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
     this.panelKeyDownHandler = (event) => {
       if (event.key === "Escape") {
-        this.dismiss();
+        this.close();
       }
     };
-    this.dismiss = () => {
-      this.dismissed = true;
+    this.close = () => {
+      this.closed = true;
       this.calcitePanelDismiss.emit();
     };
     this.panelScrollHandler = () => {
@@ -101,9 +109,19 @@ export class Panel {
       }
     };
   }
-  dismissedHandler() {
+  dismissedHandler(value) {
+    this.closed = value;
     this.calcitePanelDismissedChange.emit();
   }
+  closedHandler(value) {
+    this.dismissed = value;
+  }
+  dismissibleHandler(value) {
+    this.closable = value;
+  }
+  closableHandler(value) {
+    this.dismissible = value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -119,6 +137,16 @@ export class Panel {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    const isClosed = this.dismissed || this.closed;
+    const isClosable = this.dismissible || this.closable;
+    if (isClosed) {
+      this.dismissedHandler(isClosed);
+      this.closedHandler(isClosed);
+    }
+    if (isClosable) {
+      this.dismissibleHandler(isClosable);
+      this.closableHandler(isClosable);
+    }
   }
   disconnectedCallback() {
     var _a;
@@ -138,7 +166,7 @@ export class Panel {
   async setFocus(focusId) {
     var _a, _b, _c;
     if (focusId === "dismiss-button") {
-      (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+      (_a = this.closeButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
       return;
     }
     if (focusId === "back-button") {
@@ -199,14 +227,14 @@ export class Panel {
       h("slot", { name: SLOTS.headerActionsStart }))) : null;
   }
   renderHeaderActionsEnd() {
-    const { dismiss, dismissible, el, intlClose } = this;
+    const { close, el, intlClose, closable } = this;
     const text = intlClose || TEXT.close;
-    const dismissibleNode = dismissible ? (h("calcite-action", { "aria-label": text, icon: ICONS.close, onClick: dismiss, ref: this.setDismissRef, text: text })) : null;
+    const closableNode = closable ? (h("calcite-action", { "aria-label": text, icon: ICONS.close, onClick: close, ref: this.setCloseRef, text: text })) : null;
     const slotNode = h("slot", { name: SLOTS.headerActionsEnd });
     const hasEndActions = getSlotted(el, SLOTS.headerActionsEnd);
-    return hasEndActions || dismissibleNode ? (h("div", { class: { [CSS.headerActionsEnd]: true, [CSS.headerActions]: true }, key: "header-actions-end" },
+    return hasEndActions || closableNode ? (h("div", { class: { [CSS.headerActionsEnd]: true, [CSS.headerActions]: true }, key: "header-actions-end" },
       slotNode,
-      dismissibleNode)) : null;
+      closableNode)) : null;
   }
   renderMenu() {
     const { el, intlOptions, menuOpen } = this;
@@ -258,8 +286,8 @@ export class Panel {
       h("slot", { name: SLOTS.fab })));
   }
   render() {
-    const { dismissed, dismissible, loading, panelKeyDownHandler } = this;
-    const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
+    const { loading, panelKeyDownHandler, closed, closable } = this;
+    const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: closed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: closable ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterNode()));
@@ -287,13 +315,34 @@ export class Panel {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use closed instead"
+          }],
         "text": "When true, hides the component."
       },
       "attribute": "dismissed",
       "reflect": true,
       "defaultValue": "false"
     },
+    "closed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, panel will be hidden"
+      },
+      "attribute": "closed",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "beforeBack": {
       "type": "unknown",
       "mutable": false,
@@ -333,7 +382,7 @@ export class Panel {
     },
     "dismissible": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -342,13 +391,34 @@ export class Panel {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use closable instead"
+          }],
         "text": "When true, a close button is added to the component."
       },
       "attribute": "dismissible",
       "reflect": true,
       "defaultValue": "false"
     },
+    "closable": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, displays a close button in the trailing side of the header"
+      },
+      "attribute": "closable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "headingLevel": {
       "type": "number",
       "mutable": false,
@@ -586,8 +656,8 @@ export class Panel {
         "text": "Fires when the close button is clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -601,11 +671,11 @@ export class Panel {
             "name": "deprecated",
             "text": "use calcitePanelDismiss instead."
           }],
-        "text": "Fires when the close button is clicked."
+        "text": "Fires when there is a change to the `dismissed` property value ."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -619,8 +689,8 @@ export class Panel {
         "text": "Fires when the content is scrolled."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -634,8 +704,8 @@ export class Panel {
         "text": "Fires when the back button is clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -698,5 +768,14 @@ export class Panel {
   static get watchers() { return [{
       "propName": "dismissed",
       "methodName": "dismissedHandler"
+    }, {
+      "propName": "closed",
+      "methodName": "closedHandler"
+    }, {
+      "propName": "dismissible",
+      "methodName": "dismissibleHandler"
+    }, {
+      "propName": "closable",
+      "methodName": "closableHandler"
     }]; }
 }

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-beta.85
+ * v1.0.0-beta.88
  */
 export const CSS = {
   backButton: "back-button",

package/dist/collection/components/pick-list/pick-list.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);
+}
+
 :host {
   position: relative;
   box-sizing: border-box;
@@ -95,13 +103,6 @@
   box-sizing: border-box;
 }
 
-: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 */
@@ -109,7 +110,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 +121,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-beta.85
+ * v1.0.0-beta.88
  */
 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-beta.85
+ * v1.0.0-beta.88
  */
 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-beta.85
+ * v1.0.0-beta.88
  */
 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-beta.85
+ * v1.0.0-beta.88
  */
 import { h, Host } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/pick-list-group/pick-list-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]) {
@@ -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-beta.85
+ * v1.0.0-beta.88
  */
 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-beta.85
+ * v1.0.0-beta.88
  */
 export const CSS = {
   heading: "heading",