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

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

@@ -82,43 +82,69 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-action-bar-expanded-max-width: optionally specify the expanded max width of the action bar when in "vertical" layout.
+*/
 :host {
   pointer-events: auto;
   display: inline-flex;
-  flex-direction: column;
   align-self: stretch;
-  max-width: 15vw;
   background: transparent;
+  --calcite-action-bar-expanded-max-width: auto;
+}
+
+:host([layout=vertical]) {
+  flex-direction: column;
+}
+
+:host([layout=horizontal]) {
+  flex-direction: row;
 }
 
-:host([overflow-actions-disabled]) {
+:host([layout=vertical][overflow-actions-disabled]) {
   overflow-y: auto;
 }
 
-:host([expanded]) {
-  max-width: 20vw;
+:host([layout=horizontal][overflow-actions-disabled]) {
+  overflow-x: auto;
+}
+
+:host([layout=vertical][expanded]) {
+  max-inline-size: var(--calcite-action-bar-expanded-max-width);
 }
 
 ::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);
 }
 
+:host([layout=horizontal]) ::slotted(calcite-action-group) {
+  border-width: 0px;
+  border-inline-end-width: 1px;
+  border-style: solid;
+}
+
 ::slotted(calcite-action-group:last-child) {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
+  border-inline-end-width: 0px;
 }
 
 .action-group--bottom {
   flex-grow: 1;
   justify-content: flex-end;
-  padding-bottom: 0px;
+  padding-block-end: 0px;
+  padding-inline-end: 0px;
 }

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

@@ -1,13 +1,13 @@
 /*!
  * 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.89
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { getSlotted, focusElement } from "../../utils/dom";
-import { getOverflowCount, overflowActions, queryActions, overflowActionsDebounceInMs } from "./utils";
+import { geActionDimensions, getOverflowCount, overflowActions, queryActions, overflowActionsDebounceInMs } from "./utils";
 import { createObserver } from "../../utils/observers";
 import { debounce } from "lodash-es";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -31,6 +31,10 @@ export class ActionBar {
      * When true, the component is expanded.
      */
     this.expanded = false;
+    /**
+     *  The layout direction of the actions.
+     */
+    this.layout = "vertical";
     /**
      * Disables automatically overflowing `calcite-action`s that won't fit into menus.
      */
@@ -60,13 +64,12 @@ export class ActionBar {
       entries.forEach(this.resizeHandler);
     };
     this.resizeHandler = (entry) => {
-      const { height } = entry.contentRect;
-      this.resize(height);
+      const { width, height } = entry.contentRect;
+      this.resize({ width, height });
     };
