@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.31

package/dist/components/calcite-sort-handle/customElement.d.ts

@@ -13,21 +13,25 @@ export abstract class SortHandle extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
-  /** Overrides individual strings used by the component. */
+  accessor label: string | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      reorder?: string;
-      addTo?: string;
-      moveTo?: string;
-      moveToTop?: string;
-      moveToBottom?: string;
-      moveUp?: string;
-      moveDown?: string;
-      repositionLabel?: string;
-      reposition?: string;
+      reorder?: string | undefined;
+      addTo?: string | undefined;
+      moveTo?: string | undefined;
+      moveToTop?: string | undefined;
+      moveToBottom?: string | undefined;
+      moveUp?: string | undefined;
+      moveDown?: string | undefined;
+      repositionLabel?: string | undefined;
+      reposition?: string | undefined;
   };
   /** Defines the "Move to" items. */
   accessor moveToItems: SortMenuItem[];
@@ -60,9 +64,9 @@ export abstract class SortHandle extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the handle's current position. */
-  accessor setPosition: number;
+  accessor setPosition: number | undefined;
   /** Specifies the total number of sortable items. */
-  accessor setSize: number;
+  accessor setSize: number | undefined;
   /**
    * When `true`, prevents sorting of items.
    *
@@ -70,16 +74,14 @@ export abstract class SortHandle extends LitElement {
    */
   accessor sortDisabled: 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)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the width of the component. */
-  accessor widthScale: Scale;
+  accessor widthScale: Scale | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-sort-handle/customElement.js

@@ -95,11 +95,11 @@ class SortHandle extends LitElement {
     return this.setPosition === 1;
   }
   get isDownReorderDisabled() {
-    return this.setPosition === this.setSize;
+    return this.hasSetInfo && this.setPosition === this.setSize;
   }
   get isBottomReorderDisabled() {
     const { setPosition, setSize } = this;
-    return setPosition === setSize || setPosition === setSize - 1;
+    return this.hasSetInfo && (setPosition === setSize || setPosition === setSize - 1);
   }
   async setFocus(options) {
     return this.focusSetter(() => this.dropdownEl, options);

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

@@ -9,9 +9,9 @@ import type { DragDetail } from "../../controllers/useSortable.js";
  */
 export abstract class SortableList extends LitElement {
   /** When provided, the method will be called to determine whether the element can move from the list. */
-  accessor canPull: (detail: DragDetail) => boolean;
+  accessor canPull: ((detail: DragDetail) => boolean) | undefined;
   /** When provided, the method will be called to determine whether the element can be added from another list. */
-  accessor canPut: (detail: DragDetail) => boolean;
+  accessor canPut: ((detail: DragDetail) => boolean) | undefined;
   /**
    * When `true`, disabled prevents interaction. This state shows items with lower opacity/grayed.
    *

package/dist/components/calcite-sortable-list/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 { i as focusElement } from "../../chunks/dom.js";
+import { j as focusElement } from "../../chunks/dom.js";
 import { l as logger } from "../../chunks/logger.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useSortable } from "../../chunks/useSortable.js";
@@ -74,10 +74,10 @@ class SortableList extends LitElement {
     const { direction } = event.detail;
     const handle = event.composedPath().find((el) => el.matches(this.handleSelector));
     const sortItem = this.items.find((item) => {
-      return item.contains(handle) || event.composedPath().includes(item);
+      return handle && item.contains(handle) || event.composedPath().includes(item);
     });
     const lastIndex = this.items.length - 1;
-    const startingIndex = this.items.indexOf(sortItem);
+    const startingIndex = sortItem ? this.items.indexOf(sortItem) : -1;
     let appendInstead = false;
     let buddyIndex;
     if (direction === "up") {
@@ -104,7 +104,7 @@ class SortableList extends LitElement {
     this.items = Array.from(this.el.children);
     this.beginObserving();
     requestAnimationFrame(() => focusElement(handle));
-    if ("selected" in handle) {
+    if (handle && "selected" in handle) {
       handle.selected = true;
     }
   }

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

@@ -52,11 +52,11 @@ export abstract class SplitButton extends LitElement {
    */
   accessor dropdownIconType: DropdownIconType;
   /** Accessible name for the dropdown menu. */
-  accessor dropdownLabel: string;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  accessor dropdownLabel: string | undefined;
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
-  accessor href: string;
+  accessor href: string | undefined;
   /**
    * Specifies the kind of the component, which will apply to border and background, if applicable.
    *
@@ -86,21 +86,21 @@ export abstract class SplitButton extends LitElement {
    */
   accessor placement: LogicalPlacement;
   /** Specifies an icon to display at the end of the primary button. */
-  accessor primaryIconEnd: IconName;
+  accessor primaryIconEnd: IconName | undefined;
   /** Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor primaryIconFlipRtl: FlipContext;
+  accessor primaryIconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the primary button. */
-  accessor primaryIconStart: IconName;
+  accessor primaryIconStart: IconName | undefined;
   /** Specifies an accessible name for the primary button. */
-  accessor primaryLabel: string;
+  accessor primaryLabel: string | undefined;
   /** Specifies the text displayed in the primary button. */
-  accessor primaryText: string;
+  accessor primaryText: string | undefined;
   /**
    * Defines the relationship between the `href` value and the current document.
    *
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * Specifies the component's size.
    *
@@ -112,11 +112,9 @@ export abstract class SplitButton extends LitElement {
    *
    * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
-  accessor target: string;
+  accessor target: string | undefined;
   /**
-   * 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-split-button/customElement.js

@@ -62,7 +62,7 @@ class SplitButton extends LitElement {
   }
   render() {
     const buttonWidth = this.width === "auto" ? "auto" : "full";
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}><calcite-button .appearance=${this.appearance} .disabled=${this.disabled} .download=${this.download} .href=${this.href} .iconEnd=${this.primaryIconEnd ? this.primaryIconEnd : null} .iconFlipRtl=${this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null} .iconStart=${this.primaryIconStart ? this.primaryIconStart : null} .kind=${this.kind} .label=${this.primaryLabel} .loading=${this.loading} @click=${this.calciteSplitButtonPrimaryClickHandler} .rel=${this.rel} .scale=${this.scale} split-child=primary .target=${this.target} type=button .width=${buttonWidth}>${this.primaryText}</calcite-button><div class=${safeClassMap(CSS.dividerContainer)}><div class=${safeClassMap(CSS.divider)}></div></div><calcite-dropdown .disabled=${this.disabled} .flipPlacements=${this.flipPlacements} @click=${this.calciteSplitButtonSecondaryClickHandler} .open=${this.active} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} .widthScale=${this.scale}><calcite-button .appearance=${this.appearance} .disabled=${this.disabled} .iconStart=${this.dropdownIcon} .kind=${this.kind} .label=${this.dropdownLabel} .scale=${this.scale} slot=${SLOTS.trigger} split-child=secondary type=button></calcite-button><slot></slot></calcite-dropdown></div>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}><calcite-button .appearance=${this.appearance} .disabled=${this.disabled} .download=${this.download} .href=${this.href} .iconEnd=${this.primaryIconEnd} .iconFlipRtl=${this.primaryIconFlipRtl} .iconStart=${this.primaryIconStart} .kind=${this.kind} .label=${this.primaryLabel} .loading=${this.loading} @click=${this.calciteSplitButtonPrimaryClickHandler} .rel=${this.rel} .scale=${this.scale} split-child=primary .target=${this.target} type=button .width=${buttonWidth}>${this.primaryText}</calcite-button><div class=${safeClassMap(CSS.dividerContainer)}><div class=${safeClassMap(CSS.divider)}></div></div><calcite-dropdown .disabled=${this.disabled} .flipPlacements=${this.flipPlacements} @click=${this.calciteSplitButtonSecondaryClickHandler} .open=${this.active} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} .widthScale=${this.scale}><calcite-button .appearance=${this.appearance} .disabled=${this.disabled} .iconStart=${this.dropdownIcon} .kind=${this.kind} .label=${this.dropdownLabel} .scale=${this.scale} slot=${SLOTS.trigger} split-child=secondary type=button></calcite-button><slot></slot></calcite-dropdown></div>` });
   }
 }
 customElement("calcite-split-button", SplitButton);

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

@@ -26,11 +26,15 @@ export abstract class Stepper extends LitElement {
    * @default "horizontal"
    */
   accessor layout: StepperLayout;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      label?: string;
-      previousStep?: string;
-      nextStep?: string;
+      label?: string | undefined;
+      previousStep?: string | undefined;
+      nextStep?: string | undefined;
   };
   /**
    * When `true`, displays the step number in the `calcite-stepper-item` heading.
@@ -47,7 +51,7 @@ export abstract class Stepper extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the component's selected item. */
-  get selectedItem(): StepperItem;
+  get selectedItem(): StepperItem | null;
   /** Set the last `calcite-stepper-item` as active. */
   endStep(): Promise<void>;
   /**

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

@@ -7,6 +7,7 @@ import { f as focusElementInGroup, a as slotChangeGetAssignedElements } from "..
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
+import { i as isStepperItem } from "../../chunks/resources12.js";
 const CSS$1 = {
   actionIcon: "action-icon",
   actionContainer: "action-container",
@@ -50,6 +51,7 @@ class Stepper extends LitElement {
     this.multipleViewMode = false;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.messages = useT9n();
+    this.currentActivePosition = -1;
     this.icon = false;
     this.layout = "horizontal";
     this.numbered = false;
@@ -123,11 +125,9 @@ class Stepper extends LitElement {
     }
   }
   loaded() {
-    if (typeof this.currentActivePosition !== "number") {
+    if (this.currentActivePosition === -1) {
       const enabledStepIndex = this.getFirstEnabledStepperPosition();
-      if (enabledStepIndex === 0) {
-        this.currentActivePosition = enabledStepIndex;
-      }
+      this.currentActivePosition = enabledStepIndex;
       this.calciteInternalStepperItemChange.emit({
         position: enabledStepIndex
       });
@@ -194,7 +194,7 @@ class Stepper extends LitElement {
     const { currentActivePosition, layout } = this;
     this.multipleViewMode = layout !== "horizontal-single";
     visibleItems.forEach((item, index) => {
-      item.itemHidden = layout === "horizontal-single" && index !== (currentActivePosition || 0);
+      item.itemHidden = layout === "horizontal-single" && index !== currentActivePosition;
     });
   }
   getEnabledStepIndex(startIndex, direction = "next") {
@@ -231,15 +231,15 @@ class Stepper extends LitElement {
     return 0;
   }
   handleDefaultSlotChange(event) {
-    const items = slotChangeGetAssignedElements(event).filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
-    this.items = items;
+    this.items = slotChangeGetAssignedElements(event).filter((el) => isStepperItem(el));
     this.updateItems();
     const spacing = Array(this.visibleItems.length).fill("1fr").join(" ");
-    this.containerRef.value.style.gridTemplateAreas = spacing;
-    this.containerRef.value.style.gridTemplateColumns = spacing;
+    const value = this.containerRef.value;
+    value.style.gridTemplateAreas = spacing;
+    value.style.gridTemplateColumns = spacing;
   }
   render() {
-    this.el.ariaLabel = this.messages.label;
+    this.el.ariaLabel = this.messages.label ?? null;
     this.el.role = "region";
     return html`<div class=${safeClassMap({ container: true, [CSS$1.singleView]: this.layout === "horizontal-single" })} ${ref(this.containerRef)}>${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.stepBarContainer]: true })}>${this.visibleItems.map((item, index) => StepBar({ active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition }))}</div>` || ""}${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.actionContainer]: true })}>${this.renderAction("start")}${this.renderAction("end")}</div>` || ""}<slot @slotchange=${this.handleDefaultSlotChange}></slot></div>`;
   }

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

@@ -29,8 +29,8 @@ export abstract class StepperItem extends LitElement {
    * @default false
    */
   accessor complete: boolean;
-  /** Specifies a description for the component. Displays below the header text. */
-  accessor description: string;
+  /** Specifies a description for the component. Displays below the `heading`. */
+  accessor description: string | undefined;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
    *
@@ -44,18 +44,22 @@ export abstract class StepperItem extends LitElement {
    */
   accessor error: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
    * @default false
    */
   accessor iconFlipRtl: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      complete?: string;
-      previousStep?: string;
-      nextStep?: string;
+      complete?: string | undefined;
+      previousStep?: string | undefined;
+      nextStep?: string | undefined;
   };
   /**
    * When `true`, the component is selected.

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

@@ -7,34 +7,20 @@ import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isHidden } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { m as slotChangeHasContent } from "../../chunks/dom.js";
+import { n as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  container: "container",
-  hasSlottedContent: "has-slotted-content",
-  stepperItemContent: "stepper-item-content",
-  stepperItemDescription: "stepper-item-description",
-  stepperItemHeader: "stepper-item-header",
-  stepperItemHeading: "stepper-item-heading",
-  stepperItemHeaderText: "stepper-item-header-text",
-  stepperItemIcon: "stepper-item-icon",
-  stepperItemNumber: "stepper-item-number",
-  visuallyHidden: "visually-hidden"
-};
-const ICONS = {
-  circle: "circle",
-  circleF: "circleF",
-  exclamationMarkCircleF: "exclamationMarkCircleF",
-  checkCircleF: "checkCircleF"
-};
+import { C as CSS, I as ICONS } from "../../chunks/resources12.js";
 const styles = css`:host([disabled]),:host([layout=horizontal][disabled]) .stepper-item-header,:host([layout=horizontal-single][disabled]) .stepper-item-header{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header *,:host([layout=horizontal-single][disabled]) .stepper-item-header *,:host([disabled]) ::slotted(*),:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([layout=horizontal-single][disabled]) .stepper-item-header ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s: .25rem;--calcite-internal-stepper-item-spacing-unit-m: .75rem;--calcite-internal-stepper-item-spacing-unit-l: 1rem;--calcite-internal-stepper-item-header-padding: var(--calcite-spacing-md);--calcite-internal-stepper-action-inline-size: 2rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);margin-inline-end:.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size-relative-sm)}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s: .5rem;--calcite-internal-stepper-item-spacing-unit-m: 1rem;--calcite-internal-stepper-item-spacing-unit-l: 1.25rem;--calcite-internal-stepper-item-header-padding: var(--calcite-spacing-lg);--calcite-internal-stepper-action-inline-size: 2.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);margin-inline-end:.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size-relative-base)}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s: .75rem;--calcite-internal-stepper-item-spacing-unit-m: 1.25rem;--calcite-internal-stepper-item-spacing-unit-l: 1.5rem;--calcite-internal-stepper-item-header-padding: var(--calcite-spacing-xl);--calcite-internal-stepper-action-inline-size: 3rem;font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-lg);margin-inline-end:.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-relative-md)}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);text-decoration-line:none;outline:2px solid transparent;outline-offset:2px}:host .container:active{background-color:var(--calcite-stepper-item-background-color-press, var(--calcite-color-foreground-3))}:host{outline-color:transparent}:host(:focus){outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host .stepper-item-content,:host .stepper-item-header{box-sizing:border-box;padding-block:var(--calcite-internal-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-internal-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start;padding-block:var(--calcite-internal-stepper-item-header-padding)}:host .stepper-item-header:active{background-color:var(--calcite-stepper-item-background-color-press, var(--calcite-color-foreground-3))}:host .stepper-item-header *{display:inline-flex;align-items:center}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host .stepper-item-icon{margin-inline-end:var(--calcite-internal-stepper-item-spacing-unit-m);display:inline-flex;block-size:.75rem;flex-shrink:0;align-self:flex-start;margin-block-start:var(--calcite-spacing-base);color:var(--calcite-stepper-item-icon-color, var(--calcite-color-border-input))}:host([complete]) .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}.stepper-item-heading,.stepper-item-description,.stepper-item-number{line-height:var(--calcite-font-line-height-relative-snug)}:host .stepper-item-heading{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-stepper-item-header-text-color, var(--calcite-color-text-1))}:host .stepper-item-description{color:var(--calcite-stepper-item-description-text-color, var(--calcite-color-text-3))}:host .stepper-item-number{font-weight:var(--calcite-font-weight-normal);margin-inline-end:var(--calcite-internal-stepper-item-spacing-unit-m);color:var(--calcite-stepper-item-description-text-color, var(--calcite-color-text-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:#007ac280}:host([complete]) .container .stepper-item-icon{color:var(--calcite-stepper-item-complete-icon-color, var(--calcite-color-brand))}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-stepper-item-error-icon-color, var(--calcite-color-status-danger))}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-stepper-item-error-icon-color, var(--calcite-color-status-danger))}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-stepper-item-header-text-color-hover, var(--calcite-color-text-1))}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-stepper-item-description-text-color-hover, var(--calcite-color-text-2))}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-stepper-item-selected-header-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-medium)}:host([selected]) .container .stepper-item-description{color:var(--calcite-stepper-item-description-text-color-hover, var(--calcite-color-text-2))}:host([selected]) .container .stepper-item-number{color:var(--calcite-stepper-item-selected-icon-color, var(--calcite-color-brand));font-weight:var(--calcite-font-weight-medium)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-stepper-item-selected-icon-color, var(--calcite-color-brand));opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]){inline-size:100%}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-internal-stepper-item-spacing-unit-l);border-color:var(--calcite-stepper-bar-fill-color, var(--calcite-color-border-2))}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-internal-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0}:host([layout=vertical][complete]) .container{border-color:var(--calcite-stepper-bar-complete-fill-color, rgba(0, 122, 194, .5))}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-stepper-bar-complete-fill-color-hover, var(--calcite-color-brand))}:host([layout=vertical][error]) .container{border-color:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}:host([layout=vertical][selected]) .container{border-color:var(--calcite-stepper-bar-selected-fill-color, var(--calcite-color-brand))}:host([layout=vertical][selected]) .container .stepper-item-content.has-slotted-content{margin-block-end:var(--calcite-internal-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-stepper-bar-fill-color-hover, rgba(0, 122, 194, .5))}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-stepper-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover))}:host([layout=horizontal]),:host([layout=horizontal-single]){display:contents}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header,:host([layout=horizontal-single]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;outline-color:transparent;grid-row:items;border-color:var(--calcite-stepper-bar-fill-color, var(--calcite-color-border-2))}:host([layout=horizontal]) .stepper-item-header:focus,:host([layout=horizontal-single]) .stepper-item-header:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{cursor:auto;transition-timing-function:cubic-bezier(.4,0,.2,1);padding-block:0;padding-inline-end:var(--calcite-internal-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal-single]) .stepper-item-header{grid-area:1/1/1/-1}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header,:host([layout=horizontal-single][complete]) .stepper-item-header{border-color:var(--calcite-stepper-bar-complete-fill-color, rgba(0, 122, 194, .5))}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-stepper-bar-complete-fill-color-hover, var(--calcite-color-brand))}:host([layout=horizontal][error]) .stepper-item-header,:host([layout=horizontal-single][error]) .stepper-item-header{border-color:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}:host([layout=horizontal][selected]) .stepper-item-header,:host([layout=horizontal-single][selected]) .stepper-item-header{border-color:var(--calcite-stepper-bar-selected-fill-color, var(--calcite-color-brand))}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-stepper-bar-fill-color-hover, rgba(0, 122, 194, .5))}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-stepper-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover))}@media(forced-colors:active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal-single]) .stepper-item-header{margin-inline-end:0px;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + .5rem)}:host([layout=horizontal-single][error]) .container .stepper-item-number{color:var(--calcite-stepper-item-error-icon-color, var(--calcite-color-status-danger))}:host([layout=horizontal-single][error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-stepper-item-error-icon-color, var(--calcite-color-status-danger))}:host([layout=horizontal-single][error][selected]),:host([layout=horizontal-single][complete][selected]) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal-single][error][selected]) .stepper-item-heading,:host([layout=horizontal-single][complete][selected]) .container .stepper-item-heading{color:var(--calcite-stepper-item-header-text-color, var(--calcite-color-text-2))}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-number{color:var(--calcite-stepper-item-selected-icon-color, var(--calcite-color-text-3))}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([item-hidden]){display:none}`;
 class StepperItem extends LitElement {
   constructor() {
     super();
     this.headerRef = createRef();
+    this.itemPosition = 0;
+    this.selectedPosition = 0;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.stepperItemHasContent = false;
     this.complete = false;
     this.disabled = false;
     this.error = false;
@@ -146,15 +132,13 @@ class StepperItem extends LitElement {
     }
   }
   getItemPosition() {
-    return Array.from(this.parentStepperEl?.querySelectorAll("calcite-stepper-item:not([hidden]):not([item-hidden])")).indexOf(this.el);
+    const stepperItems = this.parentStepperEl?.querySelectorAll("calcite-stepper-item:not([hidden]):not([item-hidden])");
+    return stepperItems ? Array.from(stepperItems).indexOf(this.el) : -1;
   }
   render() {
     this.el.ariaCurrent = this.selected ? "step" : "false";
-    const innerDisplayContextTabIndex = (
-      /* additional tab index logic needed because of display: contents for horizontal layout */
-      this.layout === "horizontal" && !this.disabled ? 0 : null
-    );
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${this.complete && html`<span aria-live=polite class=${safeClassMap(CSS.visuallyHidden)}>${this.messages.complete}</span>` || ""}<div class=${safeClassMap(CSS.stepperItemHeader)} tabindex=${innerDisplayContextTabIndex ?? nothing} ${ref(this.headerRef)}>${this.icon ? this.renderIcon() : null}${this.numbered ? html`<div class=${safeClassMap(CSS.stepperItemNumber)}>${this.renderNumbers()}.</div>` : null}<div class=${safeClassMap(CSS.stepperItemHeaderText)}><span class=${safeClassMap(CSS.stepperItemHeading)}>${this.heading}</span><span class=${safeClassMap(CSS.stepperItemDescription)}>${this.description}</span></div></div><div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${this.complete && html`<span aria-live=polite class=${safeClassMap(CSS.visuallyHidden)}>${this.messages.complete}</span>` || ""}<div class=${safeClassMap(CSS.stepperItemHeader)} tabindex=${// additional tab index logic needed because of display: contents for horizontal layout
+    (this.layout === "horizontal" && !this.disabled ? 0 : void 0) ?? nothing} ${ref(this.headerRef)}>${this.icon ? this.renderIcon() : null}${this.numbered ? html`<div class=${safeClassMap(CSS.stepperItemNumber)}>${this.renderNumbers()}.</div>` : null}<div class=${safeClassMap(CSS.stepperItemHeaderText)}><span class=${safeClassMap(CSS.stepperItemHeading)}>${this.heading}</span><span class=${safeClassMap(CSS.stepperItemDescription)}>${this.description}</span></div></div><div class=${safeClassMap({
       [CSS.stepperItemContent]: true,
       [CSS.hasSlottedContent]: this.stepperItemHasContent
     })}><slot @slotchange=${(event) => this.stepperItemHasContent = slotChangeHasContent(event)}></slot></div></div>` });

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

@@ -12,7 +12,7 @@ export abstract class Swatch extends LitElement {
    *
    * @see [MDN - CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
    */
-  accessor color: string;
+  accessor color: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *

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

@@ -117,7 +117,7 @@ class Swatch extends LitElement {
     if (this.selectionMode === "single") {
       this.calciteInternalSyncSelectedSwatches.emit();
     }
-    const selectedInParent = this.parentSwatchGroup.selectedItems.includes(this.el);
+    const selectedInParent = this.parentSwatchGroup?.selectedItems.includes(this.el);
     if (!selectedInParent && selected && this.selectionMode !== "multiple") {
       this.calciteInternalSwatchSelect.emit();
     }
@@ -126,7 +126,7 @@ class Swatch extends LitElement {
     }
   }
   handleColorChange(color) {
-    this.internalColor = color ? Color(color) : null;
+    this.internalColor = color ? Color(color) : void 0;
   }
   renderSwatchImage() {
     return html`<div class=${safeClassMap(CSS.imageContainer)}><slot name=${SLOTS.image} @slotchange=${this.handleSlotImageChange}></slot></div>`;

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

@@ -82,13 +82,15 @@ class SwatchGroup extends LitElement {
     }
     event.stopPropagation();
   }
-  updateItems(event) {
-    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-swatch"));
-    this.items = !event ? itemsFromSlot : slotChangeGetAssignedElements(event);
-    if (this.items?.length < 1) {
+  handleSlotChange(event) {
+    this.updateItems(slotChangeGetAssignedElements(event, "calcite-swatch"));
+  }
+  updateItems(items = this.items) {
+    this.items = items;
+    if (this.items.length < 1) {
       return;
     }
-    this.items?.forEach((el) => {
+    this.items.forEach((el) => {
       el.interactive = true;
       el.scale = this.scale;
       el.selectionMode = this.selectionMode;
@@ -126,7 +128,7 @@ class SwatchGroup extends LitElement {
   render() {
     const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
     const { disabled } = this;
-    return this.interactiveContainer({ disabled, children: html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${role}><slot @slotchange=${this.updateItems} ${ref(this.slotRef)}></slot></div>` });
+    return this.interactiveContainer({ disabled, children: html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${role}><slot @slotchange=${this.handleSlotChange} ${ref(this.slotRef)}></slot></div>` });
   }
 }
 customElement("calcite-swatch-group", SwatchGroup);

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

@@ -24,26 +24,35 @@ export abstract class Switch extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * 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;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's end label text. */
-  accessor labelTextEnd: string;
+  accessor labelTextEnd: string | undefined;
   /** Specifies the component's start label text. */
-  accessor labelTextStart: string;
+  accessor labelTextStart: string | undefined;
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor name: string | undefined;
+  /**
+   * When `true` and the component resides in a form,
+   * the component must have a value in order for the form to submit.
+   *
+   * @default false
+   */
+  accessor required: boolean;
   /**
    * Specifies the component's size.
    *
    * @default "m"
    */
   accessor scale: Scale;
+  /**
+   * The component's current validation state.
+   *
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): ValidityState;
   /** The component's value. */
   accessor value: any;
   /**

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

@@ -4,7 +4,8 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -24,15 +25,17 @@ class Switch extends LitElement {
     this.switchRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.checked = false;
     this.disabled = false;
+    this.required = false;
     this.scale = "m";
     this.calciteSwitchChange = createEvent({ cancelable: false });
     this.listen("click", this.clickHandler);
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelTextEnd: 1, labelTextStart: 1, name: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], value: 1 };
+    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelTextEnd: 1, labelTextStart: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -43,14 +46,6 @@ class Switch extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.switchRef.value, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   keyDownHandler(event) {
     if (!this.disabled && isActivationKey(event.key)) {
       this.toggle();

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { n as nodeListToArray } from "../../chunks/dom.js";
+import { o as nodeListToArray } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 const CSS = {
   container: "container",

package/dist/components/calcite-tab-nav/customElement.d.ts

@@ -10,10 +10,14 @@ import type { TabTitle } from "../calcite-tab-title/customElement.js";
  * @slot  - A slot for adding `calcite-tab-title`s.
  */
 export abstract class TabNav extends LitElement {
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      nextTabTitles?: string;
-      previousTabTitles?: string;
+      nextTabTitles?: string | undefined;
+      previousTabTitles?: string | undefined;
   };
   /**
    * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.