@esri/calcite-components 5.0.0-next.8 → 5.0.0-next.81

package/dist/components/calcite-action-bar/customElement.d.ts

@@ -1,96 +1,107 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Layout, Position, Scale, SelectionAppearance } from '../interfaces';
-import { OverlayPositioning } from '../../utils/floating-ui';
-import { Tooltip } from '../calcite-tooltip/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Layout, Position, Scale, SelectionAppearance } from "../interfaces.js";
+import type { OverlayPositioning } from "../../utils/floating-ui.js";
 
 /**
+ * @cssproperty [--calcite-action-bar-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-action-bar-corner-radius] - Specifies the component's border radius when `floating` is `true`.
+ * @cssproperty [--calcite-action-bar-expanded-max-width] - When `layout` is `"vertical"`, specifies the component's maximum width.
+ * @cssproperty [--calcite-action-bar-items-space] - Specifies the space between slotted components in the component.
+ * @cssproperty [--calcite-action-bar-shadow] - Specifies the component's shadow when `floating` is `true`.
  * @slot  - A slot for adding `calcite-action`s that will appear at the top of the component.
  * @slot [actions-end] - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
  * @slot [expand-tooltip] - A slot to set the `calcite-tooltip` for the expand toggle.
  */
-export declare class ActionBar extends LitElement {
-    /** Specifies the accessible label for the last `calcite-action-group`. */
-    actionsEndGroupLabel: string;
-    /**
-     * When `true`, the component is in a floating state.
-     *
-     * @default false
-     */
-    floating: boolean;
-    /**
-     * When `true`, the expand-toggling behavior is disabled.
-     *
-     * @default false
-     */
-    expandDisabled: boolean;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /**
-     * Specifies the layout direction of the actions.
-     *
-     * @default "vertical"
-     */
-    layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.
-     *
-     * @default false
-     */
-    overflowActionsDisabled: boolean;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /** Arranges the component depending on the element's `dir` property. */
-    position: Extract<"start" | "end", Position>;
-    /**
-     * Specifies the size of the expand `calcite-action`.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Specifies the selection appearance of the component
-     *
-     * @default "neutral"
-     */
-    selectionAppearance: Extract<"neutral" | "highlight", SelectionAppearance>;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the component's content area is collapsed. */
-    readonly calciteActionBarCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteActionBarExpand: TargetedEvent<this, void>;
-    /** Fires when the `expanded` property is toggled. */
-    readonly calciteActionBarToggle: TargetedEvent<this, void>;
-    private messages: Partial<{
-        expand: string;
-        collapse: string;
-        expandLabel: string;
-        collapseLabel: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        expand: string;
-        collapse: string;
-        expandLabel: string;
-        collapseLabel: string;
-    }>;
-}
+export abstract class ActionBar extends LitElement {
+  /** Specifies an accessible name for the last `calcite-action-group`. */
+  accessor actionsEndGroupLabel: string;
+  /**
+   * When `true`, the expand-toggling behavior is disabled.
+   *
+   * @default false
+   */
+  accessor expandDisabled: boolean;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /**
+   * When `true`, the component is in a floating state.
+   *
+   * @default false
+   */
+  accessor floating: boolean;
+  /**
+   * Specifies the layout direction of the actions.
+   *
+   * @default "vertical"
+   */
+  accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      expand?: string;
+      collapse?: string;
+      expandLabel?: string;
+      collapseLabel?: string;
+  };
+  /**
+   * When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.
+   *
+   * @default false
+   */
+  accessor overflowActionsDisabled: boolean;
+  /**
+   * Specifies the type of positioning to use for overlaid content, where:
+   *
+   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   *
+   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   * @default "absolute"
+   */
+  accessor overlayPositioning: OverlayPositioning;
+  /** Specifies the position of the component depending on the element's `dir` property. */
+  accessor position: Extract<"start" | "end", Position>;
+  /**
+   * Specifies the size of the expand `calcite-action`.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Specifies the selection appearance of the component
+   *
+   * @default "neutral"
+   */
+  accessor selectionAppearance: Extract<"neutral" | "highlight", SelectionAppearance>;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the component's content area is collapsed. */
+  readonly calciteActionBarCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteActionBarExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the `expanded` property is toggled. */
+  readonly calciteActionBarToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteActionBarCollapse: ActionBar["calciteActionBarCollapse"]["detail"];
+    calciteActionBarExpand: ActionBar["calciteActionBarExpand"]["detail"];
+    calciteActionBarToggle: ActionBar["calciteActionBarToggle"]["detail"];
+  };
+}

package/dist/components/calcite-action-bar/customElement.js

