@esri/calcite-components 5.1.1-next.5 → 5.1.1

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

@@ -1,6 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { 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";
@@ -13,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/resources9.js";
+import { a as activeCellTestAttribute, I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources10.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 {
@@ -35,6 +36,7 @@ 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;
@@ -46,11 +48,13 @@ 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;
@@ -107,7 +111,7 @@ class ListItem extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     const { el } = this;
-    this.parentListEl = el.closest(listSelector) || void 0;
+    this.parentListEl = el.closest(listSelector);
     this.level = getDepth(el) + 1;
     this.setSelectionDefaults();
   }
@@ -130,7 +134,10 @@ class ListItem extends LitElement {
     if (changes.has("displayMode") && this.hasUpdated) {
       this.handleExpandableChange(this.defaultSlotRef.value);
     }
-    if (changes.has("label") || changes.has("description") || changes.has("metadata")) {
+    const metadataChanged = changes.has("metadata");
+    const previousMetadata = changes.get("metadata");
+    const shouldEmitMetadataChange = metadataChanged && !isEqual(this.metadata, previousMetadata);
+    if ((changes.has("label") || changes.has("description") || shouldEmitMetadataChange) && this.hasUpdated) {
       this.emitCalciteInternalListItemChange();
     }
     if (changes.has("expanded") && this.hasUpdated) {
@@ -148,7 +155,7 @@ class ListItem extends LitElement {
   }
   activeHandler(active) {
     if (!active) {
-      this.focusCell(void 0, false);
+      this.focusCell(null, false);
     }
   }
   handleClosedChange() {
@@ -286,7 +293,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) {
@@ -297,7 +304,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" && actionsStartEl && !composedPath.includes(actionsStartEl) && actionsEndEl && !composedPath.includes(actionsEndEl)) {
+    if (key === "Enter" && !composedPath.includes(actionsStartEl) && !composedPath.includes(actionsEndEl)) {
       event.preventDefault();
       this.toggleSelected(event.shiftKey);
     } else if (key === "ArrowRight") {
@@ -306,7 +313,7 @@ class ListItem extends LitElement {
       if (currentIndex === -1) {
         if (!expanded && expandable) {
           this.toggle(true);
-          this.focusCell();
+          this.focusCell(null);
         } else if (cells[0]) {
           this.focusCell(cells[0]);
         }
@@ -317,27 +324,27 @@ class ListItem extends LitElement {
       event.preventDefault();
       const prevIndex = currentIndex - 1;
       if (currentIndex === -1) {
-        this.focusCell();
+        this.focusCell(null);
         if (expanded && expandable) {
           this.toggle(false);
         } else {
           this.calciteInternalFocusPreviousItem.emit();
         }
       } else if (currentIndex === 0) {
-        this.focusCell();
+        this.focusCell(null);
         containerRef.value.focus();
       } else if (cells[currentIndex] && cells[prevIndex]) {
         this.focusCell(cells[prevIndex]);
       }
     }
   }
-  clearCellFocus() {
-    this.focusCell();
+  focusCellNull() {
+    this.focusCell(null);
   }
   setFocusCell(focusEl, focusedEl, saveFocusIndex) {
     const { parentListEl } = this;
     if (saveFocusIndex) {
-      focusMap.set(parentListEl, void 0);
+      focusMap.set(parentListEl, null);
     }
     const gridCells = this.getGridCells();
     gridCells.forEach((tableCell) => {
@@ -456,14 +463,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 : void 0} .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 : null} .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.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({
+    })} .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({
       [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 | undefined;
+  accessor heading: string;
   /**
    * 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/resources9.js";
+import { M as MAX_COLUMNS } from "../../chunks/resources10.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" : null;
-    this.el.ariaValueMin = isDeterminate ? "0" : null;
-    this.el.ariaValueNow = isDeterminate ? valueNow.toString() : null;
+    this.el.ariaValueMax = isDeterminate ? "100" : void 0;
+    this.el.ariaValueMin = isDeterminate ? "0" : void 0;
+    this.el.ariaValueNow = isDeterminate ? valueNow.toString() : void 0;
     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 | undefined;
+  accessor href: string;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName | undefined;
+  accessor iconEnd: IconName;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext | undefined;
+  accessor iconFlipRtl: FlipContext;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName | undefined;
+  accessor iconStart: IconName;
   /**
    * 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 | undefined;
+  accessor rel: string;
   /**
    * 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 | undefined;
+  accessor target: string;
   /** Specifies the text to display. */
-  accessor text: string | undefined;
+  accessor text: string;
   /**
    * Sets focus on the component.
    *

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

@@ -45,12 +45,9 @@ 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 | undefined;
+  accessor form: string;
   /**
    * 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 | undefined;
+  accessor high: number;
   /**
    * 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 | undefined;
+  accessor low: number;
   /**
    * 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 | undefined;
+  accessor name: string;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem | undefined;
+  accessor numberingSystem: NumberingSystem;
   /**
    * 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 | undefined;
+  accessor value: number;
   /**
    * When `true`, displays the `value`.
    *

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

@@ -39,11 +39,6 @@ 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";
@@ -93,8 +88,12 @@ class Meter extends LitElement {
     this.updateLabels();
   }
   updateLabels() {
-    this.determineValueLabelPosition();
-    this.determineVisibleLabels();
+    if (this.valueLabelRef.value) {
+      this.determineValueLabelPosition();
+    }
+    if (this.rangeLabels) {
+      this.determineVisibleLabels();
+    }
   }
   calculateValues() {
     const { min, max, low, high, value } = this;
@@ -155,12 +154,9 @@ 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);
@@ -193,9 +189,6 @@ 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 | undefined;
+  accessor numberingSystem: NumberingSystem;
   /**
    * Specifies the number of items per page.
    *

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

@@ -42,10 +42,7 @@ 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>) | undefined;
+  accessor beforeClose: () => Promise<void>;
   /**
    * 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 | undefined;
+  accessor description: string;
   /**
    * 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 | undefined;
+  accessor heading: string;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel | undefined;
+  accessor headingLevel: HeadingLevel;
   /** Specifies an icon to display. */
-  accessor icon: IconName | undefined;
+  accessor icon: IconName;
   /**
    * 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[] | undefined;
+  accessor menuFlipPlacements: FlipPlacement[];
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
    *

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

@@ -14,7 +14,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { s as styles$1 } from "../../chunks/header.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { C as CSS, S as SLOTS, I as ICONS, a as IDS } from "../../chunks/resources6.js";
+import { C as CSS, S as SLOTS, I as ICONS, a as IDS } from "../../chunks/resources7.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{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp))}slot[name=alerts]::slotted(calcite-alert){block-size:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=s]) .header-content .icon{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=m]) .header-content .icon{margin-inline-end:var(--calcite-spacing-md)}:host(:is([scale=s],[scale=m])){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xs);--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}:host([scale=l]) .header-content .icon{margin-inline-end:var(--calcite-spacing-lg)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.content-top{padding:var(--calcite-panel-content-top-space, var(--calcite-internal-panel-default-space))}.content-bottom{padding:var(--calcite-panel-content-bottom-space, var(--calcite-internal-panel-default-space))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .heading-text-content{flex:1 1 auto;overflow:hidden}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}#close,#collapse,calcite-action-menu{--calcite-action-background-color: var(--calcite-panel-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);--calcite-action-text-color: var(--calcite-panel-header-action-text-color);--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press)}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;margin:auto;gap:var(--calcite-internal-panel-action-spacing)}.header-actions--start{margin-inline-start:var(--calcite-internal-panel-action-spacing)}.header-actions--end{margin-inline-end:var(--calcite-internal-panel-action-spacing)}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header--slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.header-content.header--non-slotted-content{align-items:center;flex-direction:row}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}calcite-icon{--calcite-icon-color: var(--calcite-panel-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-1)))}:host([hidden]){display:none}[hidden]{display:none}`;
 class Panel extends LitElement {
   constructor() {

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

@@ -33,7 +33,7 @@ export abstract class Popover extends LitElement {
    */
   accessor flipDisabled: boolean;
   /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[] | undefined;
+  accessor flipPlacements: FlipPlacement[];
   /**
    * When `true`, prevents focus trapping.
    *
@@ -49,11 +49,11 @@ export abstract class Popover extends LitElement {
    * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
    * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
    */
-  accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
+  accessor focusTrapOptions: Partial<FocusTrapOptions>;
   /** Specifies the component's heading text. */
-  accessor heading: string | undefined;
+  accessor heading: string;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel | undefined;
+  accessor headingLevel: HeadingLevel;
   /**
    * Specifies an accessible label for the component.
    *

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

@@ -147,7 +147,7 @@ class Popover extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
   }
   hide() {
     this.open = false;

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

@@ -8,7 +8,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  */
 export abstract class Progress extends LitElement {
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * When `true` and type is `"indeterminate"`, reverses the animation direction.
    *
@@ -16,7 +16,7 @@ export abstract class Progress extends LitElement {
    */
   accessor reversed: boolean;
   /** Text that displays under the component's indicator. */
-  accessor text: string | undefined;
+  accessor text: string;
   /**
    * Specifies the component type.
    *

package/dist/components/calcite-radio-button/customElement.d.ts

@@ -26,11 +26,11 @@ export abstract class RadioButton extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string | undefined;
+  accessor form: string;
   /** Specifies the component's label text. */
-  accessor labelText: string | undefined;
+  accessor labelText: string;
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string | undefined;
+  accessor name: string;
   /**
    * When `true` and the component resides in a form,
    * the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit.
@@ -56,7 +56,7 @@ export abstract class RadioButton extends LitElement {
    * @internal
    * @mdn [validationMessage](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/validationMessage)
    */
-  accessor validationMessage: string | undefined;
+  accessor validationMessage: string;
   /**
    * The component's current validation state.
    *
@@ -84,7 +84,7 @@ export abstract class RadioButton extends LitElement {
    * @param validationMessage
    * @internal
    */
-  setValidity(validity: ValidityStateFlags, validationMessage?: string | undefined): Promise<void>;
+  setValidity(validity: ValidityStateFlags, validationMessage?: string): Promise<void>;
   /**
    * Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.
    * Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event

package/dist/components/calcite-radio-button/customElement.js

@@ -55,7 +55,7 @@ class RadioButton extends LitElement {
     return this.focusSetter(() => this.containerRef.value, options);
   }
   async setValidity(validity, validationMessage = this.validationMessage) {
-    this.elementInternals.setValidity(validity, validationMessage || "");
+    this.elementInternals.setValidity(validity, validationMessage);
   }
   connectedCallback() {
     this.rootNode = this.el.getRootNode();

package/dist/components/calcite-radio-button-group/customElement.d.ts

@@ -18,7 +18,7 @@ export abstract class RadioButtonGroup extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's label text. */
-  accessor labelText: string | undefined;
+  accessor labelText: string;
   /**
    * Specifies the layout of the component.
    *
@@ -47,7 +47,7 @@ export abstract class RadioButtonGroup extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the component's selected item. */
-  get selectedItem(): RadioButton | null;
+  get selectedItem(): RadioButton;
   /**
    * Specifies the status of the validation message.
    *
@@ -55,9 +55,9 @@ export abstract class RadioButtonGroup extends LitElement {
    */
   accessor status: Status;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean | undefined;
+  accessor validationIcon: IconName | boolean;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string | undefined;
+  accessor validationMessage: string;
   /**
    * Sets focus on the fist focusable `calcite-radio-button` element in the component.
    *

package/dist/components/calcite-radio-button-group/customElement.js

@@ -64,7 +64,7 @@ class RadioButtonGroup extends LitElement {
     this.mutationObserver?.disconnect();
   }
   handleInvalidFormEvent(event) {
-    const message = this.validationMessage || event.target.validationMessage || "";
+    const message = this.validationMessage || event.target.validationMessage;
     displayValidationMessage(this, {
       message,
       icon: true,
@@ -73,7 +73,7 @@ class RadioButtonGroup extends LitElement {
   }
   passPropsToRadioButtons() {
     this.radioButtons = Array.from(this.el.querySelectorAll("calcite-radio-button"));
-    this.selectedItem = Array.from(this.radioButtons).reverse().find((radioButton) => radioButton.checked) ?? null;
+    this.selectedItem = Array.from(this.radioButtons).reverse().find((radioButton) => radioButton.checked) || null;
     if (this.radioButtons.length > 0) {
       this.radioButtons.forEach((radioButton) => {
         if (this.hasUpdated) {
@@ -87,7 +87,7 @@ class RadioButtonGroup extends LitElement {
     }
   }
   getFocusableRadioButton() {
-    return this.radioButtons.find((radiobutton) => !radiobutton.disabled);
+    return this.radioButtons.find((radiobutton) => !radiobutton.disabled) ?? null;
   }
   radioButtonChangeHandler(event) {
     this.selectedItem = event.target;

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

@@ -15,9 +15,9 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class Rating extends LitElement {
   /** Specifies a cumulative average from previous ratings to display. */
-  accessor average: number | undefined;
+  accessor average: number;
   /** Specifies the number of previous ratings to display. */
-  accessor count: number | undefined;
+  accessor count: number;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -29,9 +29,9 @@ export abstract class Rating extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string | undefined;
+  accessor form: string;
   /** Specifies the component's label text. */
-  accessor labelText: string | undefined;
+  accessor labelText: string;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       rating?: string;
@@ -39,7 +39,7 @@ export abstract class Rating extends LitElement {
       stars?: string;
   };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string | undefined;
+  accessor name: string;
   /**
    * When `true`, the component's value can be read, but cannot be modified.
    *
@@ -65,9 +65,9 @@ export abstract class Rating extends LitElement {
    */
   accessor status: Status;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean | undefined;
+  accessor validationIcon: IconName | boolean;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string | undefined;
+  accessor validationMessage: string;
   /**
    * The component's current validation state.
    *