@esri/calcite-components 3.2.0-next.8 → 3.2.0

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

@@ -3,15 +3,31 @@ import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Appearance, Position, IconType, Scale, SelectionMode } from '../interfaces';
 
-/** @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can. */
+/** @slot  - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can. */
 export declare class Accordion extends LitElement {
-    /** Specifies the appearance of the component. */
+    /**
+     * Specifies the appearance of the component.
+     *
+     * @default "solid"
+     */
     appearance: Extract<"solid" | "transparent", Appearance>;
-    /** Specifies the placement of the icon in the header. */
+    /**
+     * Specifies the placement of the icon in the header.
+     *
+     * @default "end"
+     */
     iconPosition: Extract<"start" | "end", Position>;
-    /** Specifies the type of the icon in the header. */
+    /**
+     * Specifies the type of the icon in the header.
+     *
+     * @default "chevron"
+     */
     iconType: Extract<"chevron" | "caret" | "plus-minus", IconType>;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /**
      * Specifies the selection mode of the component, where:
@@ -21,6 +37,8 @@ export declare class Accordion extends LitElement {
      * `"single"` allows only one selection, and
      *
      * `"single-persist"` allows one selection and prevents de-selection.
+     *
+     * @default "multiple"
      */
     selectionMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -12,8 +12,6 @@ const CSS = {
 };
 const styles = css`:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-accordion-border-color, var(--calcite-color-border-2));background-color:var(--calcite-accordion-background-color, var(--calcite-color-foreground-1))}.accordion--transparent{--calcite-accordion-border-color: transparent;border-color:var(--calcite-color-transparent);background-color:var(--calcite-color-transparent)}:host([scale=s]){--calcite-internal-accordion-item-spacing-unit: .25rem;--calcite-internal-accordion-icon-margin: .5rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) .5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-internal-accordion-item-spacing-unit: .5rem;--calcite-internal-accordion-icon-margin: .75rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) .75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-internal-accordion-item-spacing-unit: .75rem;--calcite-internal-accordion-icon-margin: 1rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
 class Accordion extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.mutationObserver = createObserver("mutation", () => this.updateAccordionItems());
@@ -26,7 +24,7 @@ class Accordion extends LitElement {
     this.listen("calciteInternalAccordionItemSelect", this.updateActiveItemOnChange);
   }
   static {
-    this.properties = { appearance: [3, { reflect: true }], iconPosition: [3, { reflect: true }], iconType: [3, { reflect: true }], scale: [3, { reflect: true }], selectionMode: [3, { reflect: true }] };
+    this.properties = { appearance: [3, {}, { reflect: true }], iconPosition: [3, {}, { reflect: true }], iconType: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -37,7 +35,7 @@ class Accordion extends LitElement {
     this.updateAccordionItems();
   }
   willUpdate(changes) {
-    if (changes.has("iconPosition") && (this.hasUpdated || this.iconPosition !== "end") || changes.has("iconType") && (this.hasUpdated || this.iconType !== "chevron") || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "multiple")) {
+    if (changes.has("appearance") && (this.hasUpdated || this.appearance !== "solid") || changes.has("iconPosition") && (this.hasUpdated || this.iconPosition !== "end") || changes.has("iconType") && (this.hasUpdated || this.iconType !== "chevron") || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "multiple")) {
       this.updateAccordionItems();
     }
   }
@@ -45,8 +43,6 @@ class Accordion extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   updateActiveItemOnChange(event) {
     this.calciteInternalAccordionChange.emit({
       requestedAccordionItem: event.detail.requestedAccordionItem
@@ -55,14 +51,13 @@ class Accordion extends LitElement {
   }
   updateAccordionItems() {
     this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
+      item.appearance = this.appearance;
       item.iconPosition = this.iconPosition;
       item.iconType = this.iconType;
       item.scale = this.scale;
     });
     document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
   }
-  // #endregion
-  // #region Rendering
   render() {
     const transparent = this.appearance === "transparent";
     return html`<div class=${safeClassMap({

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

@@ -1,19 +1,23 @@
 /// <reference types="../../index.d.ts" />
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlipContext, Position, Scale, IconType } from '../interfaces';
+import { FlipContext, Position, Scale, IconType, Appearance } from '../interfaces';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 import { Accordion } from '../calcite-accordion/customElement.js';
 import { RequestedItem } from './interfaces';
 
 /**
- * @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.
+ * @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.
  */
 export declare class AccordionItem extends LitElement {
     /** Specifies a description for the component. */
     description: string;
-    /** When `true`, the component is expanded. */
+    /**
+     * When `true`, the component is expanded.
+     *
+     * @default false
+     */
     expanded: boolean;
     /** Specifies heading text for the component. */
     heading: string;

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

@@ -1,12 +1,12 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { keyed } from "lit-html/directives/keyed.js";
 import { ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { k as closestElementCrossShadowBoundary, a as slotChangeHasAssignedElement, g as getElementDir } from "../../chunks/dom.js";
+import { l as closestElementCrossShadowBoundary, a as slotChangeHasAssignedElement, g as getElementDir } from "../../chunks/dom.js";
 import { c as componentFocusable, g as getIconScale } from "../../chunks/component.js";
 import { css } from "@lit/reactive-element/css-tag.js";
 const SLOTS = {
@@ -32,10 +32,8 @@ const IDS = {
   section: "section",
   sectionToggle: "section-toggle"
 };
-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{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)}.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))}.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-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word}.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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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, var(--calcite-color-text-2)))}.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, var(--calcite-color-text-1)))}.header-container{inline-size:100%}.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%}.heading{font-weight:var(--calcite-font-weight-medium)}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch}.icon{display:flex;align-items:center;transition-duration:.15s;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, 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, 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{margin-block-start:.25rem}.content{display:none;text-align:initial}:host(:not(:focus):not(:hover):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-2))))}: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{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))}.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-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word}.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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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%}.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%}.heading{font-weight:var(--calcite-font-weight-medium)}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch}.icon{display:flex;align-items:center;transition-duration:.15s;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, 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, 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{margin-block-start:.25rem}.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-2))))}: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 {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.hasActionsEnd = false;
@@ -48,20 +46,15 @@ class AccordionItem extends LitElement {
     this.listenOn(document, "calciteInternalAccordionItemsSync", this.accordionItemSyncHandler);
   }
   static {
-    this.properties = { hasActionsEnd: [16, { state: true }], hasActionsStart: [16, { state: true }], accordionParent: [0, { attribute: false }], description: 1, expanded: [7, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, { reflect: true }], iconFlipRtl: [3, { reflect: true }], iconPosition: 1, iconStart: [3, { reflect: true }], iconType: 1, scale: 1 };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], accordionParent: [0, {}, { attribute: false }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, iconPosition: 1, iconStart: [3, {}, { reflect: true }], iconType: 1, scale: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.headerEl.focus();
   }
-  // #endregion
-  // #region Private Methods
   keyDownHandler(event) {
     if (event.target === this.el) {
       switch (event.key) {
@@ -93,6 +86,7 @@ class AccordionItem extends LitElement {
     if (accordion !== closestAccordionParent) {
       return;
     }
+    this.appearance = closestAccordionParent.appearance;
     this.iconPosition = closestAccordionParent.iconPosition;
     this.iconType = closestAccordionParent.iconType;
     this.scale = closestAccordionParent.scale;
@@ -107,7 +101,6 @@ class AccordionItem extends LitElement {
   storeHeaderEl(el) {
     this.headerEl = el;
   }
-  /** handle clicks on item header */
   itemHeaderClickHandler() {
     this.emitRequestedItem();
   }
@@ -131,8 +124,6 @@ class AccordionItem extends LitElement {
       requestedAccordionItem: this.el
     });
   }
-  // #endregion
-  // #region Rendering
   renderActionsStart() {
     return html`<div class=${safeClassMap(CSS.actionsStart)} .hidden=${!this.hasActionsStart}><slot name=${SLOTS.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`;
   }
@@ -148,7 +139,11 @@ class AccordionItem extends LitElement {
     return html`<div class=${safeClassMap({
       [`icon-position--${this.iconPosition}`]: true,
       [`icon-type--${this.iconType}`]: true
-    })}><div class=${safeClassMap({ [CSS.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" })}>${this.renderActionsStart()}<div aria-controls=${IDS.section} .ariaExpanded=${this.expanded} class=${safeClassMap(CSS.headerContent)} id=${IDS.sectionToggle} @click=${this.itemHeaderClickHandler} role=button tabindex=0 ${ref(this.storeHeaderEl)}><div class=${safeClassMap(CSS.headerContainer)}>${iconStartEl}<div class=${safeClassMap(CSS.headerText)}><span class=${safeClassMap(CSS.heading)}>${this.heading}</span>${description ? html`<span class=${safeClassMap(CSS.description)}>${description}</span>` : null}</div>${iconEndEl}</div><calcite-icon class=${safeClassMap(CSS.expandIcon)} .icon=${this.iconType === "chevron" ? "chevronDown" : this.iconType === "caret" ? "caretDown" : this.expanded ? "minus" : "plus"} .scale=${getIconScale(this.scale)}></calcite-icon></div>${this.renderActionsEnd()}</div><section aria-labelledby=${IDS.sectionToggle} class=${safeClassMap(CSS.content)} id=${IDS.section}><slot></slot></section></div>`;
+    })}><div class=${safeClassMap({
+      [CSS.header]: true,
+      [CSS_UTILITY.rtl]: dir === "rtl",
+      [`header--${this.appearance}`]: true
+    })}>${this.renderActionsStart()}<div aria-controls=${IDS.section} .ariaExpanded=${this.expanded} class=${safeClassMap(CSS.headerContent)} id=${IDS.sectionToggle} @click=${this.itemHeaderClickHandler} role=button tabindex=0 ${ref(this.storeHeaderEl)}><div class=${safeClassMap(CSS.headerContainer)}>${iconStartEl}<div class=${safeClassMap(CSS.headerText)}><span class=${safeClassMap(CSS.heading)}>${this.heading}</span>${description ? html`<span class=${safeClassMap(CSS.description)}>${description}</span>` : null}</div>${iconEndEl}</div><calcite-icon class=${safeClassMap(CSS.expandIcon)} .icon=${this.iconType === "chevron" ? "chevronDown" : this.iconType === "caret" ? "caretDown" : this.expanded ? "minus" : "plus"} .scale=${getIconScale(this.scale)}></calcite-icon></div>${this.renderActionsEnd()}</div><section aria-labelledby=${IDS.sectionToggle} class=${safeClassMap(CSS.content)} id=${IDS.section}><slot></slot></section></div>`;
   }
 }
 customElement("calcite-accordion-item", AccordionItem);

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

@@ -11,7 +11,9 @@ export declare const CSS: {
     header: string;
     headerContainer: string;
     headerContent: string;
+    headerSolid: string;
     headerText: string;
+    headerTransparent: string;
     heading: string;
     icon: string;
     iconEnd: string;

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

@@ -5,51 +5,66 @@ import { Alignment, Appearance, Scale } from '../interfaces';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 
 /**
- * @slot - A slot for adding a `calcite-icon`.
- * @slot tooltip - [Deprecated] Use the `calcite-tooltip` component instead.
+ * @slot  - A slot for adding a `calcite-icon`.
+ * @slot [tooltip] - [Deprecated] Use the `calcite-tooltip` component instead.
  */
 export declare class Action extends LitElement {
-    /** When `true`, the component is highlighted. */
+    /**
+     * When `true`, the component is highlighted.
+     *
+     * @default false
+     */
     active: boolean;
     /** Specifies the horizontal alignment of button elements with text content. */
     alignment: Alignment;
-    /** Specifies the appearance of the component. */
+    /**
+     * Specifies the appearance of the component.
+     *
+     * @default "solid"
+     */
     appearance: Extract<"solid" | "transparent", Appearance>;
     /**
      * When `true`, the side padding of the component is reduced.
      *
      * @deprecated No longer necessary.
+     * @default false
      */
     compact: boolean;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
     /** Specifies an icon to display. */
     icon: IconNameOrString;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     *
+     * @default false
+     */
     iconFlipRtl: boolean;
-    /** When `true`, displays a visual indicator. */
+    /**
+     * When `true`, displays a visual indicator.
+     *
+     * @default false
+     */
     indicator: boolean;
     /** Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. */
     label: string;
-    /** When `true`, a busy indicator is displayed. */
+    /**
+     * When `true`, a busy indicator is displayed.
+     *
+     * @default false
+     */
     loading: boolean;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * Specifies the size of the component.
      *
-     * @private
+     * @default "m"
      */
-    private messages: {
-        loading: string;
-        indicator: string;
-        indicatorLabel: string;
-    } & import('@arcgis/components-controllers').T9nMeta<{
-        loading: string;
-        indicator: string;
-        indicatorLabel: string;
-    }>;
-    /** Specifies the size of the component. */
     scale: Scale;
     /**
      * Specifies text that accompanies the icon.
@@ -57,8 +72,21 @@ export declare class Action extends LitElement {
      * @required
      */
     text: string;
-    /** Indicates whether the text is displayed. */
+    /**
+     * Indicates whether the text is displayed.
+     *
+     * @default false
+     */
     textEnabled: boolean;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
+    private messages: {
+        loading: string;
+        indicator: string;
+        indicatorLabel: string;
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
+        loading: string;
+        indicator: string;
+        indicatorLabel: string;
+    }>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { keyed } from "lit-html/directives/keyed.js";
@@ -37,6 +37,7 @@ class Action extends LitElement {
     this.buttonId = `${this.guid}-button`;
     this.indicatorId = `${this.guid}-indicator`;
     this.mutationObserver = createObserver("mutation", () => this.requestUpdate());
+    this.messages = useT9n({ blocking: true });
     this.active = false;
     this.appearance = "solid";
     this.compact = false;
@@ -45,25 +46,19 @@ class Action extends LitElement {
     this.iconFlipRtl = false;
     this.indicator = false;
     this.loading = false;
-    this.messages = useT9n({ blocking: true });
     this.scale = "m";
     this.textEnabled = false;
   }
   static {
-    this.properties = { active: [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 }], 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 }], scale: [3, { reflect: true }], text: 1, textEnabled: [7, { reflect: true, type: Boolean }] };
+    this.properties = { active: [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 }], 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 }], scale: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.buttonEl.value?.focus();
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -75,8 +70,6 @@ class Action extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   handleTooltipSlotChange(event) {
     const tooltips = event.target.assignedElements({
       flatten: true
@@ -86,8 +79,6 @@ class Action extends LitElement {
       tooltip.referenceElement = this.buttonEl.value;
     }
   }
-  // #endregion
-  // #region Rendering
   renderTextContainer() {
     const { text, textEnabled } = this;
     const textContainerClasses = {

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

@@ -6,39 +6,45 @@ import { OverlayPositioning } from '../../utils/floating-ui';
 import { Tooltip } from '../calcite-tooltip/customElement.js';
 
 /**
- * @slot - A slot for adding `calcite-action`s that will appear at the top of the component.
- * @slot bottom-actions - [Deprecated] Use the `"actions-end"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
- * @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 expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
+ * @slot  - A slot for adding `calcite-action`s that will appear at the top of the component.
+ * @slot [bottom-actions] - [Deprecated] Use the `"actions-end"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
+ * @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 [expand-tooltip] - A slot to set the `calcite-tooltip` for the expand toggle.
  */
 export declare class ActionBar extends LitElement {
     /** Specifies the accessible label for the last `calcite-action-group`. */
     actionsEndGroupLabel: string;
-    /** When `true`, the expand-toggling behavior is disabled. */
+    /**
+     * When `true`, the component is in a floating state.
+     *
+     * @default false
+     */
+    floating: boolean;
+    /**
+     * When `true`, the expand-toggling behavior is disabled.
+     *
+     * @default false
+     */
     expandDisabled: boolean;
-    /** When `true`, the component is expanded. */
+    /**
+     * When `true`, the component is expanded.
+     *
+     * @default false
+     */
     expanded: boolean;
-    /** Specifies the layout direction of the actions. */
-    layout: Extract<"horizontal" | "vertical", Layout>;
+    /**
+     * Specifies the layout direction of the actions.
+     *
+     * @default "vertical"
+     */
+    layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * Disables automatically overflowing `calcite-action`s that won't fit into menus.
      *
-     * @private
+     * @default false
      */
-    private messages: Partial<{
-        expand: string;
-        collapse: string;
-        expandLabel: string;
-        collapseLabel: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        expand: string;
-        collapse: string;
-        expandLabel: string;
-        collapseLabel: string;
-    }>;
-    /** Disables automatically overflowing `calcite-action`s that won't fit into menus. */
     overflowActionsDisabled: boolean;
     /**
      * Determines the type of positioning to use for the overlaid content.
@@ -46,14 +52,31 @@ export declare class ActionBar extends LitElement {
      * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
      *
      * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+     *
+     * @default "absolute"
      */
     overlayPositioning: OverlayPositioning;
     /** Arranges the component depending on the element's `dir` property. */
     position: Extract<"start" | "end", Position>;
-    /** Specifies the size of the expand `calcite-action`. */
+    /**
+     * Specifies the size of the expand `calcite-action`.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /** Sets focus on the component's first focusable element. */
     setFocus(): Promise<void>;
     /** Fires when the `expanded` property is toggled. */
-    readonly calciteActionBarToggle: TargetedEvent<this, undefined>;
+    readonly calciteActionBarToggle: TargetedEvent<this, void>;
+    private messages: Partial<{
+        expand: string;
+        collapse: string;
+        expandLabel: string;
+        collapseLabel: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        expand: string;
+        collapse: string;
+        expandLabel: string;
+        collapseLabel: string;
+    }>;
 }