@esri/calcite-components 1.7.0-next.2 → 1.7.0-next.21

package/dist/components/calcite-table.js

@@ -0,0 +1,359 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.7.0-next.21
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
+import { a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale.js';
+import { g as getUserAgentString } from './interactive.js';
+import { d as defineCustomElement$6 } from './button.js';
+import { d as defineCustomElement$5 } from './chip.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './loader.js';
+import { d as defineCustomElement$2 } from './pagination.js';
+
+const CSS = {
+  bordered: "bordered",
+  zebra: "zebra",
+  selectionArea: "selection-area",
+  paginationArea: "pagination-area",
+  container: "container",
+  tableContainer: "table-container",
+  tableFixed: "table--fixed",
+  assistiveText: "assistive-text",
+  selectionActions: "selection-actions",
+};
+const SLOTS = {
+  selectionActions: "selection-actions",
+  tableHeader: "table-header",
+  tableFooter: "table-footer",
+};
+
+const tableCss = ":host([scale=s]){--calcite-internal-table-cell-padding:0.25rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size--2);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-table-cell-padding:0.5rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size--1);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-table-cell-padding:1rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size-0);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--1)}:host{display:table}.container{max-inline-size:100vw;inline-size:100%}.table-container{overflow-x:scroll;white-space:nowrap}.table-container:not(.bordered){border-block-end:1px solid var(--calcite-ui-border-3)}.assistive-text{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}table{inline-size:100%;border-collapse:collapse;overflow-x:scroll;border-block-start:1px solid var(--calcite-ui-border-3);border-inline-start:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3)}tbody{border-block-end:1px solid var(--calcite-ui-border-3)}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color:var(--calcite-ui-border-3)}.zebra ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background:var(--calcite-ui-foreground-2)}.selection-actions{display:flex;flex-direction:row;margin-inline-start:auto}.selection-area{display:flex;flex-direction:row;align-items:center;padding-block:var(--calcite-internal-table-cell-padding)}.selection-area calcite-chip:last-of-type{margin-inline-end:0.5rem}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:0.5rem}.selection-area calcite-button{margin-inline-end:1rem}.pagination-area{display:flex;inline-size:100%;flex-direction:row;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteTableSelect = createEvent(this, "calciteTableSelect", 6);
+    this.calciteTablePageChange = createEvent(this, "calciteTablePageChange", 6);
+    this.calciteInternalTableRowFocusChange = createEvent(this, "calciteInternalTableRowFocusChange", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.getSlottedRows = (el) => {
+      return el
+        ?.assignedElements({ flatten: true })
+        ?.filter((el) => el?.matches("calcite-table-row"));
+    };
+    this.updateRows = () => {
+      const headRows = this.getSlottedRows(this.tableHeadSlotEl) || [];
+      const bodyRows = this.getSlottedRows(this.tableBodySlotEl) || [];
+      const footRows = this.getSlottedRows(this.tableFootSlotEl) || [];
+      const allRows = [...headRows, ...bodyRows, ...footRows];
+      headRows?.forEach((row) => {
+        const position = headRows?.indexOf(row);
+        row.rowType = "head";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      bodyRows?.forEach((row) => {
+        const position = bodyRows?.indexOf(row);
+        row.rowType = "body";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      footRows?.forEach((row) => {
+        const position = footRows?.indexOf(row);
+        row.rowType = "foot";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      allRows?.forEach((row) => {
+        row.selectionMode = this.selectionMode;
+        row.bodyRowCount = bodyRows?.length;
+        row.positionAll = allRows?.indexOf(row);
+        row.numbered = this.numbered;
+        row.scale = this.scale;
+        row.readCellContentsToAT = this.readCellContentsToAT;
+      });
+      const colCount = headRows[0]?.cellCount || headRows[0]?.querySelectorAll("calcite-table-header")?.length;
+      this.colCount = colCount;
+      this.headRows = headRows;
+      this.bodyRows = bodyRows;
+      this.footRows = footRows;
+      this.allRows = allRows;
+      this.updateSelectedItems();
+      this.paginateRows();
+    };
+    this.handlePaginationChange = () => {
+      const requestedItem = this.paginationEl?.startItem;
+      this.pageStartRow = requestedItem || 1;
+      this.calciteTablePageChange.emit();
+      this.updateRows();
+    };
+    this.paginateRows = () => {
+      this.bodyRows?.forEach((row) => {
+        const rowPos = row.positionSection + 1;
+        const inView = rowPos >= this.pageStartRow && rowPos < this.pageStartRow + this.pageSize;
+        row.hidden = this.pageSize > 0 && !inView && !this.footRows.includes(row);
+      });
+    };
+    this.updateSelectedItems = (emit) => {
+      const selectedItems = this.bodyRows?.filter((el) => el.selected);
+      this.selectedItems = selectedItems;
+      this.selectedCount = selectedItems?.length;
+      this.allRows?.forEach((row) => {
+        row.selectedRowCount = this.selectedCount;
+        row.selectedRowCountLocalized = this.localizeNumber(this.selectedCount);
+      });
+      if (emit) {
+        this.calciteTableSelect.emit();
+      }
+    };
+    this.handleDeselectAllRows = () => {
+      this.bodyRows?.forEach((row) => {
+        row.selected = false;
+      });
+      this.updateSelectedItems(true);
+    };
+    this.setSelectedItems = (elToMatch) => {
+      this.bodyRows?.forEach((el) => {
+        if (elToMatch?.rowType === "head") {
+          el.selected = this.selectedCount !== this.bodyRows?.length;
+        }
+        else {
+          el.selected =
+            elToMatch === el ? !el.selected : this.selectionMode === "multiple" ? el.selected : false;
+        }
+      });
+      this.updateSelectedItems(true);
+    };
+    this.localizeNumber = (value) => {
+      numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator,
+      };
+      return numberStringFormatter.localize(value.toString());
+    };
+    this.bordered = false;
+    this.caption = undefined;
+    this.groupSeparator = false;
+    this.layout = "auto";
+    this.numbered = false;
+    this.numberingSystem = undefined;
+    this.pageSize = 0;
+    this.scale = "m";
+    this.selectionMode = "none";
+    this.zebra = false;
+    this.selectedItems = [];
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.colCount = 0;
+    this.pageStartRow = 1;
+    this.selectedCount = 0;
+    this.readCellContentsToAT = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  handleNumberedChange() {
+    this.updateRows();
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+    this.readCellContentsToAT = /safari/i.test(getUserAgentString());
+    this.updateRows();
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteChipSelectListener(event) {
+    if (event.composedPath().includes(this.el)) {
+      this.setSelectedItems(event.target);
+    }
+  }
+  calciteInternalTableRowFocusEvent(event) {
+    const cellPosition = event["detail"].cellPosition;
+    const rowPos = event["detail"].rowPosition;
+    const destination = event["detail"].destination;
+    const lastCell = event["detail"].lastCell;
+    const visibleBody = this.bodyRows?.filter((row) => !row.hidden);
+    const visibleAll = this.allRows?.filter((row) => !row.hidden);
+    const lastHeadRow = this.headRows[this.headRows.length - 1]?.positionAll;
+    const firstBodyRow = visibleBody[0]?.positionAll;
+    const lastBodyRow = visibleBody[visibleBody.length - 1]?.positionAll;
+    const firstFootRow = this.footRows[0]?.positionAll;
+    const lastTableRow = visibleAll[visibleAll.length - 1]?.positionAll;
+    const leavingHeader = destination === "next" && rowPos === lastHeadRow;
+    const leavingFooter = destination === "previous" && rowPos === firstFootRow;
+    const enteringHeader = destination === "previous" && rowPos === firstBodyRow;
+    const enteringFooter = destination === "next" && rowPos === lastBodyRow;
+    let rowPosition;
+    switch (destination) {
+      case "first":
+        rowPosition = 0;
+        break;
+      case "last":
+        rowPosition = lastTableRow;
+        break;
+      case "next":
+        rowPosition = leavingHeader ? firstBodyRow : enteringFooter ? firstFootRow : rowPos + 1;
+        break;
+      case "previous":
+        rowPosition = leavingFooter ? lastBodyRow : enteringHeader ? lastHeadRow : rowPos - 1;
+        break;
+    }
+    const destinationCount = this.allRows?.find((row) => row.positionAll === rowPosition)?.cellCount;
+    const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition;
+    if (rowPosition !== undefined) {
+      this.calciteInternalTableRowFocusChange.emit({
+        cellPosition: adjustedPos,
+        rowPosition,
+        destination,
+        lastCell,
+      });
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderSelectionArea() {
+    const outOfViewCount = this.selectedItems?.filter((el) => el.hidden)?.length;
+    const localizedOutOfView = this.localizeNumber(outOfViewCount?.toString());
+    const localizedSelectedCount = this.localizeNumber(this.selectedCount?.toString());
+    const selectionText = `${localizedSelectedCount} ${this.messages.selected}`;
+    const outOfView = `${localizedOutOfView} ${this.messages.hiddenSelected}`;
+    return (h("div", { class: CSS.selectionArea }, h("calcite-chip", { kind: this.selectedCount > 0 ? "brand" : "neutral", scale: this.scale, value: selectionText }, selectionText), outOfViewCount > 0 && (h("calcite-chip", { icon: "hide-empty", scale: this.scale, title: outOfView, value: outOfView }, localizedOutOfView)), this.selectedCount > 0 && (h("calcite-button", { "icon-start": "x", kind: "neutral", onClick: this.handleDeselectAllRows, round: true, scale: this.scale, title: `${this.messages.clear} ${selectionText} ${this.messages.row}` }, this.messages.clear)), h("div", { class: CSS.selectionActions }, h("slot", { name: SLOTS.selectionActions }))));
+  }
+  renderPaginationArea() {
+    return (h("div", { class: CSS.paginationArea }, h("calcite-pagination", { groupSeparator: this.groupSeparator, numberingSystem: this.numberingSystem, onCalcitePaginationChange: this.handlePaginationChange, pageSize: this.pageSize, scale: this.scale, startItem: 1, totalItems: this.bodyRows?.length,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.paginationEl = el) })));
+  }
+  renderTHead() {
+    return (h("thead", null, h("slot", { name: SLOTS.tableHeader, onSlotchange: this.updateRows, ref: (el) => (this.tableHeadSlotEl = el) })));
+  }
+  renderTBody() {
+    return (h("tbody", null, h("slot", { onSlotchange: this.updateRows, ref: (el) => (this.tableBodySlotEl = el) })));
+  }
+  renderTFoot() {
+    return (h("tfoot", null, h("slot", { name: SLOTS.tableFooter, onSlotchange: this.updateRows, ref: (el) => (this.tableFootSlotEl = el) })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), h("div", { class: {
+        [CSS.bordered]: this.bordered,
+        [CSS.zebra]: this.zebra,
+        [CSS.tableContainer]: true,
+      } }, h("table", { "aria-colcount": this.colCount, "aria-multiselectable": this.selectionMode === "multiple", "aria-readonly": true, "aria-rowcount": this.allRows?.length, class: { [CSS.tableFixed]: this.layout === "fixed" }, role: "grid" }, h("caption", { class: CSS.assistiveText }, this.caption), this.renderTHead(), this.renderTBody(), this.renderTFoot())), this.pageSize > 0 && this.renderPaginationArea())));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "groupSeparator": ["handleNumberedChange"],
+    "numbered": ["handleNumberedChange"],
+    "numberingSystem": ["handleNumberedChange"],
+    "pageSize": ["handleNumberedChange"],
+    "scale": ["handleNumberedChange"],
+    "selectionMode": ["handleNumberedChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+  static get style() { return tableCss; }
+}, [1, "calcite-table", {
+    "bordered": [516],
+    "caption": [1],
+    "groupSeparator": [516, "group-separator"],
+    "layout": [513],
+    "numbered": [516],
+    "numberingSystem": [513, "numbering-system"],
+    "pageSize": [514, "page-size"],
+    "scale": [513],
+    "selectionMode": [513, "selection-mode"],
+    "zebra": [516],
+    "selectedItems": [1040],
+    "messages": [1040],
+    "messageOverrides": [1040],
+    "colCount": [32],
+    "pageStartRow": [32],
+    "selectedCount": [32],
+    "readCellContentsToAT": [32],
+    "defaultMessages": [32],
+    "effectiveLocale": [32]
+  }, [[0, "calciteTableRowSelect", "calciteChipSelectListener"], [0, "calciteInternalTableRowFocusRequest", "calciteInternalTableRowFocusEvent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-table", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-pagination"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Table);
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-pagination":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteTable = Table;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTable, defineCustomElement };

package/dist/components/calcite-tabs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { T as Tabs, d as defineCustomElement$1 } from './tabs.js';
 

package/dist/components/calcite-text-area.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';

package/dist/components/calcite-tile-select-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';

package/dist/components/calcite-tile-select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/calcite-tile.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { T as Tile, d as defineCustomElement$1 } from './tile.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
 

package/dist/components/calcite-tip-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/calcite-tip-manager.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { b as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-tip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-tooltip.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { q as queryElementRoots, j as isPrimaryPointerButton, o as getShadowRootNode, t as toAriaBoolean } from './dom.js';
+import { q as queryElementRoots, j as isPrimaryPointerButton, n as getShadowRootNode, t as toAriaBoolean } from './dom.js';
 import { c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
 import { g as guid } from './guid.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';

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

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { g as getSlotted, e as slotChangeHasAssignedElement, b as getElementDir, C as CSS_UTILITY, t as toAriaBoolean, u as filterDirectChildren, p as nodeListToArray } from './dom.js';
+import { g as getSlotted, e as slotChangeHasAssignedElement, b as getElementDir, C as CSS_UTILITY, t as toAriaBoolean, p as filterDirectChildren } from './dom.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { d as defineCustomElement$3 } from './checkbox.js';
@@ -47,6 +47,7 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.expanded = !this.expanded;
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
+    this.userChangedValue = false;
     this.updateParentIsExpanded = (el, expanded) => {
       const items = getSlotted(el, SLOTS.children, {
         all: true,
@@ -69,12 +70,24 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.scale = undefined;
     this.indeterminate = false;
     this.selectionMode = undefined;
-    this.updateAfterInitialRender = false;
     this.hasEndActions = false;
+    this.updateAfterInitialRender = false;
   }
   expandedHandler(newValue) {
     this.updateParentIsExpanded(this.el, newValue);
   }
+  handleSelectedChange(value) {
+    if (this.selectionMode === "ancestors" && !this.userChangedValue) {
+      if (value) {
+        this.indeterminate = false;
+      }
+      this.calciteInternalTreeItemSelect.emit({
+        modifyCurrentSelection: true,
+        forceToggle: false,
+        updateItem: false,
+      });
+    }
+  }
   getSelectionMode() {
     this.isSelectionMultiLike =
       this.selectionMode === "multiple" || this.selectionMode === "multichildren";
@@ -126,7 +139,8 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.updateAncestorTree();
   }
   componentDidRender() {
-    updateHostInteraction(this, () => this.parentExpanded || this.depth === 1);
+    updateHostInteraction(this, () => false // programmatically focusable
+    );
   }
   render() {
     const rtl = getElementDir(this.el) === "rtl";
@@ -185,10 +199,11 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.calciteInternalTreeItemSelect.emit({
       modifyCurrentSelection: this.selectionMode === "ancestors" || this.isSelectionMultiLike,
       forceToggle: false,
+      updateItem: true,
     });
+    this.userChangedValue = true;
   }
   keyDownHandler(event) {
-    let root;
     if (this.isActionEndEvent(event)) {
       return;
     }
@@ -197,9 +212,11 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (this.selectionMode === "none") {
           return;
         }
+        this.userChangedValue = true;
         this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false,
+          updateItem: true,
         });
         event.preventDefault();
         break;
@@ -208,7 +225,8 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           return;
         }
         // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
-        const link = nodeListToArray(this.el.children).find((el) => el.matches("a"));
+        const link = Array.from(this.el.children).find((el) => el.matches("a"));
+        this.userChangedValue = true;
         if (link) {
           link.click();
           this.selected = true;
@@ -217,25 +235,10 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this.calciteInternalTreeItemSelect.emit({
             modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false,
+            updateItem: true,
           });
         }
         event.preventDefault();
-        break;
-      case "Home":
-        root = this.el.closest("calcite-tree:not([child])");
-        const firstNode = root.querySelector("calcite-tree-item");
-        firstNode?.focus();
-        break;
-      case "End":
-        root = this.el.closest("calcite-tree:not([child])");
-        let currentNode = root.children[root.children.length - 1]; // last child
-        let currentTree = nodeListToArray(currentNode.children).find((el) => el.matches("calcite-tree"));
-        while (currentTree) {
-          currentNode = currentTree.children[root.children.length - 1];
-          currentTree = nodeListToArray(currentNode.children).find((el) => el.matches("calcite-tree"));
-        }
-        currentNode?.focus();
-        break;
     }
   }
   //--------------------------------------------------------------------------
@@ -269,6 +272,11 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       else if (selectedSiblings.length > 0) {
         parentItem.indeterminate = true;
       }
+      const childItems = Array.from(this.el.querySelectorAll("calcite-tree-item:not([disabled])"));
+      childItems.forEach((item) => {
+        item.selected = true;
+        item.indeterminate = false;
+      });
     }
     else if (this.indeterminate) {
       const parentItem = this.parentTreeItem;
@@ -278,6 +286,7 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get el() { return this; }
   static get watchers() { return {
     "expanded": ["expandedHandler"],
+    "selected": ["handleSelectedChange"],
     "selectionMode": ["getSelectionMode"]
   }; }
   static get style() { return treeItemCss; }
@@ -294,8 +303,8 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "scale": [1537],
     "indeterminate": [516],
     "selectionMode": [1537, "selection-mode"],
-    "updateAfterInitialRender": [32],
-    "hasEndActions": [32]
+    "hasEndActions": [32],
+    "updateAfterInitialRender": [32]
   }, [[0, "click", "onClick"], [0, "keydown", "keyDownHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {