@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.30

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

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -12,7 +12,8 @@ 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/resources.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]){--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}: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}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const styles$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 {
   constructor() {
     super(...arguments);
@@ -25,6 +26,7 @@ class Action extends LitElement {
     this.indicatorRef = createRef();
     this.interactiveContainer = useInteractive(this);
     this.formTrigger = useFormTrigger()(this);
+    this.labelElRef = createRef();
     this.active = false;
     this.activeDescendant = false;
     this.appearance = "transparent";
@@ -47,7 +49,7 @@ class Action extends LitElement {
     this.formAssociated = true;
   }
   static {
-    this.styles = styles;
+    this.styles = [styles$1, styles];
   }
   async setFocus(options) {
     return this.focusSetter(() => this.buttonRef.value, options);
@@ -60,6 +62,17 @@ class Action extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
+  getAccessibleLabel() {
+    const labelFallback = this.label || this.text || "";
+    return this.indicator ? this.messages.indicatorLabel.replace("{label}", labelFallback) : labelFallback;
+  }
+  getLabelledByElements() {
+    const labelledByElements = [
+      ...this.labelElRef.value ? [this.labelElRef.value] : [],
+      ...this.aria?.labelledByElements ?? []
+    ];
+    return labelledByElements.length ? labelledByElements : void 0;
+  }
   renderTextContainer() {
     const { text, textEnabled } = this;
     const textContainerClasses = {
@@ -70,7 +83,7 @@ class Action extends LitElement {
   }
   renderIndicatorText() {
     const { indicator, messages, buttonId } = this;
-    return html`<div aria-labelledby=${buttonId ?? nothing} aria-live=polite class=${safeClassMap(CSS.indicatorText)} role=region ${ref(this.indicatorRef)}>${indicator ? messages.indicator : null}</div>`;
+    return html`<div aria-labelledby=${buttonId ?? nothing} aria-live=polite class=${safeClassMap(CSS_UTILITY.screenReaderText)} role=region ${ref(this.indicatorRef)}>${indicator ? messages.indicator : null}</div>`;
   }
   renderIconContainer() {
     const { loading, icon, scale, el, iconFlipRtl, indicator } = this;
@@ -85,25 +98,28 @@ class Action extends LitElement {
     })}><slot></slot></div>`;
     return hasIconToDisplay ? keyed("icon-container", html`<div aria-hidden=true class=${safeClassMap(CSS.iconContainer)}>${iconNode}${slotContainerNode}</div>`) : null;
   }
+  renderLabel() {
+    const ariaLabel = this.getAccessibleLabel();
+    return ariaLabel ? html`<span class=${safeClassMap(CSS_UTILITY.screenReaderText)} ${ref(this.labelElRef)}>${ariaLabel}</span>` : null;
+  }
   renderButton() {
-    const { compact, disabled, icon, loading, textEnabled, label, text, indicator, indicatorRef, buttonId, messages } = this;
-    const labelFallback = label || text || "";
-    const ariaLabel = indicator ? messages.indicatorLabel.replace("{label}", labelFallback) : labelFallback;
+    const { compact, disabled, icon, loading, textEnabled, indicator, indicatorRef, buttonId } = this;
+    const ariaLabelledByElements = this.getLabelledByElements();
     const buttonClasses = {
       [CSS.button]: true,
       [CSS.buttonTextVisible]: textEnabled,
       [CSS.buttonCompact]: compact
     };
-    const buttonContent = html`${this.renderIconContainer()}${this.renderTextContainer()}${!icon && indicator && keyed("indicator-no-icon", html`<div class=${safeClassMap(CSS.indicatorWithoutIcon)}></div>`) || ""}`;
+    const buttonContent = html`${this.renderIconContainer()}${this.renderTextContainer()}${!icon && indicator && keyed("indicator-no-icon", html`<div class=${safeClassMap(CSS.indicatorWithoutIcon)}></div>`) || ""}${this.renderLabel()}`;
     const internalControlsElements = indicator && indicatorRef.value ? [indicatorRef.value] : [];
     const ariaControlsElements = [
       ...this.aria?.controlsElements ?? [],
       ...internalControlsElements
     ];
     if (this.dragHandle) {
-      return html`<span .ariaBusy=${loading} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .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=${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`<button .ariaBusy=${loading} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .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=${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>`;
   }
   render() {
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.renderButton()}${this.renderIndicatorText()}` });

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

@@ -20,8 +20,9 @@ export abstract class ActionBar extends LitElement {
   /** Specifies an accessible name for the first `calcite-action-group`. */
   accessor actionsStartGroupLabel: string | undefined;
   /**
-   * When `true`, the expand-toggling behavior is disabled.
+   * When `true`, the expand/collapse toggle button is not shown.
    *
+   * @deprecated in v5.2.0, removal target v6.0.0 - Use `expandToggleDisabled` instead.
    * @default false
    */
   accessor expandDisabled: boolean;
@@ -38,6 +39,12 @@ export abstract class ActionBar extends LitElement {
    * @default "end"
    */
   accessor expandPosition: Extract<"start" | "end", Position>;
+  /**
+   * When `true`, the expand/collapse toggle button is not shown.
+   *
+   * @default false
+   */
+  accessor expandToggleDisabled: boolean;
   /**
    * When `true`, the component is in a floating state.
    *
@@ -52,10 +59,10 @@ export abstract class ActionBar extends LitElement {
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      expand?: string;
-      collapse?: string;
-      expandLabel?: string;
-      collapseLabel?: string;
+      expand?: string | undefined;
+      collapse?: string | undefined;
+      expandLabel?: string | undefined;
+      collapseLabel?: string | undefined;
   };
   /**
    * When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.
@@ -74,7 +81,7 @@ export abstract class ActionBar extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /**
-   * When `expandDisabled` is `false`, specifies the expand toggle's chevron direction, where:
+   * When `expandToggleDisabled` is `false`, specifies the expand toggle's chevron direction, where:
    *
    * `"start"` positions the expand toggle's chevron away from the start of the component when `expanded` is `false`, and
    * `"end"` positions the expand toggle's chevron away from the end of the component when `expanded` is `false`.

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

@@ -10,6 +10,7 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { o as overflowActions, q as queryActions, t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
+import { l as logger } from "../../chunks/logger.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { i as isAction } from "../../chunks/resources.js";
 const calculateMaxItems = ({
@@ -59,15 +60,15 @@ class ActionBar extends LitElement {
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
     this.cancelable = useCancelable()(this);
     this.resize = debounce(({ width, height }) => {
-      const { expanded, expandDisabled, layout, overflowActionsDisabled, expandPosition } = this;
+      const { expanded, expandToggleDisabled, layout, overflowActionsDisabled, expandPosition } = this;
       if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width || !this.containerRef.value) {
         return;
       }
       this.updateGroups();
       const itemSizes = this.getItemSizes();
       const { actionGroups } = this;
-      const actionsEndCount = this.hasActionsEnd || !expandDisabled && expandPosition === "end" ? 1 : 0;
-      const actionsStartCount = this.hasActionsStart || !expandDisabled && expandPosition === "start" ? 1 : 0;
+      const actionsEndCount = this.hasActionsEnd || !expandToggleDisabled && expandPosition === "end" ? 1 : 0;
+      const actionsStartCount = this.hasActionsStart || !expandToggleDisabled && expandPosition === "start" ? 1 : 0;
       const groupCount = actionGroups.length + actionsEndCount + actionsStartCount;
       let bufferSize = groupCount;
       const actionBarContainerStyle = getComputedStyle(this.containerRef.value);
@@ -117,7 +118,7 @@ class ActionBar extends LitElement {
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
     this.floating = false;
-    this.expandDisabled = false;
+    this.expandToggleDisabled = false;
     this.expanded = false;
     this.expandPosition = "end";
     this.layout = "vertical";
@@ -132,11 +133,23 @@ class ActionBar extends LitElement {
     this.listen("keydown", this.handleKeyDown);
   }
   static {
-    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
+    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandToggleDisabled: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
+  get expandDisabled() {
+    return this.expandToggleDisabled;
+  }
+  set expandDisabled(value) {
+    logger.deprecated("property", {
+      component: this,
+      name: "expandDisabled",
+      removalVersion: 6,
+      suggested: "expandToggleDisabled"
+    });
+    this.expandToggleDisabled = value;
+  }
   async overflowActions() {
     this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
@@ -153,7 +166,7 @@ class ActionBar extends LitElement {
     this.cancelable.add(this.resize);
   }
   willUpdate(changes) {
-    if (changes.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== false) || changes.has("expandPosition") && (this.hasUpdated || this.expandPosition !== "end")) {
+    if (changes.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== false) || changes.has("expandToggleDisabled") && (this.hasUpdated || this.expandToggleDisabled !== false) || changes.has("expandPosition") && (this.hasUpdated || this.expandPosition !== "end")) {
       this.overflowActions();
     }
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
@@ -306,9 +319,9 @@ class ActionBar extends LitElement {
     return ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expanded, expandLabel: messages.expandLabel, expandText: messages.expand, position, ref: this.setExpandToggleEl, scale, toggle: toggleExpand, tooltip: this.expandTooltip });
   }
   renderActionsGroup(position) {
-    const { expandDisabled, scale, layout, overlayPositioning, expandPosition } = this;
+    const { expandToggleDisabled, scale, layout, overlayPositioning, expandPosition } = this;
     const isStart = position === "start";
-    const hasExpandToggle = !expandDisabled && expandPosition === position;
+    const hasExpandToggle = !expandToggleDisabled && expandPosition === position;
     const slotName = isStart ? SLOTS.actionsStart : SLOTS.actionsEnd;
     const onSlotChange = isStart ? this.handleActionsStartSlotChange : this.handleActionsEndSlotChange;
     const label = isStart ? this.actionsStartGroupLabel : this.actionsEndGroupLabel;

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

@@ -32,7 +32,7 @@ export abstract class ActionGroup extends LitElement {
    * @internal
    */
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the `calcite-action-menu` is open.
@@ -43,7 +43,7 @@ export abstract class ActionGroup extends LitElement {
   /** Specifies the position of the action menu. */
   accessor menuPlacement: LogicalPlacement | undefined;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { more?: string; };
+  accessor messageOverrides: { more?: string | undefined; };
   /**
    * When `true`, the component's actions will not be overflowed into a menu by a parent `calcite-action-bar`.
    *
@@ -83,9 +83,7 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor selectionMode: Extract<"single" | "single-persist" | "multiple" | "none", SelectionMode>;
   /**
-   * 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.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -22,8 +22,8 @@ export abstract class ActionMenu extends LitElement {
    * @default false
    */
   accessor expanded: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -59,9 +59,7 @@ export abstract class ActionMenu extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * 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.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -177,7 +177,7 @@ class ActionMenu extends LitElement {
     }
     menuButtonEl.removeEventListener("click", this.menuButtonClick);
     menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
-    this.menuButtonEl = null;
+    this.menuButtonEl = void 0;
   }
   setMenuButtonEl(event) {
     const actions = event.target.assignedElements({
@@ -213,7 +213,7 @@ class ActionMenu extends LitElement {
   setTooltipReferenceElement() {
     const { tooltipEl, expanded, menuButtonEl, open } = this;
     if (tooltipEl) {
-      tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : null;
+      tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : void 0;
     }
   }
   updateActions(actions) {
@@ -288,7 +288,7 @@ class ActionMenu extends LitElement {
     const { actionElements, activeMenuItemIndex, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = activeAction?.id || null;
-    return html`<calcite-popover auto-close .flipPlacements=${flipPlacements} focus-trap-disabled .label=${label} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} pointer-disabled .referenceElement=${menuButtonEl} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} trigger-disabled ${ref(this.setPopoverEl)}><div aria-activedescendant=${activeDescendantId ?? nothing} aria-labelledby=${menuButtonEl?.id ?? nothing} class=${safeClassMap(CSS.menu)} id=${menuId ?? nothing} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></calcite-popover>`;
+    return html`<calcite-popover auto-close .flipPlacements=${flipPlacements} focus-trap-disabled .label=${label} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} pointer-disabled .referenceElement=${menuButtonEl} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} trigger-disabled ${ref(this.setPopoverEl)}><div aria-activedescendant=${activeDescendantId ?? void 0 ?? nothing} aria-labelledby=${menuButtonEl?.id ?? nothing} class=${safeClassMap(CSS.menu)} id=${menuId ?? nothing} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></calcite-popover>`;
   }
   render() {
     return html`${this.renderMenuButton()}${this.renderMenuItems()}<slot name=${SLOTS.tooltip} @slotchange=${this.updateTooltip}></slot>`;

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

@@ -34,10 +34,10 @@ export abstract class ActionPad extends LitElement {
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      expand?: string;
-      collapse?: string;
-      expandLabel?: string;
-      collapseLabel?: string;
+      expand?: string | undefined;
+      collapse?: string | undefined;
+      expandLabel?: string | undefined;
+      collapseLabel?: string | undefined;
   };
   /**
    * Specifies the type of positioning to use for overlaid content, where:

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

@@ -57,7 +57,7 @@ export abstract class Alert extends LitElement {
    */
   accessor label: string;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
+  accessor messageOverrides: { close?: string | undefined; };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;
   /**
@@ -85,9 +85,7 @@ export abstract class Alert extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * 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.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -53,13 +53,9 @@ export abstract class Autocomplete extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[] | undefined;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /**
    * When `true` or not set, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
@@ -94,9 +90,9 @@ export abstract class Autocomplete extends LitElement {
   accessor maxLength: number | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      clear?: string;
-      loading?: string;
-      required?: string;
+      clear?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -180,9 +176,7 @@ export abstract class Autocomplete extends LitElement {
   /** Specifies the component's suffix text. */
   accessor suffixText: string | undefined;
   /**
-   * 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.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -8,7 +8,7 @@ import { debounce } from "es-toolkit";
 import { escapeRegExp } from "es-toolkit/compat";
 import { createRef, ref } from "lit/directives/ref.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -21,6 +21,7 @@ import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useForm } from "../../chunks/useForm.js";
+import { u as useLabel } from "../../chunks/useLabel.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}:host{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.floating-ui-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.floating-ui-container:popover-open{display:block}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content-container .calcite-floating-ui-anim{width:100%;overflow-y:auto;box-shadow:var(--calcite-shadow-md);max-block-size:var(--calcite-autocomplete-menu-max-size-y, 45vh);color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media(forced-colors:active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 const SLOTS = {
   contentBottom: "content-bottom",
@@ -55,6 +56,7 @@ class Autocomplete extends LitElement {
       inputType: "text"
     })(this);
     this.inputId = IDS.input(this.guid);
+    this.labelable = useLabel(this);
     this.listId = IDS.list(this.guid);
     this.messages = useT9n();
     this.transitionProp = "opacity";
@@ -143,7 +145,6 @@ class Autocomplete extends LitElement {
       childList: true,
       subtree: true
     });
-    connectLabel(this);
     this.getAllItemsDebounced();
     connectFloatingUI(this);
     this.cancelable.add(this.getAllItemsDebounced);
@@ -184,7 +185,6 @@ class Autocomplete extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
-    disconnectLabel(this);
     disconnectFloatingUI(this);
   }
   setFloatingElSize() {

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

@@ -12,7 +12,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @slot [content-start] - A slot for adding non-actionable elements before content of the component.
  */
 export abstract class AutocompleteItem extends LitElement {
-  /** Specifies a description for the component. Displays below the label text. */
+  /** Specifies a description for the component. Displays below the `label`. */
   accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.

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

@@ -24,7 +24,7 @@ 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}`;
+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);

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

