diff --git a/tests/OrderedList.test.svelte b/tests/OrderedList.test.svelte
deleted file mode 100644
index c1d24c86..00000000
--- a/tests/OrderedList.test.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
- Ordered list item
- Ordered list item
- Ordered list item
-
-
-
-
- Ordered list item
-
-
- Ordered list item
-
-
- Ordered list item
-
-
-
-
-
- Ordered list level 1
-
- Ordered list level 2
-
- Ordered list level 3
-
- Ordered list level 3
- Ordered list level 3
-
-
-
-
- Ordered list level 1
- Ordered list level 1
-
-
-
-
- Ordered list level 1
-
- Ordered list level 2
-
- Ordered list level 3
-
- Ordered list level 3
- Ordered list level 3
-
-
-
-
- Ordered list level 1
- Ordered list level 1
-
diff --git a/tests/OrderedList/OrderedList.test.svelte b/tests/OrderedList/OrderedList.test.svelte
new file mode 100644
index 00000000..07e2a41c
--- /dev/null
+++ b/tests/OrderedList/OrderedList.test.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ {#each items as item}
+
+ {item}
+ {#if nested && nestedItems.length > 0}
+
+ {#each nestedItems as nestedItem}
+ {nestedItem}
+ {/each}
+
+ {/if}
+
+ {/each}
+
+
diff --git a/tests/OrderedList/OrderedList.test.ts b/tests/OrderedList/OrderedList.test.ts
new file mode 100644
index 00000000..56357e5c
--- /dev/null
+++ b/tests/OrderedList/OrderedList.test.ts
@@ -0,0 +1,172 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import OrderedList from "./OrderedList.test.svelte";
+
+describe("OrderedList", () => {
+ it("should render with default props", () => {
+ render(OrderedList);
+
+ const list = screen.getByRole("list");
+ expect(list).toHaveClass("bx--list--ordered");
+ expect(list).not.toHaveClass("bx--list--ordered--native");
+ expect(list).not.toHaveClass("bx--list--nested");
+ expect(list).not.toHaveClass("bx--list--expressive");
+
+ const items = screen.getAllByRole("listitem");
+ expect(items).toHaveLength(3);
+ expect(items[0]).toHaveTextContent("Item 1");
+ expect(items[1]).toHaveTextContent("Item 2");
+ expect(items[2]).toHaveTextContent("Item 3");
+ });
+
+ it("should support nested lists", () => {
+ render(OrderedList, {
+ props: {
+ nested: true,
+ nestedItems: ["Nested 1", "Nested 2"],
+ },
+ });
+
+ const lists = screen.getAllByRole("list");
+ expect(lists).toHaveLength(4); // Main list + 3 nested lists (one for each main item)
+
+ const mainList = lists[0];
+ expect(mainList).toHaveClass("bx--list--ordered");
+ expect(mainList).toHaveClass("bx--list--nested");
+
+ const nestedLists = lists.slice(1);
+ nestedLists.forEach((list) => {
+ expect(list).toHaveClass("bx--list--ordered");
+ expect(list).toHaveClass("bx--list--nested");
+ });
+
+ const items = screen.getAllByRole("listitem");
+ expect(items).toHaveLength(9); // 3 main items + (2 nested items × 3)
+ });
+
+ it("should support native list styles", () => {
+ render(OrderedList, {
+ props: { native: true },
+ });
+
+ const list = screen.getByRole("list");
+ expect(list).toHaveClass("bx--list--ordered--native");
+ expect(list).not.toHaveClass("bx--list--ordered");
+ });
+
+ it("should support native list styles with nesting", () => {
+ render(OrderedList, {
+ props: {
+ native: true,
+ nested: true,
+ nestedItems: ["Nested 1", "Nested 2"],
+ },
+ });
+
+ const lists = screen.getAllByRole("list");
+
+ // Only the top-level list has the native class
+ expect(lists[0]).toHaveClass("bx--list--ordered--native");
+ expect(lists[0]).not.toHaveClass("bx--list--ordered");
+
+ lists.slice(1).forEach((list) => {
+ expect(list).toHaveClass("bx--list--ordered bx--list--nested");
+ expect(list).not.toHaveClass("bx--list--ordered--native");
+ });
+ });
+
+ it("should support expressive styles", () => {
+ render(OrderedList, {
+ props: { expressive: true },
+ });
+
+ const list = screen.getByRole("list");
+ expect(list).toHaveClass("bx--list--expressive");
+ });
+
+ it("should support custom items", () => {
+ const customItems = ["Custom 1", "Custom 2", "Custom 3", "Custom 4"];
+ render(OrderedList, {
+ props: { items: customItems },
+ });
+
+ const items = screen.getAllByRole("listitem");
+ expect(items).toHaveLength(customItems.length);
+ items.forEach((item, index) => {
+ expect(item).toHaveTextContent(customItems[index]);
+ });
+ });
+
+ describe("events", () => {
+ it("should emit click event", async () => {
+ const { component } = render(OrderedList);
+ const list = screen.getByRole("list");
+
+ const mock = vi.fn();
+ component.$on("click", mock);
+
+ await user.click(list);
+ expect(mock).toHaveBeenCalled();
+ });
+
+ test.each(["mouseover", "mouseenter", "mouseleave"])(
+ "should emit %s event",
+ (eventName) => {
+ const { component } = render(OrderedList);
+ const list = screen.getByRole("list");
+
+ const mock = vi.fn();
+ component.$on(eventName, mock);
+
+ const event = new MouseEvent(eventName);
+ list.dispatchEvent(event);
+
+ expect(mock).toHaveBeenCalled();
+ },
+ );
+ });
+
+ describe("accessibility", () => {
+ it("should have correct ARIA role", () => {
+ render(OrderedList);
+
+ const list = screen.getByRole("list");
+ expect(list.tagName).toBe("OL");
+
+ const items = screen.getAllByRole("listitem");
+ items.forEach((item) => {
+ expect(item.tagName).toBe("LI");
+ });
+ });
+
+ it("should maintain list structure with nested items", () => {
+ render(OrderedList, {
+ props: {
+ nested: true,
+ nestedItems: ["Nested 1", "Nested 2"],
+ },
+ });
+
+ const lists = screen.getAllByRole("list");
+ lists.forEach((list) => {
+ expect(list.tagName).toBe("OL");
+ expect(list.children).toBeTruthy();
+ Array.from(list.children).forEach((child) => {
+ expect(child.tagName).toBe("LI");
+ });
+ });
+ });
+
+ it("should maintain correct order with native styles", () => {
+ const items = ["First", "Second", "Third", "Fourth", "Fifth"];
+ render(OrderedList, {
+ props: { native: true, items },
+ });
+
+ const listItems = screen.getAllByRole("listitem");
+ items.forEach((text, index) => {
+ expect(listItems[index]).toHaveTextContent(text);
+ });
+ });
+ });
+});