@esri/solutions-components 0.6.6 → 0.6.7

package/dist/esm/calcite-filter_5.entry.js

@@ -3,20 +3,20 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement, H as Host } from './index-b5d9d795.js';
-import { f as filter } from './filter-1cac3edf.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-eaf4be29.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-6bca96ad.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-d8561d54.js';
-import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-76168237.js';
-import { d as debounce } from './debounce-229b1a22.js';
-import { t as toAriaBoolean, r as slotChangeHasAssignedElement, a as getElementDir } from './dom-843e3afd.js';
-import { c as createObserver } from './observers-9d66685a.js';
-import { u as updateListItemChildren, a as getListItemChildren, M as MAX_COLUMNS, g as getDepth, I as ICONS$2, C as CSS$4, S as SLOTS$2 } from './utils-18db6b1d.js';
-import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-db502e97.js';
-import './key-7a525416.js';
-import './guid-2bbb8cd1.js';
-import './resources-94c47e64.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement, H as Host } from './index-d298aca9.js';
+import { f as filter } from './filter-bf34614b.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-0733ee76.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-08376d90.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-73d0926a.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-745553e0.js';
+import { d as debounce } from './debounce-4c884e5c.js';
+import { t as toAriaBoolean, r as slotChangeHasAssignedElement, a as getElementDir } from './dom-8a9e4ee8.js';
+import { c as createObserver } from './observers-67bdf9e5.js';
+import { u as updateListItemChildren, a as getListItemChildren, M as MAX_COLUMNS, g as getDepth, I as ICONS$2, C as CSS$4, S as SLOTS$2 } from './utils-dcd05f69.js';
+import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-1dd8a4ae.js';
+import './key-97b504af.js';
+import './guid-1608fd71.js';
+import './resources-f97db74e.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -35,140 +35,140 @@ const DEBOUNCE_TIMEOUT = 250;
 
 const filterCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 
