@esri/calcite-components 5.0.0-next.72 → 5.0.0-next.74

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

@@ -1,121 +1,133 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, LuminaJsx, TargetedEvent } from '@arcgis/lumina';
-import { Alignment, Appearance, AriaAttributesCamelCased, Scale, SelectionAppearance, Width } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { FormOwner } from '../../utils/form';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { LuminaJsx } from "@arcgis/lumina";
+import type { Alignment, Appearance, AriaAttributesCamelCased, Scale } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
-/** @slot  - A slot for adding non-interactive content, such as a `calcite-icon`. */
-export declare class Action extends LitElement {
-    /**
-     * Use this property to override or extend ARIA properties and attributes on the component's button.
-     *
-     * @internal
-     */
-    aria?: Partial<Pick<AriaAttributesCamelCased, "controlsElements" | "describedByElements" | "expanded" | "hasPopup" | "labelledByElements" | "ownsElements" | "pressed" | "checked"> & Pick<LuminaJsx.HTMLAttributes, "role">>;
-    /**
-     * When `true`, the component is highlighted.
-     *
-     * @default false
-     */
-    active: boolean;
-    /** Specifies the horizontal alignment of button elements with text content. */
-    alignment: Alignment;
-    /**
-     * Specifies the appearance of the component.
-     *
-     * @deprecated in v5.0.0, removal target v6.0.0 - No longer necessary.
-     * @default "transparent"
-     */
-    appearance: Extract<"solid" | "transparent", Appearance>;
-    /**
-     * When `true`, the side padding of the component is reduced.
-     *
-     * @deprecated in v2.11.0, removal target v5.0.0 - No longer necessary.
-     * @default false
-     */
-    compact: boolean;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * The `id` of the form that will be associated with the component.
-     *
-     * When not set, the component will be associated with its ancestor form element, if any.
-     */
-    form: string;
-    /** Specifies an icon to display. */
-    icon: IconName;
-    /**
-     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @default false
-     */
-    iconFlipRtl: boolean;
-    /**
-     * When `true`, displays a visual indicator.
-     *
-     * @default false
-     */
-    indicator: boolean;
-    /** Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. */
-    label: string;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Specifies text that accompanies the icon.
-     *
-     * @required
-     */
-    text: string;
-    /**
-     * When `true`, indicates whether the text is displayed.
-     *
-     * @default false
-     */
-    textEnabled: boolean;
-    /**
-     * Specifies the default behavior of the component.
-     *
-     * @default "button"
-     * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
-     */
-    type: HTMLButtonElement["type"];
-    /**
-     * Sets focus on the component.
-     *
-     * @param options
-     * @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 action's button is being pressed down.
-     *
-     * @internal
-     */
-    readonly calciteInternalActionMouseDown: TargetedEvent<this, void>;
-    private messages: {
-        loading: string;
-        indicator: string;
-        indicatorLabel: string;
-    } & import('@arcgis/lumina/controllers').T9nMeta<{
-        loading: string;
-        indicator: string;
-        indicatorLabel: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-action-background-color-hover] - Specifies the component's background color when hovered or focused.
+ * @cssproperty [--calcite-action-background-color-press] - Specifies the component's background color when active.
+ * @cssproperty [--calcite-action-background-color-pressed] - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active.
+ * @cssproperty [--calcite-action-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-action-corner-radius-end-end] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end.
+ * @cssproperty [--calcite-action-corner-radius-end-start] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start.
+ * @cssproperty [--calcite-action-corner-radius-start-end] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end.
+ * @cssproperty [--calcite-action-corner-radius-start-start] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start.
+ * @cssproperty [--calcite-action-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-action-indicator-color] - Specifies the component's indicator color.
+ * @cssproperty [--calcite-action-text-color-press] - Specifies the component's text color when pressed or hovered.
+ * @cssproperty [--calcite-action-text-color-pressed] - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered.
+ * @cssproperty [--calcite-action-text-color] - Specifies the component's text color.
+ * @slot  - A slot for adding non-interactive content, such as a `calcite-icon`.
+ */
+export abstract class Action extends LitElement {
+  /**
+   * When `true`, the component is highlighted.
+   *
+   * @default false
+   */
+  accessor active: boolean;
+  /** Specifies the horizontal alignment of button elements with text content. */
+  accessor alignment: Alignment;
+  /**
+   * Specifies the appearance of the component.
+   *
+   * @deprecated in v5.0.0, removal target v6.0.0 - No longer necessary.
+   * @default "transparent"
+   */
+  accessor appearance: Extract<"solid" | "transparent", Appearance>;
+  /**
+   * Use this property to override or extend ARIA properties and attributes on the component's button.
+   *
+   * @internal
+   */
+  accessor aria: Partial<Pick<AriaAttributesCamelCased, "controlsElements" | "describedByElements" | "expanded" | "hasPopup" | "labelledByElements" | "ownsElements" | "pressed" | "checked"> & Pick<LuminaJsx.HTMLAttributes, "role">> | undefined;
+  /**
+   * When `true`, the side padding of the component is reduced.
+   *
+   * @deprecated in v2.11.0, removal target v5.0.0 - No longer necessary.
+   * @default false
+   */
+  accessor compact: boolean;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the `id` of the component's associated form.
+   *
+   * When not set, the component is associated with its ancestor form element, if one exists.
+   */
+  accessor form: string;
+  /** Specifies an icon to display. */
+  accessor icon: IconName;
+  /**
+   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /**
+   * When `true`, displays a visual indicator.
+   *
+   * @default false
+   */
+  accessor indicator: boolean;
+  /** Specifies an accessible label for the component. If no label is provided, the label inherits what's provided for the `text` prop. */
+  accessor label: string;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      loading?: string;
+      indicator?: string;
+      indicatorLabel?: string;
+  };
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Specifies text that accompanies the icon.
+   *
+   * @required
+   */
+  accessor text: string;
+  /**
+   * When `true`, indicates whether the text is displayed.
+   *
+   * @default false
+   */
+  accessor textEnabled: boolean;
+  /**
+   * Specifies the default behavior of the component.
+   *
+   * @default "button"
+   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
+   */
+  accessor type: HTMLButtonElement["type"];
+  /**
+   * Sets focus on the component.
+   *
+   * @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 action's button is being pressed down.
+   *
+   * @internal
+   */
+  readonly calciteInternalActionMouseDown: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteInternalActionMouseDown: Action["calciteInternalActionMouseDown"]["detail"];
+  };
+}

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

@@ -1,6 +1,6 @@
 /*! 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.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";

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

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

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

@@ -1,97 +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/PublicLitElement";
+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
-     * @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 the accessible label 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;
+  /** Arranges 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,12 +1,12 @@
 /*! 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.72 */
+v5.0.0-next.74 */
 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 { createRef, ref } from "lit/directives/ref.js";
-import { k as getStylePixelValue, a as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements, d as focusElementInGroup } from "../../chunks/dom.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, i as isAction, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -116,6 +116,7 @@ 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 });
@@ -123,7 +124,7 @@ class ActionBar extends LitElement {
     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;
@@ -282,7 +283,7 @@ class ActionBar extends LitElement {
   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 .ariaOrientation=${this.layout === "horizontal" ? "horizontal" : "vertical"} class=${safeClassMap(CSS.container)} role=toolbar ${ref(this.containerRef)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`;

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