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

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

@@ -1,159 +1,184 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { HeadingLevel } from '../functional/Heading';
-import { FlipContext, Scale, Status } from '../interfaces';
-import { FlipPlacement, LogicalPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { IconName } from '../calcite-icon/interfaces';
-import { SortMenuItem } from '../calcite-sort-handle/interfaces';
+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 { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @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]  use `--calcite-block-heading-text-color` instead - When the component is `expanded`, specifies the `heading` text color.
+ * @cssproperty [--calcite-block-padding] - [Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot.
+ * @cssproperty [--calcite-block-text-color] - [Deprecated] Specifies the component's text color.
+ * @cssproperty [--calcite-block-description-text-color] - Specifies the component's `description` text color.
+ * @cssproperty [--calcite-block-icon-color] - Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color.
+ * @cssproperty [--calcite-block-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 content of the component.
  * @slot [content-start] - A slot for adding non-actionable elements before content of the component.
  * @slot [header-menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.
  */
-export declare class Block extends LitElement {
-    /**
-     * When `true`, the component is collapsible.
-     *
-     * @default false
-     */
-    collapsible: boolean;
-    /** A description for the component, which displays below the heading. */
-    description: string;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * When `true`, and a parent Block Group is `dragEnabled`, the component is not draggable.
-     *
-     * @default false
-     */
-    dragDisabled: boolean;
-    /**
-     * When `true`, the component displays a draggable button.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - No longer necessary. Use Block Group for draggable functionality.
-     * @default false
-     */
-    dragHandle: boolean;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /** The component header text. */
-    heading: string;
-    /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
-    headingLevel: HeadingLevel;
-    /** Specifies an icon to display at the end of the component. */
-    iconEnd: IconName;
-    /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-    iconFlipRtl: FlipContext;
-    /** Specifies an icon to display at the start of the component. */
-    iconStart: IconName;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /** Specifies an accessible name for the component. */
-    label: string;
-    /** Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. */
-    menuFlipPlacements: FlipPlacement[];
-    /**
-     * Determines where the action menu will be positioned.
-     *
-     * @default "bottom-end"
-     */
-    menuPlacement: LogicalPlacement;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @deprecated in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.
-     * @default false
-     */
-    get open(): boolean;
-    set open(value: 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;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * When `true`, displays and positions the sort handle.
-     *
-     * @default false
-     */
-    sortHandleOpen: boolean;
-    /**
-     * Displays a status-related indicator icon.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `icon-start` property instead.
-     */
-    status: Status;
-    /**
-     * Sets focus on the component's first tabbable 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 is requested to be closed and before the closing transition begins. */
-    readonly calciteBlockBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteBlockBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calciteBlockClose: TargetedEvent<this, void>;
-    /** Fires when the component's content area is collapsed. */
-    readonly calciteBlockCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteBlockExpand: TargetedEvent<this, void>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calciteBlockOpen: TargetedEvent<this, void>;
-    /** Fires when the sort handle is requested to be closed and before the closing transition begins. */
-    readonly calciteBlockSortHandleBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteBlockSortHandleBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the sort handle is closed and animation is complete. */
-    readonly calciteBlockSortHandleClose: TargetedEvent<this, void>;
-    /** Fires when the sort handle is open and animation is complete. */
-    readonly calciteBlockSortHandleOpen: TargetedEvent<this, void>;
-    /**
-     * Fires when the component's header is clicked.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.
-     */
-    readonly calciteBlockToggle: TargetedEvent<this, void>;
-    private messages: Partial<{
-        collapse: string;
-        expand: string;
-        loading: string;
-        options: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        collapse: string;
-        expand: string;
-        loading: string;
-        options: string;
-    }>;
-}
+export abstract class Block extends LitElement {
+  /**
+   * When `true`, the component is collapsible.
+   *
+   * @default false
+   */
+  accessor collapsible: boolean;
+  /** Specifies a description for the component. Displays below the heading. */
+  accessor description: string;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When `true`, and a parent `calcite-block-group` is `dragEnabled`, the component is not draggable.
+   *
+   * @default false
+   */
+  accessor dragDisabled: boolean;
+  /**
+   * When `true`, the component displays a draggable button.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - No longer necessary. Use Block Group for draggable functionality.
+   * @default false
+   */
+  accessor dragHandle: boolean;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /** Specifies the component's heading text. */
+  accessor heading: string;
+  /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
+  accessor headingLevel: HeadingLevel;
+  /** Specifies an icon to display at the end of the component. */
+  accessor iconEnd: IconName;
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  accessor iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  accessor iconStart: IconName;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  accessor menuFlipPlacements: FlipPlacement[];
+  /**
+   * Determines where the action menu will be positioned.
+   *
+   * @default "bottom-end"
+   */
+  accessor menuPlacement: LogicalPlacement;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      collapse?: string;
+      expand?: string;
+      loading?: string;
+      options?: string;
+  };
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.
+   * @default false
+   */
+  accessor open: 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 size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * When `true`, displays and positions the sort handle.
+   *
+   * @default false
+   */
+  accessor sortHandleOpen: boolean;
+  /**
+   * Displays a status-related indicator icon.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `icon-start` property instead.
+   */
+  accessor status: Status;
+  /**
+   * 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 tabbable 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 is requested to be closed and before the closing transition begins. */
+  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. */
+  readonly calciteBlockBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  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. */
+  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>;
+  /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */
+  readonly calciteBlockSortHandleBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the sort handle is closed and animation is complete. */
+  readonly calciteBlockSortHandleClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the sort handle is open and animation is complete. */
+  readonly calciteBlockSortHandleOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires when the component's header is clicked.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.
+   */
+  readonly calciteBlockToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteBlockBeforeClose: Block["calciteBlockBeforeClose"]["detail"];
+    calciteBlockBeforeOpen: Block["calciteBlockBeforeOpen"]["detail"];
+    calciteBlockClose: Block["calciteBlockClose"]["detail"];
+    calciteBlockCollapse: Block["calciteBlockCollapse"]["detail"];
+    calciteBlockExpand: Block["calciteBlockExpand"]["detail"];
+    calciteBlockOpen: Block["calciteBlockOpen"]["detail"];
+    calciteBlockSortHandleBeforeClose: Block["calciteBlockSortHandleBeforeClose"]["detail"];
+    calciteBlockSortHandleBeforeOpen: Block["calciteBlockSortHandleBeforeOpen"]["detail"];
+    calciteBlockSortHandleClose: Block["calciteBlockSortHandleClose"]["detail"];
+    calciteBlockSortHandleOpen: Block["calciteBlockSortHandleOpen"]["detail"];
+    calciteBlockToggle: Block["calciteBlockToggle"]["detail"];
+  };
+}

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

@@ -1,19 +1,22 @@
+/* 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.80 */
 import { 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 { a as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
+import { s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements } 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 { e as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
+import { b 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 { 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";
 const IDS = {
   content: "content",
   toggle: "toggle",
@@ -23,11 +26,13 @@ const CSS = {
   actionsEnd: "actions-end",
   container: "container",
   content: "content",
+  contentEnd: "content-end",
   contentStart: "content-start",
   description: "description",
   header: "header",
   headerContainer: "header-container",
   headerHasContent: "header--has-content",
+  headerDraggable: "header--draggable",
   heading: "heading",
   icon: "icon",
   iconStart: "icon--start",
@@ -42,6 +47,7 @@ const CSS = {
 };
 const SLOTS = {
   actionsEnd: "actions-end",
+  contentEnd: "content-end",
   contentStart: "content-start",
   headerMenuActions: "header-menu-actions"
 };
@@ -51,7 +57,7 @@ const ICONS = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle"
 };
-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([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]) .header--has-content{padding: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-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]) .header--has-content{padding: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-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]) .header--has-content{padding: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-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,.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,.icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.actions-end{grid-area:actions-end}.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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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{grid-area:handle}.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-icon-color, var(--calcite-color-text-3))}.toggle:hover .toggle-icon{color: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%}@keyframes in{0%{opacity:0}to{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-internal-block-padding-block);padding-inline:var(--calcite-internal-block-padding-inline)}.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}: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,:host([expanded]) .icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-1))}: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}`;
+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,.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-icon-color, var(--calcite-color-text-3))}.toggle:hover .toggle-icon{color: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%}@keyframes in{0%{opacity:0}to{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;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:.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,:host([expanded]) .icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-1))}: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}`;
 class Block extends LitElement {
   constructor() {
     super(...arguments);
@@ -59,6 +65,8 @@ class Block extends LitElement {
     this.blockSectionChildren = [];
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
+    this.hasContentEnd = false;
     this.hasContentStart = false;
     this.hasEndActions = false;
     this.hasMenuActions = false;
@@ -77,7 +85,7 @@ class Block extends LitElement {
     this.setPosition = null;
     this.setSize = null;
     this.sortHandleOpen = false;
-    this.calciteInternalBlockUpdateSortMenuItems = createEvent({ cancelable: false });
+    this.topLayerDisabled = false;
     this.calciteBlockBeforeClose = createEvent({ cancelable: false });
     this.calciteBlockBeforeOpen = createEvent({ cancelable: false });
     this.calciteBlockClose = createEvent({ cancelable: false });
@@ -89,9 +97,10 @@ class Block extends LitElement {
     this.calciteBlockSortHandleClose = createEvent({ cancelable: false });
     this.calciteBlockSortHandleOpen = createEvent({ cancelable: false });
     this.calciteBlockToggle = createEvent({ cancelable: false });
+    this.calciteInternalBlockUpdateSortMenuItems = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { 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 }] };
+    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 }] };
   }
   static {
     this.styles = [styles$1, styles, styles$2];
@@ -101,8 +110,9 @@ class Block extends LitElement {
   }
   set open(value) {
     logger.deprecated("property", {
+      component: this,
       name: "open",
-      removalVersion: 4,
+      removalVersion: 5,
       suggested: "expanded"
     });
     this.expanded = value;
@@ -137,9 +147,6 @@ class Block extends LitElement {
       this.updateBlockSectionScale();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   onBeforeOpen() {
     this.calciteBlockBeforeOpen.emit();
   }
@@ -190,6 +197,9 @@ class Block extends LitElement {
   actionsEndSlotChangeHandler(event) {
     this.hasEndActions = slotChangeHasAssignedElement(event);
   }
+  handleContentEndSlotChange(event) {
+    this.hasContentEnd = slotChangeHasAssignedElement(event);
+  }
   handleContentStartSlotChange(event) {
     this.hasContentStart = slotChangeHasAssignedElement(event);
   }
@@ -218,6 +228,9 @@ class Block extends LitElement {
   renderActionsEnd() {
     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>`;
+  }
   renderContentStart() {
     return html`<div class=${safeClassMap(CSS.contentStart)} .hidden=${!this.hasContentStart}><slot name=${SLOTS.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot></div>`;
   }
@@ -236,16 +249,17 @@ 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, hasContentStart, iconStart } = this;
+    const { collapsible, loading, expanded, label, heading, messages, description, menuFlipPlacements, menuPlacement, moveToItems, addToItems, setPosition, setSize, dragDisabled, sortDisabled, iconEnd, hasContentEnd, hasContentStart, iconStart } = this;
     const toggleLabel = expanded ? messages.collapse : messages.expand;
-    const headerHasContent = !!(heading || description || hasContentStart || iconStart || loading || status);
+    const headerHasContent = !!(heading || description || hasContentEnd || hasContentStart || iconStart || loading || status);
     const headerContent = html`<header class=${safeClassMap({
       [CSS.header]: true,
-      [CSS.headerHasContent]: headerHasContent
+      [CSS.headerHasContent]: headerHasContent,
+      [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} ${ref(this.setSortHandleEl)}></calcite-sort-handle>` : null}${collapsible ? html`<button aria-controls=${IDS.content} aria-describedby=${IDS.header} .ariaExpanded=${collapsible ? expanded : null} class=${safeClassMap(CSS.toggle)} id=${IDS.toggle} @click=${this.onHeaderClick} title=${toggleLabel ?? nothing}>${headerContent}<div class=${safeClassMap(CSS.iconEndContainer)}>${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.renderIcon("end")}</div>` : null}<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!this.hasMenuActions} .label=${messages.options} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${this.scale}><slot name=${SLOTS.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
-    return 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}${collapsible ? html`<button aria-controls=${IDS.content} aria-describedby=${IDS.header} .ariaExpanded=${collapsible ? expanded : null} 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({
       [CSS.container]: true
     })}>${headerNode}<section aria-labelledby=${IDS.toggle} class=${safeClassMap(CSS.content)} .hidden=${!expanded} id=${IDS.content}>${this.renderScrim()}</section></article>` });
   }

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

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