@esri/calcite-components 5.2.0-next.70 → 5.2.0-next.72

package/dist/chunks/manager.js

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
-import { q as queryElementRoots, l as getShadowRootNode, e as isPrimaryPointerButton, m as isKeyboardTriggeredClick } from "./dom.js";
+import { q as queryElementRoots, m as getShadowRootNode, h as isPrimaryPointerButton, o as isKeyboardTriggeredClick } from "./dom.js";
 import { l as logger } from "./runtime.js";
 import { i as isActivationKey } from "./key.js";
 import { t as toAriaBoolean } from "./aria.js";
@@ -68,7 +68,7 @@ const useReferenceElement = (options) => {
       if (changes.has("referenceEl")) {
         unregisterReferenceElement(changes.get("referenceEl"));
         registerReferenceElement(component.referenceEl);
-      } else if (changes.has("open")) {
+      } else if (changes.has("open") || changes.has("triggerDisabled")) {
         manager.updateElement(component, component.referenceEl);
       }
     });
@@ -115,6 +115,8 @@ function isDrag({
 }
 const referenceElementManager = (options) => {
   const registeredElements = /* @__PURE__ */ new Map();
+  const registeredAriaControls = /* @__PURE__ */ new WeakMap();
+  const registeredAriaExpanded = /* @__PURE__ */ new WeakSet();
   const registeredShadowRootCounts = /* @__PURE__ */ new WeakMap();
   let activeComponents = null;
   let clickedComponents = null;
@@ -381,14 +383,53 @@ const referenceElementManager = (options) => {
     }
     toggleFocusedComponents(components, true);
   };
+  const updateAriaExpanded = (referenceEl, components) => {
+    if (!("ariaExpanded" in referenceEl)) {
+      return;
+    }
+    const enabledComponents = components.filter((component) => !component.triggerDisabled);
+    if (enabledComponents.length) {
+      referenceEl.ariaExpanded = toAriaBoolean(enabledComponents.some((component) => component.open));
+      registeredAriaExpanded.add(referenceEl);
+      return;
+    }
+    if (registeredAriaExpanded.has(referenceEl)) {
+      referenceEl.ariaExpanded = null;
+      registeredAriaExpanded.delete(referenceEl);
+    }
+  };
+  const updateAriaControls = (referenceEl, component, registerComponent = !component.triggerDisabled) => {
+    if (!("ariaControlsElements" in referenceEl)) {
+      return;
+    }
+    const currentElements = referenceEl.ariaControlsElements ?? [];
+    const componentIsRegistered = currentElements.includes(component.el);
+    const registeredComponents = registeredAriaControls.get(referenceEl);
+    if (!registerComponent) {
+      if (!registeredComponents?.has(component)) {
+        return;
+      }
+      const updatedElements = currentElements.filter((element) => element !== component.el);
+      referenceEl.ariaControlsElements = updatedElements.length > 0 ? updatedElements : null;
+      registeredComponents?.delete(component);
+      return;
+    }
+    if (!componentIsRegistered) {
+      referenceEl.ariaControlsElements = [...currentElements, component.el];
+      if (!registeredComponents) {
+        registeredAriaControls.set(referenceEl, new WeakSet([component]));
+      } else {
+        registeredComponents.add(component);
+      }
+    }
+  };
   const updateElement = (component, referenceEl) => {
     if (!referenceEl || !component.referenceElementType) {
       return;
     }
-    if (options.click && "ariaExpanded" in referenceEl) {
-      const existingComponents = registeredElements.get(referenceEl) ?? [];
-      const existingComponentOpen = existingComponents?.some((component2) => component2.open) ?? false;
-      referenceEl.ariaExpanded = toAriaBoolean(component.open || existingComponentOpen);
+    if (options.click) {
+      updateAriaControls(referenceEl, component);
+      updateAriaExpanded(referenceEl, registeredElements.get(referenceEl) ?? []);
     }
   };
   const addShadowListeners = (shadowRoot) => {
@@ -426,13 +467,6 @@ const referenceElementManager = (options) => {
     if (existingComponents.includes(component)) {
       return;
     }
-    if (options.click && "ariaControlsElements" in referenceEl) {
-      const currentElements = referenceEl.ariaControlsElements ?? [];
-      if (!currentElements.includes(component.el)) {
-        const updatedElements = [...currentElements, component.el];
-        referenceEl.ariaControlsElements = updatedElements;
-      }
-    }
     if (options.hover && "ariaDescribedByElements" in referenceEl) {
       const currentElements = referenceEl.ariaDescribedByElements ?? [];
       if (!currentElements.includes(component.el)) {
@@ -476,18 +510,9 @@ const referenceElementManager = (options) => {
       removeListeners();
       clearHoverTimeout();
     }
-    if (options.click && "ariaControlsElements" in referenceEl) {
-      const newElements = (referenceEl.ariaControlsElements ?? []).filter((element) => element !== component.el);
-      referenceEl.ariaControlsElements = newElements.length > 0 ? newElements : null;
-    }
-    if (options.click && "ariaExpanded" in referenceEl) {
-      const hasRegisteredComponents = (updatedComponents?.length ?? 0) > 0;
-      if (hasRegisteredComponents) {
-        const existingComponentOpen = updatedComponents?.some((component2) => component2.open) ?? false;
-        referenceEl.ariaExpanded = toAriaBoolean(existingComponentOpen);
-      } else {
-        referenceEl.ariaExpanded = null;
-      }
+    if (options.click) {
+      updateAriaControls(referenceEl, component, false);
+      updateAriaExpanded(referenceEl, updatedComponents);
     }
     if (options.hover && "ariaDescribedByElements" in referenceEl) {
       const newElements = (referenceEl.ariaDescribedByElements ?? []).filter((element) => element !== component.el);

package/dist/chunks/runtime.js

@@ -106,9 +106,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.2.0-next.70";
-const buildDate = "2026-09-03";
-const revision = "81dd56c3c";
+const version = "5.2.0-next.72";
+const buildDate = "2026-09-11";
+const revision = "a0c242a65";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
@@ -131,7 +131,7 @@ if (!isServer) {
 if (process.env.NODE_ENV !== "test") {
   queueMicrotask(stampVersion);
 }
-const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.2.0-next.70/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.2.0-next.72/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const originalSetAssetPath = runtime.setAssetPath;
 runtime.setAssetPath = (path) => {
   assetPathChanged = true;

package/dist/chunks/useInlineEdit.js

@@ -0,0 +1,65 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { safeClassMap } from "@arcgis/lumina";
+import { nothing, html } from "lit";
+import { ref } from "lit/directives/ref.js";
+const CSS = {
+  container: "inline-edit--container",
+  enableEditing: "enable-editing",
+  confirmChanges: "confirm-changes",
+  cancelEditing: "cancel-editing"
+};
+const InlineEditControls = ({ cancelEditingLabel, confirmChangesLabel, inlineEditing, enableEditingLabel, enableEditingButtonRef, loading, onCancelEditing, onConfirmChanges, onEnableEditing, scale, showControls }) => html`<div class=${safeClassMap(CSS.container)}>${!inlineEditing && html`<calcite-action .ariaLabel=${enableEditingLabel} class=${safeClassMap(CSS.enableEditing)} icon=pencil @click=${onEnableEditing} .scale=${scale} .text=${enableEditingLabel} title=${enableEditingLabel ?? nothing} type=button ${ref(enableEditingButtonRef)}></calcite-action>` || ""}${showControls && [
+  html`<calcite-action .ariaLabel=${confirmChangesLabel} class=${safeClassMap(CSS.confirmChanges)} .disabled=${loading} icon=check .loading=${loading} @click=${onConfirmChanges} .scale=${scale} .text=${confirmChangesLabel} title=${confirmChangesLabel ?? nothing} type=button></calcite-action>`,
+  html`<calcite-action .ariaLabel=${cancelEditingLabel} class=${safeClassMap(CSS.cancelEditing)} .disabled=${loading} icon=x @click=${onCancelEditing} .scale=${scale} .text=${cancelEditingLabel} title=${cancelEditingLabel ?? nothing} type=button></calcite-action>`
+] || ""}</div>`;
+class UseInlineEdit {
+  constructor(options) {
+    this.options = options;
+    this.valuePriorToEditing = "";
+  }
+  enable() {
+    this.valuePriorToEditing = this.options.getValue();
+    this.options.setInlineEditing(true);
+    requestAnimationFrame(() => {
+      this.options.setFocus();
+    });
+    this.options.emitEnableEditingChange();
+  }
+  disable() {
+    this.options.setInlineEditing(false);
+  }
+  cancelEditing() {
+    this.options.restoreValue(this.valuePriorToEditing);
+    this.disable();
+    this.options.emitCancel();
+    this.options.emitEnableEditingChange();
+  }
+  async confirm(confirm, setLoading) {
+    if (confirm) {
+      setLoading?.(true);
+      try {
+        await confirm();
+      } finally {
+        setLoading?.(false);
+      }
+    }
+    this.options.commitValue();
+    this.disable();
+    this.options.emitConfirm();
+    this.options.emitEnableEditingChange();
+  }
+}
+const inlineEditConverter = {
+  fromAttribute(value) {
+    return value === null ? false : value === "controls-disabled" ? value : true;
+  },
+  toAttribute(value) {
+    return value === false ? null : value === true ? "" : value;
+  }
+};
+export {
+  CSS as C,
+  InlineEditControls as I,
+  UseInlineEdit as U,
+  inlineEditConverter as i
+};

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

@@ -4,11 +4,6 @@ import type { Appearance, Position, IconType, Scale, SelectionMode } from "../ty
 
 /**
  * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block-group` component instead.
- * @cssproperty [--calcite-accordion-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-accordion-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-accordion-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-accordion-text-color-hover] - Specifies the component's main text color on hover.
- * @cssproperty [--calcite-accordion-text-color-press] - Specifies the component's main text color when pressed.
  * @slot  - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
  */
 export abstract class Accordion extends LitElement {

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

@@ -6,24 +6,6 @@ import type { HeadingLevel } from "../functional/Heading.js";
 
 /**
  * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block` component instead.
- * @cssproperty [--calcite-accordion-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-accordion-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-accordion-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-accordion-text-color-hover] - Specifies the component's main text color on hover.
- * @cssproperty [--calcite-accordion-text-color-press] - Specifies the component's main text color when pressed.
- * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-background-color` instead. Specifies the component's background color.
- * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-border-color` instead. Specifies the component's border color.
- * @cssproperty [--calcite-accordion-item-content-space] - Specifies the component's padding.
- * @cssproperty [--calcite-accordion-item-end-icon-color] - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @cssproperty [--calcite-accordion-item-expand-icon-color] - Specifies the component's expand icon color.
- * @cssproperty [--calcite-accordion-item-header-background-color] - Specifies the component's `heading` background color.
- * @cssproperty [--calcite-accordion-item-header-background-color-hover] - Specifies the component's `heading` background color when hovered.
- * @cssproperty [--calcite-accordion-item-header-background-color-press] - Specifies the component's `heading` background color when pressed.
- * @cssproperty [--calcite-accordion-item-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. Specifies the component's default icon color.
- * @cssproperty [--calcite-accordion-item-start-icon-color] - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color` instead. Specifies the component's text color.
- * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color-hover` instead. Specifies the component's text color on hover.
  * @slot  - A slot for adding custom content, including nested `calcite-accordion-item`s.
  * @slot [actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot [actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.

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

@@ -3,23 +3,7 @@ import type { PublicLitElement as LitElement, LuminaJsx } from "@arcgis/lumina";
 import type { Alignment, Appearance, AriaAttributesCamelCased, Scale } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
-/**
- * @cssproperty [--calcite-action-background-color-hover] - Specifies the component's background color when hovered.
- * @cssproperty [--calcite-action-background-color-press] - Specifies the component's background color when active.
- * @cssproperty [--calcite-action-background-color-pressed] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-background-color-press` instead. Specifies the component's background color when active.
- * @cssproperty [--calcite-action-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-action-corner-radius-end-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end end.
- * @cssproperty [--calcite-action-corner-radius-end-start] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end start.
- * @cssproperty [--calcite-action-corner-radius-start-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start end.
- * @cssproperty [--calcite-action-corner-radius-start-start] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start start.
- * @cssproperty [--calcite-action-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-action-indicator-color] - Specifies the component's indicator color.
- * @cssproperty [--calcite-action-text-color-press] - Specifies the component's text color when pressed or hovered.
- * @cssproperty [--calcite-action-text-color-pressed] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-text-color-press` instead. Specifies the component's text color when hovered.
- * @cssproperty [--calcite-action-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-action-loader-color] - Specifies the component's loader color.
- * @slot  - A slot for adding non-interactive content, such as a `calcite-icon`.
- */
+/** @slot  - A slot for adding non-interactive content, such as a `calcite-icon`. */
 export abstract class Action extends LitElement {
   /**
    * When `true`, the component is highlighted.

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

@@ -12,6 +12,7 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
 import { I as IDS, C as CSS } from "../../chunks/resources4.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 const styles$1 = 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]){--calcite-internal-action-font-size: var(--calcite-font-size--2);--calcite-internal-action-min-height: var(--calcite-size-sm);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-font-size: var(--calcite-font-size--1);--calcite-internal-action-min-height: var(--calcite-size-md);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-font-size: var(--calcite-font-size-0);--calcite-internal-action-min-height: var(--calcite-size-lg);--calcite-internal-action-line-height: 1.25rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm-plus)}:host{display:flex;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3);border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius-xs)))}.interaction-container{border-radius:inherit}:host([width=full]){flex:1 0 auto}:host([width=full]) .button{justify-content:center}:host([width=full]) .button .text-container--visible{flex:none}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}.button{position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;outline-color:transparent;box-sizing:border-box;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));border-radius:inherit;color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));cursor:inherit;flex:1 0 auto;font-family:inherit;font-size:var(--calcite-internal-action-font-size);font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-internal-action-line-height);min-block-size:var(--calcite-internal-action-height, var(--calcite-internal-action-min-height));max-block-size:var(--calcite-internal-action-height, none);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-internal-action-spacing));padding-inline:var(--calcite-internal-action-padding-inline, var(--calcite-internal-action-spacing));text-align:start}.button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button: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))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.button--text-visible{gap:var(--calcite-internal-action-spacing);inline-size:100%}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition-property:opacity;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-3));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}:host([active]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-3))}:host([active]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) calcite-loader[inline]{margin-inline-end:0px;--calcite-loader-progress-color-inline: var(--calcite-action-loader-color)}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([appearance=transparent]) .button{transition-property:box-shadow;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);background-color:var(--calcite-action-background-color, var(--calcite-color-transparent))}:host([appearance=transparent]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-transparent-hover))}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([selection-appearance=highlight]):host([active]) .button{background-color:var(--calcite-color-surface-highlight);color:var(--calcite-color-text-highlight)}:host([active-descendant]) .button{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))))}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}:host([scale=s]) .indicator-with-icon{position:relative}:host([scale=s]) .indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.125rem;inset-inline-end:-.125rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}:host([scale=s]) .indicator-without-icon{position:relative}:host([scale=s]) .indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.175rem;inset-inline-end:-.175rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}: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`.screen-reader-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}`;
 class Action extends LitElement {
@@ -117,9 +118,9 @@ class Action extends LitElement {
       ...internalControlsElements
     ];
     if (this.dragHandle) {
-      return html`<span .ariaBusy=${loading} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabelledByElements=${ariaLabelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} id=${buttonId ?? nothing} role=button tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</span>`;
+      return html`<span .ariaBusy=${toAriaBoolean(loading, void 0)} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabelledByElements=${ariaLabelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} id=${buttonId ?? nothing} role=button tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</span>`;
     }
-    return html`<button .ariaBusy=${loading} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabelledByElements=${ariaLabelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} .disabled=${disabled} id=${buttonId ?? nothing} .role=${this.aria?.role} type=${this.type ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</button>`;
+    return html`<button .ariaBusy=${toAriaBoolean(loading, void 0)} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabelledByElements=${ariaLabelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} .disabled=${disabled} id=${buttonId ?? nothing} .role=${this.aria?.role} type=${this.type ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</button>`;
   }
   render() {
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.renderButton()}${this.renderIndicatorText()}` });

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

@@ -4,11 +4,6 @@ import type { Layout, Position, Scale, SelectionAppearance } from "../types.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
 
 /**
- * @cssproperty [--calcite-action-bar-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-action-bar-corner-radius] - Specifies the component's border radius when `floating` is `true`.
- * @cssproperty [--calcite-action-bar-expanded-max-width] - When `layout` is `"vertical"`, specifies the component's maximum width.
- * @cssproperty [--calcite-action-bar-items-space] - Specifies the space between slotted components in the component.
- * @cssproperty [--calcite-action-bar-shadow] - Specifies the component's shadow when `floating` is `true`.
  * @slot  - A slot for adding `calcite-action`s that will appear at the top of the component.
  * @slot [actions-end] - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
  * @slot [actions-start] - A slot for adding `calcite-action`s that will appear at the start of the component. When `expandPosition` is `"start"`, actions in this slot will render after the collapse/expand button.

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

@@ -5,7 +5,7 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { k as getStylePixelValue, C as filterDirectChildren, b as slotChangeGetAssignedElements, a as getSlotAssignedElements, d as focusElementInGroup } from "../../chunks/dom.js";
+import { l as getStylePixelValue, C as filterDirectChildren, b as slotChangeGetAssignedElements, a as getSlotAssignedElements, e as focusElementInGroup } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { t as toggleActionBarChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";

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

@@ -6,10 +6,6 @@ import type { Action } from "../calcite-action/customElement.js";
 import type { Columns } from "./types.js";
 
 /**
- * @cssproperty [--calcite-action-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-action-group-border-color] - Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`.
- * @cssproperty [--calcite-action-group-columns] - When `layout` is `"grid"`, specifies the component's `grid-template-columns`.
- * @cssproperty [--calcite-action-group-gap] - When `layout` is `"grid"`, specifies the component's gap.
  * @slot  - A slot for adding `calcite-action`s.
  * @slot [menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot [menu-tooltip] - A slot for adding a `calcite-tooltip` for the menu.

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

@@ -5,7 +5,6 @@ import type { Appearance, Scale } from "../types.js";
 import type { Action } from "../calcite-action/customElement.js";
 
 /**
- * @cssproperty [--calcite-action-menu-items-space] - Specifies the space between actions in the menu.
  * @slot  - A slot for adding `calcite-action`s.
  * @slot [trigger] - A slot for adding a `calcite-action` to trigger opening the menu.
  * @slot [tooltip] - A slot for adding a tooltip for the menu.

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

@@ -5,9 +5,6 @@ import type { OverlayPositioning } from "../../utils/floating-ui.js";
 
 /**
  * @deprecated in v5.0.0, removal target v6.0.0 - Use the `calcite-action-bar` component instead.
- * @cssproperty [--calcite-action-pad-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-action-pad-expanded-max-width] - When `expanded` and `layout` is `"vertical"`, specifies the component's maximum width.
- * @cssproperty [--calcite-action-pad-items-space] - Specifies the component's space between slotted components.
  * @slot  - A slot for adding `calcite-action`s to the component.
  * @slot [expand-tooltip] - A slot to set the `calcite-tooltip` for the expand toggle.
  */

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

@@ -3,7 +3,7 @@ import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { b as slotChangeGetAssignedElements, d as focusElementInGroup } from "../../chunks/dom.js";
+import { b as slotChangeGetAssignedElements, e as focusElementInGroup } from "../../chunks/dom.js";
 import { l as legacyToggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";

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

@@ -10,11 +10,6 @@ import type { AlertDuration, AlertQueue } from "./types.js";
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  *
- * @cssproperty [--calcite-alert-width] - Specifies the component's width.
- * @cssproperty [--calcite-alert-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-alert-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-alert-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-alert-offset-size] - Specifies the component's `placement` offset.
  * @slot [title] - A slot for adding a title to the component.
  * @slot [message] - A slot for adding main text to the component.
  * @slot [link] - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.

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

@@ -5,29 +5,6 @@ import type { Alignment, Scale, Status } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
 /**
- * @cssproperty [--calcite-autocomplete-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-autocomplete-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-autocomplete-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-autocomplete-menu-max-size-y] - Specifies the maximum height of the component's menu.
- * @cssproperty [--calcite-autocomplete-input-prefix-size] - Specifies the input's prefix width, when present.
- * @cssproperty [--calcite-autocomplete-input-suffix-size] - Specifies the input's suffix width, when present.
- * @cssproperty [--calcite-autocomplete-input-background-color] - Specifies the background color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-border-color] - Specifies the border color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-corner-radius] - Specifies the corner radius of the component's input.
- * @cssproperty [--calcite-autocomplete-input-shadow] - Specifies the shadow of the component's input.
- * @cssproperty [--calcite-autocomplete-input-icon-color] - Specifies the icon color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-text-color] - Specifies the text color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-placeholder-text-color] - Specifies the placeholder text color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-actions-background-color] - Specifies the background color of the input's `clearable` element.
- * @cssproperty [--calcite-autocomplete-input-actions-background-color-hover] - Specifies the background color of the input's `clearable` element when hovered.
- * @cssproperty [--calcite-autocomplete-input-actions-background-color-press] - Specifies the background color of the input's `clearable` element when pressed.
- * @cssproperty [--calcite-autocomplete-input-actions-icon-color] - Specifies the icon color of the input's `clearable` element.
- * @cssproperty [--calcite-autocomplete-input-actions-icon-color-hover] - Specifies the icon color of the input's `clearable` element when hovered.
- * @cssproperty [--calcite-autocomplete-input-actions-icon-color-press] - Specifies the icon color of the input's `clearable` element when pressed.
- * @cssproperty [--calcite-autocomplete-input-loading-background-color] - Specifies the background color of the Input's `loading` element, when present.
- * @cssproperty [--calcite-autocomplete-input-loading-fill-color] - Specifies the fill color of the Input's `loading` element, when present.
- * @cssproperty [--calcite-autocomplete-input-prefix-text-color] - Specifies the text color of the Input's prefix, when present.
- * @cssproperty [--calcite-autocomplete-input-suffix-text-color] - Specifies the text color of the Input's suffix, when present.
  * @slot  - A slot for adding `calcite-autocomplete-item` elements.
  * @slot [content-bottom] - A slot for adding content below `calcite-autocomplete-item` elements.
  * @slot [content-top] - A slot for adding content above `calcite-autocomplete-item` elements.

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

@@ -4,10 +4,6 @@ import type { FlipContext } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
 /**
- * @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.
  */

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

@@ -2,12 +2,7 @@
 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.
- */
+/** @slot  - A slot for adding `calcite-autocomplete-item`s. */
 export abstract class AutocompleteItemGroup extends LitElement {
   /**
    * Specifies the component's heading text.

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

@@ -2,11 +2,6 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../types.js";
 
-/**
- * @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-block/customElement.d.ts

@@ -7,23 +7,6 @@ import type { IconName } from "../calcite-icon/types.js";
 import type { BlockToggleDisplay } from "./types.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-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-block-header-background-color] - [Deprecated] in v5.2.0, removal target v7.0.0 - Use `--calcite-block-background-color` instead. 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.

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { ref } from "lit/directives/ref.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements, d as slotChangeHasTextContent } from "../../chunks/dom.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
@@ -15,7 +15,8 @@ import { s as styles$2 } from "../../chunks/sortable.js";
 import { s as styles$1 } from "../../chunks/header.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { C as CSS, I as ICONS, S as SLOTS, a as IDS } from "../../chunks/resources7.js";
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .header{gap:var(--calcite-spacing-sm)}:host([scale=s]) .icon-end-container{gap:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm)}:host([scale=s]) .description{font-size:var(--calcite-font-size-xs)}:host([scale=s]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-sm);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-xxs)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) )}:host([scale=m]) .header{gap:var(--calcite-spacing-md)}:host([scale=m]) .icon-end-container{gap:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size)}:host([scale=m]) .description{font-size:var(--calcite-font-size-sm)}:host([scale=m]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-md);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) )}:host([scale=l]) .header{gap:var(--calcite-spacing-lg)}:host([scale=l]) .icon-end-container{gap:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md)}:host([scale=l]) .description{font-size:var(--calcite-font-size)}:host([scale=l]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-lg);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-lg)) )}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;border-color:var(--calcite-block-border-color, var(--calcite-color-border-3));background-color:var(--calcite-block-background-color, var(--calcite-color-foreground-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{justify-content:flex-start}.header--has-content{padding:var(--calcite-internal-block-header-content-padding)}.header--draggable{padding-inline-start:var(--calcite-spacing-xxs)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto auto auto;grid-template-areas:"handle header icon-end menu actions-end"}.icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.actions-end{align-items:center;display:flex;gap:var(--calcite-internal-block-actions-spacing);grid-area:actions-end;padding-block:var(--calcite-internal-block-actions-spacing);padding-inline-end:var(--calcite-internal-block-actions-spacing)}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;outline-color:transparent;font-family:inherit;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3))}calcite-loader[inline]{align-self:center}calcite-sort-handle{align-self:center;grid-area:handle;margin-block:var(--calcite-internal-block-actions-spacing);padding-inline-start:var(--calcite-spacing-xxs)}.title{display:flex;flex-direction:column}.header .title .heading{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug)}.description{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3));font-weight:var(--calcite-font-weight-regular);line-height:var(--calcite-font-line-height-relative-snug)}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;grid-area:icon-end}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-block-collapsible-icon-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.toggle:hover .toggle-icon{color:var(--calcite-block-collapsible-icon-color-hover, var(--calcite-block-icon-color-hover, var(--calcite-color-text-1)))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%;opacity:0;transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.has-slotted-content{padding-block:var(--calcite-internal-block-padding-block);padding-inline:var(--calcite-internal-block-padding-inline)}.content-end,.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}calcite-action-menu{align-self:center;grid-area:menu;margin-inline-end:var(--calcite-internal-block-actions-spacing)}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color, var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)));font-weight:var(--calcite-font-weight-medium)}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .content{opacity:1}@starting-style{:host([expanded]){margin-block-start:0;opacity:0}}:host([expanded][scale=s]){margin-block:var(--calcite-spacing-xxs)}:host([expanded][scale=l]){margin-block:var(--calcite-spacing-md)}:host([hidden]){display:none}[hidden]{display:none}slot[name=children]::slotted(calcite-block){border-block-end-width:0}`;
+import { t as toAriaBoolean } from "../../chunks/aria.js";
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .header{gap:var(--calcite-spacing-sm)}:host([scale=s]) .icon-end-container{gap:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm)}:host([scale=s]) .description{font-size:var(--calcite-font-size-xs)}:host([scale=s]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-sm);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-xxs)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) )}:host([scale=m]) .header{gap:var(--calcite-spacing-md)}:host([scale=m]) .icon-end-container{gap:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size)}:host([scale=m]) .description{font-size:var(--calcite-font-size-sm)}:host([scale=m]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-md);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) )}:host([scale=l]) .header{gap:var(--calcite-spacing-lg)}:host([scale=l]) .icon-end-container{gap:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md)}:host([scale=l]) .description{font-size:var(--calcite-font-size)}:host([scale=l]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-lg);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-lg)) )}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;border-color:var(--calcite-block-border-color, var(--calcite-color-border-3));background-color:var(--calcite-block-background-color, var(--calcite-color-foreground-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{justify-content:flex-start}.header--has-content{padding:var(--calcite-internal-block-header-content-padding)}.header--draggable{padding-inline-start:var(--calcite-spacing-xxs)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto auto auto;grid-template-areas:"handle header icon-end menu actions-end"}.icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.actions-end{align-items:center;display:flex;gap:var(--calcite-internal-block-actions-spacing);grid-area:actions-end;padding-block:var(--calcite-internal-block-actions-spacing);padding-inline-end:var(--calcite-internal-block-actions-spacing)}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;outline-color:transparent;font-family:inherit;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3))}calcite-loader[inline]{align-self:center}calcite-sort-handle{align-self:center;grid-area:handle;margin-block:var(--calcite-internal-block-actions-spacing);padding-inline-start:var(--calcite-spacing-xxs)}.title{display:flex;flex-direction:column}.header .title .heading{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug)}.description{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3));font-weight:var(--calcite-font-weight-regular);line-height:var(--calcite-font-line-height-relative-snug)}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;grid-area:icon-end}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-block-expandable-icon-color, var(--calcite-block-collapsible-icon-color, var(--calcite-block-icon-color, var(--calcite-color-text-3))))}.toggle:hover .toggle-icon{color:var(--calcite-block-expandable-icon-color-hover, var(--calcite-block-collapsible-icon-color-hover, var(--calcite-block-icon-color-hover, var(--calcite-color-text-1))))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%;opacity:0;transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.has-slotted-content{padding-block:var(--calcite-internal-block-padding-block);padding-inline:var(--calcite-internal-block-padding-inline)}.content-end,.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}calcite-action-menu{align-self:center;grid-area:menu;margin-inline-end:var(--calcite-internal-block-actions-spacing)}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color, var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)));font-weight:var(--calcite-font-weight-medium)}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .content{opacity:1}@starting-style{:host([expanded]){margin-block-start:0;opacity:0}}:host([expanded][scale=s]){margin-block:var(--calcite-spacing-xxs)}:host([expanded][scale=l]){margin-block:var(--calcite-spacing-md)}:host([hidden]){display:none}[hidden]{display:none}slot[name=children]::slotted(calcite-block){border-block-end-width:0}`;
 class Block extends LitElement {
   constructor() {
     super(...arguments);
@@ -189,7 +190,7 @@ class Block extends LitElement {
   }
   handleDefaultSlotChange(event) {
     this.blockSectionChildren = slotChangeGetAssignedElements(event, "calcite-block-section");
-    this.hasContent = slotChangeHasAssignedElement(event);
+    this.hasContent = slotChangeHasTextContent(event) || slotChangeHasAssignedElement(event);
     this.updateBlockSectionScale();
   }
   updateBlockSectionScale() {
@@ -247,7 +248,7 @@ class Block extends LitElement {
     })} id=${IDS.header}>${this.renderIcon("start")}${this.renderContentStart()}${this.renderLoaderStatusIcon()}${this.renderTitle()}</header>`;
     const collapseIcon = expanded ? ICONS.expanded : ICONS.collapsed;
     const headerNode = html`<div class=${safeClassMap(CSS.headerContainer)}>${this.dragHandle ? html`<calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${heading || label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle>` : null}${expandable ? html`<button aria-controls=${IDS.content} aria-describedby=${IDS.header} .ariaExpanded=${expandable ? expanded : void 0} class=${safeClassMap(CSS.toggle)} id=${IDS.toggle} @click=${this.onHeaderClick} title=${toggleLabel ?? nothing} type=button>${headerContent}<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}${this.toggleDisplay === "switch" ? html`<calcite-switch .checked=${expanded} .disabled=${this.disabled} inert .label=${toggleLabel} .scale=${this.scale}></calcite-switch>` : html`<calcite-icon class=${safeClassMap(CSS.toggleIcon)} .icon=${collapseIcon} .scale=${getIconScale(this.scale)}></calcite-icon>`}</div></button>` : headerContent}${iconEnd && !expandable ? html`<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}</div>` : !iconEnd && !expandable ? this.renderContentEnd() : null}<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!this.hasMenuActions} .label=${messages.options} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled}><slot name=${SLOTS.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<article aria-label=${label ?? nothing} .ariaBusy=${loading} class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<article aria-label=${label ?? nothing} .ariaBusy=${toAriaBoolean(loading, void 0)} class=${safeClassMap({
       [CSS.container]: true
     })}>${headerNode}<section aria-labelledby=${IDS.toggle} class=${safeClassMap({
       [CSS.content]: true,

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

@@ -12,6 +12,7 @@ import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useSortable } from "../../chunks/useSortable.js";
 import { i as isTag } from "../../chunks/resources3.js";
 import { i as isBlock } from "../../chunks/resources7.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 const CSS = {
   container: "container",
   groupContainer: "group-container",
@@ -350,7 +351,7 @@ class BlockGroup extends LitElement {
   }
   render() {
     const { loading, label } = this;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.groupContainer)} role=group><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${toAriaBoolean(loading, void 0)} .ariaLabel=${label || ""} class=${safeClassMap(CSS.groupContainer)} role=group><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>` });
   }
 }
 customElement("calcite-block-group", BlockGroup);

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

@@ -6,12 +6,6 @@ import type { BlockSectionToggleDisplay } from "./types.js";
 
 /**
  * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block` component instead.
- * @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 {