@esri/calcite-components 5.1.1 → 5.1.2-next.0

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

@@ -2,7 +2,7 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HeadingLevel } from "../functional/Heading.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
-import type { Scale } from "../interfaces.js";
+import type { CollapseDirection, Scale } from "../interfaces.js";
 import type { Panel } from "../calcite-panel/customElement.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 
@@ -73,6 +73,12 @@ export abstract class FlowItem extends LitElement {
    * @default false
    */
   accessor collapsed: boolean;
+  /**
+   * When `collapsible` is `true`, specifies the direction of the collapse icon.
+   *
+   * @default "down"
+   */
+  accessor collapseDirection: CollapseDirection;
   /**
    * When `true`, the component is collapsible.
    *

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

@@ -5,7 +5,7 @@ import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { S as SLOTS$1 } from "../../chunks/resources7.js";
+import { S as SLOTS$1 } from "../../chunks/resources8.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -123,7 +123,7 @@ class FlowItem extends LitElement {
   }
   render() {
     const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messageOverrides, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;
-    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messageOverrides} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
+    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapsed=${collapsed} .collapseDirection=${collapseDirection} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messageOverrides} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
   }
 }
 customElement("calcite-flow-item", FlowItem);

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

@@ -512,14 +512,11 @@ class Input extends LitElement {
     const autofocus = this.el.autofocus;
     const enterKeyHint = this.el.enterKeyHint;
     const inputMode = this.el.inputMode;
-    const localeNumberInput = this.type === "number" ? keyed("localized-input", html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled ? true : null} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.childNumberRef)}>`) : null;
+    const localeNumberInput = this.type === "number" ? keyed("localized-input", html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.childNumberRef)}>`) : null;
     const childEl = this.type !== "number" ? html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} class=${safeClassMap({
       [CSS.editingEnabled]: this.editingEnabled,
       [CSS.inlineChild]: !!this.inlineEditableEl
-    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled ? true : null} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} max=${this.maxString ?? nothing} maxlength=${this.maxLength ?? nothing} min=${this.minString ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${this.name ?? nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputInputHandler} @keydown=${this.inputKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required ? true : null} spellcheck=${this.el.spellcheck ?? nothing} step=${this.step ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=${this.type ?? nothing} .value=${live(this.value ?? "")} ${ref(
-      this.childRef
-      /* using unknown to workaround Lumina dynamic ref type issue */
-    )}>` : null;
+    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} max=${this.maxString ?? nothing} maxlength=${this.maxLength ?? nothing} min=${this.minString ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${this.name ?? nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputInputHandler} @keydown=${this.inputKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} spellcheck=${this.el.spellcheck ?? nothing} step=${this.step ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=${this.type ?? nothing} .value=${live(this.value ?? "")} ${ref(this.childRef)}>` : null;
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap({
       [CSS.inputWrapper]: true,
       [CSS_UTILITY.rtl]: dir === "rtl",

package/dist/components/calcite-input-number/customElement.js

@@ -504,7 +504,7 @@ class InputNumber extends LitElement {
     const numberButtonsVertical = html`<div class=${safeClassMap(CSS.numberButtonWrapper)}>${numberButtonsHorizontalUp}${numberButtonsHorizontalDown}</div>`;
     const prefixText = html`<div class=${safeClassMap(CSS.prefix)}>${this.prefixText}</div>`;
     const suffixText = html`<div class=${safeClassMap(CSS.suffix)}>${this.suffixText}</div>`;
-    const childEl = keyed("localized-input", html`<input aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${this.el.autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${(this.el.inputMode || "decimal") ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} name=${nothing} @blur=${this.inputNumberBlurHandler} @focus=${this.inputNumberFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputNumberKeyUpHandler} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.childNumberRef)}>`);
+    const childEl = keyed("localized-input", html`<input aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${this.el.autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${(this.el.inputMode || "decimal") ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} @blur=${this.inputNumberBlurHandler} @focus=${this.inputNumberFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputNumberKeyUpHandler} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.childNumberRef)}>`);
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap({
       [CSS.inputWrapper]: true,
       [CSS_UTILITY.rtl]: dir === "rtl",

package/dist/components/calcite-input-text/customElement.js

@@ -246,7 +246,7 @@ class InputText extends LitElement {
     const childEl = html`<input aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${this.el.autofocus} class=${safeClassMap({
       [CSS.editingEnabled]: this.editingEnabled,
       [CSS.inlineChild]: !!this.inlineEditableEl
-    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled ? true : null} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${this.el.inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} name=${this.name ?? nothing} @blur=${this.inputTextBlurHandler} @focus=${this.inputTextFocusHandler} @input=${this.inputTextInputHandler} @keydown=${this.inputTextKeyDownHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required ? true : null} spellcheck=${this.el.spellcheck ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=text .value=${live(this.value ?? "")} ${ref(this.childRef)}>`;
+    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${this.el.inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} name=${this.name ?? nothing} @blur=${this.inputTextBlurHandler} @focus=${this.inputTextFocusHandler} @input=${this.inputTextInputHandler} @keydown=${this.inputTextKeyDownHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} spellcheck=${this.el.spellcheck ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=text .value=${live(this.value ?? "")} ${ref(this.childRef)}>`;
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap({
       [CSS.inputWrapper]: true,
       [CSS_UTILITY.rtl]: dir === "rtl",

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

@@ -7,7 +7,7 @@ import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/
 import { createRef, ref } from "lit/directives/ref.js";
 import { c as connectLabel, d as disconnectLabel } from "../../chunks/label.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { S as SLOTS$1 } from "../../chunks/resources6.js";
+import { S as SLOTS$1 } from "../../chunks/resources7.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";

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

@@ -57,9 +57,9 @@ export abstract class List extends LitElement {
    */
   accessor filterEnabled: boolean;
   /** Specifies an accessible name for the filter input field. */
-  accessor filterLabel: string;
+  accessor filterLabel: string | undefined;
   /** Specifies placeholder text for the component's filter input field. */
-  accessor filterPlaceholder: string;
+  accessor filterPlaceholder: string | undefined;
   /**
    * Specifies a function to handle filtering.
    *
@@ -71,7 +71,7 @@ export abstract class List extends LitElement {
    */
   accessor filterPredicate: ((item: ListItem) => boolean) | undefined;
   /** Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, and the `calcite-list-item-group`'s `heading`). */
-  accessor filterProps: string[];
+  accessor filterProps: string[] | undefined;
   /**
    * Text for the component's filter input field.
    *
@@ -116,7 +116,7 @@ export abstract class List extends LitElement {
       total?: string;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * Specifies the size of the component.
    *

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

@@ -8,7 +8,7 @@ import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lum
 import { m as slotChangeHasContent, s as slotChangeHasAssignedElement, e 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/resources9.js";
+import { S as SLOTS$1 } from "../../chunks/resources10.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -111,13 +111,13 @@ class List extends LitElement {
     this.styles = styles;
   }
   get hasActiveFilter() {
-    return this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length;
+    return !!(this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length);
   }
   get showEmptyContentContainer() {
     return !this.hasContent && this.hasEmptyContent;
   }
   get showNoResultsContainer() {
-    return this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length;
+    return !!(this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length);
   }
   get effectiveFilterProps() {
     if (!this.filterProps) {
@@ -366,7 +366,7 @@ class List extends LitElement {
     this.calciteListOrderChange.emit(detail);
   }
   setParentList() {
-    this.parentListEl = this.el.parentElement?.closest(listSelector);
+    this.parentListEl = this.el.parentElement?.closest(listSelector) || void 0;
   }
   handleDefaultSlotChange(event) {
     if (this.parentListEl) {
@@ -493,8 +493,7 @@ class List extends LitElement {
     }));
   }
   getGroupHeading(item) {
-    const heading = this.listItemGroups.filter((group) => group.contains(item)).map((group) => group.heading);
-    return heading;
+    return this.listItemGroups.filter((group) => group.contains(item) && group.heading).map((group) => group.heading);
   }
   updateGroupItems() {
     const { el, group, scale } = this;

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

@@ -35,7 +35,7 @@ export abstract class ListItem extends LitElement {
    */
   accessor closed: boolean;
   /** Specifies a description for the component. Displays below the `label`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -55,13 +55,13 @@ export abstract class ListItem extends LitElement {
    */
   accessor expanded: boolean;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component, displays above the `description`. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       close?: string;
@@ -69,7 +69,7 @@ export abstract class ListItem extends LitElement {
       collapse?: string;
   };
   /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
-  accessor metadata: Record<string, unknown>;
+  accessor metadata: Record<string, unknown> | undefined;
   /**
    * When `true`, the item is open to show child components.
    *

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

@@ -14,7 +14,7 @@ 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";
 import { a as listSelector, g as getDepth, c as getListItemChildren } from "../../chunks/utils4.js";
-import { a as activeCellTestAttribute, I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources10.js";
+import { a as activeCellTestAttribute, I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources11.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column}:host([scale=s]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xs)}:host([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{box-sizing:border-box;display:flex;flex:1 1 0%;overflow:hidden;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.container *{box-sizing:border-box}.container--border{position:relative}.container--border:before{position:absolute;inline-size:var(--calcite-border-width-lg);inset-block:0;inset-inline-start:0;background-color:transparent;content:""}.container--border-selected:before{background-color:var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--border-selected:focus{box-shadow:inset var(--calcite-border-width-lg) 0 0 0 var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}.nested-container{display:none;flex-direction:column;border-width:0px;border-style:solid;border-color:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3));margin-inline-start:var(--calcite-list-spacing-indent, 1.5rem)}.nested-container--expanded{display:flex}.selection-container{display:flex;padding-block:0px;color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host([selected]) .selection-container{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}.content-container-wrapper{display:flex;flex:1 1 auto}.content-container-wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}.content-container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-list-content-text-color, var(--calcite-color-text-2))}.content-container--unavailable{opacity:var(--calcite-opacity-disabled)}:host(:not([interaction-mode=static])):not([disabled]):not([selected]) .container:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host(:not([interaction-mode=static])):not([disabled]) .expanded-container:hover{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host(:not([interaction-mode=static]))[selected]:hover .selection-container,:host(:not([interaction-mode=static]))[selected]:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}:host(:not([interaction-mode=static])) .content-container{-webkit-user-select:none;user-select:none}:host(:not([interaction-mode=static])) .container--hover:hover{cursor:pointer;background-color:var(--calcite-list-background-color-hover, var(--calcite-color-foreground-2))}:host(:not([interaction-mode=static])) .container:active{background-color:var(--calcite-list-background-color-press, var(--calcite-color-foreground-3))}:host(:not([interaction-mode=static])) .icon:hover,:host(:not([interaction-mode=static])) .icon:active{color:var(--calcite-color-text-1)}.row,.grid-cell{outline-color:transparent}.row{position:relative}.row:focus,.grid-cell:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:var(--calcite-font-line-height-relative-snug)}.label{color:var(--calcite-list-label-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-3))}.icon{align-self:center;color:var(--calcite-list-icon-color, var(--calcite-color-text-3))}.actions-start,.actions-end{margin-inline-end:var(--calcite-internal-list-action-spacing);gap:var(--calcite-internal-list-action-spacing)}:host([scale=s]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:32px;padding-block:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .content,:host([scale=s]) .custom-content,:host([scale=s]) .label{font-size:var(--calcite-font-size--2)}:host([scale=s]) .description{font-size:var(--calcite-font-size--3)}:host([scale=s][display-mode=flat]:not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat]:not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=m]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:40px;padding-block:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .content,:host([scale=m]) .custom-content{font-size:var(--calcite-font-size--2)}:host([scale=m]) .label{font-size:var(--calcite-font-size--1)}:host([scale=m]) .description{font-size:var(--calcite-font-size--2)}:host([scale=m][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=m][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=l]) .content-container{gap:var(--calcite-spacing-md);min-block-size:56px;padding-block:var(--calcite-space-sm-plus);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .content,:host([scale=l]) .custom-content,:host([scale=l]) .label{font-size:var(--calcite-font-size-0)}:host([scale=l]) .description{font-size:var(--calcite-font-size--1)}:host([scale=l]) .nested-container{margin-inline-start:1.75rem}:host([scale=l][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-lg)}:host([scale=l][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=flat][drag-handle]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=l][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-lg)}.label,.description,.content-bottom{font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}:host([selected]) .icon{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host([selected]) .description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-2))}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.expanded-container{color:var(--calcite-list-icon-color, var(--calcite-color-text-3));padding-inline:var(--calcite-spacing-xxs)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.expanded-container,.close{display:flex;align-items:center}.drag-container,.selection-container,.expanded-container{padding-block-end:var(--calcite-spacing-px)}.expanded-container,.selection-container{cursor:pointer}.actions-start,.actions-end{position:relative;padding:0}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-sort-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-sort-handle),.actions-end ::slotted(calcite-dropdown){color:inherit}.row:focus:after,.row:focus:before{position:absolute;content:"";inline-size:.125rem;z-index:var(--calcite-z-index-header);background-color:var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));inset-block:0}.row:focus:before{inset-inline-start:0}.row:focus:after{inset-inline-end:0}.container--border:focus:before{display:none}::slotted(calcite-list:empty){border-block-start-width:0px}.drag-container calcite-action,.drag-container ::slotted(calcite-action),.actions-start calcite-action,.actions-start ::slotted(calcite-action),.actions-end calcite-action,.actions-end ::slotted(calcite-action),.close calcite-action,.close ::slotted(calcite-action){align-items:center}.drag-container{margin-inline:var(--calcite-spacing-xxs)}:host([display-mode=nested]) .drag-container,:host([selection-appearance=icon]:not([selection-mode=none])) .drag-container{margin-inline:var(--calcite-spacing-xxs) 0}:host([hidden]){display:none}[hidden]{display:none}`;
 const focusMap = /* @__PURE__ */ new Map();
 class ListItem extends LitElement {
@@ -36,7 +36,6 @@ class ListItem extends LitElement {
     this.hasContentEnd = false;
     this.hasContentStart = false;
     this.hasCustomContent = false;
-    this.level = null;
     this.expandable = false;
     this.active = false;
     this.bordered = false;
@@ -48,13 +47,11 @@ class ListItem extends LitElement {
     this.dragHandle = false;
     this.expanded = false;
     this.filterHidden = false;
-    this.interactionMode = null;
     this.displayMode = "flat";
     this.addToItems = [];
     this.moveToItems = [];
     this.scale = "m";
     this.selected = false;
-    this.selectionMode = null;
     this.sortHandleOpen = false;
     this.unavailable = false;
     this.topLayerDisabled = false;
@@ -111,7 +108,7 @@ class ListItem extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     const { el } = this;
-    this.parentListEl = el.closest(listSelector);
+    this.parentListEl = el.closest(listSelector) || void 0;
     this.level = getDepth(el) + 1;
     this.setSelectionDefaults();
   }
@@ -155,7 +152,7 @@ class ListItem extends LitElement {
   }
   activeHandler(active) {
     if (!active) {
-      this.focusCell(null, false);
+      this.focusCell(void 0, false);
     }
   }
   handleClosedChange() {
@@ -293,7 +290,7 @@ class ListItem extends LitElement {
       this.actionsStartRef.value,
       this.contentRef.value,
       this.actionsEndRef.value
-    ].filter((el) => el && !el.hidden);
+    ].filter((el) => !!(el && !el.hidden));
   }
   handleItemKeyDown(event) {
     if (event.defaultPrevented) {
@@ -304,7 +301,7 @@ class ListItem extends LitElement {
     const { containerRef, actionsStartRef: { value: actionsStartEl }, actionsEndRef: { value: actionsEndEl }, expanded, expandable } = this;
     const cells = this.getGridCells();
     const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
-    if (key === "Enter" && !composedPath.includes(actionsStartEl) && !composedPath.includes(actionsEndEl)) {
+    if (key === "Enter" && actionsStartEl && !composedPath.includes(actionsStartEl) && actionsEndEl && !composedPath.includes(actionsEndEl)) {
       event.preventDefault();
       this.toggleSelected(event.shiftKey);
     } else if (key === "ArrowRight") {
@@ -313,7 +310,7 @@ class ListItem extends LitElement {
       if (currentIndex === -1) {
         if (!expanded && expandable) {
           this.toggle(true);
-          this.focusCell(null);
+          this.focusCell();
         } else if (cells[0]) {
           this.focusCell(cells[0]);
         }
@@ -324,27 +321,27 @@ class ListItem extends LitElement {
       event.preventDefault();
       const prevIndex = currentIndex - 1;
       if (currentIndex === -1) {
-        this.focusCell(null);
+        this.focusCell();
         if (expanded && expandable) {
           this.toggle(false);
         } else {
           this.calciteInternalFocusPreviousItem.emit();
         }
       } else if (currentIndex === 0) {
-        this.focusCell(null);
+        this.focusCell();
         containerRef.value.focus();
       } else if (cells[currentIndex] && cells[prevIndex]) {
         this.focusCell(cells[prevIndex]);
       }
     }
   }
-  focusCellNull() {
-    this.focusCell(null);
+  clearCellFocus() {
+    this.focusCell();
   }
   setFocusCell(focusEl, focusedEl, saveFocusIndex) {
     const { parentListEl } = this;
     if (saveFocusIndex) {
-      focusMap.set(parentListEl, null);
+      focusMap.set(parentListEl, void 0);
     }
     const gridCells = this.getGridCells();
     gridCells.forEach((tableCell) => {
@@ -463,14 +460,14 @@ class ListItem extends LitElement {
     const showSelectionBorder = selectionMode !== "none" && selectionAppearance === "border";
     const showSelectionHighlight = selectionMode !== "none" && selectionAppearance === "highlight";
     const containerInteractive = interactionMode === "interactive";
-    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : null} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : void 0} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
       [CSS.row]: true,
       [CSS.container]: true,
       [CSS.containerHover]: containerInteractive,
       [CSS.containerBorder]: showSelectionBorder,
       [CSS.containerBorderSelected]: showSelectionBorder && selected,
       [CSS.containerHighlightSelected]: showSelectionHighlight && selected
-    })} .hidden=${closed || filterHidden} @focus=${this.focusCellNull} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
+    })} .hidden=${closed || filterHidden} @focus=${this.clearCellFocus} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
       [CSS.contentContainerWrapper]: true,
       [CSS.contentContainerWrapperBordered]: contentContainerWrapperBordered
     })}>${this.renderActionsStart()}${this.renderContentContainer()}${this.renderActionsEnd()}</div></div>${this.renderContentBottom()}</div>${this.renderDefaultContainer()}` });

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

@@ -15,7 +15,7 @@ export abstract class ListItemGroup extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the heading text for the nested `calcite-list-item` rows. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /**
    * Specifies the size of the component.
    *

package/dist/components/calcite-list-item-group/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 { M as MAX_COLUMNS } from "../../chunks/resources10.js";
+import { M as MAX_COLUMNS } from "../../chunks/resources11.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",

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

@@ -82,9 +82,9 @@ class Loader extends LitElement {
     const isDeterminate = type !== "indeterminate";
     const valueNow = Math.floor(value);
     this.el.ariaLabel = label;
-    this.el.ariaValueMax = isDeterminate ? "100" : void 0;
-    this.el.ariaValueMin = isDeterminate ? "0" : void 0;
-    this.el.ariaValueNow = isDeterminate ? valueNow.toString() : void 0;
+    this.el.ariaValueMax = isDeterminate ? "100" : null;
+    this.el.ariaValueMin = isDeterminate ? "0" : null;
+    this.el.ariaValueNow = isDeterminate ? valueNow.toString() : null;
     setAttribute(this.el, "id", id);
     this.el.role = "progressbar";
     return html`<div class=${safeClassMap(CSS.rings)}>${this.renderRing("track")}${this.renderRing("progress")}${!inline && isDeterminate && html`<div class=${safeClassMap(CSS.percentage)}>${this.formatValue()}</div>` || ""}</div>${!inline && text && html`<div class=${safeClassMap(CSS.text)}>${text}</div>` || ""}`;

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

@@ -25,13 +25,13 @@ export abstract class MenuItem extends LitElement {
    */
   accessor breadcrumb: boolean;
   /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -54,15 +54,15 @@ export abstract class MenuItem extends LitElement {
    *
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *
    * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
-  accessor target: string;
+  accessor target: string | undefined;
   /** Specifies the text to display. */
-  accessor text: string;
+  accessor text: string | undefined;
   /**
    * Sets focus on the component.
    *

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

@@ -45,9 +45,12 @@ class MenuItem extends LitElement {
     this.anchorRef = createRef();
     this.direction = useDirection();
     this.dropdownActionRef = createRef();
+    this.isFocused = false;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.hasSubmenu = false;
+    this.active = false;
+    this.breadcrumb = false;
     this.isTopLevelItem = false;
     this.open = false;
     this.calciteInternalMenuItemKeyEvent = createEvent();

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

@@ -42,7 +42,7 @@ export abstract class Meter extends LitElement {
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -50,7 +50,7 @@ export abstract class Meter extends LitElement {
    */
   accessor groupSeparator: boolean;
   /** Specifies a high value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
-  accessor high: number;
+  accessor high: number | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -58,7 +58,7 @@ export abstract class Meter extends LitElement {
    */
   accessor label: string;
   /** Specifies a low value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
-  accessor low: number;
+  accessor low: number | undefined;
   /**
    * Specifies the component's highest allowed value.
    *
@@ -78,9 +78,9 @@ export abstract class Meter extends LitElement {
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When `true`, displays the values of `high`, `low`, `min`, and `max`.
    *
@@ -106,7 +106,7 @@ export abstract class Meter extends LitElement {
    */
   accessor unitLabel: string;
   /** Specifies the component's value. */
-  accessor value: number;
+  accessor value: number | undefined;
   /**
    * When `true`, displays the `value`.
    *

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

@@ -39,6 +39,11 @@ class Meter extends LitElement {
     this.minPercent = 0;
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     this.valueLabelRef = createRef();
+    this.currentPercent = 0;
+    this.highActive = false;
+    this.highPercent = 100;
+    this.lowActive = false;
+    this.lowPercent = 0;
     this.appearance = "outline-fill";
     this.disabled = false;
     this.fillType = "range";
@@ -88,12 +93,8 @@ class Meter extends LitElement {
     this.updateLabels();
   }
   updateLabels() {
-    if (this.valueLabelRef.value) {
-      this.determineValueLabelPosition();
-    }
-    if (this.rangeLabels) {
-      this.determineVisibleLabels();
-    }
+    this.determineValueLabelPosition();
+    this.determineVisibleLabels();
   }
   calculateValues() {
     const { min, max, low, high, value } = this;
@@ -154,9 +155,12 @@ class Meter extends LitElement {
     }
   }
   intersects(el1, el2) {
-    return el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect());
+    return !!(el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect()));
   }
   determineVisibleLabels() {
+    if (!this.rangeLabels) {
+      return;
+    }
     const { minLabelRef: { value: minLabelEl }, lowLabelRef: { value: lowLabelEl }, highLabelRef: { value: highLabelEl }, maxLabelRef: { value: maxLabelEl } } = this;
     const highMaxOverlap = this.intersects(highLabelEl, maxLabelEl);
     const lowHighOverlap = this.intersects(lowLabelEl, highLabelEl);
@@ -189,6 +193,9 @@ class Meter extends LitElement {
   }
   determineValueLabelPosition() {
     const { valueLabelRef: { value: valueLabelEl }, meterContainerRef: { value: meterContainerEl }, currentPercent } = this;
+    if (!valueLabelEl || !meterContainerEl) {
+      return;
+    }
     const valuePosition = currentPercent > 100 ? 100 : currentPercent > 0 ? currentPercent : 0;
     const valueLabelWidth = valueLabelEl.getBoundingClientRect().width;
     const containerWidth = meterContainerEl.getBoundingClientRect().width;

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

@@ -26,7 +26,7 @@ export abstract class Pagination extends LitElement {
       last?: string;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * Specifies the number of items per page.
    *

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

@@ -42,7 +42,10 @@ class Pagination extends LitElement {
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.isXXSmall = false;
+    this.lastStartItem = 1;
     this.maxItems = maxItemBreakpoints.xxsmall;
+    this.totalPages = 1;
     this.groupSeparator = false;
     this.pageSize = 20;
     this.scale = "m";

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

@@ -46,7 +46,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class Panel extends LitElement {
   /** Passes a function to run before the component closes. */
-  accessor beforeClose: () => Promise<void>;
+  accessor beforeClose: (() => Promise<void>) | undefined;
   /**
    * When `true`, displays a close button in the component.
    *
@@ -78,7 +78,7 @@ export abstract class Panel extends LitElement {
    */
   accessor collapsible: boolean;
   /** Specifies a description for the component. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -86,11 +86,11 @@ export abstract class Panel extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -104,7 +104,7 @@ export abstract class Panel extends LitElement {
    */
   accessor loading: boolean;
   /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
-  accessor menuFlipPlacements: FlipPlacement[];
+  accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
    *