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

package/dist/components/calcite-table-cell/customElement.js

@@ -30,9 +30,15 @@ class TableCell extends LitElement {
     this.focused = false;
     this.selectionText = "";
     this.alignment = "start";
+    this.disabled = false;
     this.interactionMode = "interactive";
+    this.lastCell = false;
+    this.numberCell = false;
     this.parentRowAlignment = "start";
+    this.parentRowIsSelected = false;
+    this.readCellContentsToAT = false;
     this.scale = "m";
+    this.selectionCell = false;
   }
   static {
     this.properties = { contentsText: [16, {}, { state: true }], focused: [16, {}, { state: true }], selectionText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], colSpan: [11, {}, { reflect: true, type: Number }], disabled: [5, {}, { type: Boolean }], interactionMode: 1, lastCell: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], numberCell: [5, {}, { type: Boolean }], parentRowAlignment: 1, parentRowIsSelected: [5, {}, { type: Boolean }], parentRowPositionLocalized: 1, parentRowType: 1, positionInRow: [9, {}, { type: Number }], readCellContentsToAT: [5, {}, { type: Boolean }], rowSpan: [11, {}, { reflect: true, type: Number }], scale: 1, selectionCell: [5, {}, { type: Boolean }] };

package/dist/components/calcite-table-header/customElement.d.ts

