@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.11

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

@@ -7,6 +7,7 @@ import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
 /**
  * @cssproperty [--calcite-dropdown-width] - Specifies the width of the component's wrapper.
  * @cssproperty [--calcite-dropdown-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-dropdown-max-height] - Specifies the maximum height of the component's wrapper.
  * @slot  - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
  * @slot [trigger] - [deprecated] in v5.1.0, removal target v7.0.0 - Use the `referenceElement` property instead. A slot for the element that triggers the component.
  */
@@ -25,8 +26,8 @@ export abstract class Dropdown extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-item`s when their initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-item`s when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scrollbar.
    * Value must be greater than `0`, and does not include `groupTitle`s from `calcite-dropdown-group`.
@@ -87,9 +88,7 @@ export abstract class Dropdown extends LitElement {
   /** The component's selected items. */
   get selectedItems(): DropdownItem[];
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
@@ -102,13 +101,13 @@ export abstract class Dropdown extends LitElement {
    */
   accessor type: "hover" | "click";
   /** Specifies the component's width. */
-  accessor width: Extract<Width, Scale>;
+  accessor width: Extract<Width, Scale> | undefined;
   /**
    * Specifies the component's width.
    *
    * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
    */
-  accessor widthScale: Scale;
+  accessor widthScale: Scale | undefined;
   /**
    * Updates the component's position.
    *

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

@@ -22,7 +22,7 @@ const CSS = {
   wrapper: "wrapper",
   triggerContainer: "trigger-container"
 };
-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:inline-block}.wrapper{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.wrapper{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.wrapper[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.wrapper:popover-open{display:block}.wrapper .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.wrapper .calcite-floating-ui-anim{box-shadow:var(--calcite-shadow-md)}.content{max-height:45vh;width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1))}.trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media(forced-colors:active){:host([open]) .wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+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:inline-block}.wrapper{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.wrapper{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.wrapper[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.wrapper:popover-open{display:block}.wrapper .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.wrapper .calcite-floating-ui-anim{box-shadow:var(--calcite-shadow-md)}.content{width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1));max-block-size:var(--calcite-dropdown-max-height, 45vh)}.trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media(forced-colors:active){:host([open]) .wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 const manager = referenceElementManager({ click: true, hover: true });
 class Dropdown extends LitElement {
   constructor() {
@@ -75,7 +75,7 @@ class Dropdown extends LitElement {
     this.styles = styles;
   }
   get referenceElementType() {
-    return this.referenceElement ? this.type : null;
+    return this.referenceElement ? this.type : void 0;
   }
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
@@ -198,7 +198,7 @@ class Dropdown extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
   }
   updateItems() {
     this.items = this.groups.map((group) => Array.from(group?.querySelectorAll("calcite-dropdown-item"))).reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
@@ -266,8 +266,8 @@ class Dropdown extends LitElement {
     this.topLayer.hide();
   }
   setReferenceEl(el) {
-    const previousReferenceEl = this.referenceEl instanceof HTMLElement ? this.referenceEl : null;
-    const nextReferenceEl = el instanceof HTMLElement ? el : null;
+    const previousReferenceEl = this.referenceEl instanceof HTMLElement ? this.referenceEl : void 0;
+    const nextReferenceEl = el instanceof HTMLElement ? el : void 0;
     updateRefObserver(this.resizeObserver, previousReferenceEl, nextReferenceEl);
     if (this.referenceElementType || !nextReferenceEl) {
       return;
@@ -339,6 +339,9 @@ class Dropdown extends LitElement {
     this.selectedItems = this.items.filter((item) => item.selected);
   }
   getYDistanceFromScroller(last) {
+    if (!last) {
+      return NaN;
+    }
     const style = last.getBoundingClientRect();
     return last.offsetTop + style.height;
   }
@@ -380,7 +383,7 @@ class Dropdown extends LitElement {
     this.items.forEach((item) => {
       item.activeDescendant = item === activeItem;
     });
-    this.activeDescendantElement = activeItem ?? null;
+    this.activeDescendantElement = activeItem ?? void 0;
   }
   navigateActiveItem(direction) {
     const traversableItems = this.getTraversableItems();
@@ -446,7 +449,7 @@ class Dropdown extends LitElement {
   }
   render() {
     const { open } = this;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`${!this.referenceElementType ? html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? null} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div>` : null}<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`${!this.referenceElementType ? html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? void 0} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div>` : null}<div class=${safeClassMap({
       [CSS.wrapper]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
     })} .inert=${!open} popover=manual ${ref(this.setFloatingEl)}><div .ariaLabelledByElements=${this.referenceEl instanceof HTMLElement ? [this.referenceEl] : void 0} class=${safeClassMap({

package/dist/components/calcite-dropdown-group/customElement.d.ts

@@ -9,7 +9,7 @@ import type { SelectionMode } from "../interfaces.js";
  */
 export abstract class DropdownGroup extends LitElement {
   /** When specified, displays a group title. */
-  accessor groupTitle: string;
+  accessor groupTitle: string | undefined;
   /**
    * The position of the group in the dropdown menu.
    *

package/dist/components/calcite-dropdown-group/customElement.js

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
-import { C as CSS$1 } from "../../chunks/resources7.js";
+import { C as CSS$1 } from "../../chunks/resources9.js";
 const CSS = {
   title: "title",
   firstTitle: "first-title",
@@ -57,7 +57,7 @@ class DropdownGroup extends LitElement {
   render() {
     const groupTitle = this.groupTitle ? html`<span aria-hidden=true class=${safeClassMap({ [CSS.title]: true, [CSS.firstTitle]: this.position === 0 })}>${this.groupTitle}</span>` : null;
     const dropdownSeparator = this.position > 0 ? html`<div class=${safeClassMap(CSS.separator)} role=separator></div>` : null;
-    this.el.ariaLabel = this.groupTitle;
+    this.el.ariaLabel = this.groupTitle ?? null;
     this.el.role = "group";
     return html`<div class=${safeClassMap({
       [CSS$1.container]: true

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

@@ -24,17 +24,17 @@ export abstract class DropdownItem extends LitElement {
    *
    * Determines if the component will render as an anchor.
    */
-  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;
   /** When the element direction is right-to-left (`"rtl"`), flips the component's `iconStart` and/or `iconEnd`. */
-  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. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the relationship to the linked resource defined in `href`. */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * When `true`, the component is selected.
    *
@@ -42,7 +42,7 @@ export abstract class DropdownItem extends LitElement {
    */
   accessor selected: boolean;
   /** Specifies the frame or window to open the linked resource. */
-  accessor target: string;
+  accessor target: string | undefined;
   /**
    * Sets focus on the component.
    *

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

@@ -7,7 +7,7 @@ import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { C as CSS, I as ICONS } from "../../chunks/resources7.js";
+import { C as CSS, I as ICONS } from "../../chunks/resources9.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;display:flex;flex-grow:1;align-items:center;outline:2px solid transparent;outline-offset:2px}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));text-align:start}.container a{outline:none;position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1))}.content{flex:1 1 auto}.icon{position:relative;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}.icon--start,.icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3))}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .icon,:host([scale=s]) .icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .icon--end{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-block:.5rem;padding-inline:.75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .icon,:host([scale=m]) .icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:var(--calcite-space-sm-plus);padding-inline:1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .icon,:host([scale=l]) .icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container,:host([active-descendant]) .container{text-decoration-line:none;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))))}:host(:hover:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2))}:host(:active:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3))}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{text-decoration-line:none;color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .icon--start,:host(:hover:not([disabled])) .icon--end,:host(:active:not([disabled])) .icon--start,:host(:active:not([disabled])) .icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .link,:host(:active:not([disabled])) .link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .link{font-weight:var(--calcite-font-weight-medium);--calcite-internal-dropdown-item-text-color: var( --calcite-dropdown-item-text-color-press, var(--calcite-color-text-1) );color:var(--calcite-internal-dropdown-item-text-color)}:host([selected]) .container:not(.container--none-selection) .icon,:host([selected]) .link .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host([selected]) .container:not(.container--none-selection) .icon--start,:host([selected]) .container:not(.container--none-selection) .icon--end,:host([selected]) .link .icon--start,:host([selected]) .link .icon--end{--calcite-icon-color: var(--calcite-internal-dropdown-item-text-color)}:host(:hover:not([disabled])) .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .icon{opacity:1}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class DropdownItem extends LitElement {
   constructor() {
@@ -55,7 +55,7 @@ class DropdownItem extends LitElement {
     this.emitRequestedItem();
   }
   updateActiveItemOnChange(event) {
-    const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
+    const parentEmittedChange = this.parentDropdownGroupEl && event.composedPath().includes(this.parentDropdownGroupEl);
     if (parentEmittedChange) {
       this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
       this.requestedDropdownItem = event.detail.requestedDropdownItem;
@@ -64,7 +64,7 @@ class DropdownItem extends LitElement {
     event.stopPropagation();
   }
   initialize() {
-    this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
+    this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group") ?? void 0;
     if (this.selectionMode === "none") {
       this.selected = false;
     }
@@ -106,7 +106,7 @@ class DropdownItem extends LitElement {
     const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
     const { disabled } = this;
     this.el.ariaChecked = itemAria;
-    this.el.ariaLabel = !href ? label : "";
+    this.el.ariaLabel = !href ? label ?? null : "";
     this.el.role = itemRole;
     setAttribute(this.el, "tabIndex", -1);
     return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({

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

@@ -108,7 +108,7 @@ class Filter extends LitElement {
   }
   render() {
     const { disabled, scale } = this;
-    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)}><label><calcite-input clearable .disabled=${disabled} .icon=${ICONS.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @keydown=${this.keyDownHandler} @calciteInputInput=${this.inputHandler} .placeholder=${this.placeholder} .scale=${scale} type=text .value=${this.value} ${ref(this.textInputRef)}></calcite-input></label></div>` });
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)}><label><calcite-input clearable .disabled=${disabled} .icon=${ICONS.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @calciteInputInput=${this.inputHandler} @keydown=${this.keyDownHandler} .placeholder=${this.placeholder} .scale=${scale} type=text .value=${this.value} ${ref(this.textInputRef)}></calcite-input></label></div>` });
   }
 }
 customElement("calcite-filter", Filter);

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

@@ -85,7 +85,7 @@ export abstract class FlowItem extends LitElement {
    * @default false
    */
   accessor collapsible: boolean;
-  /** Specifies a the component's description. */
+  /** Specifies a description for the component. */
   accessor description: string;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
@@ -153,9 +153,7 @@ export abstract class FlowItem extends LitElement {
    */
   accessor showBackButton: boolean;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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/resources6.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";
@@ -119,7 +119,7 @@ class FlowItem extends LitElement {
     const { showBackButton, backButtonClick, messages } = this;
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-    return showBackButton ? keyed("flow-back-button", html`<calcite-action .ariaLabel=${label} class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} .scale=${this.scale} slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
+    return showBackButton ? keyed("flow-back-button", html`<calcite-action class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} .scale=${this.scale} slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
   }
   render() {
     const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messageOverrides, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;

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

@@ -8,16 +8,16 @@ export abstract class Graph extends LitElement {
    * Array of values describing a single color stop ([offset, color, opacity])
    * These color stops should be sorted by offset value.
    */
-  accessor colorStops: ColorStop[];
+  accessor colorStops: ColorStop[] | undefined;
   /**
    * Array of tuples describing a single data point ([x, y])
    * These data points should be sorted by x-axis value.
    */
   accessor data: DataSeries;
   /** End of highlight color if highlighting range. */
-  accessor highlightMax: number;
+  accessor highlightMax: number | undefined;
   /** Start of highlight color if highlighting range. */
-  accessor highlightMin: number;
+  accessor highlightMin: number | undefined;
   /**
    * Highest point of the range.
    *

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

@@ -9,8 +9,8 @@ function slope(p0, p1, p2) {
   const dx1 = p2[0] - p1[0];
   const dy = p1[1] - p0[1];
   const dy1 = p2[1] - p1[1];
-  const m = dy / (dx || dx1 < 0 && 0);
-  const m1 = dy1 / (dx1 || dx < 0 && 0);
+  const m = dy / Number(dx || dx1 < 0 && 0);
+  const m1 = dy1 / Number(dx1 || dx < 0 && 0);
   const p = (m * dx1 + m1 * dx) / (dx + dx1);
   return (Math.sign(m) + Math.sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;
 }
@@ -125,36 +125,32 @@ class Graph extends LitElement {
       currentMax = [max, rangeMax[1]];
     }
     const t = translate({ min: currentMin, max: currentMax, width, height });
-    const [hMinX] = t([highlightMin, currentMax[1]]);
-    const [hMaxX] = t([highlightMax, currentMax[1]]);
     const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
     const fill = colorStops ? `url(#${IDS.linearGradient(id)})` : void 0;
-    return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}${highlightMin !== void 0 ? [
-      svg`<mask height=100% id=${IDS.mask(id, 1) ?? nothing} width=100% x=0% y=0%><path d=${`
+    if (highlightMin !== void 0 && highlightMax !== void 0) {
+      const [hMinX] = t([highlightMin, currentMax[1]]);
+      const [hMaxX] = t([highlightMax, currentMax[1]]);
+      return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${svg`${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}<mask height=100% id=${IDS.mask(id, 1) ?? nothing} width=100% x=0% y=0%><path d=${`
             M 0,0
             L ${hMinX - 1},0
             L ${hMinX - 1},${height}
             L 0,${height}
             Z
-          `} fill=white /></mask>`,
-      svg`<mask height=100% id=${IDS.mask(id, 2) ?? nothing} width=100% x=0% y=0%><path d=${`
+          `} fill=white /></mask><mask height=100% id=${IDS.mask(id, 2) ?? nothing} width=100% x=0% y=0%><path d=${`
             M ${hMinX + 1},0
             L ${hMaxX - 1},0
             L ${hMaxX - 1},${height}
             L ${hMinX + 1}, ${height}
             Z
-          `} fill=white /></mask>`,
-      svg`<mask height=100% id=${IDS.mask(id, 3) ?? nothing} width=100% x=0% y=0%><path d=${`
+          `} fill=white /></mask><mask height=100% id=${IDS.mask(id, 3) ?? nothing} width=100% x=0% y=0%><path d=${`
                 M ${hMaxX + 1},0
                 L ${width},0
                 L ${width},${height}
                 L ${hMaxX + 1}, ${height}
                 Z
-              `} fill=white /></mask>`,
-      svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 1)})`} />`,
-      svg`<path class=${safeClassMap(CSS.graphPathHighlight)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 2)})`} />`,
-      svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 3)})`} />`
-    ] : svg`<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} />`}</svg>`;
+              `} fill=white /></mask><path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 1)})`} /><path class=${safeClassMap(CSS.graphPathHighlight)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 2)})`} /><path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} mask=${`url(#${IDS.mask(id, 3)})`} />`}</svg>`;
+    }
+    return html`<svg aria-hidden=true class=${safeClassMap(CSS.svg)} height=${height ?? nothing} preserveAspectRatio=none viewBox=${`0 0 ${width} ${height}`} width=${width ?? nothing}>${svg`${colorStops ? svg`<defs><linearGradient id=${IDS.linearGradient(id) ?? nothing} x1=0 x2=1 y1=0 y2=0>${colorStops.map(({ offset, color, opacity }) => svg`<stop offset=${`${offset * 100}%`} stop-color=${color ?? nothing} stop-opacity=${opacity ?? nothing} />`)}</linearGradient></defs>` : null}<path class=${safeClassMap(CSS.graphPath)} d=${areaPath ?? nothing} fill=${fill ?? nothing} />`}</svg>`;
   }
 }
 customElement("calcite-graph", Graph);

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

@@ -19,7 +19,7 @@ export abstract class Icon extends LitElement {
    *
    * @see [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons).
    */
-  accessor icon: IconName;
+  accessor icon: IconName | null;
   /**
    * When `true`, preloads the `icon` data.
    *
@@ -37,5 +37,5 @@ export abstract class Icon extends LitElement {
    *
    * It is recommended to set this value if your icon is semantic.
    */
-  accessor textLabel: string;
+  accessor textLabel: string | undefined;
 }

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

@@ -103,7 +103,7 @@ class Icon extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.intersectionObserver?.disconnect();
-    this.intersectionObserver = null;
+    this.intersectionObserver = void 0;
   }
   async loadIconPathData() {
     const { icon, scale, visible } = this;
@@ -121,8 +121,8 @@ class Icon extends LitElement {
     this.intersectionObserver = createObserver("intersection", (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          this.intersectionObserver.disconnect();
-          this.intersectionObserver = null;
+          this.intersectionObserver?.disconnect();
+          this.intersectionObserver = void 0;
           callback();
         }
       });
@@ -138,7 +138,7 @@ class Icon extends LitElement {
     const dir = this.direction;
     const size = scaleToPx[scale];
     const semantic = !!textLabel;
-    const paths = [].concat(pathData || "");
+    const paths = Array.isArray(pathData) ? pathData : [pathData ?? ""];
     this.el.ariaHidden = toAriaBoolean(!semantic);
     this.el.ariaLabel = semantic ? textLabel : null;
     this.el.role = semantic ? "img" : null;

package/dist/components/calcite-icon/interfaces.d.ts

@@ -5,6 +5,6 @@ export type IconName = KebabCaseIcons | CamelCaseIcons;
 
 export type CamelCaseIcons = ExtractBaseIcon<keyof typeof icons>;
 
-export type KebabCaseIcons = KebabCase<CamelCaseIcons>;
+export type KebabCaseIcons = KebabCase<CamelCaseIcons, { splitOnNumbers: true; }>;
 
 export type ExtractBaseIcon<T> = T extends `${infer Base}${"16" | "24" | "32"}F` ? `${Base}F` : T extends `${infer Base}F` ? `${Base}F` : T extends `${infer Base}${"16" | "24" | "32"}` ? Base : never;

package/dist/components/calcite-inline-editable/customElement.d.ts

@@ -13,7 +13,7 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class InlineEditable extends LitElement {
   /** Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. */
-  accessor afterConfirm: () => Promise<void>;
+  accessor afterConfirm: (() => Promise<void>) | undefined;
   /**
    * When `true` and `editingEnabled` is `true`, displays save and cancel controls.
    *

package/dist/components/calcite-inline-editable/customElement.js

@@ -30,6 +30,8 @@ class InlineEditable extends LitElement {
     this.cancelEditingButtonRef = createRef();
     this._editingEnabled = false;
     this.enableEditingButtonRef = createRef();
+    this.shouldEmitCancel = false;
+    this.valuePriorToEditing = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -102,7 +104,7 @@ class InlineEditable extends LitElement {
     this.setFocus();
   }
   enableEditing() {
-    this.valuePriorToEditing = this.inputEl?.value;
+    this.valuePriorToEditing = this.inputEl?.value ?? "";
     this.editingEnabled = true;
     this.inputEl?.setFocus();
     this.calciteInternalInlineEditableEnableEditingChange.emit();
@@ -131,7 +133,7 @@ class InlineEditable extends LitElement {
     if (event.key === "Tab" && this.shouldShowControls) {
       if (!event.shiftKey && event.target === this.inputEl) {
         event.preventDefault();
-        this.cancelEditingButtonRef.value.setFocus();
+        this.cancelEditingButtonRef.value?.setFocus();
       }
       if (!!event.shiftKey && event.target === this.cancelEditingButtonRef.value) {
         event.preventDefault();

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

@@ -35,7 +35,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor accept: string;
+  accessor accept: string | undefined;
   /**
    * Specifies the text alignment of the component's `value`.
    *
@@ -48,7 +48,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
    */
-  accessor autocomplete: AutoFill;
+  accessor autocomplete: AutoFill | undefined;
   /**
    * When `true` and the component has a `value`, a clear button is displayed. The clear button shows by default for `"search"`, `"time"`, and `"date"` types.
    *
@@ -68,12 +68,8 @@ export abstract class Input extends LitElement {
    * @see [MDN - files](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files)
    */
   accessor files: FileList | undefined;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -81,7 +77,7 @@ export abstract class Input extends LitElement {
    */
   accessor groupSeparator: boolean;
   /** When `true`, displays a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
-  accessor icon: IconName | boolean;
+  accessor icon: IconName | boolean | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -89,9 +85,9 @@ export abstract class Input extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -104,17 +100,20 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
    */
-  accessor max: number;
+  accessor max: number | undefined;
   /**
    * When the component resides in a form,
    * specifies the maximum length of text for the component's `value`.
    *
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
-  accessor maxLength: number;
+  accessor maxLength: number | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
+      cancelInlineEditing?: string;
       clear?: string;
+      confirmInlineEditingChanges?: string;
+      enableInlineEditing?: string;
       loading?: string;
       required?: string;
   };
@@ -124,14 +123,14 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
    */
-  accessor min: number;
+  accessor min: number | undefined;
   /**
    * When the component resides in a form,
    * specifies the minimum length of text for the component's `value`.
    *
    * @see [MDN - minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
    */
-  accessor minLength: number;
+  accessor minLength: number | undefined;
   /**
    * When `true` and `type` is `"email"` or `"file"`, the component can accept more than one value.
    * Read the native attribute's documentation on MDN for more info.
@@ -147,7 +146,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `type="number"`, specifies the placement of the buttons.
    *
@@ -155,7 +154,7 @@ export abstract class Input extends LitElement {
    */
   accessor numberButtonType: InputPlacement;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When the component resides in a form,
    * specifies a regular expression (regex) pattern the component's `value` must match for validation.
@@ -163,15 +162,15 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor pattern: string;
+  accessor pattern: string | undefined;
   /**
    * Specifies the component's placeholder text.
    *
    * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
    */
-  accessor placeholder: string;
+  accessor placeholder: string | undefined;
   /** Specifies text to display at the start of the component. */
-  accessor prefixText: string;
+  accessor prefixText: string | undefined;
   /**
    * When `true`, the component's `value` can be read, but cannot be modified.
    *
@@ -203,9 +202,9 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
    */
-  accessor step: number | "any";
+  accessor step: number | "any" | undefined;
   /** Specifies text to display at the end of the component. */
-  accessor suffixText: string;
+  accessor suffixText: string | undefined;
   /**
    * Specifies the component type.
    *
@@ -215,9 +214,9 @@ export abstract class Input extends LitElement {
    */
   accessor type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *