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

package/dist/custom-elements/index.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.87
+ * v1.0.0-beta.88
  */
 import { HTMLElement as HTMLElement$1, createEvent, h, Build, forceUpdate, Host, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -782,12 +782,22 @@ const ICONS$e = {
 };
 
 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;
+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
+  };
+};
+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);
 };
-const getOverflowCount = ({ actionCount, actionHeight, height, groupCount }) => {
-  return Math.max(actionCount - getMaxActionCount({ height, actionHeight, groupCount }), 0);
+const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount }) => {
+  return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
 };
 const queryActions = (el) => {
   return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS$q.trigger : true);
@@ -2135,7 +2145,7 @@ function throttle$1(func, wait, options) {
   });
 }
 
-const actionBarCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{pointer-events:auto;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-item-align:stretch;align-self:stretch;max-inline-size:15vw;background:transparent}:host([overflow-actions-disabled]){overflow-y:auto}:host([expanded]){max-inline-size:20vw}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}::slotted(calcite-action-group:last-child){border-block-end-width:0px}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px}";
+const actionBarCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{pointer-events:auto;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:stretch;align-self:stretch;background:transparent;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}: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-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-block-end-width:0px;border-inline-end-width:0px}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px;-webkit-padding-end:0px;padding-inline-end:0px}";
 
 const ActionBar = class extends HTMLElement$1 {
   constructor() {
@@ -2156,6 +2166,10 @@ const ActionBar = class extends HTMLElement$1 {
      * 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.
      */
@@ -2185,13 +2199,12 @@ const ActionBar = class extends HTMLElement$1 {
       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);
@@ -2200,10 +2213,14 @@ const ActionBar = class extends HTMLElement$1 {
       const groupCount = getSlotted(el, SLOTS$o.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({
@@ -2230,6 +2247,7 @@ const ActionBar = class extends HTMLElement$1 {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
+    this.conditionallyOverflowActions();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
     overflowActionsDisabled
@@ -2272,7 +2290,7 @@ const ActionBar = class extends HTMLElement$1 {
    * @internal
    */
   async overflowActions() {
-    this.resize(this.el.clientHeight);
+    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
   /**
    * Sets focus on the component.
@@ -2293,12 +2311,12 @@ const ActionBar = class extends HTMLElement$1 {
   //
   // --------------------------------------------------------------------------
   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$o.expandTooltip);
     const expandLabel = intlExpand || TEXT$q.expand;
     const collapseLabel = intlCollapse || TEXT$q.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$o.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS$O.actionGroupBottom, scale: scale }, h("slot", { name: SLOTS$o.bottomActions }), h("slot", { name: SLOTS$o.expandTooltip }), expandToggleNode)) : null;
+    return getSlotted(el, SLOTS$o.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS$O.actionGroupBottom, layout: layout, scale: scale }, h("slot", { name: SLOTS$o.bottomActions }), h("slot", { name: SLOTS$o.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
     return (h(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, h("slot", null), this.renderBottomActionGroup()));
@@ -2370,9 +2388,9 @@ const ActionGroup = class extends HTMLElement$1 {
     return hasTooltip ? h("slot", { name: SLOTS$p.menuTooltip, slot: SLOTS$q.tooltip }) : null;
   }
   renderMenu() {
-    const { el, expanded, intlMore, menuOpen, scale } = this;
+    const { el, expanded, intlMore, menuOpen, scale, layout } = this;
     const hasMenuItems = getSlotted(el, SLOTS$p.menuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT$r.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: "leading-start", scale: scale }, h("calcite-action", { icon: ICONS$e.menu, scale: scale, slot: SLOTS$q.trigger, text: intlMore || TEXT$r.more, textEnabled: expanded }), h("slot", { name: SLOTS$p.menuActions }), this.renderTooltip())) : null;
+    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT$r.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: layout === "horizontal" ? "bottom-leading" : "leading-start", scale: scale }, h("calcite-action", { icon: ICONS$e.menu, scale: scale, slot: SLOTS$q.trigger, text: intlMore || TEXT$r.more, textEnabled: expanded }), h("slot", { name: SLOTS$p.menuActions }), this.renderTooltip())) : null;
   }
   render() {
     return (h(Fragment, null, h("slot", null), this.renderMenu()));
@@ -2665,7 +2683,7 @@ const SLOTS$n = {
   expandTooltip: "expand-tooltip"
 };
 
-const actionPadCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}@keyframes in{0%{opacity:0}100%{opacity:1}}:host{-webkit-animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.125rem}:host([expanded]){max-inline-size:20vw;background:transparent}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px}.container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-ui-background);--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);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-inline-size:15vw}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px}:host([layout=horizontal]) .container{-ms-flex-direction:row;flex-direction:row;max-inline-size:unset}:host([layout=horizontal]) .container .action-group--bottom{padding:0px}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-width:0px;padding:0px;border-inline-end-width:1px}::slotted(calcite-action-group:last-child){border-block-end-width:0px}";
+const actionPadCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}@keyframes in{0%{opacity:0}100%{opacity:1}}:host{-webkit-animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;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][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width)}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px}.container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-ui-background);--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);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px}:host([layout=horizontal]) .container{-ms-flex-direction:row;flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0px}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-width:0px;padding:0px;border-inline-end-width:1px}::slotted(calcite-action-group:last-child){border-block-end-width:0px}";
 
 const ActionPad = class extends HTMLElement$1 {
   constructor() {
@@ -2755,12 +2773,12 @@ const ActionPad = class extends HTMLElement$1 {
   //
   // --------------------------------------------------------------------------
   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$n.expandTooltip);
     const expandLabel = intlExpand || TEXT$p.expand;
     const collapseLabel = intlCollapse || TEXT$p.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$N.actionGroupBottom, scale: scale }, h("slot", { name: SLOTS$n.expandTooltip }), expandToggleNode)) : null;
+    return expandToggleNode ? (h("calcite-action-group", { class: CSS$N.actionGroupBottom, layout: layout, scale: scale }, h("slot", { name: SLOTS$n.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
     return (h(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, h("div", { class: CSS$N.container }, h("slot", null), this.renderBottomActionGroup())));
@@ -11863,15 +11881,22 @@ const Dropdown = class extends HTMLElement$1 {
     /** specify whether the dropdown is opened by hover or click of a trigger element */
     this.type = "click";
     this.items = [];
-    this.groups = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.guid = `calcite-dropdown-${guid()}`;
+    this.defaultAssignedElements = [];
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.slotChangeHandler = (event) => {
+      this.defaultAssignedElements = event.target.assignedElements({
+        flatten: true
+      });
+      this.updateItems();
+    };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -11885,19 +11910,15 @@ const Dropdown = class extends HTMLElement$1 {
       this.reposition();
     };
     this.updateItems = () => {
-      this.items = this.groups
-        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
+      const { defaultAssignedElements } = this;
+      this.items = defaultAssignedElements.filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group, calcite-dropdown-item"))
+        .map((el) => el.matches("calcite-dropdown-group")
+        ? Array.from(el.querySelectorAll("calcite-dropdown-item"))
+        : [el])
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
       this.reposition();
     };
-    this.updateGroups = (event) => {
-      const groups = event.target
-        .assignedElements({ flatten: true })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
-      this.groups = groups;
-      this.updateItems();
-    };
     this.resizeObserverCallback = (entries) => {
       entries.forEach((entry) => {
         const { target } = entry;
@@ -12038,12 +12059,12 @@ const Dropdown = class extends HTMLElement$1 {
     (_c = this.scrollerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   render() {
-    const { active, open } = this;
-    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "true", name: SLOTS$i.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { class: {
+    const { active, open, guid } = this;
+    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "menu", name: SLOTS$i.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
         ["calcite-dropdown-content"]: true,
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: active || open
-      }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl }, h("div", { hidden: !(open || active) }, h("slot", { onSlotchange: this.updateGroups }))))));
+      }, id: `${guid}-menu`, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl, role: "menu" }, h("div", { hidden: !(open || active) }, h("slot", { onSlotchange: this.slotChangeHandler }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -12156,22 +12177,20 @@ const Dropdown = class extends HTMLElement$1 {
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
-    this.groups.forEach((group) => {
-      if (maxItems > 0 && itemsToProcess < maxItems) {
-        Array.from(group.children).forEach((item, index) => {
-          if (index === 0) {
-            if (isNaN(groupHeaderHeight)) {
-              groupHeaderHeight = item.offsetTop;
-            }
-            maxScrollerHeight += groupHeaderHeight;
-          }
-          if (itemsToProcess < maxItems) {
-            maxScrollerHeight += item.offsetHeight;
-            itemsToProcess += 1;
+    if (maxItems > 0 && itemsToProcess < maxItems) {
+      this.items.forEach((item) => {
+        if (item.matches("calcite-dropdown-group calcite-dropdown-item:first-child")) {
+          if (isNaN(groupHeaderHeight)) {
+            groupHeaderHeight = item.offsetTop;
           }
-        });
-      }
-    });
+          maxScrollerHeight += groupHeaderHeight;
+        }
+        if (itemsToProcess < maxItems) {
+          maxScrollerHeight += item.offsetHeight;
+          itemsToProcess += 1;
+        }
+      });
+    }
     return maxScrollerHeight;
   }
   closeCalciteDropdown(focusTrigger = true) {
@@ -12256,7 +12275,7 @@ const DropdownGroup = class extends HTMLElement$1 {
     const scale = this.scale || getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
     const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
-    return (h(Host, { role: "menu" }, h("div", { class: {
+    return (h(Host, { "aria-label": this.groupTitle, role: "group" }, h("div", { class: {
         container: true,
         [CSS$C.containerSmall]: scale === "s",
         [CSS$C.containerMedium]: scale === "m",
@@ -27522,7 +27541,7 @@ const ValueListItem = class extends HTMLElement$1 {
 const CalciteAccordion = /*@__PURE__*/proxyCustomElement(Accordion, [1,"calcite-accordion",{"appearance":[513],"iconPosition":[513,"icon-position"],"iconType":[513,"icon-type"],"scale":[513],"selectionMode":[513,"selection-mode"]},[[0,"calciteInternalAccordionItemKeyEvent","calciteInternalAccordionItemKeyEvent"],[0,"calciteInternalAccordionItemRegister","registerCalciteAccordionItem"],[0,"calciteInternalAccordionItemSelect","updateActiveItemOnChange"]]]);
 const CalciteAccordionItem = /*@__PURE__*/proxyCustomElement(AccordionItem, [1,"calcite-accordion-item",{"active":[1540],"expanded":[1540],"itemTitle":[1,"item-title"],"itemSubtitle":[1,"item-subtitle"],"heading":[1],"description":[1],"icon":[513]},[[0,"keydown","keyDownHandler"],[16,"calciteInternalAccordionChange","updateActiveItemOnChange"]]]);
 const CalciteAction = /*@__PURE__*/proxyCustomElement(Action, [1,"calcite-action",{"active":[516],"alignment":[513],"appearance":[513],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"intlLoading":[1,"intl-loading"],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"]}]);
-const CalciteActionBar = /*@__PURE__*/proxyCustomElement(ActionBar, [1,"calcite-action-bar",{"expandDisabled":[516,"expand-disabled"],"expanded":[1540],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"overflowActionsDisabled":[4,"overflow-actions-disabled"],"position":[513],"scale":[513]}]);
+const CalciteActionBar = /*@__PURE__*/proxyCustomElement(ActionBar, [1,"calcite-action-bar",{"expandDisabled":[516,"expand-disabled"],"expanded":[1540],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"layout":[513],"overflowActionsDisabled":[4,"overflow-actions-disabled"],"position":[513],"scale":[513]}]);
 const CalciteActionGroup = /*@__PURE__*/proxyCustomElement(ActionGroup, [1,"calcite-action-group",{"expanded":[516],"layout":[513],"columns":[514],"intlMore":[1,"intl-more"],"menuOpen":[1540,"menu-open"],"scale":[513]}]);
 const CalciteActionMenu = /*@__PURE__*/proxyCustomElement(ActionMenu, [1,"calcite-action-menu",{"expanded":[516],"flipPlacements":[16],"label":[1],"open":[1540],"overlayPositioning":[1,"overlay-positioning"],"placement":[513],"scale":[513],"activeMenuItemIndex":[32]},[[8,"click","closeCalciteActionMenuOnClick"]]]);
 const CalciteActionPad = /*@__PURE__*/proxyCustomElement(ActionPad, [1,"calcite-action-pad",{"expandDisabled":[516,"expand-disabled"],"expanded":[1540],"layout":[513],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"scale":[513]}]);

package/dist/esm/{ExpandToggle-8ad8aac0.js → ExpandToggle-9a766aef.js}

@@ -1,20 +1,30 @@
 /*!
  * 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.87
+ * v1.0.0-beta.88
  */
-import { f as forceUpdate, h } from './index-5048a317.js';
-import { a as getElementDir } from './dom-19ab3d2f.js';
-import { S as SLOTS } from './resources-9348154b.js';
-import { S as SLOTS$1 } from './resources-e1d5ca1c.js';
+import { f as forceUpdate, h } from './index-a3160f12.js';
+import { a as getElementDir } from './dom-d90fe08d.js';
+import { S as SLOTS } from './resources-5b92e29d.js';
+import { S as SLOTS$1 } from './resources-832f46ae.js';
 
 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;
+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
+  };
 };
-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);
+};
+const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount }) => {
+  return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
 };
 const queryActions = (el) => {
   return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS.trigger : true);
@@ -87,4 +97,4 @@ const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position
   return actionNode;
 };
 
-export { ExpandToggle as E, overflowActions as a, getOverflowCount as g, overflowActionsDebounceInMs as o, queryActions as q, toggleChildActionText as t };
+export { ExpandToggle as E, overflowActions as a, getOverflowCount as b, geActionDimensions as g, overflowActionsDebounceInMs as o, queryActions as q, toggleChildActionText as t };

package/dist/esm/{Heading-4d9f4f89.js → Heading-1d8ac13b.js}

@@ -1,9 +1,9 @@
 /*!
  * 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.87
+ * v1.0.0-beta.88
  */
-import { h } from './index-5048a317.js';
+import { h } from './index-a3160f12.js';
 
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/esm/{array-c38e9698.js → array-01c0fc97.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.87
+ * v1.0.0-beta.88
  */
 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/esm/calcite-accordion_2.entry.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.87
+ * v1.0.0-beta.88
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-5048a317.js';
-import { d as getElementProp, g as getSlotted, a as getElementDir, C as CSS_UTILITY, t as toAriaBoolean } from './dom-19ab3d2f.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e49df07c.js';
-import './guid-ba74e5d4.js';
-import './observers-61a2bb4f.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-a3160f12.js';
+import { d as getElementProp, g as getSlotted, a as getElementDir, C as CSS_UTILITY, t as toAriaBoolean } from './dom-d90fe08d.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-c6d33dce.js';
+import './guid-ac825a40.js';
+import './observers-365eaca9.js';
 
 const accordionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 

package/dist/esm/calcite-action-bar.entry.js

@@ -1,17 +1,17 @@
 /*!
  * 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.87
+ * v1.0.0-beta.88
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5048a317.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, E as ExpandToggle, g as getOverflowCount } from './ExpandToggle-8ad8aac0.js';
-import { f as focusElement, g as getSlotted } from './dom-19ab3d2f.js';
-import { c as createObserver } from './observers-61a2bb4f.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e49df07c.js';
-import { d as debounce } from './debounce-76a1065a.js';
-import './resources-9348154b.js';
-import './resources-e1d5ca1c.js';
-import './guid-ba74e5d4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a3160f12.js';
+import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-9a766aef.js';
+import { f as focusElement, g as getSlotted } from './dom-d90fe08d.js';
+import { c as createObserver } from './observers-365eaca9.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-c6d33dce.js';
+import { d as debounce } from './debounce-3e0197e5.js';
+import './resources-5b92e29d.js';
+import './resources-832f46ae.js';
+import './guid-ac825a40.js';
 
 const CSS = {
   actionGroupBottom: "action-group--bottom"
@@ -25,7 +25,7 @@ const TEXT = {
   collapse: "Collapse"
 };
 
-const actionBarCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{pointer-events:auto;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-item-align:stretch;align-self:stretch;max-inline-size:15vw;background:transparent}:host([overflow-actions-disabled]){overflow-y:auto}:host([expanded]){max-inline-size:20vw}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}::slotted(calcite-action-group:last-child){border-block-end-width:0px}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px}";
+const actionBarCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{pointer-events:auto;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-item-align:stretch;align-self:stretch;background:transparent;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}: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-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-block-end-width:0px;border-inline-end-width:0px}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px;-webkit-padding-end:0px;padding-inline-end:0px}";
 
 const ActionBar = class {
   constructor(hostRef) {
@@ -44,6 +44,10 @@ const ActionBar = class {
      * 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.
      */
@@ -73,13 +77,12 @@ const ActionBar = class {
       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);
@@ -88,10 +91,14 @@ const ActionBar = class {
       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({
@@ -118,6 +125,7 @@ const ActionBar = class {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
+    this.conditionallyOverflowActions();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
     overflowActionsDisabled
@@ -160,7 +168,7 @@ const ActionBar = class {
    * @internal
    */
   async overflowActions() {
-    this.resize(this.el.clientHeight);
+    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
   /**
    * Sets focus on the component.
@@ -181,12 +189,12 @@ const ActionBar = class {
   //
   // --------------------------------------------------------------------------
   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 }, h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
+    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;
   }
   render() {
     return (h(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, h("slot", null), this.renderBottomActionGroup()));

package/dist/esm/calcite-action-group.entry.js

@@ -1,15 +1,15 @@
 /*!
  * 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.87
+ * v1.0.0-beta.88
  */
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-5048a317.js';
-import { S as SLOTS, I as ICONS, T as TEXT } from './resources-e1d5ca1c.js';
-import { g as getSlotted } from './dom-19ab3d2f.js';
-import { S as SLOTS$1 } from './resources-9348154b.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e49df07c.js';
-import './guid-ba74e5d4.js';
-import './observers-61a2bb4f.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-a3160f12.js';
+import { S as SLOTS, I as ICONS, T as TEXT } from './resources-832f46ae.js';
+import { g as getSlotted } from './dom-d90fe08d.js';
+import { S as SLOTS$1 } from './resources-5b92e29d.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-c6d33dce.js';
+import './guid-ac825a40.js';
+import './observers-365eaca9.js';
 
 const actionGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){-webkit-padding-before:0px;padding-block-start:0px}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}";
 
@@ -67,9 +67,9 @@ const ActionGroup = class {
     return hasTooltip ? h("slot", { name: SLOTS.menuTooltip, slot: SLOTS$1.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 }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: intlMore || TEXT.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions }), this.renderTooltip())) : null;
+    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: SLOTS$1.trigger, text: intlMore || TEXT.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions }), this.renderTooltip())) : null;
   }
   render() {
     return (h(Fragment, null, h("slot", null), this.renderMenu()));

package/dist/esm/calcite-action-menu.entry.js

@@ -1,15 +1,15 @@
 /*!
  * 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.87
+ * v1.0.0-beta.88
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-5048a317.js';
-import { C as CSS, I as ICONS, S as SLOTS } from './resources-9348154b.js';
-import { g as getSlotted, t as toAriaBoolean, f as focusElement } from './dom-19ab3d2f.js';
-import { g as getRoundRobinIndex } from './array-c38e9698.js';
-import { g as guid } from './guid-ba74e5d4.js';
-import { c as createObserver } from './observers-61a2bb4f.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e49df07c.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-a3160f12.js';
+import { C as CSS, I as ICONS, S as SLOTS } from './resources-5b92e29d.js';
+import { g as getSlotted, t as toAriaBoolean, f as focusElement } from './dom-d90fe08d.js';
+import { g as getRoundRobinIndex } from './array-01c0fc97.js';
+import { g as guid } from './guid-ac825a40.js';
+import { c as createObserver } from './observers-365eaca9.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-c6d33dce.js';
 
 const actionMenuCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:-ms-flexbox;display:flex;outline-color:transparent}::slotted(calcite-action[active]){outline:2px solid var(--calcite-ui-brand);outline-offset:0px}.default-trigger{position:relative;block-size:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}.menu{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}";