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

package/dist/collection/components/action/action.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
 *
@@ -102,13 +110,6 @@
   --calcite-action-indicator-color: var(--calcite-ui-brand);
 }
 
-: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 */
@@ -119,7 +120,7 @@
   position: relative;
   margin: 0px;
   display: flex;
-  width: auto;
+  inline-size: auto;
   cursor: pointer;
   align-items: center;
   justify-content: flex-start;
@@ -156,31 +157,32 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 1rem;
-  min-height: 1rem;
+  min-inline-size: 1rem;
+  min-block-size: 1rem;
 }
 .button .text-container {
   margin: 0px;
-  width: 0px;
+  inline-size: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 1rem;
+  line-height: 1.5rem;
   opacity: 0;
   transition-property: opacity;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-property: margin;
-  transition-property: width;
+  transition-property: inline-size;
 }
 .button .text-container--visible {
-  width: auto;
+  inline-size: auto;
   flex: 1 1 auto;
   opacity: 1;
 }
 
 :host([scale=s]) .button {
-  padding: 0.5rem;
+  padding-inline: 0.5rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   font-weight: var(--calcite-font-weight-normal);
@@ -190,7 +192,8 @@
 }
 
 :host([scale=m]) .button {
-  padding: 1rem;
+  padding-inline: 1rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   font-weight: var(--calcite-font-weight-normal);
@@ -225,8 +228,7 @@
 :host([scale=s][compact]) .button, 
 :host([scale=m][compact]) .button, 
 :host([scale=l][compact]) .button {
-  padding-left: 0px;
-  padding-right: 0px;
+  padding-inline: 0px;
 }
 
 .slot-container {
@@ -238,7 +240,7 @@
 }
 
 .button--text-visible {
-  width: 100%;
+  inline-size: 100%;
 }
 
 :host([active]) .button, 
@@ -315,8 +317,8 @@
   content: "";
   position: absolute;
   z-index: 10;
-  height: 0.5rem;
-  width: 0.5rem;
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
   border-radius: 9999px;
   border-width: 2px;
   background-color: var(--calcite-action-indicator-color);

package/dist/collection/components/action/action.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, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
@@ -411,8 +411,8 @@ export class Action {
         "text": "Emits when the component has been clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

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

package/dist/collection/components/action-bar/action-bar.css

@@ -82,7 +82,7 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -94,7 +94,8 @@
   display: inline-flex;
   flex-direction: column;
   align-self: stretch;
-  max-width: 15vw;
+  max-inline-size: 15vw;
+  background: transparent;
 }
 
 :host([overflow-actions-disabled]) {
@@ -102,22 +103,22 @@
 }
 
 :host([expanded]) {
-  max-width: 20vw;
+  max-inline-size: 20vw;
 }
 
 ::slotted(calcite-action-group) {
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
 }
 
 ::slotted(calcite-action-group:last-child) {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
 }
 
 .action-group--bottom {
   flex-grow: 1;
   justify-content: flex-end;
-  padding-bottom: 0px;
+  padding-block-end: 0px;
 }

package/dist/collection/components/action-bar/action-bar.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, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -336,8 +336,8 @@ export class ActionBar {
         "text": "Emits when the `expanded` property is toggled."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/action-bar/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 = {
   actionGroupBottom: "action-group--bottom"

package/dist/collection/components/action-bar/utils.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 { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";

package/dist/collection/components/action-group/action-group.css

@@ -82,7 +82,7 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -128,7 +128,7 @@
 }
 
 :host(:first-child) {
-  padding-top: 0px;
+  padding-block-start: 0px;
 }
 
 :host([layout=horizontal]) {

package/dist/collection/components/action-group/action-group.js

@@ -1,10 +1,10 @@
 /*!
  * 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, h, Prop, Watch, Element } from "@stencil/core";
-import { SLOTS, TEXT, ICONS } from "./resources";
+import { Component, Element, h, Prop, Watch } from "@stencil/core";
+import { ICONS, SLOTS, TEXT } from "./resources";
 import { Fragment } from "@stencil/core/internal";
 import { getSlotted } from "../../utils/dom";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";

package/dist/collection/components/action-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.84
+ * v1.0.0-beta.87
  */
 export const SLOTS = {
   menuActions: "menu-actions",

package/dist/collection/components/action-menu/action-menu.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]) {
@@ -100,7 +100,7 @@
 
 .default-trigger {
   position: relative;
-  height: 100%;
+  block-size: 100%;
   flex: 0 1 auto;
   align-self: stretch;
 }
@@ -108,7 +108,7 @@
 slot[name=trigger]::slotted(calcite-action), 
 calcite-action::slotted([slot=trigger]) {
   position: relative;
-  height: 100%;
+  block-size: 100%;
   flex: 0 1 auto;
   align-self: stretch;
 }

package/dist/collection/components/action-menu/action-menu.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, h, Element, Event, Listen, Prop, Watch, Method, State } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
@@ -38,7 +38,7 @@ export class ActionMenu {
     /**
      * Determines where the component will be positioned relative to the `referenceElement`.
      *
-     * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+     * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
      */
     this.placement = "auto";
     this.actionElements = [];
@@ -79,7 +79,6 @@ export class ActionMenu {
       }
       menuButtonEl.addEventListener("click", this.menuButtonClick);
       menuButtonEl.addEventListener("keydown", this.menuButtonKeyDown);
-      menuButtonEl.addEventListener("keyup", this.menuButtonKeyUp);
     };
     this.disconnectMenuButtonEl = () => {
       const { menuButtonEl } = this;
@@ -88,7 +87,6 @@ export class ActionMenu {
       }
       menuButtonEl.removeEventListener("click", this.menuButtonClick);
       menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
-      menuButtonEl.removeEventListener("keyup", this.menuButtonKeyUp);
     };
     this.setDefaultMenuButtonEl = (el) => {
       this.defaultMenuButtonEl = el;
@@ -141,7 +139,7 @@ export class ActionMenu {
       this.actionElements = actionElements;
       this.connectMenuButtonEl();
     };
-    this.menuButtonKeyUp = (event) => {
+    this.menuButtonKeyDown = (event) => {
       const { key } = event;
       const { actionElements } = this;
       if (!this.isValidKey(key, SUPPORTED_BUTTON_NAV_KEYS)) {
@@ -154,13 +152,6 @@ export class ActionMenu {
       this.toggleOpen(true);
       this.handleActionNavigation(key, actionElements);
     };
-    this.menuButtonKeyDown = (event) => {
-      const { key } = event;
-      if (!this.isValidKey(key, SUPPORTED_BUTTON_NAV_KEYS)) {
-        return;
-      }
-      event.preventDefault();
-    };
     this.menuActionsContainerKeyDown = (event) => {
       const { key } = event;
       const { actionElements, activeMenuItemIndex } = this;
@@ -174,24 +165,16 @@ export class ActionMenu {
         action ? action.click() : this.toggleOpen(false);
         return;
       }
-      if (this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
-        event.preventDefault();
-      }
-    };
-    this.menuActionsContainerKeyUp = (event) => {
-      const { key } = event;
-      const { actionElements } = this;
       if (key === "Escape") {
         this.toggleOpen(false);
         return;
       }
-      if (!this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
-        return;
-      }
-      event.preventDefault();
       if (!actionElements.length) {
         return;
       }
+      if (this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
+        event.preventDefault();
+      }
       this.handleActionNavigation(key, actionElements);
     };
     this.handleActionNavigation = (key, actions) => {
@@ -277,7 +260,7 @@ export class ActionMenu {
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
     return (h("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl },
-      h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, onKeyUp: this.menuActionsContainerKeyUp, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 },
+      h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 },
         h("slot", null))));
   }
   render() {
@@ -320,12 +303,12 @@ export class ActionMenu {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "ComputedPlacement[]",
-        "resolved": "ComputedPlacement[]",
+        "original": "EffectivePlacement[]",
+        "resolved": "Placement[]",
         "references": {
-          "ComputedPlacement": {
+          "EffectivePlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -380,7 +363,7 @@ export class ActionMenu {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -398,12 +381,12 @@ export class ActionMenu {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "PopperPlacement",
-        "resolved": "Placement | PlacementRtl | VariationRtl",
+        "original": "LogicalPlacement",
+        "resolved": "Placement | AutoPlacement | VariationPlacement | DeprecatedPlacement",
         "references": {
-          "PopperPlacement": {
+          "LogicalPlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -412,7 +395,7 @@ export class ActionMenu {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+            "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the `referenceElement`."
       },
@@ -454,12 +437,17 @@ export class ActionMenu {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when the `open` property has changed."
+        "text": "Emits when the `open` property has changed.\n\n**Note:**: The event payload is deprecated, please use the `open` property on the component instead"
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }]; }
   static get methods() { return {

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

package/dist/collection/components/action-pad/action-pad.css

@@ -82,7 +82,7 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -108,16 +108,16 @@
 }
 
 :host([expanded]) {
-  max-width: 20vw;
+  max-inline-size: 20vw;
+  background: transparent;
 }
 
 ::slotted(calcite-action-group) {
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-bottom: 0px;
-  padding-top: 0px;
+  padding-block: 0px;
 }
 
 .container {
@@ -129,18 +129,18 @@
   --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
   --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  max-width: 15vw;
+  max-inline-size: 15vw;
 }
 
 .action-group--bottom {
   flex-grow: 1;
   justify-content: flex-end;
-  padding-bottom: 0px;
+  padding-block-end: 0px;
 }
 
 :host([layout=horizontal]) .container {
   flex-direction: row;
-  max-width: unset;
+  max-inline-size: unset;
 }
 :host([layout=horizontal]) .container .action-group--bottom {
   padding: 0px;
@@ -152,5 +152,5 @@
 }
 
 ::slotted(calcite-action-group:last-child) {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
 }

package/dist/collection/components/action-pad/action-pad.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, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -269,8 +269,8 @@ export class ActionPad {
         "text": "Emits when the `expanded` property is toggled."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/action-pad/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 = {
   actionGroupBottom: "action-group--bottom",