@@ -17,11 +17,11 @@ export abstract class TableHeader extends LitElement {
    */
   accessor alignment: Alignment;
   /** Specifies the number of columns the component should span. */
-  accessor colSpan: number;
+  accessor colSpan: number | undefined;
   /** Specifies a description for the component. Displays below the `heading`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /** Specifies the component's heading text. Displays above the `description`. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       all?: string;
@@ -32,7 +32,7 @@ export abstract class TableHeader extends LitElement {
       selectionColumn?: string;
   };
   /** Specifies the number of rows the component should span. */
-  accessor rowSpan: number;
+  accessor rowSpan: number | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-table-header/customElement.js

@@ -37,8 +37,10 @@ class TableHeader extends LitElement {
     this.screenReaderText = "";
     this.alignment = "start";
     this.interactionMode = "interactive";
+    this.lastCell = false;
     this.numberCell = false;
     this.parentRowAlignment = "start";
+    this.parentRowIsSelected = false;
     this.selectionCell = false;
   }
   static {

package/dist/components/calcite-table-row/customElement.js

@@ -40,6 +40,7 @@ class TableRow extends LitElement {
     this.itemHidden = false;
     this.disabled = false;
     this.interactionMode = "interactive";
+    this.lastVisibleRow = false;
     this.numbered = false;
     this.selectionMode = "none";
     this.calciteInternalTableRowFocusRequest = createEvent({ cancelable: false });
@@ -169,7 +170,7 @@ class TableRow extends LitElement {
       }
     }
   }
-  emitTableRowFocusRequest(cellPosition, rowPosition, destination, lastCell) {
+  emitTableRowFocusRequest(cellPosition, rowPosition, destination, lastCell = false) {
     this.calciteInternalTableRowFocusRequest.emit({
       cellPosition,
       rowPosition,
@@ -179,8 +180,9 @@ class TableRow extends LitElement {
   }
   updateCells() {
     const alignment = this.alignment ? this.alignment : this.rowType !== "head" ? "center" : "start";
-    const slottedCells = this.tableRowSlotRef.value?.assignedElements({ flatten: true })?.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header"));
-    const renderedCells = Array.from(this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell"))?.filter((el) => el.numberCell || el.selectionCell);
+    const slottedCells = this.tableRowSlotRef.value?.assignedElements({ flatten: true })?.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header")) ?? [];
+    const tableRowEls = this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell");
+    const renderedCells = tableRowEls ? Array.from(tableRowEls).filter((el) => el.numberCell || el.selectionCell) : void 0;
     const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
     if (cells.length > 0) {
       cells?.forEach((cell, index) => {

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

@@ -64,7 +64,7 @@ class Tabs extends LitElement {
     const tabs = getSlotAssignedElements(this.slotRef.value, "calcite-tab");
     await Promise.all([...tabs, ...this.titles].map((tabOrTitle) => tabOrTitle.componentOnReady()));
     if (tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
-      tabIds = tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
+      tabIds = tabs.sort((a, b) => a.tab && b.tab ? a.tab.localeCompare(b.tab) : 0).map((el) => el.id);
       titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
     } else {
       const tabDomIndexes = await Promise.all(tabs.map((el) => el.getTabIndex()));
@@ -93,7 +93,8 @@ class Tabs extends LitElement {
         tab.scale = scale;
       }
     });
-    Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((title) => {
+    const tabTitleEls = this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title");
+    Array.from(tabTitleEls).forEach((title) => {
       title.position = position;
       title.scale = scale;
     });

package/dist/components/calcite-text-area/customElement.d.ts

@@ -30,7 +30,7 @@ export abstract class TextArea extends LitElement {
    *
    * @see [MDN - cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)
    */
-  accessor columns: number;
+  accessor columns: number | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -43,7 +43,7 @@ export abstract class TextArea extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -51,9 +51,9 @@ export abstract class TextArea extends LitElement {
    */
   accessor groupSeparator: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.
    *
@@ -72,7 +72,7 @@ export abstract class TextArea extends LitElement {
    *
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)
    */
-  accessor maxLength: number;
+  accessor maxLength: number | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       invalid?: string;
@@ -87,21 +87,21 @@ export abstract class TextArea extends LitElement {
    *
    * @see [MDN - minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)
    */
-  accessor minLength: number;
+  accessor minLength: number | undefined;
   /**
    * Specifies the name of the component. Required to pass the component's value on form submission.
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)
    */
-  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 placeholder text for the component.
    *
    * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)
    */
-  accessor placeholder: string;
+  accessor placeholder: string | undefined;
   /**
    * When `true`, the component's `value` can be read, but cannot be modified.
    *
@@ -128,7 +128,7 @@ export abstract class TextArea extends LitElement {
    *
    * @see [MDN - rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)
    */
-  accessor rows: number;
+  accessor rows: number | undefined;
   /**
    * Specifies the size of the component.
    *
@@ -142,9 +142,9 @@ export abstract class TextArea extends LitElement {
    */
   accessor status: Status;
   /** 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-text-area/customElement.js

@@ -79,6 +79,8 @@ class TextArea extends LitElement {
     this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.endSlotHasElements = false;
+    this.startSlotHasElements = false;
     this.disabled = false;
     this.groupSeparator = false;
     this.limitText = false;
@@ -148,7 +150,7 @@ class TextArea extends LitElement {
     this.setFocus();
   }
   handleInput(event) {
-    this.value = event.target["value"];
+    this.value = event.target.value;
     this.calciteTextAreaInput.emit();
   }
   handleChange() {
@@ -158,7 +160,7 @@ class TextArea extends LitElement {
     if (!this.value) {
       const nodes = this.el.childNodes;
       nodes.forEach((el) => {
-        if (el.nodeName === "#text") {
+        if (el.nodeName === "#text" && el.nodeValue) {
           this.value = el.nodeValue.trim();
         }
       });
@@ -204,7 +206,7 @@ class TextArea extends LitElement {
     return this.messages.tooLong.replace("{maxLength}", this.localizedCharacterLengthObj.maxLength).replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
   }
   isCharacterLimitExceeded() {
-    return this.value?.length > this.maxLength;
+    return this.maxLength !== void 0 && this.value?.length > this.maxLength || false;
   }
   setValidationRef(el) {
     if (!el) {

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

@@ -32,7 +32,7 @@ export abstract class Tile extends LitElement {
    */
   accessor alignment: Exclude<Alignment, "end">;
   /** Specifies a description for the component. Displays below the `heading`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -49,13 +49,13 @@ export abstract class Tile extends LitElement {
    */
   accessor embed: boolean;
   /** Specifies the component's heading text. displays between the `icon` and `description`. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** When embed is `false`, specifies the URL for the component. */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -63,7 +63,7 @@ export abstract class Tile extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * Specifies the component's size.
    *

package/dist/components/calcite-time-picker/customElement.d.ts

@@ -62,7 +62,7 @@ export abstract class TimePicker extends LitElement {
   /** @internal */
   accessor time: ReturnType<typeof useTime>;
   /** The component's value in UTC (always 24-hour format). */
-  accessor value: string;
+  accessor value: string | null;
   /**
    * Sets focus on the component's first focusable element.
    *

package/dist/components/calcite-time-picker/customElement.js

@@ -62,6 +62,8 @@ class TimePicker extends LitElement {
     this.secondRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.showFractionalSecond = false;
+    this.showSecond = false;
     this.time = useTime(this);
     this.hourFormat = "user";
     this.scale = "m";
@@ -195,22 +197,30 @@ class TimePicker extends LitElement {
   }
   fractionalSecondDownClickHandler() {
     this.activeEl = this.fractionalSecondRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.nudgeFractionalSecond("down");
   }
   fractionalSecondUpClickHandler() {
     this.activeEl = this.fractionalSecondRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.nudgeFractionalSecond("up");
   }
   hourDownClickHandler() {
     this.activeEl = this.hourRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.decrementHour();
   }
   hourUpClickHandler() {
     this.activeEl = this.hourRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.incrementHour();
   }
   inputClickHandler(event) {
@@ -218,32 +228,42 @@ class TimePicker extends LitElement {
   }
   meridiemUpClickHandler() {
     this.activeEl = this.meridiemRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.toggleMeridiem("up");
   }
   meridiemDownClickHandler() {
     this.activeEl = this.meridiemRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.toggleMeridiem("down");
   }
   minuteDownClickHandler() {
     this.activeEl = this.minuteRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.decrementMinute();
   }
   minuteUpClickHandler() {
     this.activeEl = this.minuteRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.incrementMinute();
   }
   secondDownClickHandler() {
     this.activeEl = this.secondRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.decrementSecond();
   }
   secondUpClickHandler() {
     this.activeEl = this.secondRef.value;
-    this.activeEl.focus();
+    this.activeEl?.focus();
     this.time.incrementSecond();
   }
   timeChangeHandler(event) {
@@ -279,7 +299,7 @@ class TimePicker extends LitElement {
       [CSS.button]: true,
       [CSS.buttonHourUp]: true,
       [CSS.buttonTopLeft]: true
-    })} @click=${this.hourUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.hour} aria-valuemax=23 aria-valuemin=1 .ariaValueNow=${hourIsNumber && parseInt(hour) || "0"} .ariaValueText=${hour} class=${safeClassMap({
+    })} @click=${this.hourUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.hour} aria-valuemax=23 aria-valuemin=1 .ariaValueNow=${hourIsNumber && parseInt(hour) || "0"} .ariaValueText=${hour ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.hour]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.hourRef.value
@@ -290,7 +310,7 @@ class TimePicker extends LitElement {
     })} @click=${this.hourDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div><span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.hourSuffix]: true })}>${localizedHourSuffix}</span><div class=${safeClassMap(CSS.column)} role=group><span .ariaLabel=${messages.minuteUp} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonMinuteUp]: true
-    })} @click=${this.minuteUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.minute} aria-valuemax=12 aria-valuemin=1 .ariaValueNow=${minuteIsNumber && parseInt(minute) || "0"} .ariaValueText=${minute} class=${safeClassMap({
+    })} @click=${this.minuteUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.minute} aria-valuemax=12 aria-valuemin=1 .ariaValueNow=${minuteIsNumber && parseInt(minute) || "0"} .ariaValueText=${minute ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.minute]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.minuteRef.value
@@ -300,7 +320,7 @@ class TimePicker extends LitElement {
     })} @click=${this.minuteDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>${this.showSecond && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.minuteSuffix]: true })}>${localizedMinuteSuffix}</span>` || ""}${this.showSecond && html`<div class=${safeClassMap(CSS.column)} role=group><span .ariaLabel=${messages.secondUp} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonSecondUp]: true
-    })} @click=${this.secondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.second} aria-valuemax=59 aria-valuemin=0 .ariaValueNow=${secondIsNumber && parseInt(second) || "0"} .ariaValueText=${second} class=${safeClassMap({
+    })} @click=${this.secondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.second} aria-valuemax=59 aria-valuemin=0 .ariaValueNow=${secondIsNumber && parseInt(second) || "0"} .ariaValueText=${second ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.second]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.secondRef.value
@@ -310,7 +330,7 @@ class TimePicker extends LitElement {
     })} @click=${this.secondDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>` || ""}${this.showFractionalSecond && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.decimalSeparator]: true })}>${localizedDecimalSeparator}</span>` || ""}${this.showFractionalSecond && html`<div class=${safeClassMap(CSS.column)} role=group><span .ariaLabel=${messages.fractionalSecondUp} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonFractionalSecondUp]: true
-    })} @click=${this.fractionalSecondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.fractionalSecond} aria-valuemax=999 aria-valuemin=1 .ariaValueNow=${fractionalSecondIsNumber && parseInt(fractionalSecond) || "0"} .ariaValueText=${localizedFractionalSecond} class=${safeClassMap({
+    })} @click=${this.fractionalSecondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.fractionalSecond} aria-valuemax=999 aria-valuemin=1 .ariaValueNow=${fractionalSecondIsNumber && parseInt(fractionalSecond) || "0"} .ariaValueText=${localizedFractionalSecond ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.fractionalSecond]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.fractionalSecondRef.value
@@ -324,7 +344,7 @@ class TimePicker extends LitElement {
       [CSS.button]: true,
       [CSS.buttonMeridiemUp]: true,
       [CSS.buttonTopRight]: true
-    })} @click=${this.meridiemUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.meridiem} aria-valuemax=2 aria-valuemin=1 .ariaValueNow=${meridiem === "PM" && "2" || "1"} .ariaValueText=${meridiem} class=${safeClassMap({
+    })} @click=${this.meridiemUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.meridiem} aria-valuemax=2 aria-valuemin=1 .ariaValueNow=${meridiem === "PM" && "2" || "1"} .ariaValueText=${meridiem ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.meridiem]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.meridiemRef.value

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

@@ -23,7 +23,7 @@ export abstract class Tooltip extends LitElement {
    *
    * @deprecated in v1.5.0, removal target v6.0.0 - No longer necessary. Overrides the context of the component's text description, which could confuse assistive technology users.
    */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the distance to position the component away from the `referenceElement`. */
   accessor offsetDistance: number;
   /**
@@ -69,7 +69,7 @@ export abstract class Tooltip extends LitElement {
    *
    * The component should not be placed within its own `referenceElement` to avoid unintended behavior.
    */
-  accessor referenceElement: ReferenceElement | string | null;
+  accessor referenceElement: ReferenceElement | string;
   /**
    * Specifies the size of the component.
    *

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

@@ -115,7 +115,7 @@ class Tooltip extends LitElement {
     const hidden = !displayed;
     const arrowNode = !pointerDisabled ? keyed("floating-arrow", FloatingArrow({ floatingLayout, ref: this.setArrowEl })) : null;
     this.el.inert = hidden;
-    this.el.ariaLabel = label;
+    this.el.ariaLabel = label ?? null;
     this.el.ariaLive = "polite";
     this.el.role = "tooltip";
     return html`<div class=${safeClassMap(CSS.positionContainer)} popover=manual ${ref(this.setFloatingEl)}><div class=${safeClassMap({

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

@@ -11,8 +11,8 @@ function getTraversableItems(root) {
   return Array.from(root.querySelectorAll("calcite-tree-item:not([disabled])")).filter(
     (item) => {
       let currentItem = item;
-      while (currentItem !== root && currentItem !== void 0) {
-        const parent = currentItem.parentElement;
+      while (currentItem !== root && currentItem !== null) {
+        const parent = currentItem.parentElement ?? void 0;
         const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;
         if (!traversable) {
           return false;
@@ -28,6 +28,7 @@ class Tree extends LitElement {
   constructor() {
     super();
     this.items = [];
+    this.child = false;
     this.lines = false;
     this.parentExpanded = false;
     this.scale = "m";
@@ -50,7 +51,7 @@ class Tree extends LitElement {
     if (changes.has("parentExpanded") && (this.hasUpdated || this.parentExpanded !== false)) {
       this.updateItems();
     }
-    const parent = this.el.parentElement?.closest("calcite-tree");
+    const parent = this.el.parentElement?.closest("calcite-tree") ?? void 0;
     this.lines = parent ? parent.lines : this.lines;
     this.scale = parent ? parent.scale : this.scale;
     this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
@@ -58,7 +59,7 @@ class Tree extends LitElement {
   }
   onFocus() {
     if (!this.child) {
-      const focusTarget = this.el.querySelector("calcite-tree-item[selected]:not([disabled])") || this.el.querySelector("calcite-tree-item:not([disabled])");
+      const focusTarget = (this.el.querySelector("calcite-tree-item[selected]:not([disabled])") || this.el.querySelector("calcite-tree-item:not([disabled])")) ?? void 0;
       focusElement(focusTarget, true, "focusable");
     }
   }
@@ -279,8 +280,8 @@ class Tree extends LitElement {
     return !this.child ? 0 : -1;
   }
   render() {
-    this.el.ariaMultiSelectable = this.child ? void 0 : toAriaBoolean(this.selectionMode === "multiple" || this.selectionMode === "multichildren");
-    this.el.role = !this.child ? "tree" : void 0;
+    this.el.ariaMultiSelectable = this.child ? null : toAriaBoolean(this.selectionMode === "multiple" || this.selectionMode === "multichildren");
+    this.el.role = !this.child ? "tree" : null;
     setAttribute(this.el, "tabIndex", this.getRootTabIndex());
     return html`<slot @slotchange=${this.handleDefaultSlotChange}></slot>`;
   }

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

@@ -25,11 +25,11 @@ export abstract class TreeItem extends LitElement {
    */
   accessor expanded: boolean;
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, the component is selected.
    *

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

@@ -40,7 +40,9 @@ class TreeItem extends LitElement {
   constructor() {
     super();
     this.actionSlotWrapperRef = createRef();
+    this.childTree = null;
     this.direction = useDirection();
+    this.isSelectionMultiLike = false;
     this.userChangedValue = false;
     this.interactiveContainer = useInteractive(this);
     this.hasEndActions = false;
@@ -49,6 +51,7 @@ class TreeItem extends LitElement {
     this.disabled = false;
     this.expanded = false;
     this.indeterminate = false;
+    this.lines = false;
     this.parentExpanded = false;
     this.selected = false;
     this.calciteInternalTreeItemSelect = createEvent({ cancelable: false });
@@ -69,7 +72,7 @@ class TreeItem extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item");
+    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item") ?? void 0;
   }
   load() {
     requestAnimationFrame(() => this.updateAfterInitialRender = true);
@@ -191,7 +194,10 @@ class TreeItem extends LitElement {
     }
     if (this.selected) {
       const parentTree = this.el.parentElement;
-      const siblings = Array.from(parentTree?.children);
+      if (!parentTree) {
+        return;
+      }
+      const siblings = Array.from(parentTree.children);
       const selectedSiblings = siblings.filter((child) => child.selected);
       if (siblings.length === selectedSiblings.length) {
         parentItem.selected = true;
@@ -223,7 +229,7 @@ class TreeItem extends LitElement {
     this.lines = parentTree.lines;
     let nextParentTree;
     while (parentTree) {
-      nextParentTree = parentTree.parentElement?.closest("calcite-tree");
+      nextParentTree = parentTree.parentElement?.closest("calcite-tree") ?? null;
       if (nextParentTree === parentTree) {
         break;
       } else {
@@ -262,11 +268,11 @@ class TreeItem extends LitElement {
     const { hasEndActions } = this;
     const slotNode = keyed("actionsEndSlot", html`<slot name=${SLOTS.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot>`);
     const iconStartEl = html`<calcite-icon class=${safeClassMap(CSS.iconStart)} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`;
-    this.el.ariaChecked = this.selectionMode === "multiple" || this.selectionMode === "multichildren" || this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : void 0;
-    this.el.ariaExpanded = this.hasChildren ? toAriaBoolean(isExpanded) : void 0;
+    this.el.ariaChecked = this.selectionMode === "multiple" || this.selectionMode === "multichildren" || this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : null;
+    this.el.ariaExpanded = this.hasChildren ? toAriaBoolean(isExpanded) : null;
     this.el.inert = hidden;
     this.el.ariaLive = "polite";
-    this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : void 0;
+    this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : null;
     this.el.role = "treeitem";
     setAttribute(this.el, "tabIndex", this.disabled ? -1 : 0);
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({ [CSS.itemExpanded]: isExpanded })}><div class=${safeClassMap(CSS.nodeAndActionsContainer)}><div class=${safeClassMap({

package/dist/controllers/useSortable.d.ts

@@ -2,6 +2,6 @@ export interface DragDetail<To extends HTMLElement = HTMLElement, From extends H
   toEl: To;
   fromEl: From;
   dragEl: Drag;
-  newIndex: number;
-  oldIndex: number;
+  newIndex?: number;
+  oldIndex?: number;
 }

package/dist/controllers/useTime.d.ts

@@ -27,34 +27,34 @@ export interface TimeComponent extends LitElement {
   /** Specifies the granularity the component's `value` must adhere to (in seconds). */
   step: number;
   /** The component's time value in ISO (24-hour) format. */
-  value: string;
+  value: string | null;
 }
 
 export class TimeController extends GenericController<TimeProperties, TimeComponent> {
   calciteTimeChange: EventEmitter<string>;
-  fractionalSecond: string;
+  fractionalSecond?: string | null;
   handleFractionalSecondKeyDownEvent: (event: KeyboardEvent) => void;
   handleHourKeyDownEvent: (event: KeyboardEvent) => void;
   handleMeridiemKeyDownEvent: (event: KeyboardEvent) => void;
   handleMinuteKeyDownEvent: (event: KeyboardEvent) => void;
   handleSecondKeyDownEvent: (event: KeyboardEvent) => void;
-  hour: string;
-  hourFormat: EffectiveHourFormat;
-  locale: Locale;
+  hour?: string | null;
+  hourFormat?: EffectiveHourFormat | null;
+  locale?: Locale | null;
   /** @default "." */
   localizedDecimalSeparator: string;
-  localizedFractionalSecond: string;
-  localizedHour: string;
-  localizedHourSuffix: string;
-  localizedMeridiem: string;
-  localizedMinute: string;
-  localizedMinuteSuffix: string;
-  localizedSecond: string;
-  localizedSecondSuffix: string;
-  meridiem: Meridiem;
-  meridiemOrder: number;
-  minute: string;
-  second: string;
+  localizedFractionalSecond?: string | null;
+  localizedHour?: string | null;
+  localizedHourSuffix?: string | null;
+  localizedMeridiem?: string | null;
+  localizedMinute?: string | null;
+  localizedMinuteSuffix?: string | null;
+  localizedSecond?: string | null;
+  localizedSecondSuffix?: string | null;
+  meridiem?: Meridiem | null;
+  meridiemOrder?: number | null;
+  minute?: string | null;
+  second?: string | null;
   /** @default false */
   userChangedValue: boolean;
   decrementHour(): void;
@@ -72,7 +72,7 @@ export class TimeController extends GenericController<TimeProperties, TimeCompon
    * @param value
    * @param userChangedValue
    */
-  setValue(value: string, userChangedValue?: boolean): void;
+  setValue(value: string | null, userChangedValue?: boolean): void;
   /**
    * @param key
    * @param value
@@ -88,7 +88,7 @@ export type TimeProperties = {
   /** The fractional second portion of the time value. */
   fractionalSecond: string;
   /** The hour portion of the time value (in ISO 24-hour format). */
-  hour: string;
+  hour?: string;
   /**
    * The effective hour format, calculated based on the component's hour-format property.
    * The component's hour-format of "user" will resolve to the locale's default hour format.
@@ -127,7 +127,7 @@ export type TimeProperties = {
   /** An integer representing the order in which the meridiem appears for the locale within an array of values returned by Intl.DateTimeFormat. */
   meridiemOrder: number;
   /** The minute portion of the time value. */
-  minute: string;
+  minute?: string;
   /** The second portion of the time value. */
   second: string;
 };