@esri/calcite-components 5.2.0-next.9 → 5.2.0-next.91

package/dist/components/calcite-autocomplete-item/customElement.d.ts

@@ -1,13 +1,22 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-autocomplete-background-color": "*";
+  /** Specifies the text color of the component's `description`. */
+  "--calcite-autocomplete-description-text-color": "*";
+  /** Specifies the text color of the component's `heading`. */
+  "--calcite-autocomplete-heading-text-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-autocomplete-text-color": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-autocomplete-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-autocomplete-description-text-color] - Specifies the text color of the component's `description`.
- * @cssproperty [--calcite-autocomplete-heading-text-color] - Specifies the text color of the component's `heading`.
- * @cssproperty [--calcite-autocomplete-text-color] - Specifies the component's text color.
  * @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.
  */
@@ -35,14 +44,14 @@ export abstract class AutocompleteItem extends LitElement {
   /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
   /**
-   * When `true`, the component is selected.
+   * When `true`, the component is selected. The parent `calcite-autocomplete` synchronizes this property with its non-empty `value`; declarative selection is preserved when no initial value is provided, but is cleared when a controlled value is explicitly reset.
    *
    * @default false
    */
   accessor selected: boolean;
   /** Specifies the component's value. */
   accessor value: string;
-  /** Fires when the item has been selected. */
+  /** Fires when selection is requested. */
   readonly calciteAutocompleteItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteAutocompleteItemSelect: AutocompleteItem["calciteAutocompleteItemSelect"]["detail"];

package/dist/components/calcite-autocomplete-item/customElement.js

@@ -6,25 +6,8 @@ import { g as getIconScale } from "../../chunks/component.js";
 import { g as guid } from "../../chunks/guid.js";
 import { h as highlightText } from "../../chunks/text.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  container: "container",
-  containerActive: "container--active",
-  contentCenter: "content-center",
-  description: "description",
-  heading: "heading",
-  iconEnd: "icon-end",
-  iconStart: "icon-start",
-  scale: (scale) => `scale--${scale}`
-};
-const SLOTS = {
-  contentEnd: "content-end",
-  contentStart: "content-start"
-};
-const idPrefix = "autocomplete-item";
-const IDS = {
-  host: (id) => `${idPrefix}-${id}`
-};
-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}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);word-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host([selected]) .container{color:var(--calcite-color-text-1);background-color:var(--calcite-color-surface-highlight)}:host([selected]) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{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))))}.content-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+import { I as IDS, S as SLOTS, C as CSS } from "../../chunks/resources6.js";
+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}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);overflow-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host([selected]) .container{color:var(--calcite-color-text-1);background-color:var(--calcite-color-surface-highlight)}:host([selected]) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{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))))}.content-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class AutocompleteItem extends LitElement {
   constructor() {
     super(...arguments);
@@ -35,23 +18,28 @@ class AutocompleteItem extends LitElement {
     this.scale = "m";
     this.selected = false;
     this.calciteAutocompleteItemSelect = createEvent({ cancelable: false });
+    this.calciteInternalAutocompleteItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { active: [5, {}, { type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], guid: 1, heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], inputValueMatchPattern: [3, {}, { reflect: true }], label: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], value: 1 };
+    this.properties = { active: [5, {}, { type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], guid: 1, heading: 1, iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], inputValueMatchPattern: [3, {}, { reflect: true }], label: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], value: 1 };
   }
   static {
     this.styles = styles;
   }