-    this.resize = debounce((height) => {
-      var _a;
-      const { el, expanded, expandDisabled } = this;
-      if (!height) {
+    this.resize = debounce(({ width, height }) => {
+      const { el, expanded, expandDisabled, layout } = this;
+      if ((layout === "vertical" && !height) || (layout === "horizontal" && !width)) {
         return;
       }
       const actions = queryActions(el);
@@ -75,10 +78,14 @@ export class ActionBar {
       const groupCount = getSlotted(el, SLOTS.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
+      const { actionHeight, actionWidth } = geActionDimensions(actions);
       const overflowCount = getOverflowCount({
+        layout,
         actionCount,
-        actionHeight: (_a = actions[0]) === null || _a === void 0 ? void 0 : _a.clientHeight,
+        actionHeight,
+        actionWidth,
         height,
+        width,
         groupCount
       });
       overflowActions({
@@ -105,6 +112,7 @@ export class ActionBar {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
+    this.conditionallyOverflowActions();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
     overflowActionsDisabled
@@ -147,7 +155,7 @@ export class ActionBar {
    * @internal
    */
   async overflowActions() {
-    this.resize(this.el.clientHeight);
+    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
   /**
    * Sets focus on the component.
@@ -168,12 +176,12 @@ export class ActionBar {
   //
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
-    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale } = this;
+    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale, layout } = this;
     const tooltip = getSlotted(el, SLOTS.expandTooltip);
     const expandLabel = intlExpand || TEXT.expand;
     const collapseLabel = intlCollapse || TEXT.collapse;
     const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, scale: scale },
+    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale },
       h("slot", { name: SLOTS.bottomActions }),
       h("slot", { name: SLOTS.expandTooltip }),
       expandToggleNode)) : null;
@@ -262,6 +270,32 @@ export class ActionBar {
       "attribute": "intl-collapse",
       "reflect": false
     },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Extract<\"horizontal\" | \"vertical\", Layout>",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "Extract": {
+            "location": "global"
+          },
+          "Layout": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The layout direction of the actions."
+      },
+      "attribute": "layout",
+      "reflect": true,
+      "defaultValue": "\"vertical\""
+    },
     "overflowActionsDisabled": {
       "type": "boolean",
       "mutable": false,
@@ -336,8 +370,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.86
+ * v1.0.0-beta.89
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom"

package/dist/collection/components/action-bar/utils.js

@@ -1,18 +1,28 @@
 /*!
  * 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.89
  */
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources";
 export const overflowActionsDebounceInMs = 150;
-const groupBufferHeight = 2;
-const getMaxActionCount = ({ height, actionHeight, groupCount }) => {
-  return Math.floor((height - groupCount * groupBufferHeight) / actionHeight);
+const groupBufferPx = 2;
+const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
+export const geActionDimensions = (actions) => {
+  const actionLen = actions === null || actions === void 0 ? void 0 : actions.length;
+  return {
+    actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
+    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0
+  };
 };
-export const getOverflowCount = ({ actionCount, actionHeight, height, groupCount }) => {
-  return Math.max(actionCount - getMaxActionCount({ height, actionHeight, groupCount }), 0);
+const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount }) => {
+  const maxContainerPx = layout === "horizontal" ? width : height;
+  const avgItemPx = layout === "horizontal" ? actionWidth : actionHeight;
+  return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);
+};
+export const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount }) => {
+  return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
 };
 export const queryActions = (el) => {
   return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === ACTION_MENU_SLOTS.trigger : true);

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.86
+ * v1.0.0-beta.89
  */
-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";
@@ -67,9 +67,9 @@ export class ActionGroup {
     return hasTooltip ? h("slot", { name: SLOTS.menuTooltip, slot: ACTION_MENU_SLOTS.tooltip }) : null;
   }
   renderMenu() {
-    const { el, expanded, intlMore, menuOpen, scale } = this;
+    const { el, expanded, intlMore, menuOpen, scale, layout } = this;
     const hasMenuItems = getSlotted(el, SLOTS.menuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: "leading-start", scale: scale },
+    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: layout === "horizontal" ? "bottom-leading" : "leading-start", scale: scale },
       h("calcite-action", { icon: ICONS.menu, scale: scale, slot: ACTION_MENU_SLOTS.trigger, text: intlMore || TEXT.more, textEnabled: expanded }),
       h("slot", { name: SLOTS.menuActions }),
       this.renderTooltip())) : null;

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.86
+ * v1.0.0-beta.89
  */
 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.86
+ * v1.0.0-beta.89
  */
 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.86
+ * v1.0.0-beta.89
  */
 export const CSS = {
   menu: "menu",

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

@@ -82,17 +82,23 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-action-pad-expanded-max-width: optionally specify the expanded max width of the action pad when in "vertical" layout.
+*/
 :host {
   display: block;
 }
-
 @keyframes in {
   0% {
     opacity: 0;
@@ -101,24 +107,23 @@
     opacity: 1;
   }
 }
-
 :host {
   animation: in var(--calcite-internal-animation-timing-slow) ease-in-out;
   border-radius: 0.125rem;
+  --calcite-action-pad-expanded-max-width: auto;
+  background: transparent;
 }
 
-:host([expanded]) {
-  max-width: 20vw;
-  background: transparent;
+:host([expanded][layout=vertical]) .container {
+  max-inline-size: var(--calcite-action-pad-expanded-max-width);
 }
 
 ::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 {
@@ -130,18 +135,16 @@
   --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;
 }
 
 .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;
 }
 :host([layout=horizontal]) .container .action-group--bottom {
   padding: 0px;
@@ -153,5 +156,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.86
+ * v1.0.0-beta.89
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -96,12 +96,12 @@ export class ActionPad {
   //
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
-    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale } = this;
+    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale, layout } = this;
     const tooltip = getSlotted(el, SLOTS.expandTooltip);
     const expandLabel = intlExpand || TEXT.expand;
     const collapseLabel = intlCollapse || TEXT.collapse;
     const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, scale: scale },
+    return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale },
       h("slot", { name: SLOTS.expandTooltip }),
       expandToggleNode)) : null;
   }
@@ -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.86
+ * v1.0.0-beta.89
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",