diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 459c8b51ce6..28c6c632337 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -2845,6 +2845,10 @@ export namespace Components {
           * Sets the item as focusable. Only one item should be focusable within a list.
          */
         "active": boolean;
+        /**
+          * Sets the item to display a border.
+         */
+        "bordered": boolean;
         /**
           * When `true`, a close button is added to the component.
          */
@@ -10362,6 +10366,10 @@ declare namespace LocalJSX {
           * Sets the item as focusable. Only one item should be focusable within a list.
          */
         "active"?: boolean;
+        /**
+          * Sets the item to display a border.
+         */
+        "bordered"?: boolean;
         /**
           * When `true`, a close button is added to the component.
          */
diff --git a/packages/calcite-components/src/components/handle/handle.scss b/packages/calcite-components/src/components/handle/handle.scss
index 2ca02c8f619..09bfd0ddbd1 100644
--- a/packages/calcite-components/src/components/handle/handle.scss
+++ b/packages/calcite-components/src/components/handle/handle.scss
@@ -8,8 +8,7 @@
     items-center
     justify-center
     self-stretch
-    border-none
-    bg-transparent;
+    border-none;
   color: theme("borderColor.color.input");
   padding-block: theme("spacing.3");
   padding-inline: theme("spacing.1");
diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
index eda0e772932..0a124c6627b 100644
--- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss
+++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
@@ -1,6 +1,5 @@
 :host {
   @apply flex flex-col bg-foreground-1;
-  --calcite-list-item-spacing-indent: theme("spacing.4");
 }
 
 :host([filter-hidden]) {
@@ -15,20 +14,6 @@
 
 .heading {
   @apply p-0;
-  padding-inline-start: calc(
-    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
-  );
-}
-
-::slotted(calcite-list-item) {
-  @apply shadow-border-top;
-  margin-block-start: 1px;
-}
-
-// removes shadow for the first item of the group for both filtered and unfiltered items.
-::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) {
-  @apply shadow-none;
-  margin-block-start: 0px;
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx
index 87943ce6967..3d393b6892d 100644
--- a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx
+++ b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx
@@ -1,14 +1,4 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  h,
-  Host,
-  Prop,
-  State,
-  VNode,
-} from "@stencil/core";
+import { Component, Element, Event, EventEmitter, h, Host, Prop, VNode } from "@stencil/core";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -17,7 +7,6 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { MAX_COLUMNS } from "../list-item/resources";
-import { getDepth } from "../list-item/utils";
 import { CSS } from "./resources";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
@@ -71,8 +60,6 @@ export class ListItemGroup implements InteractiveComponent {
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    const { el } = this;
-    this.visualLevel = getDepth(el, true);
     connectInteractive(this);
   }
 
@@ -92,8 +79,6 @@ export class ListItemGroup implements InteractiveComponent {
 
   @Element() el: HTMLCalciteListItemGroupElement;
 
-  @State() visualLevel: number = null;
-
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -101,14 +86,11 @@ export class ListItemGroup implements InteractiveComponent {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const { disabled, heading, visualLevel } = this;
+    const { disabled, heading } = this;
     return (
       <Host>
         <InteractiveContainer disabled={disabled}>
-          <tr
-            class={CSS.container}
-            style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
-          >
+          <tr class={CSS.container}>
             <td class={CSS.heading} colSpan={MAX_COLUMNS}>
               {heading}
             </td>
diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index 3beec9c28d6..e74fe808d6c 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -1,11 +1,29 @@
 :host {
-  @apply flex flex-col;
+  @apply flex flex-col bg-foreground-1;
   --calcite-list-item-icon-color: theme("colors.brand");
-  --calcite-list-item-spacing-indent: theme("spacing.4");
+}
+
+:host([filter-hidden]),
+:host([closed]) {
+  @apply hidden;
+}
+
+.wrapper--bordered {
+  border-block-end: 1px solid var(--calcite-color-border-3);
 }
 
 @include disabled();
 
+.indent {
+  @apply flex
+    flex-col
+    border-solid
+    border-0
+    border-color-3;
+
+  margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6"));
+}
+
 .container {
   @apply bg-foreground-1
   box-border
@@ -14,9 +32,6 @@
   * {
     @apply box-border;
   }
-  padding-inline-start: calc(
-    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
-  );
 }
 
 .container--hover:hover {
@@ -47,7 +62,7 @@
 }
 
 .nested-container {
-  @apply bg-foreground-1 flex flex-col;
+  @apply flex flex-col;
 }
 
 .nested-container--hidden {
@@ -122,13 +137,14 @@ td:focus {
 .content-start,
 .content-end {
   @apply flex-auto;
+
+  ::slotted(calcite-icon) {
+    @apply self-center mx-3;
+  }
 }
 
 .content-bottom {
-  @apply bg-foreground-1 flex flex-col;
-  padding-inline-start: calc(
-    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
-  );
+  @apply flex flex-col;
 }
 
 .content-container--has-center-content .content-start,
@@ -171,6 +187,11 @@ td:focus {
 .drag-container,
 .open-container {
   @apply flex items-center;
+
+  calcite-action,
+  calcite-handle {
+    @apply self-stretch;
+  }
 }
 
 .open-container,
@@ -178,13 +199,6 @@ td:focus {
   @apply cursor-pointer;
 }
 
-.content-start,
-.content-end {
-  ::slotted(calcite-icon) {
-    @apply self-center mx-3;
-  }
-}
-
 .actions-start,
 .actions-end {
   @apply p-0;
@@ -198,13 +212,8 @@ td:focus {
   }
 }
 
-::slotted(calcite-list-item),
-::slotted(calcite-list) {
-  @apply border-solid border-0 border-t border-color-3;
-}
-
 ::slotted(calcite-list:empty) {
-  @apply py-3;
+  @apply border-t-0;
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index cf7d33c6bdb..4b379ba1107 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -97,6 +97,13 @@ export class ListItem
     }
   }
 
+  /**
+   * Sets the item to display a border.
+   *
+   * @internal
+   */
+  @Prop() bordered = false;
+
   /** When `true`, a close button is added to the component. */
   @Prop({ reflect: true }) closable = false;
 
@@ -312,8 +319,6 @@ export class ListItem
 
   @State() level: number = null;
 
-  @State() visualLevel: number = null;
-
   @State() parentListEl: HTMLCalciteListElement;
 
   @State() openable = false;
@@ -355,7 +360,6 @@ export class ListItem
     const { el } = this;
     this.parentListEl = el.closest(listSelector);
     this.level = getDepth(el) + 1;
-    this.visualLevel = getDepth(el, true);
     this.setSelectionDefaults();
   }
 
@@ -560,13 +564,9 @@ export class ListItem
   }
 
   renderContentBottom(): VNode {
-    const { hasContentBottom, visualLevel } = this;
+    const { hasContentBottom } = this;
     return (
-      <div
-        class={CSS.contentBottom}
-        hidden={!hasContentBottom}
-        style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
-      >
+      <div class={CSS.contentBottom} hidden={!hasContentBottom}>
         <slot name={SLOTS.contentBottom} onSlotchange={this.handleContentBottomSlotChange} />
       </div>
     );
@@ -651,8 +651,9 @@ export class ListItem
       selectionAppearance,
       selectionMode,
       closed,
-      visualLevel,
       filterHidden,
+      bordered,
+      disabled,
     } = this;
 
     const showBorder = selectionMode !== "none" && selectionAppearance === "border";
@@ -661,40 +662,41 @@ export class ListItem
 
     return (
       <Host>
-        <InteractiveContainer disabled={this.disabled}>
-          <tr
-            aria-expanded={openable ? toAriaBoolean(open) : null}
-            aria-label={label}
-            aria-level={level}
-            aria-posinset={setPosition}
-            aria-selected={toAriaBoolean(selected)}
-            aria-setsize={setSize}
-            class={{
-              [CSS.container]: true,
-              [CSS.containerHover]: true,
-              [CSS.containerBorder]: showBorder,
-              [CSS.containerBorderSelected]: borderSelected,
-              [CSS.containerBorderUnselected]: borderUnselected,
-            }}
-            hidden={closed || filterHidden}
-            onFocus={this.focusCellNull}
-            onFocusin={this.emitInternalListItemActive}
-            onKeyDown={this.handleItemKeyDown}
-            role="row"
-            style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
-            tabIndex={active ? 0 : -1}
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref={(el) => (this.containerEl = el)}
-          >
-            {this.renderDragHandle()}
-            {this.renderSelected()}
-            {this.renderOpen()}
-            {this.renderActionsStart()}
-            {this.renderContentContainer()}
-            {this.renderActionsEnd()}
-          </tr>
-          {this.renderContentBottom()}
-          {this.renderDefaultContainer()}
+        <InteractiveContainer disabled={disabled}>
+          <div class={{ [CSS.wrapper]: true, [CSS.wrapperBordered]: bordered }}>
+            <tr
+              aria-expanded={openable ? toAriaBoolean(open) : null}
+              aria-label={label}
+              aria-level={level}
+              aria-posinset={setPosition}
+              aria-selected={toAriaBoolean(selected)}
+              aria-setsize={setSize}
+              class={{
+                [CSS.container]: true,
+                [CSS.containerHover]: true,
+                [CSS.containerBorder]: showBorder,
+                [CSS.containerBorderSelected]: borderSelected,
+                [CSS.containerBorderUnselected]: borderUnselected,
+              }}
+              hidden={closed || filterHidden}
+              onFocus={this.focusCellNull}
+              onFocusin={this.emitInternalListItemActive}
+              onKeyDown={this.handleItemKeyDown}
+              role="row"
+              tabIndex={active ? 0 : -1}
+              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+              ref={(el) => (this.containerEl = el)}
+            >
+              {this.renderDragHandle()}
+              {this.renderSelected()}
+              {this.renderOpen()}
+              {this.renderActionsStart()}
+              {this.renderContentContainer()}
+              {this.renderActionsEnd()}
+            </tr>
+            {this.renderContentBottom()}
+          </div>
+          <div class={CSS.indent}>{this.renderDefaultContainer()}</div>
         </InteractiveContainer>
       </Host>
     );
diff --git a/packages/calcite-components/src/components/list-item/resources.ts b/packages/calcite-components/src/components/list-item/resources.ts
index d35cb326897..a51d1b84885 100644
--- a/packages/calcite-components/src/components/list-item/resources.ts
+++ b/packages/calcite-components/src/components/list-item/resources.ts
@@ -1,5 +1,8 @@
 export const CSS = {
+  wrapper: "wrapper",
+  wrapperBordered: "wrapper--bordered",
   container: "container",
+  indent: "indent",
   containerHover: "container--hover",
   containerBorder: "container--border",
   containerBorderSelected: "container--border-selected",
diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss
index dc79d36a4e0..a8faac51b01 100755
--- a/packages/calcite-components/src/components/list/list.scss
+++ b/packages/calcite-components/src/components/list/list.scss
@@ -28,21 +28,6 @@
   --calcite-stack-padding-block: 0;
 }
 
-::slotted(calcite-list-item:not([filter-hidden], [closed])) {
-  @apply shadow-border-top;
-  margin-block-start: 1px;
-}
-
-::slotted(calcite-list-item:first-of-type) {
-  @apply shadow-none;
-}
-
-// removes shadow for the first item in filteredItems of the list.
-::slotted(calcite-list-item[data-filter]) {
-  @apply shadow-none;
-  margin-block-start: 0px;
-}
-
 .sticky-pos {
   @apply sticky
   top-0
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
index 73bd5ca8a65..2573356b3c3 100644
--- a/packages/calcite-components/src/components/list/list.stories.ts
+++ b/packages/calcite-components/src/components/list/list.stories.ts
@@ -93,52 +93,71 @@ export const stretchSlottedContent = (): string => html`
 export const nestedItems = (): string => html`
   <calcite-list ${knobsHTML()}>
     <calcite-list-item
+      open
       label="Level 1 item 1"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     ></calcite-list-item>
-    <calcite-list-item label="Level 1 item 2" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-      <calcite-list-item label="Level 2 item 1" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+    <calcite-list-item
+      open
+      label="Level 1 item 2"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    >
+      <calcite-list-item
+        open
+        label="Level 2 item 1"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+      >
         <calcite-list-item
+          open
           label="Level 3 item 1"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         ></calcite-list-item>
         <calcite-list-item
+          open
           label="Level 3 item 2"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         >
           <calcite-list-item
+            open
             label="Level 4 item 1"
             description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           >
             <calcite-list-item
+              open
               label="Level 5 item 1"
               description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
             ></calcite-list-item>
           </calcite-list-item>
           <calcite-list-item
+            open
             label="Level 4 item 2"
             description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           ></calcite-list-item>
           <calcite-list-item
+            open
             label="Level 4 item 3"
             description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           ></calcite-list-item>
         </calcite-list-item>
         <calcite-list-item
+          open
           label="Level 3 item 3"
           description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         ></calcite-list-item>
       </calcite-list-item>
       <calcite-list-item
+        open
         label="Level 2 item 2"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
       <calcite-list-item
+        open
         label="Level 2 item 3"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
     </calcite-list-item>
     <calcite-list-item
+      open
       label="Level 1 item 3"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     ></calcite-list-item>
@@ -153,16 +172,19 @@ export const groupedItems = (): string => html`
   <calcite-list ${knobsHTML()}>
     <calcite-list-item-group heading="Nested">
       <calcite-list-item
+        open
         expanded
         label="Cras iaculis ultricies nulla."
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       >
         <calcite-list-item
+          open
           expanded
           label="Ut aliquam sollicitudin leo."
           description="Aliquam tincidunt mauris eu risus."
         >
           <calcite-list-item
+            open
             label="Vestibulum commodo felis quis tortor."
             description="Vestibulum auctor dapibus neque."
           ></calcite-list-item></calcite-list-item
@@ -170,19 +192,22 @@ export const groupedItems = (): string => html`
     </calcite-list-item-group>
     <calcite-list-item-group heading="Digits">
       <calcite-list-item
+        open
         label="One"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
-      <calcite-list-item label="Two" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
+      <calcite-list-item open label="Two" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
       <calcite-list-item label="Three" description="Vestibulum auctor dapibus neque."></calcite-list-item>
     </calcite-list-item-group>
     <calcite-list-item-group heading="Letters">
       <calcite-list-item
+        open
         label="A"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
-      <calcite-list-item label="B" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
+      <calcite-list-item open label="B" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
       <calcite-list-item
+        open
         label="C"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       ></calcite-list-item>
@@ -824,17 +849,17 @@ export const sortableNestedList_TestOnly = (): string =>
       <calcite-list drag-enabled group="nested" selection-mode="multiple">
         <calcite-list-item open label="Hi! 2" description="hello world">
           <calcite-list drag-enabled group="nested" selection-mode="multiple">
-            <calcite-list-item label="Hi! 3" description="hello world">
+            <calcite-list-item open label="Hi! 3" description="hello world">
               <calcite-list drag-enabled group="nested" selection-mode="multiple"></calcite-list>
             </calcite-list-item>
-            <calcite-list-item label="Hi! 4" description="hello world"></calcite-list-item>
+            <calcite-list-item open label="Hi! 4" description="hello world"></calcite-list-item>
           </calcite-list>
         </calcite-list-item>
-        <calcite-list-item label="Hi! 5" description="hello world"></calcite-list-item>
+        <calcite-list-item open label="Hi! 5" description="hello world"></calcite-list-item>
       </calcite-list>
     </calcite-list-item>
-    <calcite-list-item label="Hi! 6" description="hello world"></calcite-list-item>
-    <calcite-list-item label="Hi! 7" description="hello world"></calcite-list-item>
+    <calcite-list-item open label="Hi! 6" description="hello world"></calcite-list-item>
+    <calcite-list-item open label="Hi! 7" description="hello world"></calcite-list-item>
   </calcite-list>`;
 
 export const emptyOpenLists_TestOnly = (): string =>
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index e2189525127..49f9c7f83ff 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -254,6 +254,15 @@ export class List
    */
   @Event({ cancelable: false }) calciteInternalListDefaultSlotChange: EventEmitter<void>;
 
+  @Listen("calciteListItemToggle")
+  handleCalciteListItemToggle(): void {
+    if (this.parentListEl) {
+      return;
+    }
+
+    this.borderItems();
+  }
+
   @Listen("calciteInternalFocusPreviousItem")
   handleCalciteInternalFocusPreviousItem(event: CustomEvent): void {
     if (this.parentListEl) {
@@ -460,8 +469,6 @@ export class List
 
   sortable: Sortable;
 
-  private ancestorOfFirstFilteredItem: HTMLCalciteListItemElement;
-
   private lastSelectedInfo: { selectedItem: HTMLCalciteListItemElement; selected: boolean };
 
   // --------------------------------------------------------------------------
@@ -731,6 +738,28 @@ export class List
     });
   }
 
+  private allParentListItemsOpen(item: HTMLCalciteListItemElement): boolean {
+    const parentItem = item.parentElement?.closest(listItemSelector);
+
+    if (!parentItem) {
+      return true;
+    } else if (!parentItem.open) {
+      return false;
+    }
+
+    return this.allParentListItemsOpen(parentItem);
+  }
+
+  private borderItems = (): void => {
+    const visibleItems = this.visibleItems.filter(
+      (item) => !item.filterHidden && this.allParentListItemsOpen(item),
+    );
+
+    visibleItems.forEach(
+      (item) => (item.bordered = item !== visibleItems[visibleItems.length - 1]),
+    );
+  };
+
   private updateFilteredItems = (emit = false): void => {
     const { visibleItems, filteredData, filterText } = this;
 
@@ -749,10 +778,6 @@ export class List
       this.filterElements({ el: listItem, filteredItems, visibleParents }),
     );
 
-    if (filteredItems.length > 0) {
-      this.findAncestorOfFirstFilteredItem(filteredItems);
-    }
-
     this.filteredItems = filteredItems;
 
     if (emit) {
@@ -810,26 +835,22 @@ export class List
   private updateListItems = debounce((emit = false): void => {
     const { selectionAppearance, selectionMode, dragEnabled } = this;
 
-    if (!!this.parentListEl) {
-      const items = this.queryListItems(true);
-
-      items.forEach((item) => {
-        item.dragHandle = dragEnabled;
-      });
-
-      this.setUpSorting();
-      return;
-    }
-
     const items = this.queryListItems();
     items.forEach((item) => {
       item.selectionAppearance = selectionAppearance;
       item.selectionMode = selectionMode;
     });
-    const dragItems = this.queryListItems(true);
-    dragItems.forEach((item) => {
+
+    const directItems = this.queryListItems(true);
+    directItems.forEach((item) => {
       item.dragHandle = dragEnabled;
     });
+
+    if (!!this.parentListEl) {
+      this.setUpSorting();
+      return;
+    }
+
     this.listItems = items;
     if (this.filterEnabled) {
       this.dataForFilter = this.getItemData();
@@ -839,6 +860,7 @@ export class List
     }
     this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
     this.updateFilteredItems(emit);
+    this.borderItems();
     this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
     this.setActiveListItem();
     this.updateSelectedItems(emit);
@@ -917,35 +939,6 @@ export class List
     }
   };
 
-  private findAncestorOfFirstFilteredItem = (filteredItems: HTMLCalciteListItemElement[]): void => {
-    this.ancestorOfFirstFilteredItem?.removeAttribute("data-filter");
-    filteredItems.forEach((item) => {
-      item.removeAttribute("data-filter");
-    });
-
-    this.ancestorOfFirstFilteredItem = this.getTopLevelAncestorItemElement(filteredItems[0]);
-    filteredItems[0].setAttribute("data-filter", "0");
-    this.ancestorOfFirstFilteredItem?.setAttribute("data-filter", "0");
-  };
-
-  private getTopLevelAncestorItemElement = (
-    el: HTMLCalciteListItemElement,
-  ): HTMLCalciteListItemElement | null => {
-    let closestParent = el.parentElement.closest<HTMLCalciteListItemElement>(listItemSelector);
-
-    while (closestParent) {
-      const closestListItemAncestor =
-        closestParent.parentElement.closest<HTMLCalciteListItemElement>(listItemSelector);
-
-      if (closestListItemAncestor) {
-        closestParent = closestListItemAncestor;
-      } else {
-        return closestParent;
-      }
-    }
-    return null;
-  };
-
   handleNudgeEvent(event: CustomEvent<HandleNudge>): void {
     const { handleSelector, dragSelector } = this;
     const { direction } = event.detail;