@@ -1,10 +1,14 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.81 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { a as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { a as getStylePixelValue, s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { o as overflowActions, q as queryActions, t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
+import { o as overflowActions, q as queryActions, t as toggleChildActionText, i as isAction, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
@@ -42,11 +46,12 @@ const SLOTS = {
   actionsEnd: "actions-end",
   expandTooltip: "expand-tooltip"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-flex;align-self:stretch;background:transparent}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;gap:var(--calcite-action-bar-items-space, 0);background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1))}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(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(--calcite-action-bar-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:var(--calcite-border-width-sm)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-bar-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-sm));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm-plus)}:host{display:inline-flex;align-self:stretch;background:transparent;--calcite-internal-action-group-dividing-border-margin: calc(var(--calcite-spacing-base) + 1px)}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-bar-gap);padding:var(--calcite-internal-action-bar-padding)}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(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(--calcite-action-bar-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);border-image:linear-gradient(to right,transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;padding-block-end:var(--calcite-internal-action-bar-padding)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-image:linear-gradient(transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-internal-action-bar-padding)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionBar extends LitElement {
   constructor() {
     super();
     this.actions = [];
+    this.containerRef = createRef();
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
     this.cancelable = useCancelable()(this);
     this.resize = debounce(({ width, height }) => {
@@ -57,9 +62,28 @@ class ActionBar extends LitElement {
       const itemSizes = this.getItemSizes();
       this.updateGroups();
       const groupCount = this.hasActionsEnd || !expandDisabled ? actionGroups.length + 1 : actionGroups.length;
+      let bufferSize = groupCount;
+      const actionBarContainerStyle = getComputedStyle(this.containerRef.value);
+      bufferSize += getStylePixelValue(layout === "horizontal" ? actionBarContainerStyle.paddingInlineStart : actionBarContainerStyle.paddingBlockStart) + getStylePixelValue(layout === "horizontal" ? actionBarContainerStyle.paddingInlineEnd : actionBarContainerStyle.paddingBlockEnd);
+      if (actionGroups.length > 0) {
+        actionGroups.forEach((actionGroup, i) => {
+          const actionGroupStyle = getComputedStyle(actionGroup);
+          const actionGroupGap = getStylePixelValue(actionGroupStyle.gap);
+          const actionGroupGapQuantity = actionGroup.childElementCount - 1;
+          bufferSize += actionGroupGap * actionGroupGapQuantity;
+          if (i < actionGroups.length - 1) {
+            bufferSize += getStylePixelValue(layout === "horizontal" ? actionGroupStyle.paddingInlineEnd : actionGroupStyle.paddingBlockEnd);
+            bufferSize += getStylePixelValue(layout === "horizontal" ? actionGroupStyle.borderInlineEndWidth : actionGroupStyle.borderBlockEndWidth);
+          }
+        });
+      }
+      if (groupCount > 0) {
+        for (let i = 1; i < groupCount; i++) {
+          bufferSize += getStylePixelValue(actionBarContainerStyle.gap);
+        }
+      }
       const overflowCount = getOverflowCount({
-        bufferSize: groupCount,
-        // 1px border for each group
+        bufferSize,
         containerSize: layout === "horizontal" ? width : height,
         itemSizes
       });
@@ -92,13 +116,15 @@ class ActionBar extends LitElement {
     this.overlayPositioning = "absolute";
     this.scale = "m";
     this.selectionAppearance = "neutral";
+    this.topLayerDisabled = false;
     this.calciteActionBarCollapse = createEvent({ cancelable: false });
     this.calciteActionBarExpand = createEvent({ cancelable: false });
     this.calciteActionBarToggle = createEvent({ cancelable: false });
     this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
+    this.listen("keydown", this.handleKeyDown);
   }
   static {
-    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], actionsEndGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
+    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], actionsEndGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -218,13 +244,49 @@ class ActionBar extends LitElement {
   queryAndStoreActions() {
     this.actions = Array.from(this.el.querySelectorAll("calcite-action"));
   }
+  handleKeyDown(event) {
+    this.queryAndStoreActions();
+    const actions = this.actions.filter((action) => !action.disabled);
+    const current = document.activeElement;
+    if (!isAction(current)) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        focusElementInGroup(actions, current, "next", true);
+        event.preventDefault();
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        focusElementInGroup(actions, current, "previous", true);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusElementInGroup(actions, current, "first", true);
+        event.preventDefault();
+        break;
+      case "End":
+        focusElementInGroup(actions, current, "last", true);
+        event.preventDefault();
+        break;
+      case "Tab":
+        this.setActionTabIndexes(current);
+        break;
+    }
+  }
+  setActionTabIndexes(active) {
+    this.actions.forEach((action) => {
+      action.tabIndex = !action.disabled && action === active ? 0 : -1;
+    });
+  }
   renderBottomActionGroup() {
     const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages, actionsEndGroupLabel, overlayPositioning } = this;
     const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, ref: this.setExpandToggleEl, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
-    return html`<calcite-action-group class=${safeClassMap(CSS.actionGroupEnd)} .hidden=${this.expandDisabled && !this.hasActionsEnd} .label=${actionsEndGroupLabel} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot><slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${expandToggleNode}</calcite-action-group>`;
+    return html`<calcite-action-group class=${safeClassMap(CSS.actionGroupEnd)} .hidden=${this.expandDisabled && !this.hasActionsEnd} .label=${actionsEndGroupLabel} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot><slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${expandToggleNode}</calcite-action-group>`;
   }
   render() {
-    return html`<div class=${safeClassMap(CSS.container)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`;
+    return html`<div .ariaOrientation=${this.layout === "horizontal" ? "horizontal" : "vertical"} class=${safeClassMap(CSS.container)} role=toolbar ${ref(this.containerRef)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`;
   }
 }
 customElement("calcite-action-bar", ActionBar);

package/dist/components/calcite-action-bar/index.d.ts

@@ -1,3 +1 @@
-import "../calcite-action/index.js";
-import "../calcite-action-group/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-action-group/customElement.d.ts

@@ -1,74 +1,100 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Layout, Scale } from '../interfaces';
-import { FlipPlacement, LogicalPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { Columns } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Layout, Scale, SelectionMode } from "../interfaces.js";
+import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { Columns } from "./interfaces.js";
 
 /**
- * @slot  - A slot for adding a group of `calcite-action`s.
+ * @cssproperty [--calcite-action-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-action-group-border-color] - Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`.
+ * @cssproperty [--calcite-action-group-columns] - When `layout` is `"grid"`, specifies the component's `grid-template-columns`.
+ * @cssproperty [--calcite-action-group-gap] - When `layout` is `"grid"`, specifies the component's gap.
+ * @slot  - A slot for adding `calcite-action`s.
  * @slot [menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot [menu-tooltip] - A slot for adding a `calcite-tooltip` for the menu.
  */
-export declare class ActionGroup extends LitElement {
-    /** Indicates number of columns. */
-    columns: Columns;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /** Accessible name for the component. */
-    label: string;
-    /**
-     * Indicates the layout of the component.
-     *
-     * @internal
-     * @default "vertical"
-     */
-    layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-    /** Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. */
-    menuFlipPlacements: FlipPlacement[];
-    /**
-     * When `true`, the `calcite-action-menu` is open.
-     *
-     * @default false
-     */
-    menuOpen: boolean;
-    /** Determines where the action menu will be positioned. */
-    menuPlacement: LogicalPlacement;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /**
-     * Specifies the size of the `calcite-action-menu`.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the component's content area is collapsed. */
-    readonly calciteActionGroupCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteActionGroupExpand: TargetedEvent<this, void>;
-    private messages: Partial<{
-        more: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        more: string;
-    }>;
-}
+export abstract class ActionGroup extends LitElement {
+  /** Specifies the number of columns. */
+  accessor columns: Columns;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * Indicates the layout of the component.
+   *
+   * @default "vertical"
+   * @internal
+   */
+  accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
+  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  accessor menuFlipPlacements: FlipPlacement[];
+  /**
+   * When `true`, the `calcite-action-menu` is open.
+   *
+   * @default false
+   */
+  accessor menuOpen: boolean;
+  /** Specifies the position of the action menu. */
+  accessor menuPlacement: LogicalPlacement;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: { more?: string; };
+  /**
+   * Specifies the type of positioning to use for overlaid content, where:
+   *
+   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   *
+   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   * @default "absolute"
+   */
+  accessor overlayPositioning: OverlayPositioning;
+  /**
+   * Specifies the size of the `calcite-action-menu`.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Specifies the selection mode of the component, where:
+   *
+   * `"multiple"` allows any number of selections,
+   *
+   * `"single"` allows only one selection,
+   *
+   * `"single-persist"` allows one selection and prevents de-selection, and
+   *
+   * `"none"` disables selection (default).
+   *
+   * @default "none"
+   */
+  accessor selectionMode: Extract<"single" | "single-persist" | "multiple" | "none", SelectionMode>;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the component's content area is collapsed. */
+  readonly calciteActionGroupCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteActionGroupExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteActionGroupCollapse: ActionGroup["calciteActionGroupCollapse"]["detail"];
+    calciteActionGroupExpand: ActionGroup["calciteActionGroupExpand"]["detail"];
+  };
+}