-  toggleSelection() {
-    this.selected = !this.selected;
+  requestSelection() {
     this.calciteAutocompleteItemSelect.emit();
   }
+  willUpdate(changes) {
+    if (this.hasUpdated && (changes.has("description") || changes.has("disabled") || changes.has("heading") || changes.has("label") || changes.has("selected") || changes.has("value"))) {
+      this.calciteInternalAutocompleteItemChange.emit();
+    }
+  }
   handleClick(event) {
     event.preventDefault();
     if (this.disabled) {
       return;
     }
-    this.toggleSelection();
+    this.requestSelection();
   }
   render() {
     const { active, description, heading, disabled, inputValueMatchPattern } = this;

package/dist/components/calcite-autocomplete-item-group/customElement.d.ts

@@ -1,12 +1,19 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { AutocompleteItem } from "../calcite-autocomplete-item/customElement.js";
 
-/**
- * @cssproperty [--calcite-autocomplete-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-autocomplete-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-autocomplete-text-color] - Specifies the component's text color.
- * @slot  - A slot for adding `calcite-autocomplete-item`s.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-autocomplete-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-autocomplete-border-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-autocomplete-text-color": "*";
+}
+}
+
+/** @slot  - A slot for adding `calcite-autocomplete-item`s. */
 export abstract class AutocompleteItemGroup extends LitElement {
   /**
    * Specifies the component's heading text.
@@ -14,6 +21,12 @@ export abstract class AutocompleteItemGroup extends LitElement {
    * @required
    */
   accessor heading: string;
+  /**
+   * Specifies the `calcite-autocomplete-item`s in the group.
+   *
+   * @internal
+   */
+  get items(): AutocompleteItem[];
   /** Specifies an accessible label for the component. */
   accessor label: any;
   /**

package/dist/components/calcite-autocomplete-item-group/customElement.js

@@ -1,29 +1,43 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
-import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
-const CSS = {
-  container: "container",
-  containerNoSpacing: "container--no-spacing",
-  firstTitle: "first-title",
-  heading: "heading",
-  scale: (scale) => `scale--${scale}`,
-  separator: "separator"
-};
+import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
+import { createRef, ref } from "lit/directives/ref.js";
+import { a as getSlotAssignedElements } from "../../chunks/dom.js";
+import { i as isAutocompleteItem } from "../../chunks/resources6.js";
+import { C as CSS } from "../../chunks/resources5.js";
 const styles = css`.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-sm);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-xxs)}.scale--s .first-title{padding-block-start:var(--calcite-spacing-sm)}.scale--s .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-md);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-xs)}.scale--m .first-title{padding-block-start:var(--calcite-spacing-md)}.scale--m .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-lg);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-sm-plus)}.scale--l .first-title{padding-block-start:var(--calcite-spacing-xl)}.scale--l .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}:host{margin:0;display:flex;flex-direction:column}.container{display:flex;flex-direction:column;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1))}.container--no-spacing{padding-block-start:0}.separator{block-size:var(--calcite-spacing-px);background-color:var(--calcite-autocomplete-border-color, var(--calcite-color-border-3))}.heading{box-sizing:border-box;inline-size:100%;min-inline-size:0px;max-inline-size:100%;font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));padding-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);padding-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}:host([hidden]){display:none}[hidden]{display:none}`;
+const itemSelector = "calcite-autocomplete-item";
 class AutocompleteItemGroup extends LitElement {
   constructor() {
     super(...arguments);
+    this.defaultSlotRef = createRef();
+    this._items = [];
     this.disableSpacing = false;
     this.position = 0;
     this.scale = "m";
+    this.calciteInternalAutocompleteItemGroupItemsChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { disableSpacing: [5, {}, { type: Boolean }], heading: 1, label: 1, position: [9, {}, { type: Number }], scale: 1 };
+    this.properties = { disableSpacing: [5, {}, { type: Boolean }], heading: 1, label: 1, position: [9, {}, { type: Number }], scale: 1, items: [32, {}, { attribute: false, readOnly: true }] };
   }
   static {
     this.styles = styles;
   }
+  get items() {
+    return this._items;
+  }
+  loaded() {
+    this.updateItems();
+  }
+  handleDefaultSlotChange() {
+    this.updateItems();
+  }
+  updateItems() {
+    const items = this.defaultSlotRef.value ? getSlotAssignedElements(this.defaultSlotRef.value, itemSelector) : Array.from(this.el.children).filter(isAutocompleteItem);
+    this._items = items;
+    this.calciteInternalAutocompleteItemGroupItemsChange.emit();
+  }
   render() {
     const { scale } = this;
     const autocompleteSeparator = this.position > 0 ? html`<div class=${safeClassMap(CSS.separator)} role=separator></div>` : null;
@@ -31,7 +45,7 @@ class AutocompleteItemGroup extends LitElement {
       [CSS.container]: true,
       [CSS.containerNoSpacing]: this.disableSpacing,
       [CSS.scale(scale)]: true
-    })} role=group>${autocompleteSeparator}<div class=${safeClassMap({ [CSS.heading]: true, [CSS.firstTitle]: this.position === 0 })}>${this.heading}</div><slot></slot></div>`;
+    })} role=group>${autocompleteSeparator}<div class=${safeClassMap({ [CSS.heading]: true, [CSS.firstTitle]: this.position === 0 })}>${this.heading}</div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot></div>`;
   }
 }
 customElement("calcite-autocomplete-item-group", AutocompleteItemGroup);

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

@@ -1,12 +1,18 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's corner radius. */
+  "--calcite-avatar-corner-radius": "*";
+  /** Specifies the component's icon or initial color. */
+  "--calcite-avatar-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-avatar-background-color": "*";
+}
+}
 
-/**
- * @cssproperty [--calcite-avatar-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-avatar-color] - Specifies the component's icon or initial color.
- * @cssproperty [--calcite-avatar-background-color] - Specifies the component's background color.
- */
 export abstract class Avatar extends LitElement {
   /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
   accessor fullName: string | undefined;

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

@@ -2,8 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, nothing, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { d as getModeName } from "../../chunks/dom.js";
-import { h as hexToRGB, i as isValidHex } from "../../chunks/utils.js";
+import { w as hexToRGB, q as isValidHex } from "../../chunks/utils3.js";
 const CSS = {
   thumbnail: "thumbnail",
   background: "background",
@@ -78,8 +77,7 @@ class Avatar extends LitElement {
     return html`<span .ariaLabel=${this.label || this.fullName} class=${safeClassMap(CSS.background)} role=figure style=${safeStyleMap({ backgroundColor })}>${initials ? html`<span aria-hidden=true class=${safeClassMap(CSS.initials)}>${initials}</span>` : html`<calcite-icon class=${safeClassMap(CSS.icon)} icon=user .scale=${this.scale}></calcite-icon>`}</span>`;
   }
   generateFillColor() {
-    const { userId, username, fullName, el } = this;
-    const theme = getModeName(el);
+    const { userId, username, fullName } = this;
     const id = userId && `#${userId.substr(userId.length - 6)}`;
     const name = username || fullName || "";
     const hex = id && isValidHex(id) ? id : stringToHex(name);
@@ -87,8 +85,7 @@ class Avatar extends LitElement {
       return `var(--calcite-avatar-background-color, var(--calcite-color-foreground-2))`;
     }
     const hue = hexToHue(hex);
-    const l = theme === "dark" ? 20 : 90;
-    return `var(--calcite-avatar-background-color, hsl(${hue}, 60%, ${l}%))`;
+    return `var(--calcite-avatar-background-color, light-dark(hsl(${hue}, 60%, 90%), hsl(${hue}, 60%, 20%)))`;
   }
   generateInitials() {
     const { fullName, username } = this;

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.
    *