@esri/calcite-components 5.2.0-next.10 → 5.2.0-next.101

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

@@ -1,37 +1,99 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HeadingLevel } from "../functional/Heading.js";
-import type { FlipContext, Scale, Status } from "../interfaces.js";
+import type { FlipContext, Scale, Status } from "../types.js";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { IconName } from "../calcite-icon/types.js";
+import type { BlockToggleDisplay } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-block-border-color": "*";
+  /** Specifies the space of the component's `default` slot. */
+  "--calcite-block-content-space": "*";
+  /** Specifies the component's background color. */
+  "--calcite-block-background-color": "*";
+  /**
+   * Specifies the component's `heading` background color.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `--calcite-block-background-color` instead.
+   */
+  "--calcite-block-header-background-color": "*";
+  /** Specifies the component's `heading` background color when hovered. */
+  "--calcite-block-header-background-color-hover": "*";
+  /** Specifies the component's `heading` background color when pressed. */
+  "--calcite-block-header-background-color-press": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-block-heading-text-color": "*";
+  /**
+   * When the component is `expanded`, specifies the `heading` text color.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - Use `--calcite-block-heading-text-color` instead.
+   */
+  "--calcite-block-heading-text-color-press": "*";
+  /**
+   * Specifies the padding of the component's `default` slot.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - Use `--calcite-block-content-space` instead.
+   */
+  "--calcite-block-padding": "*";
+  /**
+   * Specifies the component's text color.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0.
+   */
+  "--calcite-block-text-color": "*";
+  /** Specifies the component's `description` text color. */
+  "--calcite-block-description-text-color": "*";
+  /**
+   * Specifies the component's `expandable` icon, `iconStart` and `iconEnd` color.
+   *
+   * @deprecated in v5.1.0, removal target v7.0.0 - Use `--calcite-block-expandable-icon-color`, `--calcite-block-icon-start-color` and `--calcite-block-icon-end-color` instead.
+   */
+  "--calcite-block-icon-color": "*";
+  /**
+   * Specifies the component's `expandable` icon color when hovered.
+   *
+   * @deprecated in v5.1.0, removal target v7.0.0 - Use `--calcite-block-expandable-icon-color-hover` instead.
+   */
+  "--calcite-block-icon-color-hover": "*";
+  /** Specifies the component's `iconStart` color. */
+  "--calcite-block-icon-start-color": "*";
+  /** Specifies the component's `iconEnd` color. */
+  "--calcite-block-icon-end-color": "*";
+  /** Specifies the component's `expandable` icon color. */
+  "--calcite-block-expandable-icon-color": "*";
+  /** Specifies the component's `expandable` icon color when hovered. */
+  "--calcite-block-expandable-icon-color-hover": "*";
+  /**
+   * Specifies the component's `expandable` or `collapsible` (deprecated) icon color.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `--calcite-block-expandable-icon-color` instead.
+   */
+  "--calcite-block-collapsible-icon-color": "*";
+  /**
+   * Specifies the component's `expandable` or `collapsible` (deprecated) icon color when hovered.
+   *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `--calcite-block-expandable-icon-color-hover` instead.
+   */
+  "--calcite-block-collapsible-icon-color-hover": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-block-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-block-content-space] - Specifies the space of the component's `default` slot.
- * @cssproperty [--calcite-block-header-background-color] - Specifies the component's `heading` background color.
- * @cssproperty [--calcite-block-header-background-color-hover] - Specifies the component's `heading` background color when hovered.
- * @cssproperty [--calcite-block-header-background-color-press] - Specifies the component's `heading` background color when pressed.
- * @cssproperty [--calcite-block-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-block-heading-text-color-press] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-block-heading-text-color` instead. When the component is `expanded`, specifies the `heading` text color.
- * @cssproperty [--calcite-block-padding] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-block-content-space` instead. Specifies the padding of the component's `default` slot.
- * @cssproperty [--calcite-block-text-color] - [Deprecated] in v3.3.0, removal target v6.0.0 - Specifies the component's text color.
- * @cssproperty [--calcite-block-description-text-color] - Specifies the component's `description` text color.
- * @cssproperty [--calcite-block-icon-color] - [Deprecated] in v5.1.0, removal target v7.0.0 - Use `--calcite-block-collapsible-icon-color`, `--calcite-block-icon-start-color` and `--calcite-block-icon-end-color` instead. Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color.
- * @cssproperty [--calcite-block-icon-color-hover] - [Deprecated] in v5.1.0, removal target v7.0.0 - Use `--calcite-block-collapsible-icon-color-hover` instead. Specifies the component's `collapsible` icon color when hovered.
- * @cssproperty [--calcite-block-icon-start-color] - Specifies the component's `iconStart` color.
- * @cssproperty [--calcite-block-icon-end-color] - Specifies the component's `iconEnd` color.
- * @cssproperty [--calcite-block-collapsible-icon-color] - Specifies the component's `collapsible` icon color.
- * @cssproperty [--calcite-block-collapsible-icon-color-hover] - Specifies the component's `collapsible` icon color when hovered.
  * @slot  - A slot for adding custom content.
  * @slot [actions-end] - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.
  * @slot [content-end] - A slot for adding non-actionable elements after the component's header text.
  * @slot [content-start] - A slot for adding non-actionable elements before the component's header text.
  * @slot [header-menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.
+ * @slot [children] - A slot for adding `calcite-block` & `calcite-block-group` elements.
  */
 export abstract class Block extends LitElement {
   /**
-   * When `true`, the component is collapsible.
+   * When `true`, the component can be expanded and collapsed.
    *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use the `expandable` property instead.
    * @default false
    */
   accessor collapsible: boolean;
@@ -56,6 +118,12 @@ export abstract class Block extends LitElement {
    * @default false
    */
   accessor dragHandle: boolean;
+  /**
+   * When `true`, the component can be expanded and collapsed.
+   *
+   * @default false
+   */
+  accessor expandable: boolean;
   /**
    * When `true`, expands the component and its contents.
    *
@@ -88,12 +156,16 @@ export abstract class Block extends LitElement {
    * @default "bottom-end"
    */
   accessor menuPlacement: LogicalPlacement;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      collapse?: string;
-      expand?: string;
-      loading?: string;
-      options?: string;
+      collapse?: string | undefined;
+      expand?: string | undefined;
+      loading?: string | undefined;
+      options?: string | undefined;
   };
   /**
    * When `true`, expands the component and its contents.
@@ -103,11 +175,11 @@ export abstract class Block extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -130,6 +202,16 @@ export abstract class Block extends LitElement {
    * @deprecated in v3.0.0, removal target v6.0.0 - Use the `icon-start` property instead.
    */
   accessor status: Status | undefined;
+  /**
+   * Specifies how the component's toggle is displayed, where:
+   *
+   * `"button"` sets the toggle to a selectable header, and
+   *
+   * `"switch"` sets the toggle to a switch.
+   *
+   * @default "button"
+   */
+  accessor toggleDisplay: BlockToggleDisplay;
   /**
    * 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.
    *
@@ -144,17 +226,33 @@ export abstract class Block extends LitElement {
    * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  /**
+   * Fires when the component is requested to be closed and before the closing transition begins.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - No direct replacement. Use `calciteBlockCollapse` to respond when the component's `expanded` state changes.
+   */
   readonly calciteBlockBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  /**
+   * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - No direct replacement. Use `calciteBlockExpand` to respond when the component's `expanded` state changes.
+   */
   readonly calciteBlockBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when the component is closed and animation is complete. */
+  /**
+   * Fires when the component is closed and animation is complete.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `calciteBlockCollapse` instead.
+   */
   readonly calciteBlockClose: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component's content area is collapsed. */
   readonly calciteBlockCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component's content area is expanded. */
   readonly calciteBlockExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when the component is open and animation is complete. */
+  /**
+   * Fires when the component is open and animation is complete.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `calciteBlockExpand` instead.
+   */
   readonly calciteBlockOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the sort handle is requested to be closed and before the closing transition begins. */
   readonly calciteBlockSortHandleBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;

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

@@ -1,39 +1,40 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { ref } from "lit/directives/ref.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements, d as slotChangeHasTextContent } from "../../chunks/dom.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
-import { b as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
+import { d as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { l as logger } from "../../chunks/logger.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { s as styles$2 } from "../../chunks/sortable.js";
 import { s as styles$1 } from "../../chunks/header.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { C as CSS, I as ICONS, S as SLOTS, a as IDS } from "../../chunks/resources5.js";
-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([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .header{gap:var(--calcite-spacing-sm)}:host([scale=s]) .icon-end-container{gap:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm)}:host([scale=s]) .description{font-size:var(--calcite-font-size-xs)}:host([scale=s]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-sm);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-xxs)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) )}:host([scale=m]) .header{gap:var(--calcite-spacing-md)}:host([scale=m]) .icon-end-container{gap:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size)}:host([scale=m]) .description{font-size:var(--calcite-font-size-sm)}:host([scale=m]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-md);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) )}:host([scale=l]) .header{gap:var(--calcite-spacing-lg)}:host([scale=l]) .icon-end-container{gap:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md)}:host([scale=l]) .description{font-size:var(--calcite-font-size)}:host([scale=l]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-lg);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-lg)) )}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;border-color:var(--calcite-block-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{justify-content:flex-start}.header--has-content{padding:var(--calcite-internal-block-header-content-padding)}.header--draggable{padding-inline-start:var(--calcite-spacing-xxs)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto auto auto;grid-template-areas:"handle header icon-end menu actions-end"}.icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.actions-end{align-items:center;display:flex;gap:var(--calcite-internal-block-actions-spacing);grid-area:actions-end;padding-block:var(--calcite-internal-block-actions-spacing);padding-inline-end:var(--calcite-internal-block-actions-spacing)}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;outline-color:transparent;font-family:inherit;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3))}calcite-loader[inline]{align-self:center}calcite-sort-handle{align-self:center;grid-area:handle;margin-block:var(--calcite-internal-block-actions-spacing);padding-inline-start:var(--calcite-spacing-xxs)}.title{display:flex;flex-direction:column}.header .title .heading{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug)}.description{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3));font-weight:var(--calcite-font-weight-regular);line-height:var(--calcite-font-line-height-relative-snug)}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;grid-area:icon-end}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-block-collapsible-icon-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.toggle:hover .toggle-icon{color:var(--calcite-block-collapsible-icon-color-hover, var(--calcite-block-icon-color-hover, var(--calcite-color-text-1)))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%;opacity:0;padding-block:var(--calcite-internal-block-padding-block);padding-inline:var(--calcite-internal-block-padding-inline);transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.content-end,.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}calcite-action-menu{align-self:center;grid-area:menu;margin-inline-end:var(--calcite-internal-block-actions-spacing)}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color, var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)));font-weight:var(--calcite-font-weight-medium)}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .content{opacity:1}@starting-style{:host([expanded]){margin-block-start:0;opacity:0}}:host([expanded][scale=s]){margin-block:var(--calcite-spacing-xxs)}:host([expanded][scale=l]){margin-block:var(--calcite-spacing-md)}:host([hidden]){display:none}[hidden]{display:none}`;
+import { C as CSS, I as ICONS, S as SLOTS, a as IDS } from "../../chunks/resources7.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1));color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .header{gap:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=s]) .icon-end-container{gap:var(--calcite-theme-space-sm, var(--calcite-spacing-sm));padding-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm)}:host([scale=s]) .description{font-size:var(--calcite-font-size-xs)}:host([scale=s]){--calcite-internal-block-actions-spacing: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-internal-block-header-content-padding: var(--calcite-theme-space-sm, var(--calcite-spacing-sm));--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-theme-space-sm, var(--calcite-spacing-sm))) )}:host([scale=m]) .header{gap:var(--calcite-theme-space-md, var(--calcite-spacing-md))}:host([scale=m]) .icon-end-container{gap:var(--calcite-theme-space-md, var(--calcite-spacing-md));padding-inline-end:var(--calcite-theme-space-md, var(--calcite-spacing-md))}:host([scale=m]) .heading{font-size:var(--calcite-font-size)}:host([scale=m]) .description{font-size:var(--calcite-font-size-sm)}:host([scale=m]){--calcite-internal-block-actions-spacing: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-internal-block-header-content-padding: var(--calcite-theme-space-md, var(--calcite-spacing-md));--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-theme-space-sm, var(--calcite-spacing-sm))) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-theme-space-md, var(--calcite-spacing-md))) )}:host([scale=l]) .header{gap:var(--calcite-theme-space-lg, var(--calcite-spacing-lg))}:host([scale=l]) .icon-end-container{gap:var(--calcite-theme-space-lg, var(--calcite-spacing-lg));padding-inline-end:var(--calcite-theme-space-lg, var(--calcite-spacing-lg))}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md)}:host([scale=l]) .description{font-size:var(--calcite-font-size)}:host([scale=l]){--calcite-internal-block-actions-spacing: var(--calcite-theme-space-xs, var(--calcite-spacing-xs));--calcite-internal-block-header-content-padding: var(--calcite-theme-space-lg, var(--calcite-spacing-lg));--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-theme-space-md, var(--calcite-spacing-md))) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-theme-space-lg, var(--calcite-spacing-lg))) )}:host{transition-property:margin;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;transition-timing-function:var(--calcite-animation-easing-function);display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:var(--calcite-border-width-none);border-block-end-width:var(--calcite-border-width-sm);border-style:solid;padding:0;flex-basis:auto;border-color:var(--calcite-block-border-color, var(--calcite-color-border-3));background-color:var(--calcite-block-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{justify-content:flex-start}.header--has-content{padding:var(--calcite-internal-block-header-content-padding)}.header--draggable{padding-inline-start:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto auto auto;grid-template-areas:"handle header icon-end menu actions-end"}.icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.actions-end{align-items:center;display:flex;gap:var(--calcite-internal-block-actions-spacing);grid-area:actions-end;padding-block:var(--calcite-internal-block-actions-spacing);padding-inline-end:var(--calcite-internal-block-actions-spacing)}.toggle{outline-color:transparent;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;margin:0;padding:0;font-family:inherit;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)))}calcite-loader[inline]{align-self:center}calcite-sort-handle{align-self:center;grid-area:handle;margin-block:var(--calcite-internal-block-actions-spacing);padding-inline-start:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}.title{display:flex;flex-direction:column}.header .title .heading{overflow-wrap:break-word;word-break:break-word;padding:0;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-theme-font-weight-regular, var(--calcite-font-weight-normal));line-height:var(--calcite-font-line-height-relative-snug)}.description{overflow-wrap:break-word;word-break:break-word;padding:0;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3));font-weight:var(--calcite-font-weight-regular);line-height:var(--calcite-font-line-height-relative-snug)}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;grid-area:icon-end}.toggle-icon{transition-property:color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;align-self:center;justify-self:end;transition-timing-function:var(--calcite-animation-easing-function);color:var(--calcite-block-expandable-icon-color, var(--calcite-block-collapsible-icon-color, var(--calcite-block-icon-color, var(--calcite-color-text-3))))}.toggle:hover .toggle-icon{color:var(--calcite-block-expandable-icon-color-hover, var(--calcite-block-collapsible-icon-color-hover, var(--calcite-block-icon-color-hover, var(--calcite-color-text-1))))}.container{display:flex;flex-direction:column;block-size:100%;position:relative}.content{flex:1 1 0%;position:relative;min-block-size:0;opacity:0;transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.has-slotted-content{padding-block:var(--calcite-internal-block-padding-block);padding-inline:var(--calcite-internal-block-padding-inline)}.content-end,.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}calcite-action-menu{align-self:center;grid-area:menu;margin-inline-end:var(--calcite-internal-block-actions-spacing)}:host([expanded]){margin-block:var(--calcite-space-sm)}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color, var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)));font-weight:var(--calcite-font-weight-medium)}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .content{opacity:1}@starting-style{:host([expanded]){margin-block-start:0;opacity:0}}:host([expanded][scale=s]){margin-block:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([expanded][scale=l]){margin-block:var(--calcite-theme-space-md, var(--calcite-spacing-md))}:host([hidden]){display:none}[hidden]{display:none}slot[name=children]::slotted(calcite-block){border-block-end-width:0}`;
 class Block extends LitElement {
   constructor() {
     super(...arguments);
     this.transitionProp = "margin-top";
     this.blockSectionChildren = [];
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.hasContentEnd = false;
     this.hasContentStart = false;
     this.hasEndActions = false;
     this.hasMenuActions = false;
-    this.collapsible = false;
+    this.hasContent = false;
     this.disabled = false;
     this.dragDisabled = false;
     this.dragHandle = false;
     this.expanded = false;
+    this.expandable = false;
     this.loading = false;
     this.menuPlacement = defaultEndMenuPlacement;
     this.addToItems = [];
@@ -42,6 +43,7 @@ class Block extends LitElement {
     this.overlayPositioning = "absolute";
     this.scale = "m";
     this.sortHandleOpen = false;
+    this.toggleDisplay = "button";
     this.topLayerDisabled = false;
     this.calciteBlockBeforeClose = createEvent({ cancelable: false });
     this.calciteBlockBeforeOpen = createEvent({ cancelable: false });
@@ -54,14 +56,29 @@ class Block extends LitElement {
     this.calciteBlockSortHandleClose = createEvent({ cancelable: false });
     this.calciteBlockSortHandleOpen = createEvent({ cancelable: false });
     this.calciteBlockToggle = createEvent({ cancelable: false });
+    this.calciteInternalBlockChange = createEvent({
+      cancelable: false
+    });
     this.calciteInternalBlockUpdateSortMenuItems = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasMenuActions: [16, {}, { state: true }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }], label: 1, menuFlipPlacements: [0, {}, { attribute: false }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], sortDisabled: [5, {}, { type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasMenuActions: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandable: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }], label: 1, menuFlipPlacements: [0, {}, { attribute: false }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], sortDisabled: [5, {}, { type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], toggleDisplay: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = [styles$1, styles, styles$2];
   }
+  get collapsible() {
+    return this.expandable;
+  }
+  set collapsible(value) {
+    logger.deprecated("property", {
+      component: this,
+      name: "collapsible",
+      removalVersion: 7,
+      suggested: "expandable"
+    });
+    this.expandable = value;
+  }
   get open() {
     return this.expanded;
   }
@@ -80,6 +97,7 @@ class Block extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.transitionEl = this.el;
+    this.setParentBlockGroupElement();
   }
   load() {
     if (!this.heading && !this.label) {
@@ -103,6 +121,9 @@ class Block extends LitElement {
     if (changes.has("scale") && this.hasUpdated) {
       this.updateBlockSectionScale();
     }
+    if ((changes.has("moveToItems") || changes.has("addToItems")) && this.hasUpdated) {
+      this.setParentBlockGroupElement();
+    }
   }
   onBeforeOpen() {
     this.calciteBlockBeforeOpen.emit();
@@ -145,8 +166,15 @@ class Block extends LitElement {
     this.calciteBlockSortHandleOpen.emit();
   }
   onHeaderClick() {
-    this.expanded = !this.expanded;
     this.calciteBlockToggle.emit();
+    if (this.parentBlockGroupElement) {
+      this.calciteInternalBlockChange.emit({
+        el: this.el,
+        parentElement: this.parentBlockGroupElement
+      });
+    } else {
+      this.expanded = !this.expanded;
+    }
   }
   menuActionsSlotChangeHandler(event) {
     this.hasMenuActions = slotChangeHasAssignedElement(event);
@@ -162,6 +190,7 @@ class Block extends LitElement {
   }
   handleDefaultSlotChange(event) {
     this.blockSectionChildren = slotChangeGetAssignedElements(event, "calcite-block-section");
+    this.hasContent = slotChangeHasTextContent(event) || slotChangeHasAssignedElement(event);
     this.updateBlockSectionScale();
   }
   updateBlockSectionScale() {
@@ -169,6 +198,9 @@ class Block extends LitElement {
       el.scale = this.scale;
     });
   }
+  setParentBlockGroupElement() {
+    this.parentBlockGroupElement = this.el.parentElement?.closest("calcite-block-group");
+  }
   renderScrim() {
     const { loading } = this;
     const defaultSlot = html`<slot @slotchange=${this.handleDefaultSlotChange}></slot>`;
@@ -186,7 +218,7 @@ class Block extends LitElement {
     return html`<div class=${safeClassMap(CSS.actionsEnd)} .hidden=${!this.hasEndActions}><slot name=${SLOTS.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot></div>`;
   }
   renderContentEnd() {
-    return html`<div class=${safeClassMap({ [CSS.iconEndContainer]: !this.iconEnd && !this.collapsible })} .hidden=${!this.hasContentEnd}><div class=${safeClassMap(CSS.contentEnd)}><slot name=${SLOTS.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot></div></div>`;
+    return html`<div class=${safeClassMap({ [CSS.iconEndContainer]: !this.iconEnd && !this.expandable })} .hidden=${!this.hasContentEnd}><div class=${safeClassMap(CSS.contentEnd)}><slot name=${SLOTS.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot></div></div>`;
   }
   renderContentStart() {
     return html`<div class=${safeClassMap(CSS.contentStart)} .hidden=${!this.hasContentStart}><slot name=${SLOTS.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot></div>`;
@@ -206,7 +238,7 @@ class Block extends LitElement {
     return keyed(iconValue, html`<calcite-icon class=${safeClassMap(iconClass)} .flipRtl=${flipRtl} .icon=${iconValue} .scale=${getIconScale(this.scale)}></calcite-icon>`);
   }
   render() {
-    const { collapsible, loading, expanded, label, heading, messages, description, menuFlipPlacements, menuPlacement, moveToItems, addToItems, setPosition, setSize, dragDisabled, sortDisabled, iconEnd, hasContentEnd, hasContentStart, iconStart, status } = this;
+    const { expandable, loading, expanded, label, heading, messages, description, menuFlipPlacements, menuPlacement, moveToItems, addToItems, setPosition, setSize, dragDisabled, sortDisabled, iconEnd, hasContentEnd, hasContentStart, iconStart, status } = this;
     const toggleLabel = expanded ? messages.collapse : messages.expand;
     const headerHasContent = !!(heading || description || hasContentEnd || hasContentStart || iconStart || loading || status);
     const headerContent = html`<header class=${safeClassMap({
@@ -215,10 +247,13 @@ class Block extends LitElement {
       [CSS.headerDraggable]: this.dragHandle
     })} id=${IDS.header}>${this.renderIcon("start")}${this.renderContentStart()}${this.renderLoaderStatusIcon()}${this.renderTitle()}</header>`;
     const collapseIcon = expanded ? ICONS.expanded : ICONS.collapsed;
-    const headerNode = html`<div class=${safeClassMap(CSS.headerContainer)}>${this.dragHandle ? html`<calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${heading || label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle>` : null}${collapsible ? html`<button aria-controls=${IDS.content} aria-describedby=${IDS.header} .ariaExpanded=${collapsible ? expanded : void 0} class=${safeClassMap(CSS.toggle)} id=${IDS.toggle} @click=${this.onHeaderClick} title=${toggleLabel ?? nothing}>${headerContent}<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}<calcite-icon class=${safeClassMap(CSS.toggleIcon)} .icon=${collapseIcon} .scale=${getIconScale(this.scale)}></calcite-icon></div></button>` : headerContent}${iconEnd && !collapsible ? html`<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}</div>` : !iconEnd && !collapsible ? this.renderContentEnd() : null}<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!this.hasMenuActions} .label=${messages.options} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled}><slot name=${SLOTS.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<article aria-label=${label ?? nothing} .ariaBusy=${loading} class=${safeClassMap({
+    const headerNode = html`<div class=${safeClassMap(CSS.headerContainer)}>${this.dragHandle ? html`<calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${heading || label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle>` : null}${expandable ? html`<button aria-controls=${IDS.content} aria-describedby=${IDS.header} .ariaExpanded=${expandable ? expanded : void 0} class=${safeClassMap(CSS.toggle)} id=${IDS.toggle} @click=${this.onHeaderClick} title=${toggleLabel ?? nothing} type=button>${headerContent}<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}${this.toggleDisplay === "switch" ? html`<calcite-switch .checked=${expanded} .disabled=${this.disabled} inert .label=${toggleLabel} .scale=${this.scale}></calcite-switch>` : html`<calcite-icon class=${safeClassMap(CSS.toggleIcon)} .icon=${collapseIcon} .scale=${getIconScale(this.scale)}></calcite-icon>`}</div></button>` : headerContent}${iconEnd && !expandable ? html`<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}</div>` : !iconEnd && !expandable ? this.renderContentEnd() : null}<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!this.hasMenuActions} .label=${messages.options} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled}><slot name=${SLOTS.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<article aria-label=${label ?? nothing} .ariaBusy=${toAriaBoolean(loading, void 0)} class=${safeClassMap({
       [CSS.container]: true
-    })}>${headerNode}<section aria-labelledby=${IDS.toggle} class=${safeClassMap(CSS.content)} .hidden=${!expanded} id=${IDS.content}>${this.renderScrim()}</section></article>` });
+    })}>${headerNode}<section aria-labelledby=${IDS.toggle} class=${safeClassMap({
+      [CSS.content]: true,
+      [CSS.hasSlottedContent]: this.hasContent || loading
+    })} .hidden=${!expanded} id=${IDS.content}>${this.renderScrim()}</section><slot .hidden=${!expanded} name=${SLOTS.children}></slot></article>` });
   }
 }
 customElement("calcite-block", Block);

package/dist/components/calcite-block/index.js

@@ -2,5 +2,6 @@ import "../calcite-scrim/index.js";
 import "../calcite-loader/index.js";
 import "../calcite-icon/index.js";
 import "../calcite-sort-handle/index.js";
+import "../calcite-switch/index.js";
 import "../calcite-action-menu/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-block/types.d.ts

@@ -0,0 +1 @@
+export type BlockToggleDisplay = "button" | "switch";

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

@@ -1,14 +1,14 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
-import type { BlockDragDetail } from "./interfaces.js";
+import type { Scale, SelectionMode } from "../types.js";
+import type { BlockDragDetail } from "./types.js";
 
 /** @slot  - A slot for adding `calcite-block` elements. */
 export abstract class BlockGroup extends LitElement {
-  /** When provided, the method will be called to determine whether the element can move from the component. */
-  accessor canPull: (detail: BlockDragDetail) => boolean | "clone";
-  /** When provided, the method will be called to determine whether the element can be added from another component. */
-  accessor canPut: (detail: BlockDragDetail) => boolean;
+  /** When provided, the method will be called to determine whether the element can be moved from the component. */
+  accessor canPull: ((detail: BlockDragDetail) => boolean | "clone") | undefined;
+  /** When provided, the method will be called to determine whether the element can be added from another `calcite-block-group`. */
+  accessor canPut: ((detail: BlockDragDetail) => boolean) | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -21,10 +21,22 @@ export abstract class BlockGroup extends LitElement {
    * @default false
    */
   accessor dragEnabled: boolean;
+  /**
+   * Specifies the selection mode of the component, where:
+   *
+   * `"multiple"` allows any number of selections,
+   *
+   * `"single"` allows only one selection, and
+   *
+   * `"single-persist"` allows one selection and prevents de-selection.
+   *
+   * @default "multiple"
+   */
+  accessor expandMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>;
   /**
    * Specifies the component's group identifier.
    *
-   * To drag elements from one group into another, both groups must have the same group value.
+   * To drag elements from one `calcite-block-group` into another, both must have the same group value.
    */
   accessor group: string | undefined;
   /**

package/dist/components/calcite-block-group/customElement.js

@@ -1,25 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
+import { D as DEBOUNCE, C as CSS_UTILITY, 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 { c as createObserver } from "../../chunks/observers.js";
-import { e as getRootNode, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { g as getRootNode, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useSortable } from "../../chunks/useSortable.js";
-import { i as isBlock } from "../../chunks/resources5.js";
+import { i as isTag } from "../../chunks/resources3.js";
+import { s as styles$1 } from "../../chunks/screen-reader.js";
+import { i as isBlock } from "../../chunks/resources7.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 const CSS = {
   container: "container",
   groupContainer: "group-container",
-  scrim: "scrim",
-  assistiveText: "assistive-text"
+  scrim: "scrim"
 };
 const blockGroupSelector = "calcite-block-group";
 const blockSelector = "calcite-block";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.container{position:relative}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const isBlockGroup = isTag("calcite-block-group");
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.container{position:relative}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([slot=children]) slot::slotted(calcite-block){border-block-end-width:0}`;
 function updateBlockChildren(blockChildren) {
   blockChildren.forEach((block) => {
     block.setPosition = blockChildren.indexOf(block) + 1;
@@ -36,7 +39,7 @@ class BlockGroup extends LitElement {
     });
     this.blockAndGroups = [];
     this.cancelable = useCancelable()(this);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.sortable = useSortable()(this);
     this.updateBlockItemsDebounced = debounce(this.updateBlockItems, DEBOUNCE.nextTick);
     this.interactiveContainer = useInteractive(this);
@@ -45,6 +48,7 @@ class BlockGroup extends LitElement {
     this.dragEnabled = false;
     this.loading = false;
     this.scale = "m";
+    this.expandMode = "multiple";
     this.sortDisabled = false;
     this.calciteBlockGroupDragEnd = createEvent({ cancelable: false });
     this.calciteBlockGroupDragStart = createEvent({ cancelable: false });
@@ -55,12 +59,13 @@ class BlockGroup extends LitElement {
     this.listen("calciteSortHandleReorder", this.handleSortReorder);
     this.listen("calciteSortHandleMove", this.handleSortMove);
     this.listen("calciteSortHandleAdd", this.handleSortAdd);
+    this.listen("calciteInternalBlockChange", this.updateBlockChildrenExpanded);
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], group: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], group: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], expandMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
-    this.styles = styles;
+    this.styles = [styles, styles$1];
   }
   emitOrderChangeEvent(detail) {
     this.calciteBlockGroupOrderChange.emit(detail);
@@ -185,8 +190,9 @@ class BlockGroup extends LitElement {
     this.blockAndGroups = slotChangeGetAssignedElements(event).filter((el) => {
       if (isBlock(el)) {
         blockChildren.push(el);
+        return true;
       }
-      return el.matches(blockSelector) || el.matches(blockGroupSelector);
+      return isBlockGroup(el);
     });
     updateBlockChildren(blockChildren);
     this.updateBlockAndGroupScale();
@@ -196,6 +202,41 @@ class BlockGroup extends LitElement {
       el.scale = this.scale;
     });
   }
+  updateBlockChildrenExpanded(event) {
+    const { el, parentElement } = event.detail;
+    if (parentElement === this.el) {
+      event.stopPropagation();
+      const blockChildren = this.blockAndGroups.filter((item) => isBlock(item));
+      switch (this.expandMode) {
+        case "multiple":
+          el.expanded = !el.expanded;
+          break;
+        case "single":
+          el.expanded = !el.expanded;
+          this.collapseAllBlockElements(blockChildren, el);
+          break;
+        case "single-persist":
+          if (!el.expanded) {
+            el.expanded = true;
+            this.collapseAllBlockElements(blockChildren, el);
+          } else if (el.expanded) {
+            blockChildren.forEach((item) => {
+              if (item.contains(el) && item !== el) {
+                el.expanded = false;
+              }
+            });
+          }
+          break;
+      }
+    }
+  }
+  collapseAllBlockElements(blockChildren, el) {
+    blockChildren.forEach((item) => {
+      if (item !== el && !item.contains(el)) {
+        item.expanded = false;
+      }
+    });
+  }
   validateSortMenuItem({ fromEl, toEl, dragEl, newIndex, oldIndex, type }) {
     if (!fromEl || !toEl || toEl === fromEl || dragEl.contains(toEl)) {
       return false;
@@ -310,7 +351,7 @@ class BlockGroup extends LitElement {
   }
   render() {
     const { loading, label } = this;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.groupContainer)} role=group><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS_UTILITY.screenReaderText)}>${this.assistiveText}</span>` : null}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${toAriaBoolean(loading, void 0)} .ariaLabel=${label || ""} class=${safeClassMap(CSS.groupContainer)} role=group><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>` });
   }
 }
 customElement("calcite-block-group", BlockGroup);