@esri/calcite-components 5.2.0-next.6 → 5.2.0-next.60

package/dist/components/calcite-input-time-zone/customElement.js

@@ -5,7 +5,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { c as connectLabel, d as disconnectLabel } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { S as SLOTS$1 } from "../../chunks/resources7.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
@@ -81,8 +81,8 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
         if (timeZoneA.startsWith(gmtTimeZoneString) && timeZoneB.startsWith(gmtTimeZoneString)) {
           const offsetStringA = timeZoneA.substring(gmtTimeZoneString.length);
           const offsetStringB = timeZoneB.substring(gmtTimeZoneString.length);
-          const offsetA = offsetStringA === "" ? 0 : parseInt(offsetStringA);
-          const offsetB = offsetStringB === "" ? 0 : parseInt(offsetStringB);
+          const offsetA = offsetStringA === "" ? 0 : parseInt(offsetStringA, 10);
+          const offsetB = offsetStringB === "" ? 0 : parseInt(offsetStringB, 10);
           return offsetB - offsetA;
         }
         return labeledTimeZoneA.localeCompare(labeledTimeZoneB);
@@ -197,7 +197,7 @@ function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
     )
   );
 }
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;--calcite-combobox-corner-radius: var(--calcite-input-time-zone-corner-radius, var(--calcite-corner-radius))}.offset{white-space:nowrap}: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 InputTimeZone extends LitElement {
   constructor() {
     super(...arguments);
@@ -208,6 +208,7 @@ class InputTimeZone extends LitElement {
     this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.#valueUpdateContext = null;
     this.clearable = false;
     this.disabled = false;
@@ -228,7 +229,7 @@ class InputTimeZone extends LitElement {
     this.calciteInputTimeZoneOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { selectedTimeZoneItem: [16, {}, { state: true }], timeZoneItems: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    this.properties = { selectedTimeZoneItem: [16, {}, { state: true }], timeZoneItems: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -250,10 +251,6 @@ class InputTimeZone extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.comboboxRef.value, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
   async load() {
     this.normalizer = await getNormalizer(this.mode);
     await this.updateTimeZoneItems();
@@ -278,10 +275,6 @@ class InputTimeZone extends LitElement {
   loaded() {
     this.openChanged();
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   async handleTimeZoneItemPropsChange() {
     if (!this.timeZoneItems || !this.hasUpdated) {
       return;
@@ -407,7 +400,7 @@ class InputTimeZone extends LitElement {
     return !metadata.country || open || !selected ? label : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.mode === "name" ? this.messages.namePlaceholder : this.mode === "offset" ? this.messages.offsetPlaceholder : this.messages.regionPlaceholder} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.placeholder || this.messages[`${this.mode}Placeholder`]} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
   }
   renderItems() {
     if (this.mode === "region") {

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment, Scale } from "../interfaces.js";
+import type { Alignment, Scale } from "../types.js";
 
 /**
  * @cssproperty [--calcite-label-margin-bottom] - Specifies the component's bottom spacing.
@@ -17,9 +17,11 @@ export abstract class Label extends LitElement {
   /** Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component. */
   accessor for: string | undefined;
   /**
-   * Defines the component's layout in relation to the slotted component. Use `"inline"` positions to wrap the label and slotted component on the same line.  [Deprecated] The `"default"` value is deprecated, use `"block"` instead.
+   * Defines the component's layout in relation to the slotted component. Use `"inline"` positions to wrap the label and slotted component on the same line.
    *
-   * @default "default"
+   * [Deprecated] The `"default"` value is deprecated in v3.3.0, removal target v6.0.0 - use `"block"` instead.
+   *
+   * @default "block"
    */
   accessor layout: "block" | "inline" | "inline-space-between" | "default";
   /**

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { l as labelConnectedEvent, a as associateExplicitLabelToUnlabeledComponent, b as labelDisconnectedEvent } from "../../chunks/label.js";
+import { l as labelConnectedEvent, a as associateExplicitLabelToUnlabeledComponent, b as labelDisconnectedEvent } from "../../chunks/useLabel.js";
 const CSS = {
   container: "container"
 };
@@ -11,7 +11,7 @@ class Label extends LitElement {
   constructor() {
     super();
     this.alignment = "start";
-    this.layout = "default";
+    this.layout = "block";
     this.scale = "m";
     this.calciteInternalLabelClick = createEvent({ bubbles: false, cancelable: false });
     this.listen("click", this.labelClickHandler);

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

@@ -1,7 +1,7 @@
 /// <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";
 
 /**
  * Any attributes placed on <calcite-link> component will propagate to the rendered child

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

@@ -36,7 +36,7 @@ class Link extends LitElement {
     this.listen("click", this.clickHandler);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], rel: 1, target: 1 };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], rel: 1, target: 1 };
   }
   static {
     this.styles = styles;

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

@@ -1,11 +1,11 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { InteractionMode, Scale, SelectionMode } from "../interfaces.js";
-import type { ItemData } from "../calcite-list-item/interfaces.js";
+import type { InteractionMode, Scale, SelectionMode } from "../types.js";
+import type { ItemData } from "../calcite-list-item/types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { ListItem } from "../calcite-list-item/customElement.js";
 import type { SelectionAppearance } from "./resources.js";
-import type { ListDisplayMode, ListDragDetail } from "./interfaces.js";
+import type { ListDisplayMode, ListDragDetail } from "./types.js";
 
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
@@ -19,9 +19,9 @@ import type { ListDisplayMode, ListDragDetail } from "./interfaces.js";
  */
 export abstract class List extends LitElement {
   /** When provided, the method will be called to determine whether the element can move from the list. */
-  accessor canPull: (detail: ListDragDetail) => boolean | "clone";
+  accessor canPull: ((detail: ListDragDetail) => boolean | "clone") | undefined;
   /** When provided, the method will be called to determine whether the element can be added from another list. */
-  accessor canPut: (detail: ListDragDetail) => boolean;
+  accessor canPut: ((detail: ListDragDetail) => boolean) | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -29,11 +29,10 @@ export abstract class List extends LitElement {
    */
   accessor disabled: boolean;
   /**
-   * Specifies the nesting behavior of `calcite-list-item`s, where
+   * Specifies the nesting behavior of `calcite-list-item`s.
    *
-   * `"flat"` displays `calcite-list-item`s in a uniform list, and
-   *
-   * `"nested"` displays `calcite-list-item`s under their parent element.
+   * - `"flat"` displays `calcite-list-item`s in a uniform list.
+   * - `"nested"` displays `calcite-list-item`s under their parent element.
    *
    *  The parent component's behavior should follow throughout its child elements.
    *
@@ -85,13 +84,10 @@ export abstract class List extends LitElement {
    */
   accessor group: string | undefined;
   /**
-   * Specifies the interaction mode of the component, where
-   *
-   * `"interactive"` allows interaction styling and pointer changes on hover,
-   *
-   * `"static"` does not allow interaction styling and pointer changes on hover -
+   * Specifies the interaction mode of the component.
    *
-   * the `"static"` value should only be used when `selectionMode` is `"none"`.
+   * - `"interactive"` allows interaction styling and pointer changes on hover.
+   * - `"static"` does not allow interaction styling and pointer changes on hover. Should only be used when `selectionMode` is `"none"`.
    *
    * @default "interactive"
    */
@@ -110,10 +106,14 @@ export abstract class List 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: {
-      filterEnabled?: string;
-      total?: string;
+      filterEnabled?: string | undefined;
+      total?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;
@@ -126,27 +126,22 @@ export abstract class List extends LitElement {
   /** The currently selected items. */
   get selectedItems(): ListItem[];
   /**
-   * Specifies the selection appearance, where
+   * Specifies the selection appearance.
    *
-   * `"icon"` displays a checkmark or dot,
-   *
-   * `"border"` [Deprecated] - Use `"highlight"` instead - displays a border, or
-   *
-   * `"highlight"` displays background highlight.
+   * - `"icon"` displays a checkmark or dot.
+   * - `"highlight"` displays background highlight.
+   * - `"border"` displays a border. [Deprecated] in v5.0.0, removal target v6.0.0 - use `"highlight"` instead.
    *
    * @default "icon"
    */
   accessor selectionAppearance: Extract<"icon" | "border" | "highlight", SelectionAppearance>;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
+   * Specifies the selection mode of the component.
    *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */

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

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
+import { D as DEBOUNCE, l as logger, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { m as slotChangeHasContent, s as slotChangeHasAssignedElement, e as getRootNode } from "../../chunks/dom.js";
+import { o as slotChangeHasContent, s as slotChangeHasAssignedElement, i as getRootNode } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { l as listItemSelector, i as isListItem, a as listSelector, u as updateListItemChildren, b as listItemGroupSelector, e as expandedAncestors } from "../../chunks/utils4.js";
 import { S as SLOTS$1 } from "../../chunks/resources10.js";
@@ -563,7 +563,7 @@ class List extends LitElement {
   }
   handleInteractionModeWarning() {
     if (this.interactionMode === "static" && this.selectionMode !== "none" && this.selectionAppearance === "border") {
-      console.warn(`selection-appearance="border" requires interaction-mode="interactive"`);
+      logger.warn(`selection-appearance="border" requires interaction-mode="interactive"`);
     }
   }
   validateSortMenuItem({ fromEl, toEl, dragEl, newIndex, oldIndex, type }) {

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Scale, FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-list-background-color-hover] - Specifies the component's background color when hovered.
@@ -62,11 +62,15 @@ export abstract class ListItem extends LitElement {
   accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component, displays above the `description`. */
   accessor label: string | 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: {
-      close?: string;
-      expand?: string;
-      collapse?: string;
+      close?: string | undefined;
+      expand?: string | undefined;
+      collapse?: string | undefined;
   };
   /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
   accessor metadata: Record<string, unknown> | undefined;

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

@@ -1,15 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { isEqual } from "es-toolkit";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { s as slotChangeHasAssignedElement, y as getFirstTabbable } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, A as getFirstTabbable } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { l as logger } from "../../chunks/logger.js";
 import { s as styles$1 } from "../../chunks/sortable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -74,7 +73,7 @@ class ListItem extends LitElement {
     this.listen("calciteInternalListDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges);
   }
   static {
-    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasCustomContent: [16, {}, { state: true }], level: [16, {}, { state: true }], expandable: [16, {}, { state: true }], parentListEl: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], bordered: [5, {}, { type: Boolean }], sortDisabled: [5, {}, { type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], metadata: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], unavailable: [7, {}, { reflect: true, type: Boolean }], value: 1, iconStart: [3, { type: String }, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasCustomContent: [16, {}, { state: true }], level: [16, {}, { state: true }], expandable: [16, {}, { state: true }], parentListEl: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], bordered: [5, {}, { type: Boolean }], sortDisabled: [5, {}, { type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], metadata: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], unavailable: [7, {}, { reflect: true, type: Boolean }], value: 1, iconStart: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = [styles, styles$1];

package/dist/components/calcite-list-item/{interfaces.d.ts → types.d.ts}

@@ -1,9 +1,9 @@
 import type { ListItem } from "./customElement.js";
 
 export type ItemData = {
-  label: string;
-  description: string;
-  metadata: Record<string, unknown>;
+  label?: string;
+  description?: string;
+  metadata?: Record<string, unknown>;
   el: ListItem;
   heading?: string[];
 };

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 /**
  * @cssproperty [--calcite-list-background-color] - Specifies the component's background color.

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**

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

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../types.js";
 
 export abstract class Menu extends LitElement {
   /**
@@ -14,8 +15,18 @@ export abstract class Menu extends LitElement {
    * @default "horizontal"
    */
   accessor layout: Layout;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { more?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { more?: string | undefined; };
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
   /**
    * Sets focus on the component's first focusable element.
    *

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

@@ -3,9 +3,10 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { f as focusElementInGroup, a as slotChangeGetAssignedElements, i as focusElement } from "../../chunks/dom.js";
+import { d as focusElementInGroup, a as slotChangeGetAssignedElements, k as focusElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { i as isMenuItem } from "../../chunks/resources12.js";
 const styles = css`:host{display:flex;line-height:var(--calcite-font-line-height-fixed-lg)}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`;
 class Menu extends LitElement {
   constructor() {
@@ -15,10 +16,11 @@ class Menu extends LitElement {
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.layout = "horizontal";
-    this.listen("calciteInternalMenuItemKeyEvent", this.calciteInternalNavMenuItemKeyEvent);
+    this.scale = "m";
+    this.listen("keydown", this.calciteInternalNavMenuItemKeyEvent);
   }
   static {
-    this.properties = { label: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
+    this.properties = { label: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -30,59 +32,76 @@ class Menu extends LitElement {
     return this.focusSetter(() => this.menuItems[0], options);
   }
   willUpdate(changes) {
-    if (changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal")) {
-      this.setMenuItemLayout(this.menuItems, this.layout);
+    if (changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+      this.setMenuItemProperties(this.menuItems);
     }
   }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
-    this.setMenuItemLayout(this.menuItems, this.layout);
+    this.setMenuItemProperties(this.menuItems);
   }
   calciteInternalNavMenuItemKeyEvent(event) {
-    const target = event.target;
-    const submenuItems = event.detail.children;
-    const key = event.detail.event.key;
-    event.stopPropagation();
+    if (event.defaultPrevented) {
+      return;
+    }
+    const target = this.getMenuItemFromEvent(event);
+    if (!target) {
+      return;
+    }
+    const submenuItems = this.getSubmenuItems(target);
+    const hasSubmenu = submenuItems.length > 0;
+    const key = event.key;
+    let handled = false;
     if (key === "ArrowDown") {
       if (target.layout === "vertical") {
         focusElementInGroup(this.menuItems, target, "next", false, false);
-      } else {
-        if (event.detail.isSubmenuOpen) {
-          submenuItems[0].setFocus();
-        }
+        handled = true;
+      } else if (target.open && hasSubmenu) {
+        submenuItems[0].setFocus();
+        handled = true;
       }
     } else if (key === "ArrowUp") {
-      if (this.layout === "vertical") {
+      if (target.layout === "vertical") {
         focusElementInGroup(this.menuItems, target, "previous", false, false);
-      } else {
-        if (event.detail.isSubmenuOpen) {
-          submenuItems[submenuItems.length - 1].setFocus();
-        }
+        handled = true;
+      } else if (target.open && hasSubmenu) {
+        submenuItems[submenuItems.length - 1].setFocus();
+        handled = true;
       }
     } else if (key === "ArrowRight") {
       if (this.layout === "horizontal") {
         focusElementInGroup(this.menuItems, target, "next", false, false);
-      } else {
-        if (event.detail.isSubmenuOpen) {
-          submenuItems[0].setFocus();
-        }
+        handled = true;
+      } else if (target.open && hasSubmenu) {
+        submenuItems[0].setFocus();
+        handled = true;
       }
     } else if (key === "ArrowLeft") {
       if (this.layout === "horizontal") {
         focusElementInGroup(this.menuItems, target, "previous", false, false);
-      } else {
-        if (event.detail.isSubmenuOpen) {
-          this.focusParentElement(event.target);
-        }
+        handled = true;
+      } else if (target.parentElement?.tagName === "CALCITE-MENU-ITEM") {
+        this.focusParentElement(target);
+        handled = true;
       }
-    } else if (key === "Escape") {
-      this.focusParentElement(event.target);
+    } else if (key === "Escape" && target.parentElement?.tagName === "CALCITE-MENU-ITEM") {
+      this.focusParentElement(target);
+      handled = true;
     }
-    event.preventDefault();
+    if (handled) {
+      event.preventDefault();
+    }
+  }
+  getMenuItemFromEvent(event) {
+    const target = event.composedPath().find(isMenuItem);
+    return target && this.menuItems.includes(target) ? target : void 0;
+  }
+  getSubmenuItems(menuItem) {
+    return Array.from(menuItem.children).filter(isMenuItem).filter((child) => child.matches('[slot="submenu-item"]'));
   }
   handleMenuSlotChange(event) {
     this.menuItems = slotChangeGetAssignedElements(event);
-    this.setMenuItemLayout(this.menuItems, this.layout);
+    this.setMenuItemProperties(this.menuItems);
   }
   focusParentElement(el) {
     const parentEl = el.parentElement;
@@ -91,9 +110,10 @@ class Menu extends LitElement {
       parentEl.open = false;
     }
   }
-  setMenuItemLayout(items, layout) {
+  setMenuItemProperties(items) {
     items.forEach((item) => {
-      item.layout = layout;
+      item.layout = this.layout;
+      item.scale = this.scale;
       if (this.getEffectiveRole() === "menubar") {
         item.isTopLevelItem = true;
         item.topLevelMenuLayout = this.layout;

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

@@ -1,7 +1,7 @@
 /// <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, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-menu-item-accent-color] - When `active`, specifies the component's border color.
@@ -38,10 +38,14 @@ export abstract class MenuItem extends LitElement {
    * @required
    */
   accessor label: string;
-  /** 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: {
-      submenu?: string;
-      open?: string;
+      submenu?: string | undefined;
+      open?: string | undefined;
   };
   /**
    * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.
@@ -55,6 +59,12 @@ export abstract class MenuItem extends LitElement {
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
   accessor rel: string | undefined;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *