feat(list)!: add displayMode property to choose between flat and nested lists

packages/calcite-components/src/components/list-item/list-item.e2e.ts

@@ -57,6 +57,10 @@ describe("calcite-list-item", () => {
         propertyName: "unavailable",
         defaultValue: false,
       },
+      {
+        propertyName: "mode",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -348,7 +352,7 @@ describe("calcite-list-item", () => {
 
   it("should fire calciteListItemToggle event when opened and closed", async () => {
     const page = await newE2EPage({
-      html: html`<calcite-list-item
+      html: html`<calcite-list-item mode="nested"
         ><calcite-list><calcite-list-item></calcite-list-item></calcite-list
       ></calcite-list-item>`,
     });
@@ -369,6 +373,41 @@ describe("calcite-list-item", () => {
     expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
   });
 
+  it("should not fire calciteListItemToggle event without nested items", async () => {
+    const page = await newE2EPage({
+      html: html`<calcite-list-item mode="nested"></calcite-list-item>`,
+    });
+
+    const listItem = await page.find("calcite-list-item");
+    const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");
+
+    expect(await listItem.getProperty("open")).toBe(false);
+
+    const openButton = await page.find(`calcite-list-item >>> .${CSS.openContainer}`);
+
+    expect(openButton.getAttribute("title")).toBe(null);
+
+    await openButton.click();
+    expect(await listItem.getProperty("open")).toBe(false);
+    expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
+
+    await openButton.click();
+    expect(await listItem.getProperty("open")).toBe(false);
+    expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
+  });
+
+  it("flat list should not render open container", async () => {
+    const page = await newE2EPage({
+      html: html`<calcite-list-item mode="flat"
+        ><calcite-list><calcite-list-item></calcite-list-item></calcite-list
+      ></calcite-list-item>`,
+    });
+
+    const openButton = await page.find(`calcite-list-item >>> .${CSS.openContainer}`);
+
+    expect(openButton).toBe(null);
+  });
+
   describe("themed", () => {
     describe(`selection-appearance="icon"`, () => {
       themed(

packages/calcite-components/src/components/list-item/list-item.tsx

@@ -20,6 +20,7 @@ import { MoveTo } from "../sort-handle/interfaces";
 import { useT9n } from "../../controllers/useT9n";
 import type { SortHandle } from "../sort-handle/sort-handle";
 import type { List } from "../list/list";
+import { ListMode } from "../list/interfaces";
 import T9nStrings from "./assets/t9n/list-item.t9n.en.json";
 import { getDepth, hasListItemChildren } from "./utils";
 import { CSS, activeCellTestAttribute, ICONS, SLOTS } from "./resources";
@@ -161,6 +162,13 @@ export class ListItem
   /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
   @property() metadata: Record<string, unknown>;
 
+  /**
+   * Specifies the nesting behavior.
+   *
+   * @private
+   */
+  @property() mode: ListMode;
+
   /**
    * Sets the item to display a border.
    *
@@ -364,6 +372,10 @@ export class ListItem
     if (changes.has("sortHandleOpen") && (this.hasUpdated || this.sortHandleOpen !== false)) {
       this.sortHandleOpenHandler();
     }
+
+    if (changes.has("mode") && this.hasUpdated) {
+      this.handleOpenableChange(this.defaultSlotEl.value);
+    }
   }
 
   override updated(): void {
@@ -519,7 +531,7 @@ export class ListItem
       return;
     }
 
-    this.openable = hasListItemChildren(slotEl);
+    this.openable = this.mode === "nested" && hasListItemChildren(slotEl);
   }
 
   private handleDefaultSlotChange(event: Event): void {
@@ -739,21 +751,36 @@ export class ListItem
   }
 
   private renderOpen(): JsxNode {
-    const { el, open, openable, messages } = this;
+    const { el, open, openable, messages, mode } = this;
+
+    if (mode !== "nested") {
+      return null;
+    }
+
     const dir = getElementDir(el);
-    const icon = open ? ICONS.open : dir === "rtl" ? ICONS.closedRTL : ICONS.closedLTR;
-    const tooltip = open ? messages.collapse : messages.expand;
 
-    return openable ? (
+    const icon = openable
+      ? open
+        ? ICONS.open
+        : dir === "rtl"
+          ? ICONS.closedRTL
+          : ICONS.closedLTR
+      : ICONS.blank;
+
+    const tooltip = openable ? (open ? messages.collapse : messages.expand) : undefined;
+
+    const openClickHandler = openable ? this.handleToggleClick : undefined;
+
+    return (
       <div
         class={CSS.openContainer}
         key="open-container"
-        onClick={this.handleToggleClick}
+        onClick={openClickHandler}
         title={tooltip}
       >
         <calcite-icon icon={icon} key={icon} scale="s" />
       </div>
-    ) : null;
+    );
   }
 
   private renderActionsStart(): JsxNode {

packages/calcite-components/src/components/list/interfaces.ts

@@ -2,6 +2,8 @@ import { DragDetail, MoveDetail } from "../../utils/sortableComponent";
 import type { ListItem } from "../list-item/list-item";
 import type { List } from "./list";
 
+export type ListMode = "flat" | "nested";
+
 export interface ListDragDetail extends DragDetail {
   toEl: List["el"];
   fromEl: List["el"];