@@ -35,7 +35,7 @@ export abstract class Block extends LitElement {
    * @default false
    */
   accessor collapsible: boolean;
-  /** Specifies a description for the component. Displays below the heading. */
+  /** Specifies a description for the component. Displays below the `heading`. */
   accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -80,7 +80,7 @@ export abstract class Block extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * Determines where the action menu will be positioned.
@@ -90,10 +90,10 @@ export abstract class Block extends LitElement {
   accessor menuPlacement: LogicalPlacement;
   /** Overrides individual strings used by the component. */
   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.
@@ -131,9 +131,7 @@ export abstract class Block extends LitElement {
    */
   accessor status: Status | undefined;
   /**
-   * 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.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -6,9 +6,9 @@ import type { BlockDragDetail } from "./interfaces.js";
 /** @slot  - A slot for adding `calcite-block` elements. */
 export abstract class BlockGroup extends LitElement {
   /** When provided, the method will be called to determine whether the element can move from the component. */
-  accessor canPull: (detail: BlockDragDetail) => boolean | "clone";
+  accessor canPull: ((detail: BlockDragDetail) => boolean | "clone") | undefined;
   /** When provided, the method will be called to determine whether the element can be added from another component. */
-  accessor canPut: (detail: BlockDragDetail) => boolean;
+  accessor canPut: ((detail: BlockDragDetail) => boolean) | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *

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

@@ -28,8 +28,8 @@ export abstract class BlockSection extends LitElement {
   accessor iconStart: IconName | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      collapse?: string;
-      expand?: string;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
    * When `true`, expands the component and its contents.

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

@@ -34,7 +34,7 @@ const ICONS = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle"
 };
-const styles = css`:host{box-sizing:border-box;display:block;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2))}:host([expanded]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([expanded]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .icon--end,:host([expanded]) .icon--start{color:var(--calcite-block-section-text-color, var(--calcite-color-text-1))}:host([expanded]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([expanded]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-brand-hover)}:host(:last-child){border-block-end-width:0px}:host([scale=s]) .toggle{padding-block:var(--calcite-spacing-xxs);gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-sm)}:host([scale=s]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-xxs))}:host([scale=m]) .toggle{padding-block:var(--calcite-spacing-sm);gap:var(--calcite-spacing-md);font-size:var(--calcite-font-size)}:host([scale=m]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-sm))}:host([scale=l]) .toggle{padding-block:var(--calcite-spacing-md);gap:var(--calcite-spacing-lg);font-size:var(--calcite-font-size-md)}:host([scale=l]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-md))}.toggle{display:flex;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;border-width:0px;outline-color:transparent;font-family:inherit;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));font-weight:var(--calcite-font-weight-regular);padding-inline:0;line-height:var(--calcite-font-line-height-relative-snug)}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));z-index:var(--calcite-z-index)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container:hover .chevron-icon{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-text-3)}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;display:block;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2))}:host([expanded]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([expanded]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .icon--end,:host([expanded]) .icon--start{color:var(--calcite-block-section-text-color, var(--calcite-color-text-1))}:host([expanded]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([expanded]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-brand-hover)}:host(:last-child){border-block-end-width:0px}:host([scale=s]) .toggle{padding-block:var(--calcite-spacing-xxs);gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-sm)}:host([scale=s]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-xxs))}:host([scale=m]) .toggle{padding-block:var(--calcite-spacing-sm);gap:var(--calcite-spacing-md);font-size:var(--calcite-font-size)}:host([scale=m]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-sm))}:host([scale=l]) .toggle{padding-block:var(--calcite-spacing-md);gap:var(--calcite-spacing-lg);font-size:var(--calcite-font-size-md)}:host([scale=l]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-md))}.toggle{display:flex;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;border-width:0px;outline-color:transparent;font-family:inherit;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));font-weight:var(--calcite-font-weight-regular);padding-inline:0;line-height:var(--calcite-font-line-height-relative-snug)}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));z-index:var(--calcite-z-index)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;overflow-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container:hover .chevron-icon{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-text-3)}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`;
 class BlockSection extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -45,11 +45,7 @@ export abstract class Button extends LitElement {
    * @see [MDN - Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
    */
   accessor download: string | boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
   accessor href: string | undefined;
@@ -74,7 +70,7 @@ export abstract class Button extends LitElement {
    */
   accessor loading: boolean;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { loading?: string; };
+  accessor messageOverrides: { loading?: string | undefined; };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
   accessor name: string | undefined;
   /**