@fiscozen/card-list 1.0.0

package/src/__tests__/FzCardListItem.spec.ts

@@ -0,0 +1,458 @@
+import { mount, config } from "@vue/test-utils";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import type { FzActionProps } from "@fiscozen/action";
+import FzCardListItem from "../FzCardListItem.vue";
+
+const actionA: FzActionProps = {
+  type: "action",
+  variant: "textLeft",
+  label: "Action A",
+};
+
+const actionB: FzActionProps = {
+  type: "action",
+  variant: "textLeft",
+  label: "Action B",
+};
+
+const linkAction = { type: "link" as const, to: "/" };
+
+/** Status indicator icons (circle-small in both title-only and title+value rows) */
+function indicatorIcons(wrapper: ReturnType<typeof mount>) {
+  return wrapper.findAllComponents({ name: "FzIcon" }).filter((w) => {
+    const name = w.props("name");
+    return name === "circle-small";
+  });
+}
+
+function descriptionParagraphs(wrapper: ReturnType<typeof mount>) {
+  const block = wrapper.find(".gap-section-content-none");
+  if (!block.exists()) return [];
+  return block.findAll("p");
+}
+
+const badgeDraft = { text: "Bozza", tone: "dark" as const };
+
+beforeEach(() => {
+  // Mock IntersectionObserver for FzFloating / dropdown (not in jsdom)
+  global.IntersectionObserver = class IntersectionObserver {
+    constructor() {}
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as any;
+
+  config.global.directives = {
+    bold: () => {},
+    color: () => {},
+    small: () => {},
+  };
+
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    configurable: true,
+    value: vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+});
+
+describe("FzCardListItem", () => {
+  describe("Rendering", () => {
+    it("should render with only a title", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "My Title" },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.text()).toContain("My Title");
+    });
+
+    it("should render the title in a truncated paragraph", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Bold Title" },
+      });
+      await wrapper.vm.$nextTick();
+      const titleEl = wrapper.find("p.truncate");
+      expect(titleEl.exists()).toBe(true);
+      expect(titleEl.text()).toBe("Bold Title");
+    });
+
+    it("should apply min-w-0 and flex-1 on the title paragraph so truncate works in flex rows", async () => {
+      const longTitle = "A".repeat(200);
+      const wrapper = mount(FzCardListItem, {
+        props: { title: longTitle },
+      });
+      await wrapper.vm.$nextTick();
+      const titles = wrapper.findAll("p.truncate");
+      expect(titles).toHaveLength(1);
+      for (const el of titles) {
+        expect(el.classes()).toEqual(
+          expect.arrayContaining(["min-w-0", "flex-1", "truncate"]),
+        );
+      }
+    });
+
+    it("should render a single title row with value (title lives in the second row when value is set)", async () => {
+      const longTitle = "A".repeat(200);
+      const wrapper = mount(FzCardListItem, {
+        props: { title: longTitle, value: "10,00 €" },
+      });
+      await wrapper.vm.$nextTick();
+      const titles = wrapper.findAll("p.truncate");
+      expect(titles).toHaveLength(1);
+      for (const el of titles) {
+        expect(el.classes()).toEqual(
+          expect.arrayContaining(["min-w-0", "flex-1", "truncate"]),
+        );
+      }
+    });
+
+    it("should render value when provided", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", value: "1.200,00 €" },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.text()).toContain("1.200,00 €");
+    });
+
+    it("should not render value when not provided", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item" },
+      });
+      await wrapper.vm.$nextTick();
+      const valueEl = wrapper.find("p.text-base.whitespace-nowrap");
+      expect(valueEl.exists()).toBe(false);
+    });
+
+    it("should render badge when provided", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", badge: badgeDraft },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.text()).toContain("Bozza");
+    });
+
+    it("should not render a trailing control when actions is omitted", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item" },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent({ name: "FzIconButton" }).exists()).toBe(
+        false,
+      );
+      expect(wrapper.findComponent({ name: "FzIconDropdown" }).exists()).toBe(
+        false,
+      );
+    });
+
+    it("should not render a trailing control when actions is an empty array", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", actions: [] },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent({ name: "FzIconButton" }).exists()).toBe(
+        false,
+      );
+      expect(wrapper.findComponent({ name: "FzIconDropdown" }).exists()).toBe(
+        false,
+      );
+    });
+
+    it("should render arrow icon when exactly one link action is passed", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", actions: [linkAction] },
+      });
+      await wrapper.vm.$nextTick();
+      const arrows = wrapper
+        .findAllComponents({ name: "FzIcon" })
+        .filter((w) => w.props("name") === "chevron-right");
+      expect(arrows).toHaveLength(1);
+    });
+
+    it("should apply cursor-pointer on the row only when exactly one link action is passed", async () => {
+      const none = mount(FzCardListItem, { props: { title: "Item" } });
+      const many = mount(FzCardListItem, {
+        props: { title: "Item", actions: [actionA, actionB] },
+      });
+      const one = mount(FzCardListItem, {
+        props: { title: "Item", actions: [linkAction] },
+      });
+      await Promise.all([
+        none.vm.$nextTick(),
+        many.vm.$nextTick(),
+        one.vm.$nextTick(),
+      ]);
+      expect(none.find(".cursor-pointer").exists()).toBe(false);
+      expect(many.find(".cursor-pointer").exists()).toBe(false);
+      expect(one.find(".cursor-pointer").exists()).toBe(true);
+    });
+
+    it("should render dropdown when more than one action is passed", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", actions: [actionA, actionB] },
+      });
+      await wrapper.vm.$nextTick();
+      const dropdown = wrapper.findComponent({ name: "FzIconDropdown" });
+      expect(dropdown.exists()).toBe(true);
+      expect(dropdown.props("actions")).toEqual([actionA, actionB]);
+    });
+
+    it("should render badge in the top row when badge is provided", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", badge: { text: "Tag", tone: "info" } },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent({ name: "FzBadge" }).exists()).toBe(true);
+    });
+
+    it("should render description lines when provided", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", descriptions: ["Line 1", "Line 2", "Line 3"] },
+      });
+      await wrapper.vm.$nextTick();
+      const paragraphs = descriptionParagraphs(wrapper);
+      expect(paragraphs).toHaveLength(3);
+      expect(paragraphs[0].text()).toBe("Line 1");
+      expect(paragraphs[1].text()).toBe("Line 2");
+      expect(paragraphs[2].text()).toBe("Line 3");
+    });
+
+    it("should not render description paragraphs when descriptions is not provided", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item" },
+      });
+      await wrapper.vm.$nextTick();
+      expect(descriptionParagraphs(wrapper)).toHaveLength(0);
+    });
+
+    it("should not render description paragraphs when descriptions is an empty array", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", descriptions: [] },
+      });
+      await wrapper.vm.$nextTick();
+      expect(descriptionParagraphs(wrapper)).toHaveLength(0);
+    });
+  });
+
+  describe("Props", () => {
+    describe("showIndicator prop", () => {
+      it("should not render indicator icon when showIndicator is not true", async () => {
+        const wrapper = mount(FzCardListItem, {
+          props: { title: "Item" },
+        });
+        await wrapper.vm.$nextTick();
+        expect(indicatorIcons(wrapper)).toHaveLength(0);
+      });
+
+      it("should render circle-small icon when showIndicator is true (title-only layout)", async () => {
+        const wrapper = mount(FzCardListItem, {
+          props: { title: "Item", showIndicator: true },
+        });
+        await wrapper.vm.$nextTick();
+        const icons = indicatorIcons(wrapper);
+        expect(icons).toHaveLength(1);
+        expect(icons[0].props("name")).toBe("circle-small");
+      });
+
+      it("should render circle-small icon when showIndicator is true (with badge and amount)", async () => {
+        const wrapper = mount(FzCardListItem, {
+          props: {
+            title: "Item",
+            badge: { text: "X", tone: "dark" },
+            value: "10 €",
+            showIndicator: true,
+          },
+        });
+        await wrapper.vm.$nextTick();
+        const circleSmall = wrapper
+          .findAllComponents({ name: "FzIcon" })
+          .filter((w) => w.props("name") === "circle-small");
+        expect(circleSmall).toHaveLength(1);
+      });
+    });
+
+    describe("badge prop", () => {
+      it("should pass tone and variant text to FzBadge", async () => {
+        const wrapper = mount(FzCardListItem, {
+          props: {
+            title: "Item",
+            badge: { text: "Tag", tone: "success" },
+          },
+        });
+        await wrapper.vm.$nextTick();
+        const badge = wrapper.findComponent({ name: "FzBadge" });
+        expect(badge.exists()).toBe(true);
+        expect(badge.props("tone")).toBe("success");
+        expect(badge.props("variant")).toBe("text");
+      });
+    });
+  });
+
+  describe("Events", () => {
+    it("should emit fzaction:click when single link-action row is clicked", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", actions: [linkAction] },
+      });
+      await wrapper.vm.$nextTick();
+
+      await wrapper.get('[role="button"]').trigger("click");
+
+      expect(wrapper.emitted("fzaction:click")).toBeTruthy();
+      expect(wrapper.emitted("fzaction:click")).toHaveLength(1);
+      expect(wrapper.emitted("fzaction:click")![0]).toEqual([0, linkAction]);
+    });
+
+    it("should emit fzaction:click when single link-action row is activated via Enter", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", actions: [linkAction] },
+      });
+      await wrapper.vm.$nextTick();
+
+      const row = wrapper.get('[role="button"]');
+      await row.trigger("keydown", { key: "Enter" });
+
+      expect(wrapper.emitted("fzaction:click")).toBeTruthy();
+      expect(wrapper.emitted("fzaction:click")).toHaveLength(1);
+      expect(wrapper.emitted("fzaction:click")![0]).toEqual([0, linkAction]);
+    });
+
+    it("should emit fzaction:click when single link-action row is activated via Space", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", actions: [linkAction] },
+      });
+      await wrapper.vm.$nextTick();
+
+      const row = wrapper.get('[role="button"]');
+      await row.trigger("keydown", { key: " " });
+
+      expect(wrapper.emitted("fzaction:click")).toHaveLength(1);
+      expect(wrapper.emitted("fzaction:click")![0]).toEqual([0, linkAction]);
+    });
+
+    it("should emit fzaction:click multiple times on repeated link-action row activations", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", actions: [linkAction] },
+      });
+      await wrapper.vm.$nextTick();
+
+      const row = wrapper.get('[role="button"]');
+      await row.trigger("keydown", { key: "Enter" });
+      await row.trigger("keydown", { key: "Enter" });
+      await row.trigger("keydown", { key: "Enter" });
+
+      expect(wrapper.emitted("fzaction:click")).toHaveLength(3);
+      for (const payload of wrapper.emitted("fzaction:click")!) {
+        expect(payload).toEqual([0, linkAction]);
+      }
+    });
+
+    it("should forward fzaction:click from dropdown", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", actions: [actionA, actionB] },
+      });
+      await wrapper.vm.$nextTick();
+
+      const dropdown = wrapper.findComponent({ name: "FzIconDropdown" });
+      await dropdown.vm.$emit("fzaction:click", 1, actionB);
+
+      expect(wrapper.emitted("fzaction:click")).toBeTruthy();
+      expect(wrapper.emitted("fzaction:click")![0]).toEqual([1, actionB]);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should use the card row as a block root", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item" },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find(".p-8").exists()).toBe(true);
+    });
+
+    it("should expose link-action row as focusable button with labelled title", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Pay invoice", actions: [linkAction] },
+      });
+      await wrapper.vm.$nextTick();
+      const row = wrapper.get('[role="button"]');
+      expect(row.attributes("tabindex")).toBe("0");
+      expect(row.attributes("aria-labelledby")).toBeTruthy();
+      expect(wrapper.get("p.truncate").text()).toBe("Pay invoice");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should render with only a title and no other props", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Minimal" },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find("p.truncate").text()).toBe("Minimal");
+      expect(indicatorIcons(wrapper)).toHaveLength(0);
+      expect(descriptionParagraphs(wrapper)).toHaveLength(0);
+      expect(wrapper.findComponent({ name: "FzIconButton" }).exists()).toBe(
+        false,
+      );
+    });
+
+    it("should render badge without a trailing control when actions are omitted", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", badge: { text: "Label", tone: "dark" } },
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent({ name: "FzBadge" }).exists()).toBe(true);
+      expect(wrapper.text()).toContain("Label");
+      expect(wrapper.findComponent({ name: "FzIconButton" }).exists()).toBe(
+        false,
+      );
+    });
+
+    it("should handle a single description line", async () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", descriptions: ["Single description"] },
+      });
+      await wrapper.vm.$nextTick();
+      const paragraphs = descriptionParagraphs(wrapper);
+      expect(paragraphs).toHaveLength(1);
+      expect(paragraphs[0].text()).toBe("Single description");
+    });
+  });
+
+  describe("Snapshots", () => {
+    it("should match snapshot - minimal (title only)", () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item Title" },
+      });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("should match snapshot - full featured item", () => {
+      const wrapper = mount(FzCardListItem, {
+        props: {
+          title: "Fattura #001",
+          value: "1.200,00 €",
+          badge: badgeDraft,
+          showIndicator: true,
+          descriptions: ["Cliente: Rossi S.r.l.", "Scadenza: 31/03/2024"],
+          actions: [actionA, actionB],
+        },
+      });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("should match snapshot - with showIndicator", () => {
+      const wrapper = mount(FzCardListItem, {
+        props: { title: "Item", showIndicator: true },
+      });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/__snapshots__/FzCardList.spec.ts.snap

@@ -0,0 +1,52 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FzCardList > Snapshots > should match snapshot - default state 1`] = `"<div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-xs align-items-stretch"></div>"`;
+
+exports[`FzCardList > Snapshots > should match snapshot - with items 1`] = `
+"<div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-xs align-items-stretch">
+  <div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-xs align-items-stretch p-8">
+    <!--v-if-->
+    <!-- Title + value row (when badge or value is present) -->
+    <!-- Title Only -->
+    <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-center layout-space-between">
+      <!-- Title and indicator -->
+      <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-center layout-default min-w-0">
+        <!-- Indicator --><span role="presentation" class="flex items-center justify-center size-[12.5px]"><svg class="svg-inline--fa fa-circle-small fa-xs h-[10px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-small" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M0 256a160 160 0 1 1 320 0A160 160 0 1 1 0 256z"></path></svg></span><!-- Title -->
+        <p class="min-w-0 flex-1 truncate">Item 1</p>
+      </div><!-- Value -->
+      <p class="text-base whitespace-nowrap">1.200,00 €</p>
+    </div>
+    <!--v-if-->
+  </div>
+  <div class="w-full my-0">
+    <div class="border-solid border-t-1 border-grey-200"></div>
+  </div>
+  <div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-xs align-items-stretch p-8">
+    <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-base align-items-center layout-default">
+      <!-- Badge -->
+      <div class="flex items-center justify-center truncate max-w-full gap-4 py-4 px-12 h-24 w-fit rounded-2xl bg-grey-500 text-core-white" title="New">
+        <!--v-if-->
+        <p class="text-[inherit] text-sm">New</p>
+        <!--v-if-->
+      </div>
+    </div><!-- Title + value row (when badge or value is present) -->
+    <!-- Title Only -->
+    <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-center layout-space-between">
+      <!-- Title and indicator -->
+      <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-center layout-default min-w-0">
+        <!-- Indicator -->
+        <!--v-if-->
+        <!-- Title -->
+        <p class="min-w-0 flex-1 truncate">Item 2</p>
+      </div><!-- Value -->
+      <!--v-if-->
+    </div>
+    <div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-none align-items-stretch">
+      <p>Due date: 2024-03-01</p>
+    </div>
+  </div>
+  <div class="w-full my-0">
+    <div class="border-solid border-t-1 border-grey-200"></div>
+  </div>
+</div>"
+`;

package/src/__tests__/__snapshots__/FzCardListItem.spec.ts.snap

@@ -0,0 +1,90 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FzCardListItem > Snapshots > should match snapshot - full featured item 1`] = `
+"<div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-xs align-items-stretch p-8 hover:bg-semantic-info-50 hover:rounded">
+  <!--
+      Header row layout:
+      - badge present → badge + actions
+      - hasTitleOnly (no badge, no value) → title + actions (inline)
+      - value present, no badge → actions only; title + value are in the second row
+    -->
+  <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-base align-items-center layout-default">
+    <!-- Badge -->
+    <div class="flex items-center justify-center truncate max-w-full gap-4 py-4 px-12 h-24 w-fit rounded-2xl bg-grey-500 text-core-white" title="Bozza">
+      <!--v-if-->
+      <p class="text-[inherit] text-sm">Bozza</p>
+      <!--v-if-->
+    </div><!-- Multiple actions dropdown -->
+    <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-center layout-expand-last shrink-0 ml-auto">
+      <div iconname="ellipsis-vertical" hasnotification="false" label="Open dropdown" variant="invisible" aria-label="Mostra azioni">
+        <div class="inline-flex w-full sm:w-auto"><span data-v-8090b1b6="" class="fz-icon-button-wrapper relative fz-icon-button-wrapper--frontoffice"><button data-v-8090b1b6="" type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-core-white text-grey-500 !border-grey-200 hover:bg-grey-100 hover:!border-grey-200 focus:bg-core-white focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200" aria-label="Open dropdown"><div class="flex items-center justify-items-center"><span role="presentation" class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-ellipsis-vertical h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="ellipsis-vertical" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path class="" fill="currentColor" d="M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z"></path></svg></span></div>
+        <!--v-if-->
+        <!--v-if--></button>
+        <!--v-if--></span>
+      </div>
+      <!--v-if-->
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+  </div>
+</div><!-- Title + value row (when badge or value is present) -->
+<!-- Title Only -->
+<div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-center layout-space-between">
+  <!-- Title and indicator -->
+  <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-center layout-default min-w-0">
+    <!-- Indicator --><span role="presentation" class="flex items-center justify-center size-[12.5px]"><svg class="svg-inline--fa fa-circle-small fa-xs h-[10px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-small" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M0 256a160 160 0 1 1 320 0A160 160 0 1 1 0 256z"></path></svg></span><!-- Title -->
+    <p class="min-w-0 flex-1 truncate">Fattura #001</p>
+  </div><!-- Value -->
+  <p class="text-base whitespace-nowrap">1.200,00 €</p>
+</div>
+<div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-none align-items-stretch">
+  <p>Cliente: Rossi S.r.l.</p>
+  <p>Scadenza: 31/03/2024</p>
+</div>
+</div>
+<div class="w-full my-0">
+  <div class="border-solid border-t-1 border-grey-200"></div>
+</div>"
+`;
+
+exports[`FzCardListItem > Snapshots > should match snapshot - minimal (title only) 1`] = `
+"<div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-xs align-items-stretch p-8">
+  <!--v-if-->
+  <!-- Title + value row (when badge or value is present) -->
+  <!-- Title Only -->
+  <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-center layout-space-between">
+    <!-- Title and indicator -->
+    <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-center layout-default min-w-0">
+      <!-- Indicator -->
+      <!--v-if-->
+      <!-- Title -->
+      <p class="min-w-0 flex-1 truncate">Item Title</p>
+    </div><!-- Value -->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+<div class="w-full my-0">
+  <div class="border-solid border-t-1 border-grey-200"></div>
+</div>"
+`;
+
+exports[`FzCardListItem > Snapshots > should match snapshot - with showIndicator 1`] = `
+"<div data-v-da7f5873="" class="fz-container fz-container--vertical gap-section-content-xs align-items-stretch p-8">
+  <!--v-if-->
+  <!-- Title + value row (when badge or value is present) -->
+  <!-- Title Only -->
+  <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-center layout-space-between">
+    <!-- Title and indicator -->
+    <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-xs align-items-center layout-default min-w-0">
+      <!-- Indicator --><span role="presentation" class="flex items-center justify-center size-[12.5px]"><svg class="svg-inline--fa fa-circle-small fa-xs h-[10px]" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-small" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M0 256a160 160 0 1 1 320 0A160 160 0 1 1 0 256z"></path></svg></span><!-- Title -->
+      <p class="min-w-0 flex-1 truncate">Item</p>
+    </div><!-- Value -->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+<div class="w-full my-0">
+  <div class="border-solid border-t-1 border-grey-200"></div>
+</div>"
+`;