@esri/calcite-components 5.2.0-next.10 → 5.2.0-next.101

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

@@ -36,6 +36,9 @@ class Accordion extends LitElement {
       this.updateAccordionItems();
     }
   }
+  loaded() {
+    this.dispatchAccordionItemsSync();
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
@@ -53,6 +56,11 @@ class Accordion extends LitElement {
       item.iconType = this.iconType;
       item.scale = this.scale;
     });
+    if (this.manager.loadedCalled) {
+      this.dispatchAccordionItemsSync();
+    }
+  }
+  dispatchAccordionItemsSync() {
     document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
   }
   render() {

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

@@ -1,28 +1,72 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-accordion-border-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-accordion-background-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-accordion-text-color": "*";
+  /** Specifies the component's main text color on hover. */
+  "--calcite-accordion-text-color-hover": "*";
+  /** Specifies the component's main text color when pressed. */
+  "--calcite-accordion-text-color-press": "*";
+  /**
+   * Specifies the component's background color.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-background-color` instead.
+   */
+  "--calcite-accordion-item-background-color": "*";
+  /**
+   * Specifies the component's border color.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-border-color` instead.
+   */
+  "--calcite-accordion-item-border-color": "*";
+  /** Specifies the component's padding. */
+  "--calcite-accordion-item-content-space": "*";
+  /** Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color. */
+  "--calcite-accordion-item-end-icon-color": "*";
+  /** Specifies the component's expand icon color. */
+  "--calcite-accordion-item-expand-icon-color": "*";
+  /** Specifies the component's `heading` background color. */
+  "--calcite-accordion-item-header-background-color": "*";
+  /** Specifies the component's `heading` background color when hovered. */
+  "--calcite-accordion-item-header-background-color-hover": "*";
+  /** Specifies the component's `heading` background color when pressed. */
+  "--calcite-accordion-item-header-background-color-press": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-accordion-item-heading-text-color": "*";
+  /**
+   * Specifies the component's default icon color.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-icon-color` instead.
+   */
+  "--calcite-accordion-item-icon-color": "*";
+  /** Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color. */
+  "--calcite-accordion-item-start-icon-color": "*";
+  /**
+   * Specifies the component's text color.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color` instead.
+   */
+  "--calcite-accordion-item-text-color": "*";
+  /**
+   * Specifies the component's text color on hover.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color-hover` instead.
+   */
+  "--calcite-accordion-item-text-color-hover": "*";
+}
+}
+
 /**
- * @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.
+ * @deprecated in v5.2.0, removal target v7.0.0 - Use the `calcite-block` component instead.
  * @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.
@@ -48,10 +92,14 @@ export abstract class AccordionItem extends LitElement {
   accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
   accessor iconStart: IconName | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      collapse?: string;
-      expand?: string;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
    * Sets focus on the component.

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

@@ -7,7 +7,7 @@ import { useDirection } from "@arcgis/lumina/controllers";
 import { createRef, ref } from "lit/directives/ref.js";
 import { c as closestElementCrossShadowBoundary, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { H as Heading } from "../../chunks/Heading.js";
 const SLOTS = {
@@ -48,13 +48,13 @@ const ICONS = {
   plus: "plus",
   minus: "minus"
 };
-const styles = css`.icon-position--end,.icon-position--start{--calcite-internal-accordion-item-icon-rotation: -90deg ;--calcite-internal-accordion-item-active-icon-rotation: 0deg;--calcite-internal-accordion-item-icon-rotation-rtl: 90deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: 0deg}:host([scale=s]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xxs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xxs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-spacing-xs);--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--1)}:host{position:relative;display:flex;flex-direction:column;text-decoration-line:none;color:var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)));background-color:var(--calcite-accordion-background-color, var(--calcite-accordion-item-background-color));border-width:0}:host .header{background-color:var(--calcite-accordion-item-header-background-color)}:host .header:hover{background-color:var(--calcite-internal-accordion-item-header-background-color-hover)}:host .header:active{background-color:var(--calcite-internal-accordion-item-header-background-color-press)}.header--solid{--calcite-internal-accordion-item-header-background-color-hover: var( --calcite-accordion-item-header-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-accordion-item-header-background-color-press: var( --calcite-accordion-item-header-background-color-press, var(--calcite-color-foreground-3) )}.header--transparent{--calcite-internal-accordion-item-header-background-color-hover: var( --calcite-accordion-item-header-background-color-hover, var(--calcite-color-transparent-hover) );--calcite-internal-accordion-item-header-background-color-press: var( --calcite-accordion-item-header-background-color-press, var(--calcite-color-transparent-press) )}.icon-position--start{--calcite-internal-accordion-item-flex-direction: row-reverse;--calcite-internal-accordion-item-icon-spacing-start: 0;--calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin)}.icon-position--end{--calcite-internal-accordion-item-flex-direction: row;--calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);--calcite-internal-accordion-item-icon-spacing-end: 0}.icon-position--end:not(.icon-type--plus-minus){--calcite-internal-accordion-item-icon-rotation: 0deg;--calcite-internal-accordion-item-active-icon-rotation: 180deg;--calcite-internal-accordion-item-icon-rotation-rtl: 0deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: -180deg }.content,.header{border-block-end-width:var(--calcite-border-width-sm);border-block-end-style:solid;border-color:var(--calcite-accordion-border-color, var(--calcite-accordion-item-border-color, var(--calcite-color-border-2)))}.header-content{padding:var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem));background:none;border:none;appearance:none;-webkit-appearance:none;box-shadow:none;outline:none;font-family:inherit}.content{padding:var(--calcite-accordion-item-content-space, var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem)))}.header{display:flex;align-items:stretch}.header-content,.header-container,.header .actions-start,.header .actions-end{display:flex;align-items:center;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word}.header .has-actions{gap:var(--calcite-internal-accordion-item-action-slot-spacing);padding-block:var(--calcite-internal-accordion-item-action-slot-spacing)}.header .actions-start.has-actions{padding-inline:var(--calcite-internal-accordion-item-action-slot-spacing) 0}.header .actions-end.has-actions{padding-inline:0 var(--calcite-internal-accordion-item-action-slot-spacing)}.header-content{flex-grow:1;cursor:pointer;outline-color:transparent;flex-direction:var(--calcite-internal-accordion-item-flex-direction);color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit))}.header-content: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))))}.header-content:focus,.header-content:hover,.header-content:active{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover))}.header-content:focus .heading,.header-content:hover .heading,.header-content:active .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-press))}.header-container{inline-size:100%}.slot-content-end{margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.slot-content-start{margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}.heading,.description{display:flex;inline-size:100%;line-height:var(--calcite-font-line-height-relative-snug)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2)}:host([scale=m]) .heading{font-size:var(--calcite-font-size--1)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0)}.icon{display:flex;align-items:center;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-end)}.icon--start{color:var(--calcite-accordion-item-icon-color-start, var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, var(--calcite-ui-icon-color, currentColor))));margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.icon--end{color:var(--calcite-accordion-item-icon-color-end, var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, var(--calcite-ui-icon-color, currentColor))));margin-inline-end:var(--calcite-internal-accordion-icon-margin);margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3))));margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-internal-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-icon-rotation-rtl))}.description{font-size:var(--calcite-internal-accordion-item-description-font-size)}.content{display:none;text-align:initial}:host(:not([expanded])) .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-1))));font-weight:var(--calcite-font-weight-normal)}:host([expanded]){color:var(--calcite-accordion-text-color-press, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-1))))}:host([expanded]) .header{border-block-end-color:transparent}:host([expanded]) .expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-text-color-hover, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))))));transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl))}:host([expanded]) .description{color:var(--calcite-accordion-text-color-hover, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))))}:host([expanded]) .content{display:block}@media(forced-colors:active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}.header-content:hover .heading,.header-content:focus .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`.icon-position--end,.icon-position--start{--calcite-internal-accordion-item-icon-rotation: -90deg ;--calcite-internal-accordion-item-active-icon-rotation: 0deg;--calcite-internal-accordion-item-icon-rotation-rtl: 90deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: 0deg}:host([scale=s]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-accordion-item-action-slot-spacing: var(--calcite-theme-space-xs, var(--calcite-spacing-xs));--calcite-internal-accordion-item-description-font-size: var(--calcite-font-size--1)}:host{position:relative;display:flex;flex-direction:column;text-decoration-line:none;color:var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)));background-color:var(--calcite-accordion-background-color, var(--calcite-accordion-item-background-color));border-width:0}:host .header{background-color:var(--calcite-accordion-item-header-background-color)}:host .header:hover{background-color:var(--calcite-internal-accordion-item-header-background-color-hover)}:host .header:active{background-color:var(--calcite-internal-accordion-item-header-background-color-press)}.header--solid{--calcite-internal-accordion-item-header-background-color-hover: var( --calcite-accordion-item-header-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)) );--calcite-internal-accordion-item-header-background-color-press: var( --calcite-accordion-item-header-background-color-press, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)) )}.header--transparent{--calcite-internal-accordion-item-header-background-color-hover: var( --calcite-accordion-item-header-background-color-hover, var(--calcite-color-transparent-hover) );--calcite-internal-accordion-item-header-background-color-press: var( --calcite-accordion-item-header-background-color-press, var(--calcite-color-transparent-press) )}.icon-position--start{--calcite-internal-accordion-item-flex-direction: row-reverse;--calcite-internal-accordion-item-icon-spacing-start: 0;--calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin)}.icon-position--end{--calcite-internal-accordion-item-flex-direction: row;--calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);--calcite-internal-accordion-item-icon-spacing-end: 0}.icon-position--end:not(.icon-type--plus-minus){--calcite-internal-accordion-item-icon-rotation: 0deg;--calcite-internal-accordion-item-active-icon-rotation: 180deg;--calcite-internal-accordion-item-icon-rotation-rtl: 0deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: -180deg }.content,.header{border-block-end-width:var(--calcite-border-width-sm);border-block-end-style:solid;border-color:var(--calcite-accordion-border-color, var(--calcite-accordion-item-border-color, var(--calcite-color-border-2)))}.header-content{padding:var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem));background:none;border:none;appearance:none;-webkit-appearance:none;box-shadow:none;outline:none;font-family:inherit}.content{padding:var(--calcite-accordion-item-content-space, var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem)))}.header{display:flex;align-items:stretch}.header-content,.header-container,.header .actions-start,.header .actions-end{display:flex;align-items:center;transition-timing-function:cubic-bezier(.4,0,.2,1);overflow-wrap:break-word;word-break:break-word}.header .has-actions{gap:var(--calcite-internal-accordion-item-action-slot-spacing);padding-block:var(--calcite-internal-accordion-item-action-slot-spacing)}.header .actions-start.has-actions{padding-inline:var(--calcite-internal-accordion-item-action-slot-spacing) 0}.header .actions-end.has-actions{padding-inline:0 var(--calcite-internal-accordion-item-action-slot-spacing)}.header-content{flex-grow:1;cursor:pointer;outline-color:transparent;flex-direction:var(--calcite-internal-accordion-item-flex-direction);color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit))}.header-content: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))))}.header-content:focus,.header-content:hover,.header-content:active{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover))}.header-content:focus .heading,.header-content:hover .heading,.header-content:active .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-press))}.header-container{inline-size:100%}.slot-content-end{margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.slot-content-start{margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}.heading,.description{display:flex;inline-size:100%;line-height:var(--calcite-font-line-height-relative-snug)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2)}:host([scale=m]) .heading{font-size:var(--calcite-font-size--1)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0)}.icon{display:flex;align-items:center;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-end)}.icon--start{color:var(--calcite-accordion-item-icon-color-start, var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, var(--calcite-ui-icon-color, currentColor))));margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.icon--end{color:var(--calcite-accordion-item-icon-color-end, var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, var(--calcite-ui-icon-color, currentColor))));margin-inline-end:var(--calcite-internal-accordion-icon-margin);margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3))));margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-internal-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-icon-rotation-rtl))}.description{font-size:var(--calcite-internal-accordion-item-description-font-size)}.content{display:none;text-align:initial}:host(:not([expanded])) .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-1))));font-weight:var(--calcite-theme-font-weight-regular, var(--calcite-font-weight-normal))}:host([expanded]){color:var(--calcite-accordion-text-color-press, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-1))))}:host([expanded]) .header{border-block-end-color:transparent}:host([expanded]) .expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-text-color-hover, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))))));transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl))}:host([expanded]) .description{color:var(--calcite-accordion-text-color-hover, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))))}:host([expanded]) .content{display:block}@media(forced-colors:active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}.header-content:hover .heading,.header-content:focus .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}`;
 class AccordionItem extends LitElement {
   constructor() {
     super();
     this.direction = useDirection();
     this.headerRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.messages = useT9n();
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
@@ -66,11 +66,9 @@ class AccordionItem extends LitElement {
     this.calciteInternalAccordionItemClose = createEvent({ cancelable: false });
     this.calciteInternalAccordionItemSelect = createEvent({ cancelable: false });
     this.listen("keydown", this.keyDownHandler);
-    this.listenOn(document.body, "calciteInternalAccordionChange", this.updateActiveItemOnChange);
-    this.listenOn(document, "calciteInternalAccordionItemsSync", this.accordionItemSyncHandler);
   }
   static {
-    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconPosition: 1, iconStart: [3, { type: String }, { reflect: true }], iconType: 1, scale: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconPosition: 1, iconStart: [3, {}, { reflect: true }], iconType: 1, scale: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
@@ -78,6 +76,10 @@ class AccordionItem extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.headerRef.value, options);
   }
+  load() {
+    this.listenOn(document, "calciteInternalAccordionChange", this.updateActiveItemOnChange);
+    this.listenOn(document, "calciteInternalAccordionItemsSync", this.accordionItemSyncHandler);
+  }
   willUpdate(changes) {
     if (changes.has("expanded") && this.hasUpdated) {
       if (this.expanded) {

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

@@ -1,24 +1,66 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement, LuminaJsx } from "@arcgis/lumina";
-import type { Alignment, Appearance, AriaAttributesCamelCased, Scale } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+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.
- * @slot  - A slot for adding non-interactive content, such as a `calcite-icon`.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color when hovered. */
+  "--calcite-action-background-color-hover": "*";
+  /** Specifies the component's background color when active. */
+  "--calcite-action-background-color-press": "*";
+  /**
+   * Specifies the component's background color when active.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-background-color-press` instead.
+   */
+  "--calcite-action-background-color-pressed": "*";
+  /** Specifies the component's background color. */
+  "--calcite-action-background-color": "*";
+  /**
+   * Specifies the component's corner radius end end.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead.
+   */
+  "--calcite-action-corner-radius-end-end": "*";
+  /**
+   * Specifies the component's corner radius end start.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead.
+   */
+  "--calcite-action-corner-radius-end-start": "*";
+  /**
+   * Specifies the component's corner radius start end.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead.
+   */
+  "--calcite-action-corner-radius-start-end": "*";
+  /**
+   * Specifies the component's corner radius start start.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead.
+   */
+  "--calcite-action-corner-radius-start-start": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-action-corner-radius": "*";
+  /** Specifies the component's indicator color. */
+  "--calcite-action-indicator-color": "*";
+  /** Specifies the component's text color when pressed or hovered. */
+  "--calcite-action-text-color-press": "*";
+  /**
+   * Specifies the component's text color when hovered.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-action-text-color-press` instead.
+   */
+  "--calcite-action-text-color-pressed": "*";
+  /** Specifies the component's text color. */
+  "--calcite-action-text-color": "*";
+  /** Specifies the component's loader color. */
+  "--calcite-action-loader-color": "*";
+}
+}
+
+/** @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.
@@ -31,7 +73,10 @@ export abstract class Action extends LitElement {
   /**
    * Specifies the appearance of the component.
    *
-   * @deprecated in v5.0.0, removal target v6.0.0 - No longer necessary.
+   * @deprecated
+   * in v5.0.0, removal target v7.0.0 - No longer necessary for `"transparent"`.
+   *
+   * For a `"solid"` appearance, use the component's background color tokens instead.
    * @default "transparent"
    */
   accessor appearance: Extract<"solid" | "transparent", Appearance>;
