@esri/calcite-components 1.5.0-next.16 → 1.5.0-next.17

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.17
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.17
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.17
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.17
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/accordion/accordion.d.ts

@@ -6,6 +6,8 @@ import { RequestedItem } from "./interfaces";
  */
 export declare class Accordion {
   el: HTMLCalciteAccordionElement;
+  /** Specifies the parent of the component. */
+  accordionParent: HTMLCalciteAccordionElement;
   /** Specifies the appearance of the component. */
   appearance: Extract<"solid" | "transparent", Appearance>;
   /** Specifies the placement of the icon in the header. */
@@ -19,19 +21,17 @@ export declare class Accordion {
    * or `"single-persist"` (allow and require one open item).
    */
   selectionMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>;
+  handlePropsChange(): void;
   /**
    * @internal
    */
   calciteInternalAccordionChange: EventEmitter<RequestedItem>;
-  componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): VNode;
-  registerCalciteAccordionItem(event: CustomEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
-  /** created list of Accordion items */
-  private items;
-  /** keep track of whether the items have been sorted so we don't re-sort */
-  private sorted;
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   /** keep track of the requested item for multi mode */
   private requestedAccordionItem;
-  private sortItems;
+  private updateAccordionItems;
 }

package/dist/types/components/accordion-item/accordion-item.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { FlipContext, Scale } from "../interfaces";
-import { RegistryEntry, RequestedItem } from "./interfaces";
+import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
+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.
@@ -22,42 +22,53 @@ export declare class AccordionItem implements ConditionalSlotComponent {
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   iconFlipRtl: FlipContext;
   /**
+   * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.
+   *
    * @internal
    */
-  calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;
+  iconPosition: Position;
+  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.
+   *
+   * @internal
+   */
+  iconType: "chevron" | "caret" | "plus-minus";
   /**
+   * The containing `accordion` element.
+   *
    * @internal
    */
-  calciteInternalAccordionItemClose: EventEmitter<void>;
+  accordionParent: HTMLCalciteAccordionElement;
   /**
+   * Specifies the `selectionMode` of the component inherited from the `calcite-accordion`.
+   *
    * @internal
    */
-  calciteInternalAccordionItemRegister: EventEmitter<RegistryEntry>;
+  selectionMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>;
+  /**
+   * Specifies the size of the component inherited from the `calcite-accordion`.
+   *
+   * @internal
+   */
+  scale: Scale;
+  /**
+   * @internal
+   */
+  calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;
+  /**
+   * @internal
+   */
+  calciteInternalAccordionItemClose: EventEmitter<void>;
   connectedCallback(): void;
-  componentDidLoad(): void;
   disconnectedCallback(): void;
   renderActionsStart(): VNode;
   renderActionsEnd(): VNode;
   render(): VNode;
   keyDownHandler(event: KeyboardEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
-  /** the containing accordion element */
-  private parent;
-  /** position within parent */
-  private itemPosition;
   /** the latest requested item */
   private requestedAccordionItem;
-  /** what selection mode is the parent accordion in */
-  private selectionMode;
-  /** what icon position does the parent accordion specify */
-  private iconPosition;
-  /** what icon type does the parent accordion specify */
-  private iconType;
   /** handle clicks on item header */
   private itemHeaderClickHandler;
-  /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */
-  scale: Scale;
   private determineActiveItem;
   private emitRequestedItem;
-  private getItemPosition;
 }

package/dist/types/components.d.ts

@@ -7,7 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
-import { RegistryEntry, RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
 import { ActionMessages } from "./components/action/assets/action/t9n";
 import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
@@ -79,6 +79,10 @@ import { ValueListMessages } from "./components/value-list/assets/value-list/t9n
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
+        /**
+          * Specifies the parent of the component.
+         */
+        "accordionParent": HTMLCalciteAccordionElement;
         /**
           * Specifies the appearance of the component.
          */
@@ -104,6 +108,10 @@ export namespace Components {
   >;
     }
     interface CalciteAccordionItem {
+        /**
+          * The containing `accordion` element.
+         */
+        "accordionParent": HTMLCalciteAccordionElement;
         /**
           * Specifies a description for the component.
          */
@@ -124,10 +132,26 @@ export namespace Components {
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl": FlipContext;
+        /**
+          * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.
+         */
+        "iconPosition": Position;
         /**
           * Specifies an icon to display at the start of the component.
          */
         "iconStart": string;
+        /**
+          * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
+         */
+        "iconType": "chevron" | "caret" | "plus-minus";
+        /**
+          * Specifies the size of the component inherited from the `calcite-accordion`.
+         */
+        "scale": Scale;
+        /**
+          * Specifies the `selectionMode` of the component inherited from the `calcite-accordion`.
+         */
+        "selectionMode": Extract<"single" | "single-persist" | "multiple", SelectionMode>;
     }
     interface CalciteAction {
         /**
@@ -5516,6 +5540,10 @@ declare global {
 }
 declare namespace LocalJSX {
     interface CalciteAccordion {
+        /**
+          * Specifies the parent of the component.
+         */
+        "accordionParent"?: HTMLCalciteAccordionElement;
         /**
           * Specifies the appearance of the component.
          */

package/dist/types/preact.d.ts

@@ -10,10 +10,9 @@ declare module "preact/src/jsx" {
         "oncalciteInternalAccordionChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-accordion-item": Omit<JSX.CalciteAccordionItem, "onCalciteInternalAccordionItemSelect" | "onCalciteInternalAccordionItemClose" | "onCalciteInternalAccordionItemRegister"> & JSXInternal.HTMLAttributes<HTMLCalciteAccordionItemElement> & {
+      "calcite-accordion-item": Omit<JSX.CalciteAccordionItem, "onCalciteInternalAccordionItemSelect" | "onCalciteInternalAccordionItemClose"> & JSXInternal.HTMLAttributes<HTMLCalciteAccordionItemElement> & {
         "oncalciteInternalAccordionItemSelect"?: (event: CustomEvent<any>) => void;
         "oncalciteInternalAccordionItemClose"?: (event: CustomEvent<any>) => void;
-        "oncalciteInternalAccordionItemRegister"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-action": JSX.CalciteAction & JSXInternal.HTMLAttributes<HTMLCalciteActionElement>

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.17
  */
 'use strict';
 
@@ -5841,6 +5841,19 @@ const cmpModules = new Map, getModule = e => {
  e["s-p"] = [], e["s-rc"] = [], addHostEventListeners(e, o, t.$listeners$), hostRefs.set(e, o);
 }, styles = new Map;
 
+/**
+ * This utility ensures observers are created only for browser contexts.
+ *
+ * @param type - the type of observer to create
+ * @param callback - the observer callback
+ * @param options - the observer options
+ */
+function createObserver(type, callback, options) {
+  {
+    return undefined;
+  }
+}
+
 const accordionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-accordion:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-accordion{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-accordion{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-accordion{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-accordion{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-accordion{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-accordion{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-accordion{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-accordion:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-accordion:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-accordion-h{display:none}/*!@:host([scale=s])*/[scale=s].sc-calcite-accordion-h{--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-accordion-h{--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-accordion-h{--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host*/.sc-calcite-accordion-h{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}/*!@.accordion--transparent*/.accordion--transparent.sc-calcite-accordion{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}/*!@.accordion*/.accordion.sc-calcite-accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 
 /**
@@ -5855,32 +5868,28 @@ class Accordion {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** created list of Accordion items */
-    this.items = [];
-    /** keep track of whether the items have been sorted so we don't re-sort */
-    this.sorted = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
+    this.mutationObserver = createObserver();
+    this.accordionParent = undefined;
     this.appearance = "solid";
     this.iconPosition = "end";
     this.iconType = "chevron";
     this.scale = "m";
     this.selectionMode = "multiple";
   }
+  handlePropsChange() {
+    this.updateAccordionItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentDidLoad() {
-    if (!this.sorted) {
-      this.items = this.sortItems(this.items);
-      this.sorted = true;
-    }
+  connectedCallback() {
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.updateAccordionItems();
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
   }
   render() {
     const transparent = this.appearance === "transparent";
@@ -5894,17 +5903,6 @@ class Accordion {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  registerCalciteAccordionItem(event) {
-    const item = {
-      item: event.target,
-      parent: event.detail.parent,
-      position: event.detail.position
-    };
-    if (this.el === item.parent) {
-      this.items.push(item);
-    }
-    event.stopPropagation();
-  }
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail.requestedAccordionItem;
     this.calciteInternalAccordionChange.emit({
@@ -5912,37 +5910,45 @@ class Accordion {
     });
     event.stopPropagation();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  updateAccordionItems() {
+    this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
+      item.iconPosition = this.iconPosition;
+      item.iconType = this.iconType;
+      item.selectionMode = this.selectionMode;
+      item.scale = this.scale;
+      item.accordionParent = this.el;
+    });
+  }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "iconPosition": ["handlePropsChange"],
+    "iconType": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
+    "selectionMode": ["handlePropsChange"]
+  }; }
   static get style() { return accordionCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "calcite-accordion",
     "$members$": {
+      "accordionParent": [16],
       "appearance": [513],
       "iconPosition": [513, "icon-position"],
       "iconType": [513, "icon-type"],
       "scale": [513],
       "selectionMode": [513, "selection-mode"]
     },
-    "$listeners$": [[0, "calciteInternalAccordionItemRegister", "registerCalciteAccordionItem"], [0, "calciteInternalAccordionItemSelect", "updateActiveItemOnChange"]],
+    "$listeners$": [[0, "calciteInternalAccordionItemSelect", "updateActiveItemOnChange"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["appearance", "appearance"], ["iconPosition", "icon-position"], ["iconType", "icon-type"], ["scale", "scale"], ["selectionMode", "selection-mode"]]
   }; }
 }
 
-/**
- * This utility ensures observers are created only for browser contexts.
- *
- * @param type - the type of observer to create
- * @param callback - the observer callback
- * @param options - the observer options
- */
-function createObserver(type, callback, options) {
-  {
-    return undefined;
-  }
-}
-
 const observed = new Set();
 let mutationObserver$2;
 const observerOptions = { childList: true };
@@ -6979,19 +6985,19 @@ class AccordionItem {
     registerInstance(this, hostRef);
     this.calciteInternalAccordionItemSelect = createEvent(this, "calciteInternalAccordionItemSelect", 6);
     this.calciteInternalAccordionItemClose = createEvent(this, "calciteInternalAccordionItemClose", 6);
-    this.calciteInternalAccordionItemRegister = createEvent(this, "calciteInternalAccordionItemRegister", 6);
-    /** what icon position does the parent accordion specify */
-    this.iconPosition = "end";
     /** handle clicks on item header */
     this.itemHeaderClickHandler = () => this.emitRequestedItem();
-    /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */
-    this.scale = "m";
     this.expanded = false;
     this.heading = undefined;
     this.description = undefined;
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.iconFlipRtl = undefined;
+    this.iconPosition = undefined;
+    this.iconType = undefined;
+    this.accordionParent = undefined;
+    this.selectionMode = undefined;
+    this.scale = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -6999,19 +7005,8 @@ class AccordionItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.parent = this.el.parentElement;
-    this.iconType = getElementProp(this.el, "icon-type", "chevron");
-    this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition);
-    this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
   }
-  componentDidLoad() {
-    this.itemPosition = this.getItemPosition();
-    this.calciteInternalAccordionItemRegister.emit({
-      parent: this.parent,
-      position: this.itemPosition
-    });
-  }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
@@ -7076,7 +7071,6 @@ class AccordionItem {
   //
   //--------------------------------------------------------------------------
   determineActiveItem() {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "multiple");
     switch (this.selectionMode) {
       case "multiple":
         if (this.el === this.requestedAccordionItem) {
@@ -7096,11 +7090,6 @@ class AccordionItem {
       requestedAccordionItem: this.el
     });
   }
-  getItemPosition() {
-    const { el } = this;
-    const items = closestElementCrossShadowBoundary(el, "calcite-accordion")?.querySelectorAll("calcite-accordion-item");
-    return items ? Array.from(items).indexOf(el) : -1;
-  }
   get el() { return getElement(this); }
   static get style() { return accordionItemCss; }
   static get cmpMeta() { return {
@@ -7112,7 +7101,12 @@ class AccordionItem {
       "description": [1],
       "iconStart": [513, "icon-start"],
       "iconEnd": [513, "icon-end"],
-      "iconFlipRtl": [513, "icon-flip-rtl"]
+      "iconFlipRtl": [513, "icon-flip-rtl"],
+      "iconPosition": [1, "icon-position"],
+      "iconType": [1, "icon-type"],
+      "accordionParent": [16],
+      "selectionMode": [1, "selection-mode"],
+      "scale": [1]
     },
     "$listeners$": [[0, "keydown", "keyDownHandler"], [16, "calciteInternalAccordionChange", "updateActiveItemOnChange"]],
     "$lazyBundleId$": "-",
@@ -10099,7 +10093,7 @@ class ActionMenu {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    focusElement(this.menuButtonEl);
+    return focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;
@@ -10612,7 +10606,7 @@ class Alert {
       return;
     }
     else if (alertLinkEl) {
-      alertLinkEl.setFocus();
+      return alertLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();
@@ -12617,7 +12611,7 @@ class CalciteNavigation {
   /** When `navigation-action` is `true`, sets focus on the component's action element. */
   async setFocus() {
     await componentFocusable(this);
-    await this.navigationActionEl?.setFocus();
+    return this.navigationActionEl?.setFocus();
   }
   //--------------------------------------------------------------------------
   //
@@ -13519,7 +13513,7 @@ class ChipGroup {
   async setFocus() {
     await componentFocusable(this);
     if (!this.disabled) {
-      (this.selectedItems[0] || this.items[0])?.setFocus();
+      return (this.selectedItems[0] || this.items[0])?.setFocus();
     }
   }
   //--------------------------------------------------------------------------
@@ -16832,7 +16826,7 @@ class ColorPickerHexInput {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    focusElement(this.hexInputNode);
+    return focusElement(this.hexInputNode);
   }
   //--------------------------------------------------------------------------
   //
@@ -28992,7 +28986,7 @@ class List$1 {
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
-    this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
+    return this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
   // --------------------------------------------------------------------------
   //
@@ -30084,7 +30078,7 @@ class Notice {
       return;
     }
     if (noticeLinkEl) {
-      noticeLinkEl.setFocus();
+      return noticeLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();
@@ -32448,11 +32442,10 @@ class RadioButtonGroup {
   async setFocus() {
     await componentFocusable(this);
     if (this.selectedItem && !this.selectedItem.disabled) {
-      this.selectedItem.setFocus();
-      return;
+      return this.selectedItem.setFocus();
     }
     if (this.radioButtons.length > 0) {
-      this.getFocusableRadioButton()?.setFocus();
+      return this.getFocusableRadioButton()?.setFocus();
     }
   }
   //--------------------------------------------------------------------------
@@ -40014,7 +40007,7 @@ class TileSelect {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    this.input?.setFocus();
+    return this.input?.setFocus();
   }
   //--------------------------------------------------------------------------
   //
@@ -42686,7 +42679,7 @@ class ValueListItem {
   /** Set focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    this.pickListItem?.setFocus();
+    return this.pickListItem?.setFocus();
   }
   calciteListItemChangeHandler(event) {
     // adjust item payload from wrapped item before bubbling

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.5.0-next.16",
+  "version": "1.5.0-next.17",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
     "posttest": "npm run test:prerender",
     "prepublishOnly": "./support/stencilDoubleBuildTypesWorkaround.sh",
     "release:docs": "npm run docs && storybook-to-ghpages --existing-output-dir=docs",
-    "start": "concurrently --kill-others --raw \"tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev -- --serve\" \"ts-node --esm ./support/cleanOnProcessExit.ts --path ./src/demos/**/*.js \"",
+    "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev -- --serve\"",
     "test": "stencil test --no-docs --no-build --spec --e2e",
     "test:prerender": "stencil build --no-docs --prerender",
     "test:watch": "npm run build && npm run test -- -- --watchAll",
@@ -53,7 +53,7 @@
     "util:prep-build-reqs": "npm run util:copy-assets && npm run util:generate-t9n-types",
     "util:sync-t9n-en-bundles": "ts-node --esm support/syncEnT9nBundles.ts",
     "util:test-types": "tsc --esModuleInterop dist/types/**/*.d.ts dist/components/*.d.ts && ! grep -rnw 'dist/types' -e '<reference types=' && npm run util:clean-js-files",
-    "util:clean-js-files": "find src .storybook support -name '*.js' | xargs rm -rf && find . -maxdepth 1 -name '*.js' | xargs rm -rf",
+    "util:clean-js-files": "rimraf --glob -- *.js {src,.storybook,support}/**.js",
     "util:is-working-tree-clean": "[ -z \"$(git status --porcelain=v1)\" ]"
   },
   "repository": {
@@ -75,7 +75,7 @@
   "devDependencies": {
     "@esri/calcite-design-tokens": "1.0.0",
     "@esri/calcite-ui-icons": "3.23.1",
-    "@esri/eslint-plugin-calcite-components": "0.2.2",
+    "@esri/eslint-plugin-calcite-components": "^0.2.3-next.0",
     "@stencil-community/eslint-plugin": "0.5.0",
     "@stencil/postcss": "2.1.0",
     "@stencil/react-output-target": "0.5.3",
@@ -86,5 +86,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "bbe92010a8e399e1b061ed20048cf141f46054f7"
+  "gitHead": "162362a6033172530a8e221fb274599d1f6bb6c9"
 }

package/dist/calcite/p-09896602.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
- */
-import{h as t}from"./p-4c8993e1.js";function e(t){return Math.min(Math.max(Math.ceil(t),1),6)}const r=(e,r)=>{const n=e.level?`h${e.level}`:"div";return delete e.level,t(n,{...e},r)};export{r as H,e as c}

package/dist/calcite/p-11656d05.entry.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
- */
-import{r as t,h as i,H as e,a,f as n}from"./p-4c8993e1.js";import{t as o}from"./p-bc1dafd6.js";import{g as r}from"./p-6b8eb52e.js";import{c,d as s,u as l}from"./p-0e7580f3.js";import{s as d,a as u,c as h}from"./p-620ba3c8.js";import{c as b,d as m}from"./p-079047e7.js";import{c as p}from"./p-1334932f.js";import{u as f,c as v,s as g,d as x}from"./p-a315f44f.js";import"./p-687173f6.js";import"./p-2d75c83a.js";const y=class{constructor(i){t(this,i),this.mutationObserver=p("mutation",(()=>n(this))),this.guid=`calcite-action-${r()}`,this.indicatorId=`${this.guid}-indicator`,this.buttonId=`${this.guid}-button`,this.handleTooltipSlotChange=t=>{const i=t.target.assignedElements({flatten:!0}).filter((t=>t?.matches("calcite-tooltip")))[0];i&&(i.referenceElement=this.buttonEl)},this.active=!1,this.alignment=void 0,this.appearance="solid",this.compact=!1,this.disabled=!1,this.icon=void 0,this.iconFlipRtl=!1,this.indicator=!1,this.label=void 0,this.loading=!1,this.scale="m",this.text=void 0,this.textEnabled=!1,this.messages=void 0,this.messageOverrides=void 0,this.effectiveLocale="",this.defaultMessages=void 0}onMessagesChange(){}effectiveLocaleChange(){f(this,this.effectiveLocale)}connectedCallback(){c(this),b(this),v(this),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}async componentWillLoad(){d(this),await g(this)}componentDidLoad(){u(this)}disconnectedCallback(){s(this),m(this),x(this),this.mutationObserver?.disconnect()}componentDidRender(){l(this)}async setFocus(){await h(this),this.buttonEl?.focus()}renderTextContainer(){const{text:t,textEnabled:e}=this;return t?i("div",{class:{"text-container":!0,"text-container--visible":e},key:"text-container"},t):null}renderIndicatorText(){const{indicator:t,messages:e,indicatorId:a,buttonId:n}=this;return i("div",{"aria-labelledby":n,"aria-live":"polite",class:"indicator-text",id:a,role:"region"},t?e.indicator:null)}renderIconContainer(){const{loading:t,icon:e,scale:a,el:n,iconFlipRtl:o}=this,r="l"===a?"m":"s",c=t?i("calcite-loader",{inline:!0,label:this.messages.loading,scale:"l"===a?"l":"m"}):null,s=e?i("calcite-icon",{flipRtl:o,icon:e,scale:r}):null,l=c||s,d=l||n.children?.length,u=i("div",{class:{"slot-container":!0,"slot-container--hidden":t}},i("slot",null));return d?i("div",{"aria-hidden":"true",class:"icon-container",key:"icon-container"},l,u):null}render(){const{active:t,compact:a,disabled:n,loading:r,textEnabled:c,label:s,text:l,indicator:d,indicatorId:u,buttonId:h,messages:b}=this,m=`${s||l}${d?` (${b.indicator})`:""}`,p={button:!0,"button--text-visible":c,"button--compact":a};return i(e,null,i("button",{"aria-busy":o(r),"aria-controls":d?u:null,"aria-disabled":o(n),"aria-label":m,"aria-pressed":o(t),class:p,disabled:n,id:h,ref:t=>this.buttonEl=t},this.renderIconContainer(),this.renderTextContainer()),i("slot",{name:"tooltip",onSlotchange:this.handleTooltipSlotChange}),this.renderIndicatorText())}static get assetsDirs(){return["assets"]}get el(){return a(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};y.style='@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-ui-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-ui-foreground-1);fill:var(--calcite-ui-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}.button:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1;margin-inline-end:1rem}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}: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}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([active]) .button:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:transparent;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}:host([active][appearance=transparent]) .button,:host([active][appearance=transparent]) .button:hover,:host([active][appearance=transparent]) .button:focus{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([appearance=transparent][loading]) .button,:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-ui-foreground-1)}:host([loading]) .button .text-container,:host([loading]) .button:hover .text-container,:host([loading]) .button:focus .text-container{opacity:var(--calcite-ui-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-ui-text-3);margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-ui-foreground-1);opacity:var(--calcite-ui-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-ui-foreground-3);opacity:var(--calcite-ui-opacity-disabled)}:host([indicator]) .button::after{content:"";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;border-width:2px;background-color:var(--calcite-action-indicator-color);border-color:var(--calcite-ui-foreground-1);inset-block-end:0.75rem;inset-inline-end:0.75rem}:host([indicator]) .button--text-visible::after{inset-block-end:auto}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-ui-foreground-1)}:host([indicator][scale=s]) .button::after{inset-block-end:0.25rem;inset-inline-end:0.25rem}:host([indicator][scale=s]) .button--text-visible::after{inset-block-end:auto;inset-inline-end:0.5rem}:host([indicator][active]) .button::after{border-color:var(--calcite-ui-foreground-3)}.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}';export{y as calcite_action}