-const Filter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.filterDebounced = debounce((value, emit = false, onFilter) => this.updateFiltered(filter(this.items, value), emit, onFilter), DEBOUNCE_TIMEOUT);
-    this.inputHandler = (event) => {
-      const target = event.target;
-      this.value = target.value;
-      this.filterDebounced(target.value, true);
-    };
-    this.keyDownHandler = (event) => {
-      if (event.key === "Escape") {
-        this.clear();
-        event.preventDefault();
-      }
-      if (event.key === "Enter") {
-        event.preventDefault();
-      }
-    };
-    this.clear = () => {
-      this.value = "";
-      this.filterDebounced("", true);
-      this.setFocus();
-    };
-    this.items = [];
-    this.disabled = false;
-    this.filteredItems = [];
-    this.placeholder = undefined;
-    this.scale = "m";
-    this.value = "";
-    this.messages = undefined;
-    this.messageOverrides = undefined;
-    this.effectiveLocale = undefined;
-    this.defaultMessages = undefined;
-  }
-  watchItemsHandler() {
-    this.filterDebounced(this.value);
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  valueHandler(value) {
-    this.filterDebounced(value);
-  }
-  effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  async componentWillLoad() {
-    setUpLoadableComponent(this);
-    this.updateFiltered(filter(this.items, this.value));
-    await setUpMessages(this);
-  }
-  connectedCallback() {
-    connectInteractive(this);
-    connectLocalized(this);
-    connectMessages(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  disconnectedCallback() {
-    disconnectInteractive(this);
-    disconnectLocalized(this);
-    disconnectMessages(this);
-    this.filterDebounced.cancel();
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /**
-   * Performs a filter on the component.
-   *
-   * This method can be useful because filtering is delayed and asynchronous.
-   *
-   * @param {string} value - The filter text value.
-   * @returns {Promise<void>}
-   */
-  async filter(value = this.value) {
-    return new Promise((resolve) => {
-      this.value = value;
-      this.filterDebounced(value, false, resolve);
-    });
-  }
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    await componentFocusable(this);
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  updateFiltered(filtered, emit = false, callback) {
-    this.filteredItems = filtered;
-    if (emit) {
-      this.calciteFilterChange.emit();
-    }
-    callback === null || callback === void 0 ? void 0 : callback();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    const { disabled, scale } = this;
-    return (h(Fragment, null, h("div", { class: CSS$3.container }, h("label", null, h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS$1.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => {
-        this.textInput = el;
-      } })))));
-  }
-  static get delegatesFocus() { return true; }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "items": ["watchItemsHandler"],
-    "messageOverrides": ["onMessagesChange"],
-    "value": ["valueHandler"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
+const Filter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.filterDebounced = debounce((value, emit = false, onFilter) => this.updateFiltered(filter(this.items, value), emit, onFilter), DEBOUNCE_TIMEOUT);
+    this.inputHandler = (event) => {
+      const target = event.target;
+      this.value = target.value;
+      this.filterDebounced(target.value, true);
+    };
+    this.keyDownHandler = (event) => {
+      if (event.key === "Escape") {
+        this.clear();
+        event.preventDefault();
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+      }
+    };
+    this.clear = () => {
+      this.value = "";
+      this.filterDebounced("", true);
+      this.setFocus();
+    };
+    this.items = [];
+    this.disabled = false;
+    this.filteredItems = [];
+    this.placeholder = undefined;
+    this.scale = "m";
+    this.value = "";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
+  }
+  watchItemsHandler() {
+    this.filterDebounced(this.value);
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  valueHandler(value) {
+    this.filterDebounced(value);
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    this.updateFiltered(filter(this.items, this.value));
+    await setUpMessages(this);
+  }
+  connectedCallback() {
+    connectInteractive(this);
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+    this.filterDebounced.cancel();
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Performs a filter on the component.
+   *
+   * This method can be useful because filtering is delayed and asynchronous.
+   *
+   * @param {string} value - The filter text value.
+   * @returns {Promise<void>}
+   */
+  async filter(value = this.value) {
+    return new Promise((resolve) => {
+      this.value = value;
+      this.filterDebounced(value, false, resolve);
+    });
+  }
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    await componentFocusable(this);
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  updateFiltered(filtered, emit = false, callback) {
+    this.filteredItems = filtered;
+    if (emit) {
+      this.calciteFilterChange.emit();
+    }
+    callback === null || callback === void 0 ? void 0 : callback();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { disabled, scale } = this;
+    return (h(Fragment, null, h("div", { class: CSS$3.container }, h("label", null, h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS$1.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => {
+        this.textInput = el;
+      } })))));
+  }
+  static get delegatesFocus() { return true; }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "items": ["watchItemsHandler"],
+    "messageOverrides": ["onMessagesChange"],
+    "value": ["valueHandler"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
 Filter.style = filterCss;
 
 /*!
@@ -186,139 +186,139 @@ const ICONS = {
 
 const handleCss = ":host{display:flex}.handle{display:flex;cursor:move;align-items:center;justify-content:center;align-self:stretch;border-style:none;background-color:transparent;outline-color:transparent;color:var(--calcite-ui-border-input);padding-block:0.75rem;padding-inline:0.25rem;line-height:0}.handle:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.handle:focus{color:var(--calcite-ui-text-1);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          )}.handle--activated{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}.handle calcite-icon{color:inherit}:host([hidden]){display:none}[hidden]{display:none}";
 
-const Handle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 6);
-    this.calciteInternalHandleChange = createEvent(this, "calciteInternalHandleChange", 6);
-    this.handleKeyDown = (event) => {
-      switch (event.key) {
-        case " ":
-          this.activated = !this.activated;
-          event.preventDefault();
-          break;
-        case "ArrowUp":
-          if (!this.activated) {
-            return;
-          }
-          event.preventDefault();
-          this.calciteHandleNudge.emit({ direction: "up" });
-          break;
-        case "ArrowDown":
-          if (!this.activated) {
-            return;
-          }
-          event.preventDefault();
-          this.calciteHandleNudge.emit({ direction: "down" });
-          break;
-      }
-    };
-    this.handleBlur = () => {
-      this.activated = false;
-    };
-    this.activated = false;
-    this.dragHandle = undefined;
-    this.messages = undefined;
-    this.setPosition = undefined;
-    this.setSize = undefined;
-    this.label = undefined;
-    this.messageOverrides = undefined;
-    this.effectiveLocale = undefined;
-    this.defaultMessages = undefined;
-  }
-  handleAriaTextChange() {
-    const message = this.getAriaText("live");
-    if (message) {
-      this.calciteInternalHandleChange.emit({
-        message,
-      });
-    }
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    connectMessages(this);
-    connectLocalized(this);
-  }
-  async componentWillLoad() {
-    setUpLoadableComponent(this);
-    await setUpMessages(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  disconnectedCallback() {
-    disconnectMessages(this);
-    disconnectLocalized(this);
-  }
-  effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    await componentFocusable(this);
-    (_a = this.handleButton) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  getAriaText(type) {
-    const { setPosition, setSize, label, messages, activated } = this;
-    if (!messages || !label || typeof setSize !== "number" || typeof setPosition !== "number") {
-      return null;
-    }
-    const text = type === "label"
-      ? activated
-        ? messages.dragHandleChange
-        : messages.dragHandleIdle
-      : activated
-        ? messages.dragHandleActive
-        : messages.dragHandleCommit;
-    const replacePosition = text.replace("{position}", setPosition.toString());
-    const replaceLabel = replacePosition.replace("{itemLabel}", label);
-    return replaceLabel.replace("{total}", setSize.toString());
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    var _a;
-    return (
-    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-    h("span", { "aria-label": this.getAriaText("label"), "aria-pressed": toAriaBoolean(this.activated), class: { [CSS$2.handle]: true, [CSS$2.handleActivated]: this.activated }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0", title: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.dragHandle,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => {
-        this.handleButton = el;
-      } }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "messages": ["handleAriaTextChange"],
-    "label": ["handleAriaTextChange"],
-    "activated": ["handleAriaTextChange"],
-    "setPosition": ["handleAriaTextChange"],
-    "setSize": ["handleAriaTextChange"],
-    "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
+const Handle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 6);
+    this.calciteInternalHandleChange = createEvent(this, "calciteInternalHandleChange", 6);
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case " ":
+          this.activated = !this.activated;
+          event.preventDefault();
+          break;
+        case "ArrowUp":
+          if (!this.activated) {
+            return;
+          }
+          event.preventDefault();
+          this.calciteHandleNudge.emit({ direction: "up" });
+          break;
+        case "ArrowDown":
+          if (!this.activated) {
+            return;
+          }
+          event.preventDefault();
+          this.calciteHandleNudge.emit({ direction: "down" });
+          break;
+      }
+    };
+    this.handleBlur = () => {
+      this.activated = false;
+    };
+    this.activated = false;
+    this.dragHandle = undefined;
+    this.messages = undefined;
+    this.setPosition = undefined;
+    this.setSize = undefined;
+    this.label = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
+  }
+  handleAriaTextChange() {
+    const message = this.getAriaText("live");
+    if (message) {
+      this.calciteInternalHandleChange.emit({
+        message,
+      });
+    }
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectMessages(this);
+    connectLocalized(this);
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  disconnectedCallback() {
+    disconnectMessages(this);
+    disconnectLocalized(this);
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    await componentFocusable(this);
+    (_a = this.handleButton) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  getAriaText(type) {
+    const { setPosition, setSize, label, messages, activated } = this;
+    if (!messages || !label || typeof setSize !== "number" || typeof setPosition !== "number") {
+      return null;
+    }
+    const text = type === "label"
+      ? activated
+        ? messages.dragHandleChange
+        : messages.dragHandleIdle
+      : activated
+        ? messages.dragHandleActive
+        : messages.dragHandleCommit;
+    const replacePosition = text.replace("{position}", setPosition.toString());
+    const replaceLabel = replacePosition.replace("{itemLabel}", label);
+    return replaceLabel.replace("{total}", setSize.toString());
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    var _a;
+    return (
+    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+    h("span", { "aria-label": this.getAriaText("label"), "aria-pressed": toAriaBoolean(this.activated), class: { [CSS$2.handle]: true, [CSS$2.handleActivated]: this.activated }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0", title: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.dragHandle,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => {
+        this.handleButton = el;
+      } }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "messages": ["handleAriaTextChange"],
+    "label": ["handleAriaTextChange"],
+    "activated": ["handleAriaTextChange"],
+    "setPosition": ["handleAriaTextChange"],
+    "setSize": ["handleAriaTextChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
 Handle.style = handleCss;
 
 /*!
@@ -363,864 +363,864 @@ const SLOTS = {
 
 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{position:relative;z-index:var(--calcite-app-z-index);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 listItemSelector = "calcite-list-item";
-const listItemSelectorDirect = `:scope > calcite-list-item`;
-const parentSelector = "calcite-list-item-group, calcite-list-item";
-const List = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteListChange = createEvent(this, "calciteListChange", 6);
-    this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
-    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
-    this.calciteInternalListDefaultSlotChange = createEvent(this, "calciteInternalListDefaultSlotChange", 6);
-    this.dragSelector = "calcite-list-item";
-    this.enabledListItems = [];
-    this.handleSelector = "calcite-handle";
-    this.listItems = [];
-    this.mutationObserver = createObserver("mutation", () => this.updateListItems());
-    this.handleDefaultSlotChange = (event) => {
-      updateListItemChildren(getListItemChildren(event.target));
-      if (this.parentListEl) {
-        this.calciteInternalListDefaultSlotChange.emit();
-      }
-    };
-    this.handleFilterActionsStartSlotChange = (event) => {
-      this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
-    };
-    this.handleFilterActionsEndSlotChange = (event) => {
-      this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
-    };
-    this.setActiveListItem = () => {
-      const { enabledListItems } = this;
-      if (!enabledListItems.some((item) => item.active)) {
-        if (enabledListItems[0]) {
-          enabledListItems[0].active = true;
-        }
-      }
-    };
-    this.updateSelectedItems = (emit = false) => {
-      this.selectedItems = this.enabledListItems.filter((item) => item.selected);
-      if (emit) {
-        this.calciteListChange.emit();
-      }
-    };
-    this.updateFilteredItems = (emit = false) => {
-      const { listItems, filteredData, filterText } = this;
-      const values = filteredData.map((item) => item.value);
-      const lastDescendantItems = listItems === null || listItems === void 0 ? void 0 : listItems.filter((listItem) => listItems.every((li) => li === listItem || !listItem.contains(li)));
-      const filteredItems = listItems.filter((item) => !filterText || values.includes(item.value)) || [];
-      const visibleParents = new WeakSet();
-      lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
-      this.filteredItems = filteredItems;
-      if (emit) {
-        this.calciteListFilter.emit();
-      }
-    };
-    this.setFilterEl = (el) => {
-      this.filterEl = el;
-      this.performFilter();
-    };
-    this.handleFilterChange = (event) => {
-      event.stopPropagation();
-      const { value } = event.currentTarget;
-      this.filterText = value;
-      this.updateFilteredData(true);
-    };
-    this.getItemData = () => {
-      return this.listItems.map((item) => ({
-        label: item.label,
-        description: item.description,
-        metadata: item.metadata,
-        value: item.value,
-      }));
-    };
-    this.updateListItems = debounce((emit = false) => {
-      const { selectionAppearance, selectionMode, dragEnabled } = this;
-      if (!!this.parentListEl) {
-        const items = this.queryListItems(true);
-        items.forEach((item) => {
-          item.selectionAppearance = selectionAppearance;
-          item.selectionMode = selectionMode;
-          item.dragHandle = dragEnabled;
-        });
-        this.setUpSorting();
-        return;
-      }
-      const items = this.queryListItems();
-      items.forEach((item) => {
-        item.selectionAppearance = selectionAppearance;
-        item.selectionMode = selectionMode;
-        item.dragHandle = dragEnabled;
-      });
-      this.listItems = items;
-      if (this.filterEnabled) {
-        this.dataForFilter = this.getItemData();
-        if (this.filterEl) {
-          this.filterEl.items = this.dataForFilter;
-        }
-      }
-      this.updateFilteredItems(emit);
-      this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
-      this.setActiveListItem();
-      this.updateSelectedItems(emit);
-      this.setUpSorting();
-    }, debounceTimeout);
-    this.queryListItems = (direct = false) => {
-      return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
-    };
-    this.focusRow = (focusEl) => {
-      const { enabledListItems } = this;
-      if (!focusEl) {
-        return;
-      }
-      enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
-      focusEl.setFocus();
-    };
-    this.isNavigable = (listItem) => {
-      var _a;
-      const parentListItemEl = (_a = listItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
-      if (!parentListItemEl) {
-        return true;
-      }
-      return parentListItemEl.open && this.isNavigable(parentListItemEl);
-    };
-    this.handleListKeydown = (event) => {
-      var _a;
-      if (event.defaultPrevented || !!this.parentListEl) {
-        return;
-      }
-      const { key } = event;
-      const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
-      const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
-      if (key === "ArrowDown") {
-        event.preventDefault();
-        const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
-        if (filteredItems[nextIndex]) {
-          this.focusRow(filteredItems[nextIndex]);
-        }
-      }
-      else if (key === "ArrowUp") {
-        event.preventDefault();
-        if (currentIndex === 0 && this.filterEnabled) {
-          (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-          return;
-        }
-        const prevIndex = currentIndex - 1;
-        if (filteredItems[prevIndex]) {
-          this.focusRow(filteredItems[prevIndex]);
-        }
-      }
-      else if (key === "Home") {
-        event.preventDefault();
-        const homeItem = filteredItems[0];
-        if (homeItem) {
-          this.focusRow(homeItem);
-        }
-      }
-      else if (key === "End") {
-        event.preventDefault();
-        const endItem = filteredItems[filteredItems.length - 1];
-        if (endItem) {
-          this.focusRow(endItem);
-        }
-      }
-    };
-    this.disabled = false;
-    this.canPull = undefined;
-    this.canPut = undefined;
-    this.dragEnabled = false;
-    this.group = undefined;
-    this.filterEnabled = false;
-    this.filteredItems = [];
-    this.filteredData = [];
-    this.filterPlaceholder = undefined;
-    this.filterText = undefined;
-    this.label = undefined;
-    this.loading = false;
-    this.openable = false;
-    this.selectedItems = [];
-    this.selectionMode = "none";
-    this.selectionAppearance = "icon";
-    this.assistiveText = undefined;
-    this.dataForFilter = [];
-    this.hasFilterActionsEnd = false;
-    this.hasFilterActionsStart = false;
-  }
-  async handleFilterTextChange() {
-    this.performFilter();
-  }
-  handleListItemChange() {
-    this.updateListItems();
-  }
-  handleCalciteInternalFocusPreviousItem(event) {
-    if (this.parentListEl) {
-      return;
-    }
-    event.stopPropagation();
-    const { enabledListItems } = this;
-    const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
-    const prevIndex = currentIndex - 1;
-    if (enabledListItems[prevIndex]) {
-      this.focusRow(enabledListItems[prevIndex]);
-    }
-  }
-  handleCalciteInternalListItemActive(event) {
-    if (!!this.parentListEl) {
-      return;
-    }
-    event.stopPropagation();
-    const target = event.target;
-    const { listItems } = this;
-    listItems.forEach((listItem) => {
-      listItem.active = listItem === target;
-    });
-  }
-  handleCalciteListItemSelect() {
-    if (!!this.parentListEl) {
-      return;
-    }
-    this.updateSelectedItems(true);
-  }
-  handleCalciteInternalHandleChange(event) {
-    this.assistiveText = event.detail.message;
-    event.stopPropagation();
-  }
-  handleCalciteHandleNudge(event) {
-    if (!!this.parentListEl) {
-      return;
-    }
-    this.handleNudgeEvent(event);
-  }
-  handleCalciteInternalListItemSelect(event) {
-    if (!!this.parentListEl) {
-      return;
-    }
-    event.stopPropagation();
-    const target = event.target;
-    const { listItems, selectionMode } = this;
-    if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
-      listItems.forEach((listItem) => (listItem.selected = listItem === target));
-    }
-    this.updateSelectedItems();
-  }
-  handleCalciteInternalListItemChange(event) {
-    if (!!this.parentListEl) {
-      return;
-    }
-    event.stopPropagation();
-    this.updateListItems(true);
-  }
-  handleCalciteInternalListItemGroupDefaultSlotChange(event) {
-    event.stopPropagation();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    this.connectObserver();
-    this.updateListItems();
-    this.setUpSorting();
-    connectInteractive(this);
-    this.parentListEl = this.el.parentElement.closest("calcite-list");
-  }
-  disconnectedCallback() {
-    this.disconnectObserver();
-    disconnectSortableComponent(this);
-    disconnectInteractive(this);
-  }
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component's first focusable element. */
-  async setFocus() {
-    var _a, _b;
-    await componentFocusable(this);
-    if (this.filterEnabled) {
-      return (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-    }
-    return (_b = this.enabledListItems.find((listItem) => listItem.active)) === null || _b === void 0 ? void 0 : _b.setFocus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-    return (h("div", { class: CSS$1.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, loading ? h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS$1.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS$1.stack }, h("slot", { name: SLOTS$1.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setFilterEl }), h("slot", { name: SLOTS$1.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS.actionsEnd })))))) : null, h("tbody", { class: CSS$1.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  connectObserver() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-  }
-  disconnectObserver() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  setUpSorting() {
-    const { dragEnabled } = this;
-    if (!dragEnabled) {
-      return;
-    }
-    connectSortableComponent(this);
-  }
-  onDragStart() {
-    this.disconnectObserver();
-  }
-  onDragEnd() {
-    this.connectObserver();
-  }
-  onDragSort(event) {
-    this.updateListItems();
-    const { from, item, to } = event;
-    this.calciteListOrderChange.emit({
-      dragEl: item,
-      fromEl: from,
-      toEl: to,
-    });
-  }
-  filterElements({ el, filteredItems, visibleParents, }) {
-    const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
-    el.hidden = hidden;
-    const closestParent = el.parentElement.closest(parentSelector);
-    if (!closestParent) {
-      return;
-    }
-    if (!hidden) {
-      visibleParents.add(closestParent);
-    }
-    this.filterElements({
-      el: closestParent,
-      filteredItems,
-      visibleParents,
-    });
-  }
-  updateFilteredData(emit = false) {
-    const { filterEl } = this;
-    if (!filterEl) {
-      return;
-    }
-    if (filterEl.filteredItems) {
-      this.filteredData = filterEl.filteredItems;
-    }
-    this.updateListItems(emit);
-  }
-  async performFilter() {
-    const { filterEl, filterText } = this;
-    if (!filterEl) {
-      return;
-    }
-    filterEl.value = filterText;
-    await filterEl.filter(filterText);
-    this.updateFilteredData();
-  }
-  handleNudgeEvent(event) {
-    const { direction } = event.detail;
-    const composedPath = event.composedPath();
-    const handle = composedPath.find((el) => el.tagName === "CALCITE-HANDLE");
-    const sortItem = composedPath.find((el) => el.tagName === "CALCITE-LIST-ITEM");
-    const parentEl = sortItem === null || sortItem === void 0 ? void 0 : sortItem.parentElement;
-    if (!parentEl) {
-      return;
-    }
-    const { enabledListItems } = this;
-    const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
-    const lastIndex = sameParentItems.length - 1;
-    const startingIndex = sameParentItems.indexOf(sortItem);
-    let appendInstead = false;
-    let buddyIndex;
-    if (direction === "up") {
-      if (startingIndex === 0) {
-        appendInstead = true;
-      }
-      else {
-        buddyIndex = startingIndex - 1;
-      }
-    }
-    else {
-      if (startingIndex === lastIndex) {
-        buddyIndex = 0;
-      }
-      else if (startingIndex === lastIndex - 1) {
-        appendInstead = true;
-      }
-      else {
-        buddyIndex = startingIndex + 2;
-      }
-    }
-    this.disconnectObserver();
-    if (appendInstead) {
-      parentEl.appendChild(sortItem);
-    }
-    else {
-      parentEl.insertBefore(sortItem, sameParentItems[buddyIndex]);
-    }
-    this.updateListItems();
-    this.connectObserver();
-    this.calciteListOrderChange.emit({
-      dragEl: sortItem,
-      fromEl: null,
-      toEl: null,
-    });
-    handle.setFocus().then(() => {
-      handle.activated = true;
-    });
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "filterText": ["handleFilterTextChange"],
-    "filterEnabled": ["handleListItemChange"],
-    "group": ["handleListItemChange"],
-    "dragEnabled": ["handleListItemChange"],
-    "selectionMode": ["handleListItemChange"],
-    "selectionAppearance": ["handleListItemChange"]
-  }; }
-};
+const listItemSelector = "calcite-list-item";
+const listItemSelectorDirect = `:scope > calcite-list-item`;
+const parentSelector = "calcite-list-item-group, calcite-list-item";
+const List = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListChange = createEvent(this, "calciteListChange", 6);
+    this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
+    this.calciteInternalListDefaultSlotChange = createEvent(this, "calciteInternalListDefaultSlotChange", 6);
+    this.dragSelector = "calcite-list-item";
+    this.enabledListItems = [];
+    this.handleSelector = "calcite-handle";
+    this.listItems = [];
+    this.mutationObserver = createObserver("mutation", () => this.updateListItems());
+    this.handleDefaultSlotChange = (event) => {
+      updateListItemChildren(getListItemChildren(event.target));
+      if (this.parentListEl) {
+        this.calciteInternalListDefaultSlotChange.emit();
+      }
+    };
+    this.handleFilterActionsStartSlotChange = (event) => {
+      this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleFilterActionsEndSlotChange = (event) => {
+      this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
+    };
+    this.setActiveListItem = () => {
+      const { enabledListItems } = this;
+      if (!enabledListItems.some((item) => item.active)) {
+        if (enabledListItems[0]) {
+          enabledListItems[0].active = true;
+        }
+      }
+    };
+    this.updateSelectedItems = (emit = false) => {
+      this.selectedItems = this.enabledListItems.filter((item) => item.selected);
+      if (emit) {
+        this.calciteListChange.emit();
+      }
+    };
+    this.updateFilteredItems = (emit = false) => {
+      const { listItems, filteredData, filterText } = this;
+      const values = filteredData.map((item) => item.value);
+      const lastDescendantItems = listItems === null || listItems === void 0 ? void 0 : listItems.filter((listItem) => listItems.every((li) => li === listItem || !listItem.contains(li)));
+      const filteredItems = listItems.filter((item) => !filterText || values.includes(item.value)) || [];
+      const visibleParents = new WeakSet();
+      lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
+      this.filteredItems = filteredItems;
+      if (emit) {
+        this.calciteListFilter.emit();
+      }
+    };
+    this.setFilterEl = (el) => {
+      this.filterEl = el;
+      this.performFilter();
+    };
+    this.handleFilterChange = (event) => {
+      event.stopPropagation();
+      const { value } = event.currentTarget;
+      this.filterText = value;
+      this.updateFilteredData(true);
+    };
+    this.getItemData = () => {
+      return this.listItems.map((item) => ({
+        label: item.label,
+        description: item.description,
+        metadata: item.metadata,
+        value: item.value,
+      }));
+    };
+    this.updateListItems = debounce((emit = false) => {
+      const { selectionAppearance, selectionMode, dragEnabled } = this;
+      if (!!this.parentListEl) {
+        const items = this.queryListItems(true);
+        items.forEach((item) => {
+          item.selectionAppearance = selectionAppearance;
+          item.selectionMode = selectionMode;
+          item.dragHandle = dragEnabled;
+        });
+        this.setUpSorting();
+        return;
+      }
+      const items = this.queryListItems();
+      items.forEach((item) => {
+        item.selectionAppearance = selectionAppearance;
+        item.selectionMode = selectionMode;
+        item.dragHandle = dragEnabled;
+      });
+      this.listItems = items;
+      if (this.filterEnabled) {
+        this.dataForFilter = this.getItemData();
+        if (this.filterEl) {
+          this.filterEl.items = this.dataForFilter;
+        }
+      }
+      this.updateFilteredItems(emit);
+      this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
+      this.setActiveListItem();
+      this.updateSelectedItems(emit);
+      this.setUpSorting();
+    }, debounceTimeout);
+    this.queryListItems = (direct = false) => {
+      return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
+    };
+    this.focusRow = (focusEl) => {
+      const { enabledListItems } = this;
+      if (!focusEl) {
+        return;
+      }
+      enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
+      focusEl.setFocus();
+    };
+    this.isNavigable = (listItem) => {
+      var _a;
+      const parentListItemEl = (_a = listItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
+      if (!parentListItemEl) {
+        return true;
+      }
+      return parentListItemEl.open && this.isNavigable(parentListItemEl);
+    };
+    this.handleListKeydown = (event) => {
+      var _a;
+      if (event.defaultPrevented || !!this.parentListEl) {
+        return;
+      }
+      const { key } = event;
+      const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
+      const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
+      if (key === "ArrowDown") {
+        event.preventDefault();
+        const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
+        if (filteredItems[nextIndex]) {
+          this.focusRow(filteredItems[nextIndex]);
+        }
+      }
+      else if (key === "ArrowUp") {
+        event.preventDefault();
+        if (currentIndex === 0 && this.filterEnabled) {
+          (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+          return;
+        }
+        const prevIndex = currentIndex - 1;
+        if (filteredItems[prevIndex]) {
+          this.focusRow(filteredItems[prevIndex]);
+        }
+      }
+      else if (key === "Home") {
+        event.preventDefault();
+        const homeItem = filteredItems[0];
+        if (homeItem) {
+          this.focusRow(homeItem);
+        }
+      }
+      else if (key === "End") {
+        event.preventDefault();
+        const endItem = filteredItems[filteredItems.length - 1];
+        if (endItem) {
+          this.focusRow(endItem);
+        }
+      }
+    };
+    this.disabled = false;
+    this.canPull = undefined;
+    this.canPut = undefined;
+    this.dragEnabled = false;
+    this.group = undefined;
+    this.filterEnabled = false;
+    this.filteredItems = [];
+    this.filteredData = [];
+    this.filterPlaceholder = undefined;
+    this.filterText = undefined;
+    this.label = undefined;
+    this.loading = false;
+    this.openable = false;
+    this.selectedItems = [];
+    this.selectionMode = "none";
+    this.selectionAppearance = "icon";
+    this.assistiveText = undefined;
+    this.dataForFilter = [];
+    this.hasFilterActionsEnd = false;
+    this.hasFilterActionsStart = false;
+  }
+  async handleFilterTextChange() {
+    this.performFilter();
+  }
+  handleListItemChange() {
+    this.updateListItems();
+  }
+  handleCalciteInternalFocusPreviousItem(event) {
+    if (this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
+    const { enabledListItems } = this;
+    const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
+    const prevIndex = currentIndex - 1;
+    if (enabledListItems[prevIndex]) {
+      this.focusRow(enabledListItems[prevIndex]);
+    }
+  }
+  handleCalciteInternalListItemActive(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
+    const target = event.target;
+    const { listItems } = this;
+    listItems.forEach((listItem) => {
+      listItem.active = listItem === target;
+    });
+  }
+  handleCalciteListItemSelect() {
+    if (!!this.parentListEl) {
+      return;
+    }
+    this.updateSelectedItems(true);
+  }
+  handleCalciteInternalHandleChange(event) {
+    this.assistiveText = event.detail.message;
+    event.stopPropagation();
+  }
+  handleCalciteHandleNudge(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    this.handleNudgeEvent(event);
+  }
+  handleCalciteInternalListItemSelect(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
+    const target = event.target;
+    const { listItems, selectionMode } = this;
+    if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
+      listItems.forEach((listItem) => (listItem.selected = listItem === target));
+    }
+    this.updateSelectedItems();
+  }
+  handleCalciteInternalListItemChange(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
+    this.updateListItems(true);
+  }
+  handleCalciteInternalListItemGroupDefaultSlotChange(event) {
+    event.stopPropagation();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.connectObserver();
+    this.updateListItems();
+    this.setUpSorting();
+    connectInteractive(this);
+    this.parentListEl = this.el.parentElement.closest("calcite-list");
+  }
+  disconnectedCallback() {
+    this.disconnectObserver();
+    disconnectSortableComponent(this);
+    disconnectInteractive(this);
+  }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component's first focusable element. */
+  async setFocus() {
+    var _a, _b;
+    await componentFocusable(this);
+    if (this.filterEnabled) {
+      return (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+    }
+    return (_b = this.enabledListItems.find((listItem) => listItem.active)) === null || _b === void 0 ? void 0 : _b.setFocus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
+    return (h("div", { class: CSS$1.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, loading ? h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS$1.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS$1.stack }, h("slot", { name: SLOTS$1.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setFilterEl }), h("slot", { name: SLOTS$1.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS.actionsEnd })))))) : null, h("tbody", { class: CSS$1.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  connectObserver() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectObserver() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  setUpSorting() {
+    const { dragEnabled } = this;
+    if (!dragEnabled) {
+      return;
+    }
+    connectSortableComponent(this);
+  }
+  onDragStart() {
+    this.disconnectObserver();
+  }
+  onDragEnd() {
+    this.connectObserver();
+  }
+  onDragSort(event) {
+    this.updateListItems();
+    const { from, item, to } = event;
+    this.calciteListOrderChange.emit({
+      dragEl: item,
+      fromEl: from,
+      toEl: to,
+    });
+  }
+  filterElements({ el, filteredItems, visibleParents, }) {
+    const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
+    el.hidden = hidden;
+    const closestParent = el.parentElement.closest(parentSelector);
+    if (!closestParent) {
+      return;
+    }
+    if (!hidden) {
+      visibleParents.add(closestParent);
+    }
+    this.filterElements({
+      el: closestParent,
+      filteredItems,
+      visibleParents,
+    });
+  }
+  updateFilteredData(emit = false) {
+    const { filterEl } = this;
+    if (!filterEl) {
+      return;
+    }
+    if (filterEl.filteredItems) {
+      this.filteredData = filterEl.filteredItems;
+    }
+    this.updateListItems(emit);
+  }
+  async performFilter() {
+    const { filterEl, filterText } = this;
+    if (!filterEl) {
+      return;
+    }
+    filterEl.value = filterText;
+    await filterEl.filter(filterText);
+    this.updateFilteredData();
+  }
+  handleNudgeEvent(event) {
+    const { direction } = event.detail;
+    const composedPath = event.composedPath();
+    const handle = composedPath.find((el) => el.tagName === "CALCITE-HANDLE");
+    const sortItem = composedPath.find((el) => el.tagName === "CALCITE-LIST-ITEM");
+    const parentEl = sortItem === null || sortItem === void 0 ? void 0 : sortItem.parentElement;
+    if (!parentEl) {
+      return;
+    }
+    const { enabledListItems } = this;
+    const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
+    const lastIndex = sameParentItems.length - 1;
+    const startingIndex = sameParentItems.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    if (direction === "up") {
+      if (startingIndex === 0) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex - 1;
+      }
+    }
+    else {
+      if (startingIndex === lastIndex) {
+        buddyIndex = 0;
+      }
+      else if (startingIndex === lastIndex - 1) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex + 2;
+      }
+    }
+    this.disconnectObserver();
+    if (appendInstead) {
+      parentEl.appendChild(sortItem);
+    }
+    else {
+      parentEl.insertBefore(sortItem, sameParentItems[buddyIndex]);
+    }
+    this.updateListItems();
+    this.connectObserver();
+    this.calciteListOrderChange.emit({
+      dragEl: sortItem,
+      fromEl: null,
+      toEl: null,
+    });
+    handle.setFocus().then(() => {
+      handle.activated = true;
+    });
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "filterText": ["handleFilterTextChange"],
+    "filterEnabled": ["handleListItemChange"],
+    "group": ["handleListItemChange"],
+    "dragEnabled": ["handleListItemChange"],
+    "selectionMode": ["handleListItemChange"],
+    "selectionAppearance": ["handleListItemChange"]
+  }; }
+};
 List.style = listCss;
 
 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--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{z-index:var(--calcite-app-z-index-sticky);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{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{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-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-end ::slotted(calcite-action){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 focusMap = new Map();
-const listSelector = "calcite-list";
-const ListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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.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") {
-        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;
-  }
-  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);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  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, "managed");
-  }
-  disconnectedCallback() {
-    disconnectInteractive(this);
-    disconnectLocalized(this);
-    disconnectMessages(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  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();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderSelected() {
-    const { selected, selectionMode, selectionAppearance } = this;
-    if (selectionMode === "none" || selectionAppearance === "border") {
-      return null;
-    }
-    return (h("td", { class: CSS$4.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
-        ? selectionMode === "multiple"
-          ? ICONS$2.selectedMultiple
-          : ICONS$2.selectedSingle
-        : ICONS$2.unselected, scale: "s" })));
-  }
-  renderDragHandle() {
-    return this.dragHandle ? (h("td", { class: CSS$4.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);
-    return openable ? (h("td", { class: CSS$4.openContainer, key: "open-container", onClick: this.toggleOpen }, h("calcite-icon", { icon: open ? ICONS$2.open : dir === "rtl" ? ICONS$2.closedRTL : ICONS$2.closedLTR, scale: "s" }))) : (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS$4.openContainer, key: "open-container", onClick: this.itemClicked }, h("calcite-icon", { icon: ICONS$2.blank, scale: "s" }))) : null;
-  }
-  renderActionsStart() {
-    const { label, hasActionsStart } = this;
-    return (h("td", { "aria-label": label, class: CSS$4.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS$2.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
-  }
-  renderActionsEnd() {
-    const { label, hasActionsEnd, closable, messages } = this;
-    return (h("td", { "aria-label": label, class: CSS$4.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS$2.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS$2.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
-  }
-  renderContentStart() {
-    const { hasContentStart } = this;
-    return (h("div", { class: CSS$4.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS$2.contentStart, onSlotchange: this.handleContentStartSlotChange })));
-  }
-  renderCustomContent() {
-    const { hasCustomContent } = this;
-    return (h("div", { class: CSS$4.customContent, hidden: !hasCustomContent }, h("slot", { name: SLOTS$2.content, onSlotchange: this.handleContentSlotChange })));
-  }
-  renderContentEnd() {
-    const { hasContentEnd } = this;
-    return (h("div", { class: CSS$4.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS$2.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
-  }
-  renderContentProperties() {
-    const { label, description, hasCustomContent } = this;
-    return !hasCustomContent && (!!label || !!description) ? (h("div", { class: CSS$4.content, key: "content" }, label ? (h("div", { class: CSS$4.label, key: "label" }, label)) : null, description ? (h("div", { class: CSS$4.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$4.contentContainer]: true,
-        [CSS$4.contentContainerSelectable]: selectionMode !== "none",
-        [CSS$4.contentContainerHasCenterContent]: hasCenterContent,
-      }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.contentEl = el) }, content));
-  }
-  render() {
-    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, } = 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$4.container]: true,
-        [CSS$4.containerBorderSelected]: borderSelected,
-        [CSS$4.containerBorderUnselected]: borderUnselected,
-      }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
-        [CSS$4.nestedContainer]: true,
-        [CSS$4.nestedContainerHidden]: openable && !open,
-      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  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 getElement(this); }
-  static get watchers() { return {
-    "active": ["activeHandler"],
-    "closed": ["handleClosedChange"],
-    "disabled": ["handleDisabledChange"],
-    "selected": ["handleSelectedChange"],
-    "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
+const focusMap = new Map();
+const listSelector = "calcite-list";
+const ListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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.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") {
+        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;
+  }
+  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);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  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, "managed");
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  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();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderSelected() {
+    const { selected, selectionMode, selectionAppearance } = this;
+    if (selectionMode === "none" || selectionAppearance === "border") {
+      return null;
+    }
+    return (h("td", { class: CSS$4.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
+        ? selectionMode === "multiple"
+          ? ICONS$2.selectedMultiple
+          : ICONS$2.selectedSingle
+        : ICONS$2.unselected, scale: "s" })));
+  }
+  renderDragHandle() {
+    return this.dragHandle ? (h("td", { class: CSS$4.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);
+    return openable ? (h("td", { class: CSS$4.openContainer, key: "open-container", onClick: this.toggleOpen }, h("calcite-icon", { icon: open ? ICONS$2.open : dir === "rtl" ? ICONS$2.closedRTL : ICONS$2.closedLTR, scale: "s" }))) : (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS$4.openContainer, key: "open-container", onClick: this.itemClicked }, h("calcite-icon", { icon: ICONS$2.blank, scale: "s" }))) : null;
+  }
+  renderActionsStart() {
+    const { label, hasActionsStart } = this;
+    return (h("td", { "aria-label": label, class: CSS$4.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS$2.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+  }
+  renderActionsEnd() {
+    const { label, hasActionsEnd, closable, messages } = this;
+    return (h("td", { "aria-label": label, class: CSS$4.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS$2.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS$2.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
+  }
+  renderContentStart() {
+    const { hasContentStart } = this;
+    return (h("div", { class: CSS$4.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS$2.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+  }
+  renderCustomContent() {
+    const { hasCustomContent } = this;
+    return (h("div", { class: CSS$4.customContent, hidden: !hasCustomContent }, h("slot", { name: SLOTS$2.content, onSlotchange: this.handleContentSlotChange })));
+  }
+  renderContentEnd() {
+    const { hasContentEnd } = this;
+    return (h("div", { class: CSS$4.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS$2.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+  }
+  renderContentProperties() {
+    const { label, description, hasCustomContent } = this;
+    return !hasCustomContent && (!!label || !!description) ? (h("div", { class: CSS$4.content, key: "content" }, label ? (h("div", { class: CSS$4.label, key: "label" }, label)) : null, description ? (h("div", { class: CSS$4.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$4.contentContainer]: true,
+        [CSS$4.contentContainerSelectable]: selectionMode !== "none",
+        [CSS$4.contentContainerHasCenterContent]: hasCenterContent,
+      }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.contentEl = el) }, content));
+  }
+  render() {
+    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, } = 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$4.container]: true,
+        [CSS$4.containerBorderSelected]: borderSelected,
+        [CSS$4.containerBorderUnselected]: borderUnselected,
+      }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
+        [CSS$4.nestedContainer]: true,
+        [CSS$4.nestedContainerHidden]: openable && !open,
+      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  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 getElement(this); }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "closed": ["handleClosedChange"],
+    "disabled": ["handleDisabledChange"],
+    "selected": ["handleSelectedChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
 ListItem.style = listItemCss;
 
 const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}";
 
-const Stack = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    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.disabled = false;
-    this.hasActionsStart = false;
-    this.hasActionsEnd = false;
-    this.hasContentStart = false;
-    this.hasContentEnd = false;
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderActionsStart() {
-    const { hasActionsStart } = this;
-    return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
-  }
-  renderActionsEnd() {
-    const { hasActionsEnd } = this;
-    return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
-  }
-  renderContentStart() {
-    const { hasContentStart } = this;
-    return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
-  }
-  renderDefaultContent() {
-    return (h("div", { class: CSS.content }, h("slot", null)));
-  }
-  renderContentEnd() {
-    const { hasContentEnd } = this;
-    return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
-  }
-  render() {
-    return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
-  }
-};
+const Stack = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    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.disabled = false;
+    this.hasActionsStart = false;
+    this.hasActionsEnd = false;
+    this.hasContentStart = false;
+    this.hasContentEnd = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderActionsStart() {
+    const { hasActionsStart } = this;
+    return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+  }
+  renderActionsEnd() {
+    const { hasActionsEnd } = this;
+    return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+  }
+  renderContentStart() {
+    const { hasContentStart } = this;
+    return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+  }
+  renderDefaultContent() {
+    return (h("div", { class: CSS.content }, h("slot", null)));
+  }
+  renderContentEnd() {
+    const { hasContentEnd } = this;
+    return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+  }
+};
 Stack.style = stackCss;
 
 export { Filter as calcite_filter, Handle as calcite_handle, List as calcite_list, ListItem as calcite_list_item, Stack as calcite_stack };