@esri/solutions-components 0.7.0 → 0.7.2

package/dist/components/list-item.js

@@ -3,88 +3,478 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { j as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from './dom.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { a as getDepth, C as CSS, I as ICONS, S as SLOTS, g as getListItemChildren, u as updateListItemChildren } from './utils3.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
+import { d as defineCustomElement$4 } from './action.js';
+import { d as defineCustomElement$3 } from './handle.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './loader.js';
 
-const listItemCss = ":host{display:block}";
+const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container:active{background-color:var(--calcite-ui-foreground-1)}.container--border-selected{border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-bottom{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}:host([hidden]){display:none}[hidden]{display:none}";
 
-const ListItem$1 = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLElement {
+const focusMap = new Map();
+const listSelector = "calcite-list";
+const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.calciteListItemSelect = createEvent(this, "calciteListItemSelect", 6);
+    this.calciteListItemClose = createEvent(this, "calciteListItemClose", 6);
+    this.calciteInternalListItemSelect = createEvent(this, "calciteInternalListItemSelect", 6);
+    this.calciteInternalListItemActive = createEvent(this, "calciteInternalListItemActive", 6);
+    this.calciteInternalFocusPreviousItem = createEvent(this, "calciteInternalFocusPreviousItem", 6);
+    this.calciteInternalListItemChange = createEvent(this, "calciteInternalListItemChange", 6);
+    this.closeClickHandler = () => {
+      this.closed = true;
+      this.calciteListItemClose.emit();
+    };
+    this.handleContentSlotChange = (event) => {
+      this.hasCustomContent = slotChangeHasAssignedElement(event);
+    };
+    this.handleActionsStartSlotChange = (event) => {
+      this.hasActionsStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleActionsEndSlotChange = (event) => {
+      this.hasActionsEnd = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentStartSlotChange = (event) => {
+      this.hasContentStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentEndSlotChange = (event) => {
+      this.hasContentEnd = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentBottomSlotChange = (event) => {
+      this.hasContentBottom = slotChangeHasAssignedElement(event);
+    };
+    this.handleDefaultSlotChange = (event) => {
+      this.handleOpenableChange(event.target);
+    };
+    this.toggleOpen = () => {
+      this.open = !this.open;
+    };
+    this.itemClicked = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      this.toggleSelected();
+      this.calciteInternalListItemActive.emit();
+    };
+    this.toggleSelected = () => {
+      const { selectionMode, selected } = this;
+      if (this.disabled) {
+        return;
+      }
+      if (selectionMode === "multiple" || selectionMode === "single") {
+        this.selected = !selected;
+      }
+      else if (selectionMode === "single-persist") {
+        this.selected = true;
+      }
+      this.calciteListItemSelect.emit();
+    };
+    this.handleItemKeyDown = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      const { key } = event;
+      const composedPath = event.composedPath();
+      const { containerEl, contentEl, actionsStartEl, actionsEndEl, open, openable } = this;
+      const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
+      const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
+      if (key === "Enter" &&
+        !composedPath.includes(actionsStartEl) &&
+        !composedPath.includes(actionsEndEl)) {
+        event.preventDefault();
+        this.toggleSelected();
+      }
+      else if (key === "ArrowRight") {
+        event.preventDefault();
+        const nextIndex = currentIndex + 1;
+        if (currentIndex === -1) {
+          if (!open && openable) {
+            this.open = true;
+            this.focusCell(null);
+          }
+          else if (cells[0]) {
+            this.focusCell(cells[0]);
+          }
+        }
+        else if (cells[currentIndex] && cells[nextIndex]) {
+          this.focusCell(cells[nextIndex]);
+        }
+      }
+      else if (key === "ArrowLeft") {
+        event.preventDefault();
+        const prevIndex = currentIndex - 1;
+        if (currentIndex === -1) {
+          this.focusCell(null);
+          if (open && openable) {
+            this.open = false;
+          }
+          else {
+            this.calciteInternalFocusPreviousItem.emit();
+          }
+        }
+        else if (currentIndex === 0) {
+          this.focusCell(null);
+          containerEl.focus();
+        }
+        else if (cells[currentIndex] && cells[prevIndex]) {
+          this.focusCell(cells[prevIndex]);
+        }
+      }
+    };
+    this.focusCellNull = () => {
+      this.focusCell(null);
+    };
+    this.focusCell = (focusEl, saveFocusIndex = true) => {
+      const { contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
+      if (saveFocusIndex) {
+        focusMap.set(parentListEl, null);
+      }
+      [actionsStartEl, contentEl, actionsEndEl].filter(Boolean).forEach((tableCell, cellIndex) => {
+        const tabIndexAttr = "tabindex";
+        if (tableCell === focusEl) {
+          tableCell.setAttribute(tabIndexAttr, "0");
+          saveFocusIndex && focusMap.set(parentListEl, cellIndex);
+        }
+        else {
+          tableCell.removeAttribute(tabIndexAttr);
+        }
+      });
+      focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+    };
+    this.active = false;
+    this.closable = false;
+    this.closed = false;
+    this.description = undefined;
+    this.disabled = false;
+    this.dragHandle = false;
+    this.label = undefined;
+    this.metadata = undefined;
+    this.open = false;
+    this.setSize = null;
+    this.setPosition = null;
+    this.selected = false;
+    this.value = undefined;
+    this.selectionMode = null;
+    this.selectionAppearance = null;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.effectiveLocale = "";
+    this.defaultMessages = undefined;
+    this.level = null;
+    this.visualLevel = null;
+    this.parentListEl = undefined;
+    this.openable = false;
+    this.hasActionsStart = false;
+    this.hasActionsEnd = false;
+    this.hasCustomContent = false;
+    this.hasContentStart = false;
+    this.hasContentEnd = false;
+    this.hasContentBottom = false;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Properties (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  State (internal)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Properties (protected)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
+  activeHandler(active) {
+    if (!active) {
+      this.focusCell(null, false);
+    }
+  }
+  handleClosedChange() {
+    this.emitCalciteInternalListItemChange();
+  }
+  handleDisabledChange() {
+    this.emitCalciteInternalListItemChange();
+  }
+  handleSelectedChange() {
+    this.calciteInternalListItemSelect.emit();
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  handleCalciteInternalListDefaultSlotChanges(event) {
+    event.stopPropagation();
+    this.handleOpenableChange(this.defaultSlotEl);
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  // --------------------------------------------------------------------------
   //
-  //  Methods (public)
+  //  Lifecycle
   //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+    connectLocalized(this);
+    connectMessages(this);
+    const { el } = this;
+    this.parentListEl = el.closest(listSelector);
+    this.level = getDepth(el) + 1;
+    this.visualLevel = getDepth(el, true);
+    this.setSelectionDefaults();
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  // --------------------------------------------------------------------------
   //
-  //  Events (public)
+  //  Public Methods
   //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    await componentFocusable(this);
+    const { containerEl, contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
+    const focusIndex = focusMap.get(parentListEl);
+    if (typeof focusIndex === "number") {
+      const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
+      if (cells[focusIndex]) {
+        this.focusCell(cells[focusIndex]);
+      }
+      else {
+        containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
+      }
+      return;
+    }
+    containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
+  }
+  // --------------------------------------------------------------------------
   //
-  //  Functions (lifecycle)
+  //  Render Methods
   //
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
+  renderSelected() {
+    const { selected, selectionMode, selectionAppearance } = this;
+    if (selectionMode === "none" || selectionAppearance === "border") {
+      return null;
+    }
+    return (h("td", { class: CSS.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
+        ? selectionMode === "multiple"
+          ? ICONS.selectedMultiple
+          : ICONS.selectedSingle
+        : ICONS.unselected, scale: "s" })));
+  }
+  renderDragHandle() {
+    return this.dragHandle ? (h("td", { class: CSS.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+  }
+  renderOpen() {
+    const { el, open, openable, parentListEl } = this;
+    const dir = getElementDir(el);
+    const icon = openable
+      ? open
+        ? ICONS.open
+        : dir === "rtl"
+          ? ICONS.closedRTL
+          : ICONS.closedLTR
+      : ICONS.blank;
+    const clickHandler = openable ? this.toggleOpen : this.itemClicked;
+    return openable || (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS.openContainer, key: "open-container", onClick: clickHandler }, h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
+  }
+  renderActionsStart() {
+    const { label, hasActionsStart } = this;
+    return (h("td", { "aria-label": label, class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
+      // 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.actionsStartEl = el) }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+  }
+  renderActionsEnd() {
+    const { label, hasActionsEnd, closable, messages } = this;
+    return (h("td", { "aria-label": label, class: CSS.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
+      // 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.actionsEndEl = el) }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
+  }
+  renderContentStart() {
+    const { hasContentStart } = this;
+    return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+  }
+  renderCustomContent() {
+    const { hasCustomContent } = this;
+    return (h("div", { class: CSS.customContent, hidden: !hasCustomContent }, h("slot", { name: SLOTS.content, onSlotchange: this.handleContentSlotChange })));
+  }
+  renderContentEnd() {
+    const { hasContentEnd } = this;
+    return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+  }
+  renderContentBottom() {
+    const { hasContentBottom, visualLevel } = this;
+    return (h("div", { class: CSS.contentBottom, hidden: !hasContentBottom, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("slot", { name: SLOTS.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
+  }
+  renderDefaultContainer() {
+    return (h("div", { class: {
+        [CSS.nestedContainer]: true,
+        [CSS.nestedContainerHidden]: this.openable && !this.open,
+      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) })));
+  }
+  renderContentProperties() {
+    const { label, description, hasCustomContent } = this;
+    return !hasCustomContent && (!!label || !!description) ? (h("div", { class: CSS.content, key: "content" }, label ? (h("div", { class: CSS.label, key: "label" }, label)) : null, description ? (h("div", { class: CSS.description, key: "description" }, description)) : null)) : null;
+  }
+  renderContentContainer() {
+    const { description, label, selectionMode, hasCustomContent } = this;
+    const hasCenterContent = hasCustomContent || !!label || !!description;
+    const content = [
+      this.renderContentStart(),
+      this.renderCustomContent(),
+      this.renderContentProperties(),
+      this.renderContentEnd(),
+    ];
+    return (h("td", { "aria-label": label, class: {
+        [CSS.contentContainer]: true,
+        [CSS.contentContainerSelectable]: selectionMode !== "none",
+        [CSS.contentContainerHasCenterContent]: hasCenterContent,
+      }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
+      // 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.contentEl = el) }, content));
+  }
   render() {
-    return (h(Host, null, h("slot", null)));
+    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, visualLevel, } = this;
+    const showBorder = selectionMode !== "none" && selectionAppearance === "border";
+    const borderSelected = showBorder && selected;
+    const borderUnselected = showBorder && !selected;
+    return (h(Host, null, h("tr", { "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        [CSS.container]: true,
+        [CSS.containerBorderSelected]: borderSelected,
+        [CSS.containerBorderUnselected]: borderUnselected,
+      }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }, tabIndex: active ? 0 : -1,
+      // 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.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom(), this.renderDefaultContainer()));
   }
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
   //
-  //  Functions (protected)
+  //  Private Methods
   //
-  //--------------------------------------------------------------------------
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   * @protected
-   */
-  async _getTranslations() {
-    // const messages = await getLocaleComponentStrings(this.el);
-    // this._translations = messages[0] as typeof BufferTools_T9n;
+  // --------------------------------------------------------------------------
+  emitCalciteInternalListItemChange() {
+    this.calciteInternalListItemChange.emit();
+  }
+  setSelectionDefaults() {
+    const { parentListEl, selectionMode, selectionAppearance } = this;
+    if (!parentListEl) {
+      return;
+    }
+    if (!selectionMode) {
+      this.selectionMode = parentListEl.selectionMode;
+    }
+    if (!selectionAppearance) {
+      this.selectionAppearance = parentListEl.selectionAppearance;
+    }
   }
+  handleOpenableChange(slotEl) {
+    if (!slotEl) {
+      return;
+    }
+    const { parentListEl } = this;
+    const listItemChildren = getListItemChildren(slotEl);
+    updateListItemChildren(listItemChildren);
+    const openable = !!listItemChildren.length;
+    if (openable && parentListEl && !parentListEl.openable) {
+      parentListEl.openable = true;
+    }
+    this.openable = openable;
+    if (!openable) {
+      this.open = false;
+    }
+  }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "closed": ["handleClosedChange"],
+    "disabled": ["handleDisabledChange"],
+    "selected": ["handleSelectedChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
   static get style() { return listItemCss; }
-}, [1, "list-item"]);
-function defineCustomElement$1() {
+}, [1, "calcite-list-item", {
+    "active": [4],
+    "closable": [516],
+    "closed": [1540],
+    "description": [1],
+    "disabled": [516],
+    "dragHandle": [4, "drag-handle"],
+    "label": [1],
+    "metadata": [16],
+    "open": [1540],
+    "setSize": [2, "set-size"],
+    "setPosition": [2, "set-position"],
+    "selected": [1540],
+    "value": [8],
+    "selectionMode": [1025, "selection-mode"],
+    "selectionAppearance": [1025, "selection-appearance"],
+    "messageOverrides": [1040],
+    "messages": [1040],
+    "effectiveLocale": [32],
+    "defaultMessages": [32],
+    "level": [32],
+    "visualLevel": [32],
+    "parentListEl": [32],
+    "openable": [32],
+    "hasActionsStart": [32],
+    "hasActionsEnd": [32],
+    "hasCustomContent": [32],
+    "hasContentStart": [32],
+    "hasContentEnd": [32],
+    "hasContentBottom": [32],
+    "setFocus": [64]
+  }, [[0, "calciteInternalListItemGroupDefaultSlotChange", "handleCalciteInternalListDefaultSlotChanges"], [0, "calciteInternalListDefaultSlotChange", "handleCalciteInternalListDefaultSlotChanges"]], {
+    "active": ["activeHandler"],
+    "closed": ["handleClosedChange"],
+    "disabled": ["handleDisabledChange"],
+    "selected": ["handleSelectedChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }]);
+function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["list-item"];
+  const components = ["calcite-list-item", "calcite-action", "calcite-handle", "calcite-icon", "calcite-loader"];
   components.forEach(tagName => { switch (tagName) {
-    case "list-item":
+    case "calcite-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ListItem);
+      }
+      break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-handle":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, ListItem$1);
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
       }
       break;
   } });
 }
-defineCustomElement$1();
-
-const ListItem = ListItem$1;
-const defineCustomElement = defineCustomElement$1;
+defineCustomElement();
 
-export { ListItem, defineCustomElement };
+export { ListItem as L, defineCustomElement as d };

package/dist/components/list.js

@@ -22,7 +22,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * 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.9.0
+ * v1.11.0
  */
 const CSS = {
   container: "container",
@@ -39,7 +39,7 @@ const SLOTS = {
   filterActionsEnd: "filter-actions-end",
 };
 
-const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item:last-child){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-foreground-1)}.sticky-pos th{padding:0px}.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}:host([hidden]){display:none}[hidden]{display:none}";
+const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:first-of-type){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item[data-filter]){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-foreground-1)}.sticky-pos th{padding:0px}.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}:host([hidden]){display:none}[hidden]{display:none}";
 
 const listItemSelector = "calcite-list-item";
 const listItemSelectorDirect = `:scope > calcite-list-item`;
@@ -91,6 +91,9 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
       const filteredItems = listItems.filter((item) => !filterText || values.includes(item.value)) || [];
       const visibleParents = new WeakSet();
       lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
+      if (filteredItems.length > 0) {
+        this.findAncestorOfFirstFilteredItem(filteredItems);
+      }
       this.filteredItems = filteredItems;
       if (emit) {
         this.calciteListFilter.emit();
@@ -206,6 +209,29 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         }
       }
     };
+    this.findAncestorOfFirstFilteredItem = (filteredItems) => {
+      var _a, _b;
+      (_a = this.ancestorOfFirstFilteredItem) === null || _a === void 0 ? void 0 : _a.removeAttribute("data-filter");
+      filteredItems.forEach((item) => {
+        item.removeAttribute("data-filter");
+      });
+      this.ancestorOfFirstFilteredItem = this.getTopLevelAncestorItemElement(filteredItems[0]);
+      filteredItems[0].setAttribute("data-filter", "0");
+      (_b = this.ancestorOfFirstFilteredItem) === null || _b === void 0 ? void 0 : _b.setAttribute("data-filter", "0");
+    };
+    this.getTopLevelAncestorItemElement = (el) => {
+      let closestParent = el.parentElement.closest("calcite-list-item");
+      while (closestParent) {
+        const closestListItemAncestor = closestParent.parentElement.closest("calcite-list-item");
+        if (closestListItemAncestor) {
+          closestParent = closestListItemAncestor;
+        }
+        else {
+          return closestParent;
+        }
+      }
+      return null;
+    };
     this.disabled = false;
     this.canPull = undefined;
     this.canPut = undefined;

package/dist/components/loadable.js

@@ -8,7 +8,7 @@ import { Build, forceUpdate } from '@stencil/core/internal/client';
 /*!
  * 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.9.0
+ * v1.11.0
  */
 const resolveMap = new WeakMap();
 const promiseMap = new WeakMap();

package/dist/components/locale2.js

@@ -10,7 +10,7 @@ import { c as createObserver } from './observers.js';
 /*!
  * 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.9.0
+ * v1.11.0
  */
 const unnecessaryDecimal = new RegExp(`\\${"."}(0+)?$`);
 const trailingZeros = new RegExp("0+$");
@@ -217,7 +217,7 @@ function addLocalizedTrailingDecimalZeros(localizedValue, value, formatter) {
 /*!
  * 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.9.0
+ * v1.11.0
  */
 const defaultLocale = "en";
 const t9nLocales = [

package/dist/components/location-flow-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LocationFlowItem extends Components.LocationFlowItem, HTMLElement {}
+export const LocationFlowItem: {
+  prototype: LocationFlowItem;
+  new (): LocationFlowItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;