@esri/calcite-components 5.2.0-next.2 → 5.2.0-next.4

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

@@ -48,13 +48,13 @@ export abstract class Panel extends LitElement {
   /** Passes a function to run before the component closes. */
   accessor beforeClose: (() => Promise<void>) | undefined;
   /**
-   * When `true`, displays a close button in the component.
+   * When `true`, displays a close button in the trailing side of the component's header.
    *
    * @default false
    */
   accessor closable: boolean;
   /**
-   * When `true`, the component will be hidden.
+   * When `true`, hides the component.
    *
    * @default false
    */
@@ -103,7 +103,7 @@ export abstract class Panel extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
@@ -141,9 +141,7 @@ export abstract class Panel extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * 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-popover/customElement.d.ts

@@ -32,7 +32,7 @@ export abstract class Popover extends LitElement {
    * @default false
    */
   accessor flipDisabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, prevents focus trapping.
@@ -117,9 +117,7 @@ export abstract class Popover extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * 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-radio-button/customElement.d.ts

@@ -21,11 +21,7 @@ export abstract class RadioButton 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.
-   */
+  /** 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 the component's label text. */
   accessor labelText: string | undefined;

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

@@ -24,11 +24,7 @@ export abstract class Rating 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.
-   */
+  /** 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 the component's label text. */
   accessor labelText: string | undefined;

package/dist/components/calcite-segmented-control/customElement.d.ts

@@ -22,11 +22,7 @@ export abstract class SegmentedControl 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.
-   */
+  /** 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 component's label text. */
   accessor labelText: string;

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

@@ -23,11 +23,7 @@ export abstract class Select 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.
-   */
+  /** 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 an accessible label for the component.

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

@@ -97,9 +97,7 @@ export abstract class Sheet extends LitElement {
    */
   accessor resizable: 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-slider/customElement.d.ts

@@ -33,12 +33,8 @@ export abstract class Slider extends LitElement {
    * @default "start"
    */
   accessor fillPlacement: "start" | "none" | "end";
-  /**
-   * 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.
    *
@@ -56,9 +52,9 @@ export abstract class Slider extends LitElement {
    *
    * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/graph/interfaces.ts#L5).
    */
-  accessor histogram: DataSeries;
+  accessor histogram: DataSeries | undefined;
   /** Specifies a list of single color stops for a histogram, sorted by offset in ascending order. */
-  accessor histogramStops: ColorStop[];
+  accessor histogramStops: ColorStop[] | undefined;
   /** When specified, allows users to customize handle labels. */
   accessor labelFormatter: (value: number, type: "value" | "min" | "max" | "tick", defaultFormatter: (value: number) => string) => string | undefined;
   /**
@@ -68,7 +64,7 @@ export abstract class Slider extends LitElement {
    */
   accessor labelHandles: boolean;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * When `true` and `ticks` is specified, displays label tick marks with their numeric value.
    *
@@ -82,7 +78,7 @@ export abstract class Slider extends LitElement {
    */
   accessor max: number;
   /** When `minValue` and `maxValue` are specified for multiple values, specifies the accessible name for the `maxValue` handle, such as `"Temperature, upper bound"`. */
-  accessor maxLabel: string;
+  accessor maxLabel: string | undefined;
   /** For multiple values, specifies the component's upper value. */
   accessor maxValue: number;
   /** Overrides individual strings used by the component. */
@@ -94,7 +90,7 @@ export abstract class Slider extends LitElement {
    */
   accessor min: number;
   /** Specifies the accessible name associated with the `value` handle (for single values) or `minValue` handle (for multiple values). For instance, `"Temperature, lower bound"`. */
-  accessor minLabel: string;
+  accessor minLabel: string | undefined;
   /** For multiple values, the component's lower value. */
   accessor minValue: number;
   /**
@@ -110,11 +106,11 @@ export abstract class Slider extends LitElement {
    *
    * Required to pass the component's `value` on form submission
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /** Specifies the interval to move with the `Page up` or `Page down` keys. */
-  accessor pageStep: number;
+  accessor pageStep: number | undefined;
   /**
    * When `true`, sets a finer point for handles.
    *
@@ -153,11 +149,11 @@ export abstract class Slider extends LitElement {
    */
   accessor step: number;
   /** Specifies the interval between tick marks on the number line. */
-  accessor ticks: number;
+  accessor ticks: number | undefined;
   /** 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.
    *

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

@@ -65,14 +65,14 @@ class Slider extends LitElement {
       }
       this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
-      if (this.lastDragPropValue != this[this.dragProp]) {
+      if (this.dragProp && this.lastDragPropValue != this[this.dragProp]) {
         this.emitChange();
       }
-      this.dragProp = null;
-      this.lastDragPropValue = null;
-      this.minValueDragRange = null;
-      this.maxValueDragRange = null;
-      this.minMaxValueRange = null;
+      this.dragProp = void 0;
+      this.lastDragPropValue = void 0;
+      this.minValueDragRange = void 0;
+      this.maxValueDragRange = void 0;
+      this.minMaxValueRange = void 0;
     };
     this.dragUpdate = (event) => {
       if (this.disabled || !this.trackRef.value) {
@@ -133,9 +133,6 @@ class Slider extends LitElement {
     this.interactiveContainer = useInteractive(this);
     this._value = defaultValue;
     this.activeProp = "value";
-    this.maxValueDragRange = null;
-    this.minMaxValueRange = null;
-    this.minValueDragRange = null;
     this.tickValues = [];
     this.disabled = false;
     this.fillPlacement = "start";
@@ -245,7 +242,7 @@ class Slider extends LitElement {
       event.preventDefault();
       return;
     }
-    let adjustment;
+    let adjustment = NaN;
     if (key === "ArrowUp" || key === "ArrowRight") {
       const directionFactor = mirror && key === "ArrowRight" ? -1 : 1;
       adjustment = value + step * directionFactor;
@@ -362,7 +359,7 @@ class Slider extends LitElement {
     return ticks;
   }
   onThumbBlur() {
-    this.activeProp = null;
+    this.activeProp = void 0;
   }
   onThumbFocus(event) {
     const thumb = event.currentTarget;
@@ -408,7 +405,7 @@ class Slider extends LitElement {
     window.removeEventListener("pointercancel", this.dragEnd);
   }
   setValue(values) {
-    let valueChanged;
+    let valueChanged = false;
     Object.keys(values).forEach((propName) => {
       const newValue = values[propName];
       if (!valueChanged) {
@@ -483,16 +480,17 @@ class Slider extends LitElement {
     return (num - this.min) / range;
   }
   adjustHostObscuredHandleLabel(name) {
-    const label = this.el.shadowRoot.querySelector(`.handle__label--${name}`);
-    const labelStatic = this.el.shadowRoot.querySelector(`.handle__label--${name}.static`);
-    const labelTransformed = this.el.shadowRoot.querySelector(`.handle__label--${name}.transformed`);
+    const shadowRoot = this.el.shadowRoot;
+    const label = shadowRoot.querySelector(`.handle__label--${name}`);
+    const labelStatic = shadowRoot.querySelector(`.handle__label--${name}.static`);
+    const labelTransformed = shadowRoot.querySelector(`.handle__label--${name}.transformed`);
     const labelStaticBounds = labelStatic.getBoundingClientRect();
     const labelStaticOffset = this.getHostOffset(labelStaticBounds.left, labelStaticBounds.right);
     label.style.transform = `translateX(${labelStaticOffset}px)`;
     labelTransformed.style.transform = `translateX(${labelStaticOffset}px)`;
   }
   hyphenateCollidingRangeHandleLabels() {
-    const { shadowRoot } = this.el;
+    const shadowRoot = this.el.shadowRoot;
     const mirror = this.shouldMirror();
     const leftModifier = mirror ? "value" : "minValue";
     const rightModifier = mirror ? "minValue" : "value";
@@ -566,10 +564,11 @@ class Slider extends LitElement {
     if (this.hasHistogram && !this.precise && !this.labelHandles) {
       return;
     }
-    const minHandle = this.el.shadowRoot.querySelector(`.${CSS.thumbMinValue}`);
-    const maxHandle = this.el.shadowRoot.querySelector(`.${CSS.thumbValue}`);
-    const minTickLabel = this.el.shadowRoot.querySelector(`.${CSS.tickMin}`);
-    const maxTickLabel = this.el.shadowRoot.querySelector(`.${CSS.tickMax}`);
+    const shadowRoot = this.el.shadowRoot;
+    const minHandle = shadowRoot.querySelector(`.${CSS.thumbMinValue}`);
+    const maxHandle = shadowRoot.querySelector(`.${CSS.thumbValue}`);
+    const minTickLabel = shadowRoot.querySelector(`.${CSS.tickMin}`);
+    const maxTickLabel = shadowRoot.querySelector(`.${CSS.tickMax}`);
     if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
       minTickLabel.style.opacity = this.isMinTickLabelObscured(minTickLabel, maxHandle) ? "0" : "1";
       maxTickLabel.style.opacity = this.isMaxTickLabelObscured(maxTickLabel, maxHandle) ? "0" : "1";

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

@@ -13,7 +13,7 @@ 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. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[];
   /** Specifies an accessible label for the component. */
   accessor label: string;
@@ -70,9 +70,7 @@ 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)

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

@@ -47,7 +47,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,7 +44,7 @@ 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"`).
    *

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

@@ -9,32 +9,18 @@ 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 { 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>`;