@@ -74,11 +119,15 @@ export abstract class Action extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      loading?: string;
-      indicator?: string;
-      indicatorLabel?: string;
+      loading?: string | undefined;
+      indicator?: string | undefined;
+      indicatorLabel?: string | undefined;
   };
   /**
    * When `true`, the component is not automatically overflowed into a menu by a parent `calcite-action-bar`.

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";
@@ -8,23 +8,25 @@ import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.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}`;
+import { I as IDS, C as CSS } from "../../chunks/resources4.js";
+import { s as styles$1 } from "../../chunks/screen-reader.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-theme-color-surface-2, 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-theme-space-2xs, 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-theme-space-sm, 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-theme-space-sm-plus, 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-theme-space-2xs, 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-theme-color-surface-2, 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-theme-font-weight-regular, 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-theme-color-surface-3, 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-theme-color-surface-4, 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-theme-color-surface-4, 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-theme-color-surface-4, 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-theme-color-surface-4, var(--calcite-color-foreground-3))))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-theme-color-surface-2, 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}`;
 class Action extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     this.guid = guid();
     this.buttonRef = createRef();
     this.buttonId = IDS.button(this.guid);
     this.mutationObserver = createObserver("mutation", () => this.requestUpdate());
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.indicatorRef = createRef();
     this.interactiveContainer = useInteractive(this);
-    this.formTrigger = useFormTrigger()(this);
+    this.labelElRef = createRef();
     this.active = false;
     this.activeDescendant = false;
     this.appearance = "transparent";
@@ -39,15 +41,16 @@ class Action extends LitElement {
     this.width = "auto";
     this.textEnabled = false;
     this.type = "button";
+    useFormTrigger()(this);
   }
   static {
-    this.properties = { aria: [0, {}, { attribute: false }], active: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], compact: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], indicator: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overflowDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
+    this.properties = { aria: [0, {}, { attribute: false }], active: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], compact: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], indicator: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overflowDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
   }
   static {
     this.formAssociated = true;
   }
   static {
-    this.styles = styles;
+    this.styles = [styles, styles$1];
   }
   async setFocus(options) {
     return this.focusSetter(() => this.buttonRef.value, options);
@@ -60,17 +63,28 @@ 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 = {
       [CSS.textContainer]: true,
       [CSS.textContainerVisible]: textEnabled
     };
-    return text ? keyed("text-container", html`<div class=${safeClassMap(textContainerClasses)}>${text}</div>`) : null;
+    return text ? keyed("text-container", html`<div aria-hidden=true class=${safeClassMap(textContainerClasses)}>${text}</div>`) : null;
   }
   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 +99,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=${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} .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=${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

@@ -1,14 +1,24 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Layout, Position, Scale, SelectionAppearance } from "../interfaces.js";
+import type { Layout, Position, Scale, SelectionAppearance } from "../types.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-action-bar-background-color": "*";
+  /** Specifies the component's border radius when `floating` is `true`. */
+  "--calcite-action-bar-corner-radius": "*";
+  /** When `layout` is `"vertical"`, specifies the component's maximum width. */
+  "--calcite-action-bar-expanded-max-width": "*";
+  /** Specifies the space between slotted components in the component. */
+  "--calcite-action-bar-items-space": "*";
+  /** Specifies the component's shadow when `floating` is `true`. */
+  "--calcite-action-bar-shadow": "*";
+}
+}
+
 /**
- * @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.
@@ -20,13 +30,16 @@ 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;
   /**
-   * When `true`, expands the component and its contents.
+   * When `true`, expands the component.
+   *
+   * The `expanded` or `textEnabled` state of `calcite-action`, `calcite-action-group`, and `calcite-action-menu` children is synced when this property is toggled, not during initialization.
    * When a child `calcite-action` specifies `textEnabled` as `true`, its `text` initially displays adjacent to its `icon` regardless of expansion.
    *
    * @default false
@@ -38,6 +51,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.
    *
@@ -50,34 +69,52 @@ export abstract class ActionBar extends LitElement {
    * @default "vertical"
    */
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      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.
    *
+   * @deprecated in v5.2.0, removal target v7.0.0 - Use `overflowMode="none"` instead.
    * @default false
    */
   accessor overflowActionsDisabled: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies how the component handles `calcite-action`s that overflow the available space, where:
+   *
+   * `"collapse"` overflows actions that won't fit into menus,
+   *
+   * `"wrap"` allows the actions to wrap onto multiple lines, adding dividers between the wrapped rows
+   * or columns (has no effect when `layout` is `"grid"`), and
+   *
+   * `"none"` applies no overflow handling.
+   *
+   * @default "collapse"
+   */
+  accessor overflowMode: "collapse" | "wrap" | "none";
+  /**
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
   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.
    *
-   * `"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`.
+   * - `"start"` positions the expand toggle's chevron away from the start of the component when `expanded` is `false`.
+   * - `"end"` positions the expand toggle's chevron away from the end of the component when `expanded` is `false`.
    *
    * When `expanded` is `true`, the chevron direction is reversed.
    */