@esri/calcite-components 5.0.0-next.9 → 5.0.0-next.90

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

@@ -1,81 +1,81 @@
 /// <reference path="../../index.d.ts" />
-import { default as Sortable } from 'sortablejs';
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { SortableComponent } from '../../utils/sortableComponent';
-import { SortMenuItem } from '../calcite-sort-handle/interfaces';
-import { Scale } from '../interfaces';
-import { BlockDragDetail } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
+import type { BlockDragDetail } from "./interfaces.js";
 
 /** @slot  - A slot for adding `calcite-block` elements. */
-export declare class BlockGroup extends LitElement {
-    /** When provided, the method will be called to determine whether the element can move from the component. */
-    canPull: (detail: BlockDragDetail) => boolean | "clone";
-    /** When provided, the method will be called to determine whether the element can be added from another component. */
-    canPut: (detail: BlockDragDetail) => boolean;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * When `true`, `calcite-block`s are sortable via a draggable button.
-     *
-     * @default false
-     */
-    dragEnabled: boolean;
-    /**
-     * The block-group's group identifier.
-     *
-     * To drag elements from one group into another, both groups must have the same group value.
-     */
-    group?: string;
-    /**
-     * Specifies an accessible name for the component.
-     *
-     * When `dragEnabled` is `true` and multiple group sorting is enabled with `group`, specifies the component's name for dragging between groups.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.
-     *
-     * @default false
-     */
-    sortDisabled: boolean;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     * @returns
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the component's dragging has ended. */
-    readonly calciteBlockGroupDragEnd: TargetedEvent<this, BlockDragDetail>;
-    /** Fires when the component's dragging has started. */
-    readonly calciteBlockGroupDragStart: TargetedEvent<this, BlockDragDetail>;
-    /** Fires when the component's item order changes. */
-    readonly calciteBlockGroupOrderChange: TargetedEvent<this, BlockDragDetail>;
-    /**
-     * Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy.
-     *
-     * @deprecated in v3.3.0, removal target v6.0.0 - No longer necessary.
-     */
-    readonly calciteBlockGroupMoveHalt: TargetedEvent<this, BlockDragDetail>;
-}
+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 `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When `true`, `calcite-block`s are sortable via a draggable button.
+   *
+   * @default false
+   */
+  accessor dragEnabled: boolean;
+  /**
+   * Specifies the component's group identifier.
+   *
+   * To drag elements from one group into another, both groups must have the same group value.
+   */
+  accessor group: string | undefined;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * When `dragEnabled` is `true` and multiple group sorting is enabled with `group`, specifies the component's name for dragging between groups.
+   *
+   * @required
+   */
+  accessor label: string;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.
+   *
+   * @default false
+   */
+  accessor sortDisabled: boolean;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the component's dragging has ended. */
+  readonly calciteBlockGroupDragEnd: import("@arcgis/lumina").TargetedEvent<this, BlockDragDetail>;
+  /** Fires when the component's dragging has started. */
+  readonly calciteBlockGroupDragStart: import("@arcgis/lumina").TargetedEvent<this, BlockDragDetail>;
+  /**
+   * Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - No longer necessary.
+   */
+  readonly calciteBlockGroupMoveHalt: import("@arcgis/lumina").TargetedEvent<this, BlockDragDetail>;
+  /** Fires when the component's item order changes. */
+  readonly calciteBlockGroupOrderChange: import("@arcgis/lumina").TargetedEvent<this, BlockDragDetail>;
+  readonly "@eventTypes": {
+    calciteBlockGroupDragEnd: BlockGroup["calciteBlockGroupDragEnd"]["detail"];
+    calciteBlockGroupDragStart: BlockGroup["calciteBlockGroupDragStart"]["detail"];
+    calciteBlockGroupMoveHalt: BlockGroup["calciteBlockGroupMoveHalt"]["detail"];
+    calciteBlockGroupOrderChange: BlockGroup["calciteBlockGroupOrderChange"]["detail"];
+  };
+}

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

@@ -1,14 +1,17 @@
+/* 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.90 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
-import { m as getRootNode, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { h 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 useCancelable } from "../../chunks/useCancelable.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 function isBlock(element) {
   return element.tagName === "CALCITE-BLOCK";
 }
@@ -20,7 +23,7 @@ const CSS = {
 };
 const blockGroupSelector = "calcite-block-group";
 const blockSelector = "calcite-block";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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 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}`;
 function updateBlockChildren(blockChildren) {
   blockChildren.forEach((block) => {
     block.setPosition = blockChildren.indexOf(block) + 1;
@@ -39,6 +42,7 @@ class BlockGroup extends LitElement {
     this.cancelable = useCancelable()(this);
     this.focusSetter = useSetFocus()(this);
     this.updateBlockItemsDebounced = debounce(this.updateBlockItems, DEBOUNCE.nextTick);
+    this.interactiveContainer = useInteractive(this);
     this.sortHandleMenuItems = [];
     this.disabled = false;
     this.dragEnabled = false;
@@ -47,8 +51,8 @@ class BlockGroup extends LitElement {
     this.sortDisabled = false;
     this.calciteBlockGroupDragEnd = createEvent({ cancelable: false });
     this.calciteBlockGroupDragStart = createEvent({ cancelable: false });
-    this.calciteBlockGroupOrderChange = createEvent({ cancelable: false });
     this.calciteBlockGroupMoveHalt = createEvent({ cancelable: false });
+    this.calciteBlockGroupOrderChange = createEvent({ cancelable: false });
     this.listen("calciteInternalAssistiveTextChange", this.handleCalciteInternalAssistiveTextChange);
     this.listen("calciteBlockSortHandleBeforeOpen", this.updateBlockItemsDebounced);
     this.listen("calciteSortHandleReorder", this.handleSortReorder);
@@ -61,12 +65,12 @@ class BlockGroup extends LitElement {
   static {
     this.styles = styles;
   }
-  async setFocus(options) {
-    return this.focusSetter(() => this.el, options);
-  }
   emitOrderChangeEvent(detail) {
     this.calciteBlockGroupOrderChange.emit(detail);
   }
+  async setFocus(options) {
+    return this.focusSetter(() => this.el, options);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.connectObserver();
@@ -83,9 +87,6 @@ class BlockGroup extends LitElement {
       this.updateBlockAndGroupScale();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.disconnectObserver();
@@ -320,7 +321,7 @@ class BlockGroup extends LitElement {
   }
   render() {
     const { loading, label } = this;
-    return 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.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>` });
   }
 }
 customElement("calcite-block-group", BlockGroup);

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

@@ -1,2 +1 @@
-import "../calcite-scrim/index.js";
 export * from "./customElement.js";

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

@@ -1,14 +1,9 @@
-import { DragDetail, MoveDetail } from '../../utils/sortableComponent';
-import { Block } from '../calcite-block/customElement.js';
-import { BlockGroup } from './customElement.js';
+import type { DragDetail } from "../../utils/sortableComponent.js";
+import type { Block } from "../calcite-block/customElement.js";
+import type { BlockGroup } from "./customElement.js";
+
 export interface BlockDragDetail extends DragDetail {
-    toEl: HTMLCalciteBlockGroupElement;
-    fromEl: HTMLCalciteBlockGroupElement;
-    dragEl: HTMLCalciteBlockElement;
-}
-export interface BlockMoveDetail extends MoveDetail {
-    toEl: HTMLCalciteBlockGroupElement;
-    fromEl: HTMLCalciteBlockGroupElement;
-    dragEl: HTMLCalciteBlockElement;
-    relatedEl: HTMLCalciteBlockElement;
-}
+  toEl: BlockGroup;
+  fromEl: BlockGroup;
+  dragEl: Block;
+}

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

@@ -1,76 +1,83 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { PropertyValues } from 'lit';
-import { FlipContext, Scale, Status } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { BlockSectionToggleDisplay } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipContext, Scale, Status } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
+import type { BlockSectionToggleDisplay } from "./interfaces.js";
 
-/** @slot  - A slot for adding custom content. */
-export declare class BlockSection extends LitElement {
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /** 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;
-    /** 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 `expanded` prop instead.
-     * @default false
-     */
-    get open(): boolean;
-    set open(value: boolean);
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Displays a status-related indicator icon.
-     *
-     * @deprecated in v2.8.1, removal target v6.0.0 - Use `icon-start` instead.
-     */
-    status: Status;
-    /** The component header text. */
-    text: string;
-    /**
-     * 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"
-     */
-    toggleDisplay: BlockSectionToggleDisplay;
-    /**
-     * 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's content area is collapsed. */
-    readonly calciteBlockSectionCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteBlockSectionExpand: TargetedEvent<this, void>;
-    /** Fires when the header has been clicked. */
-    readonly calciteBlockSectionToggle: TargetedEvent<this, void>;
-    private messages: Partial<{
-        collapse: string;
-        expand: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        collapse: string;
-        expand: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-block-section-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-block-section-border-color] - Specifies the component's border color. When `expanded`, applies to the component's bottom border.
+ * @cssproperty [--calcite-block-section-header-text-color] - Specifies the component's header text color.
+ * @cssproperty [--calcite-block-section-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-block-section-text-color-hover] - Specifies the component's text color on hover.
+ * @cssproperty [--calcite-block-section-content-space] - Specifies the padding of the component's content in `default` slot.
+ * @slot  - A slot for adding custom content.
+ */
+export abstract class BlockSection extends LitElement {
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /** 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;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      collapse?: string;
+      expand?: string;
+  };
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `expanded` prop instead.
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Displays a status-related indicator icon.
+   *
+   * @deprecated in v2.8.1, removal target v6.0.0 - Use `icon-start` instead.
+   */
+  accessor status: Status;
+  /** The component header text. */
+  accessor text: string;
+  /**
+   * 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: BlockSectionToggleDisplay;
+  /**
+   * 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's content area is collapsed. */
+  readonly calciteBlockSectionCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteBlockSectionExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the header has been clicked. */
+  readonly calciteBlockSectionToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteBlockSectionCollapse: BlockSection["calciteBlockSectionCollapse"]["detail"];
+    calciteBlockSectionExpand: BlockSection["calciteBlockSectionExpand"]["detail"];
+    calciteBlockSectionToggle: BlockSection["calciteBlockSectionToggle"]["detail"];
+  };
+}

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

@@ -1,8 +1,11 @@
+/* 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.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
 import { css, html } from "lit";
-import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -33,7 +36,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;display:block;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2))}:host([expanded]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([expanded]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([expanded]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host(:last-child){border-block-end-width:0px}:host([scale=s]) .toggle{padding-block:var(--calcite-spacing-xxs);gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-sm)}:host([scale=s]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-xxs))}:host([scale=m]) .toggle{padding-block:var(--calcite-spacing-sm);gap:var(--calcite-spacing-md);font-size:var(--calcite-font-size)}:host([scale=m]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-sm))}:host([scale=l]) .toggle{padding-block:var(--calcite-spacing-md);gap:var(--calcite-spacing-lg);font-size:var(--calcite-font-size-md)}:host([scale=l]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-md))}.toggle{display:flex;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;border-width:0px;outline-color:transparent;font-family:inherit;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));font-weight:var(--calcite-font-weight-regular);padding-inline:0;line-height:var(--calcite-font-line-height-relative-snug)}.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);z-index:var(--calcite-z-index)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container .icon--end:hover,.toggle-container .icon--start:hover,.toggle-container .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;display:block;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2))}:host([expanded]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([expanded]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .icon--end,:host([expanded]) .icon--start{color:var(--calcite-block-section-text-color, var(--calcite-color-text-1))}:host([expanded]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([expanded]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-brand-hover)}:host(:last-child){border-block-end-width:0px}:host([scale=s]) .toggle{padding-block:var(--calcite-spacing-xxs);gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-sm)}:host([scale=s]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-xxs))}:host([scale=m]) .toggle{padding-block:var(--calcite-spacing-sm);gap:var(--calcite-spacing-md);font-size:var(--calcite-font-size)}:host([scale=m]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-sm))}:host([scale=l]) .toggle{padding-block:var(--calcite-spacing-md);gap:var(--calcite-spacing-lg);font-size:var(--calcite-font-size-md)}:host([scale=l]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-md))}.toggle{display:flex;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;border-width:0px;outline-color:transparent;font-family:inherit;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));font-weight:var(--calcite-font-weight-regular);padding-inline:0;line-height:var(--calcite-font-line-height-relative-snug)}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));z-index:var(--calcite-z-index)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container:hover .chevron-icon{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-text-3)}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`;
 class BlockSection extends LitElement {
   constructor() {
     super(...arguments);
@@ -58,8 +61,9 @@ class BlockSection extends LitElement {
   }
   set open(value) {
     logger.deprecated("property", {
+      component: this,
       name: "open",
-      removalVersion: 4,
+      removalVersion: 5,
       suggested: "expanded"
     });
     this.expanded = value;

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

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

package/dist/components/calcite-block-section/interfaces.d.ts

@@ -1 +1 @@
-export type BlockSectionToggleDisplay = "button" | "switch";
+export type BlockSectionToggleDisplay = "button" | "switch";