@esri/calcite-components 5.2.0-next.6 → 5.2.0-next.61

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { HourFormat } from "../../utils/time.js";
 import type { useTime } from "../../controllers/useTime.js";
@@ -18,32 +18,36 @@ import type { useTime } from "../../controllers/useTime.js";
  */
 export abstract class TimePicker extends LitElement {
   /**
-   * Specifies the component's hour format, where:
+   * Specifies the component's hour format.
    *
-   * `"user"` displays the user's locale format,
-   * `"12"` displays a 12-hour format, and
-   * `"24"` displays a 24-hour format.
+   * - `"user"` displays the user's locale format.
+   * - `"12"` displays a 12-hour format.
+   * - `"24"` displays a 24-hour format.
    *
    * @default "user"
    */
   accessor hourFormat: HourFormat;
-  /** 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: {
-      fractionalSecond?: string;
-      fractionalSecondDown?: string;
-      fractionalSecondUp?: string;
-      hour?: string;
-      hourDown?: string;
-      hourUp?: string;
-      meridiem?: string;
-      meridiemDown?: string;
-      meridiemUp?: string;
-      minute?: string;
-      minuteDown?: string;
-      minuteUp?: string;
-      second?: string;
-      secondDown?: string;
-      secondUp?: string;
+      fractionalSecond?: string | undefined;
+      fractionalSecondDown?: string | undefined;
+      fractionalSecondUp?: string | undefined;
+      hour?: string | undefined;
+      hourDown?: string | undefined;
+      hourUp?: string | undefined;
+      meridiem?: string | undefined;
+      meridiemDown?: string | undefined;
+      meridiemUp?: string | undefined;
+      minute?: string | undefined;
+      minuteDown?: string | undefined;
+      minuteUp?: string | undefined;
+      second?: string | undefined;
+      secondDown?: string | undefined;
+      secondUp?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem;

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

@@ -299,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 ?? void 0} 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, 10) || "0"} .ariaValueText=${hour ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.hour]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.hourRef.value
@@ -310,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 ?? void 0} 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, 10) || "0"} .ariaValueText=${minute ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.minute]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.minuteRef.value
@@ -320,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 ?? void 0} 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, 10) || "0"} .ariaValueText=${second ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.second]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.secondRef.value
@@ -330,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 ?? void 0} 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, 10) || "0"} .ariaValueText=${localizedFractionalSecond ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.fractionalSecond]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.fractionalSecondRef.value

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LogicalPlacement, OverlayPositioning, ReferenceElement } from "../../utils/floating-ui.js";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 /**
  * @cssproperty [--calcite-tooltip-background-color] - Specifies the component's background color.
@@ -39,11 +39,11 @@ export abstract class Tooltip extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -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;
+  accessor referenceElement: ReferenceElement | string | undefined;
   /**
    * Specifies the size of the component.
    *

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

@@ -5,15 +5,12 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
+import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, b as disconnectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
-const CSS = {
-  positionContainer: "position-container",
-  container: "container"
-};
+import { C as CSS } from "../../chunks/resources11.js";
 const styles = css`:host{display:contents;--calcite-internal-tooltip-padding-block: var(--calcite-spacing-sm);--calcite-internal-tooltip-padding-inline: var(--calcite-spacing-md)}:host([top-layer-disabled]){--calcite-floating-ui-z-index: var(--calcite-z-index-tooltip)}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-tooltip-max-size-x, 20rem);max-block-size:20rem}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}:host([scale=s]){--calcite-internal-tooltip-padding-block: var(--calcite-spacing-xxs);--calcite-internal-tooltip-padding-inline: var(--calcite-spacing-sm)}:host([scale=s]) .container{font-size:var(--calcite-font-size-relative-xs);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .container{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}.container{position:relative;overflow:hidden;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-internal-tooltip-padding-block);padding-inline:var(--calcite-internal-tooltip-padding-inline);border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));color:var(--calcite-tooltip-text-color, var(--calcite-color-text-1));text-align:start}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;box-shadow:var(--calcite-shadow-md);background-color:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-tooltip-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-tooltip-border-color, var(--calcite-color-border-3))}:host([hidden]){display:none}[hidden]{display:none}`;
 const manager = referenceElementManager({ hover: true });
 class Tooltip extends LitElement {

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, SelectionMode } from "../interfaces.js";
+import type { Scale, SelectionMode } from "../types.js";
 import type { TreeItem } from "../calcite-tree-item/customElement.js";
 
 /** @slot  - A slot for `calcite-tree-item` elements. */
@@ -20,21 +20,15 @@ export abstract class Tree extends LitElement {
   /** Specifies the component's selected items. */
   get selectedItems(): TreeItem[];
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,
-   *
-   * `"children"` allows any number of selections from one parent from corresponding parent and child selections,
-   *
-   * `"multichildren"` allows any number of selections from corresponding parent and child selections,
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"none"` allows no selections,
-   *
-   * `"single"` allows one selection, and
-   *
-   * `"single-persist"` allows and requires one selection.
+   * Specifies the selection mode of the component.
+   *
+   * - `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections.
+   * - `"children"` allows any number of selections from one parent from corresponding parent and child selections.
+   * - `"multichildren"` allows any number of selections from corresponding parent and child selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"none"` allows no selections.
+   * - `"single"` allows one selection.
+   * - `"single-persist"` allows and requires one selection.
    *
    * @default "single"
    */

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

@@ -2,17 +2,15 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
-import { i as focusElement, n as nodeListToArray, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { f as focusElement, n as nodeListToArray, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
-function isTreeItem(element) {
-  return element?.tagName === "CALCITE-TREE-ITEM";
-}
+import { i as isTreeItem } from "../../chunks/resources33.js";
 function getTraversableItems(root) {
   return Array.from(root.querySelectorAll("calcite-tree-item:not([disabled])")).filter(
     (item) => {
       let currentItem = item;
       while (currentItem !== root && currentItem !== null) {
-        const parent = currentItem.parentElement ?? void 0;
+        const parent = currentItem.parentElement;
         const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;
         if (!traversable) {
           return false;
@@ -81,13 +79,14 @@ class Tree extends LitElement {
     }
     const target = event.target;
     const childItems = nodeListToArray(target.querySelectorAll("calcite-tree-item"));
+    const isNoneSelectionMode = this.selectionMode === "none";
+    const previouslySelectedItems = isNoneSelectionMode ? [] : this.getSelectedItems();
     event.preventDefault();
     event.stopPropagation();
     if (this.selectionMode === "ancestors") {
-      this.updateAncestorTree(event);
+      this.updateAncestorTree(event, previouslySelectedItems);
       return;
     }
-    const isNoneSelectionMode = this.selectionMode === "none";
     const shouldSelect = this.selectionMode !== null && (!target.hasChildren || target.hasChildren && (this.selectionMode === "children" || this.selectionMode === "multichildren"));
     const shouldDeselectAllChildren = this.selectionMode === "multichildren" && target.hasChildren;
     const shouldModifyToCurrentSelection = !isNoneSelectionMode && event.detail.modifyCurrentSelection && (this.selectionMode === "multiple" || this.selectionMode === "multichildren");
@@ -132,8 +131,10 @@ class Tree extends LitElement {
         }
       });
     }
-    this.selectedItems = isNoneSelectionMode ? [] : nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected);
-    this.calciteTreeSelect.emit();
+    this.selectedItems = isNoneSelectionMode ? [] : this.getSelectedItems();
+    if (this.selectionChanged(previouslySelectedItems)) {
+      this.calciteTreeSelect.emit();
+    }
     event.stopPropagation();
   }
   keyDownHandler(event) {
@@ -208,7 +209,7 @@ class Tree extends LitElement {
       return;
     }
   }
-  updateAncestorTree(event) {
+  updateAncestorTree(event, previouslySelectedItems) {
     const item = event.target;
     const updateItem = event.detail.updateItem;
     if (item.disabled || item.indeterminate && !updateItem) {
@@ -263,16 +264,22 @@ class Tree extends LitElement {
       ancestor.indeterminate = indeterminate;
       ancestor.selected = !indeterminate;
     });
-    this.selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected);
-    if (updateItem) {
+    this.selectedItems = this.getSelectedItems();
+    if (updateItem && this.selectionChanged(previouslySelectedItems)) {
       this.calciteTreeSelect.emit();
     }
   }
+  getSelectedItems() {
+    return nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((item) => item.selected);
+  }
+  selectionChanged(previouslySelectedItems) {
+    return previouslySelectedItems.length !== this.selectedItems.length || this.selectedItems.some((item) => !previouslySelectedItems.includes(item));
+  }
   updateItems() {
     this.items.forEach((item) => item.parentExpanded = this.parentExpanded);
   }
   handleDefaultSlotChange(event) {
-    const items = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-tree-item"));
+    const items = slotChangeGetAssignedElements(event).filter(isTreeItem);
     this.items = items;
     this.updateItems();
   }

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-tree-text-color] - Specifies the component's text color.

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

@@ -5,36 +5,13 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { C as filterDirectChildren, a as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { C as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
+import { i as isTag } from "../../chunks/resources3.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  actionsEnd: "actions-end",
-  checkbox: "checkbox",
-  checkboxContainer: "checkbox-container",
-  checkboxLabel: "checkbox-label",
-  chevron: "chevron",
-  childrenContainer: "children-container",
-  iconStart: "icon-start",
-  itemExpanded: "item--expanded",
-  nodeAndActionsContainer: "node-actions-container",
-  nodeContainer: "node-container",
-  selectionIcon: "selection-icon"
-};
-const SLOTS = {
-  actionsEnd: "actions-end",
-  children: "children"
-};
-const ICONS = {
-  blank: "blank",
-  bulletPoint: "bullet-point",
-  checkmark: "check",
-  checkSquareF: "check-square-f",
-  chevronRight: "chevron-right",
-  minusSquareF: "minus-square-f",
-  square: "square"
-};
+import { I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources33.js";
+const isTree = isTag("calcite-tree");
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-tree-item-spacing-unit: .25rem;--calcite-internal-tree-item-padding-block: .25rem;--calcite-internal-tree-item-children-container-padding: 1.25rem;--calcite-internal-tree-item-line-left-position: .75rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host(:is([scale=s],[scale=m])){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-tree-item-spacing-unit: .5rem;--calcite-internal-tree-item-padding-block: .5rem;--calcite-internal-tree-item-children-container-padding: 1.5rem;--calcite-internal-tree-item-line-left-position: 1rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xs);--calcite-internal-tree-item-spacing-unit: .75rem;--calcite-internal-tree-item-padding-block: .625rem;--calcite-internal-tree-item-children-container-padding: 2.25rem;--calcite-internal-tree-item-line-left-position: 1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host{display:block;max-inline-size:100%;cursor:pointer}:host .children-container ::slotted(*){padding-inline-start:var(--calcite-internal-tree-item-children-container-padding);overflow:hidden}.node-actions-container{display:flex}.node-actions-container .node-container,.node-actions-container .checkbox-container{gap:var(--calcite-internal-tree-item-spacing-unit)}.node-actions-container .node-container{padding-inline:var(--calcite-internal-tree-item-spacing-unit);padding-block:var(--calcite-internal-tree-item-padding-block)}.node-actions-container{color:var(--calcite-tree-text-color, var(--calcite-color-text-1))}.icon-start{--calcite-icon-color: var(--calcite-color-text-3)}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;block-size:100%;inset-inline-start:var(--calcite-internal-tree-item-line-left-position);content:"";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none!important}::slotted(*):hover{text-decoration:none!important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .checkbox{outline:2px solid transparent;outline-offset:2px}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch;gap:var(--calcite-internal-tree-item-action-spacing)}.checkbox-container{display:flex;align-items:center}.checkbox{line-height:0;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-border-input))}.checkbox-label{pointer-events:none;display:flex;align-items:center}.children-container{display:grid;grid-template-rows:0fr;max-block-size:max-content;opacity:1;position:relative;transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out,grid-template-rows var(--calcite-internal-animation-timing-medium) ease-in-out}.item--expanded>.children-container{grid-template-rows:1fr;opacity:1;max-block-size:max-content}@starting-style{.item--expanded>.children-container{opacity:0;grid-template-rows:0fr}}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .selection-icon{opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-color-border-1)}.node-container:hover .selection-icon,:host([selected]) .node-container:hover .selection-icon,:host(:focus:not([disabled])) .node-container .selection-icon{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{--calcite-internal-tree-item-text-color: var(--calcite-tree-text-color-selected, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-medium);color:var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .icon-start,:host([selected]) .node-container:hover .icon-start{--calcite-icon-color: var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .selection-icon,:host([selected]) .node-container:hover .selection-icon{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .selection-icon{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;flex:0 0 auto;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .selection-icon{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([selected]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children][indeterminate]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
 class TreeItem extends LitElement {
   constructor() {
@@ -62,7 +39,7 @@ class TreeItem extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { hasEndActions: [16, {}, { state: true }], updateAfterInitialRender: [16, {}, { state: true }], depth: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], hasChildren: [39, {}, { reflect: true, readOnly: true, type: Boolean }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], indeterminate: [7, {}, { reflect: true, type: Boolean }], label: 1, lines: [7, {}, { reflect: true, type: Boolean }], parentExpanded: [5, {}, { type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }] };
+    this.properties = { hasEndActions: [16, {}, { state: true }], updateAfterInitialRender: [16, {}, { state: true }], depth: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], hasChildren: [39, {}, { reflect: true, readOnly: true, type: Boolean }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], indeterminate: [7, {}, { reflect: true, type: Boolean }], label: 1, lines: [7, {}, { reflect: true, type: Boolean }], parentExpanded: [5, {}, { type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -178,7 +155,7 @@ class TreeItem extends LitElement {
     childTree.parentExpanded = this.expanded;
   }
   handleChildrenSlotChange(event) {
-    const childTree = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-tree"))[0];
+    const childTree = slotChangeGetAssignedElements(event).find(isTree) ?? null;
     this.childTree = childTree;
     this.requestUpdate("hasChildren");
     this.updateChildTree();

package/dist/controllers/useTime.d.ts

@@ -9,11 +9,11 @@ export const useTime: (component: LitElement & TimeComponent) => TimeController;
 
 export interface TimeComponent extends LitElement {
   /**
-   * Specifies the component's hour format, where:
+   * Specifies the component's hour format.
    *
-   * `"user"` displays the user's locale format,
-   * `"12"` displays a 12-hour format, and
-   * `"24"` displays a 24-hour format.
+   * - `"user"` displays the user's locale format.
+   * - `"12"` displays a 12-hour format.
+   * - `"24"` displays a 24-hour format.
    */
   hourFormat: HourFormat;
   /**