@simplysm/solid 13.0.74 → 13.0.76

package/tests/components/features/data-select-button/DataSelectButton.spec.tsx

@@ -1,9 +1,9 @@
 import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
 import { render, cleanup } from "@solidjs/testing-library";
 import { createSignal, type JSX } from "solid-js";
-import { DataSelectButton, type InjectedSelectProps } from "@simplysm/solid";
-import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { DataSelectButton, type SelectDialogBaseProps } from "@simplysm/solid";
+import { DialogProvider } from "../../../../src/components/disclosure/Dialog";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // item type for tests
@@ -26,13 +26,13 @@ function createTestLoad() {
   return loadFn;
 }
 
-// Dialog component for tests — receives InjectedSelectProps automatically
-function TestDialogComponent(props: { confirmKeys: number[] } & InjectedSelectProps) {
+// Dialog component for tests — uses close prop directly
+function TestDialogComponent(props: SelectDialogBaseProps<number> & { confirmKeys: number[] }) {
   return (
     <div data-testid="dialog-content">
-      <div data-testid="select-mode">{props.selectMode}</div>
+      <div data-testid="select-mode">{props.selectionMode}</div>
       <div data-testid="selected-keys">{JSON.stringify([...props.selectedKeys])}</div>
-      <button data-testid="dialog-confirm" onClick={() => props.onSelect({ keys: props.confirmKeys })}>
+      <button data-testid="dialog-confirm" onClick={() => props.close?.({ selectedKeys: props.confirmKeys })}>
         confirm
       </button>
     </div>
@@ -62,7 +62,8 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -79,7 +80,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -96,7 +98,8 @@ describe("DataSelectButton", () => {
         value={[1, 3]}
         multiple
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -117,7 +120,8 @@ describe("DataSelectButton", () => {
         value={value()}
         onValueChange={setValue}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -137,7 +141,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -154,7 +159,8 @@ describe("DataSelectButton", () => {
         value={1}
         required
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -173,7 +179,8 @@ describe("DataSelectButton", () => {
         value={1}
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -197,7 +204,8 @@ describe("DataSelectButton", () => {
         multiple
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -217,7 +225,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         disabled
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -231,7 +240,8 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -248,7 +258,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [2] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [2] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -279,7 +290,8 @@ describe("DataSelectButton", () => {
         multiple
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [1, 3] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [1, 3] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -309,7 +321,8 @@ describe("DataSelectButton", () => {
         value={1}
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [2] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [2] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -335,7 +348,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         required
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -352,7 +366,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={1}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
         validate={(v) => (v === 1 ? "1은 선택할 수 없습니다" : undefined)}
       />
@@ -371,7 +386,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         disabled
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -387,7 +403,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         required
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -404,7 +421,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         onValueChange={onValueChange}
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [3] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [3] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -435,7 +453,8 @@ describe("DataSelectButton", () => {
       <DataSelectButton
         value={2}
         load={asyncLoad}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -450,7 +469,8 @@ describe("DataSelectButton", () => {
     const { container } = renderWithDialog(() => (
       <DataSelectButton
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -466,7 +486,8 @@ describe("DataSelectButton", () => {
         value={1}
         disabled
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));
@@ -484,7 +505,8 @@ describe("DataSelectButton", () => {
         value={1}
         multiple
         load={load}
-        dialog={{ component: TestDialogComponent, props: { confirmKeys: [] } }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
         renderItem={(item: TestItem) => <span>{item.name}</span>}
       />
     ));

package/tests/components/features/permission-table/PermissionTable.spec.tsx

@@ -8,7 +8,7 @@ import {
   changePermCheck,
 } from "../../../../src/components/features/permission-table/PermissionTable";
 import type { AppPerm } from "../../../../src/helpers/createAppStructure";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // --- test data ---
@@ -176,32 +176,6 @@ describe("PermissionTable component", () => {
   });
 
   describe("basic rendering", () => {
-    it("renders as DataSheet (div with data-sheet attribute)", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
-      const wrapper = container.querySelector("[data-sheet]");
-      expect(wrapper).toBeTruthy();
-      expect(wrapper!.tagName).toBe("DIV");
-    });
-
-    it("renders a table inside DataSheet", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
-      const table = container.querySelector("[data-sheet] table");
-      expect(table).toBeTruthy();
-    });
-
-    it("displays perm type columns in header", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
-      expect(getByText("use")).toBeTruthy();
-      expect(getByText("edit")).toBeTruthy();
-      expect(getByText("approve")).toBeTruthy();
-    });
-
-    it("displays item titles", () => {
-      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
-      expect(getByText("사용자 관리")).toBeTruthy();
-      expect(getByText("시스템")).toBeTruthy();
-    });
-
     it("child items are expanded by default", () => {
       const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><PermissionTable items={sampleItems} /></I18nProvider></ConfigProvider>);
       expect(getByText("권한 설정")).toBeTruthy();
@@ -259,13 +233,14 @@ describe("PermissionTable component", () => {
       expect(getByText("권한 설정")).toBeTruthy();
       expect(getByText("사용자 목록")).toBeTruthy();
 
-      // click collapse button (expand toggle on "사용자 관리" row)
+      // find the expand toggle in the expand feature column (first td) of "사용자 관리" row
       const titleEl = getByText("사용자 관리");
       const row = titleEl.closest("tr")!;
-      const expandButton = row.querySelector("button")!;
+      const expandTd = row.querySelector("td")!;
+      const expandButton = expandTd.querySelector("button")!;
       fireEvent.click(expandButton);
 
-      // children are removed from the DOM (Sheet does not render collapsed items)
+      // collapsed children are removed from the DOM (flattenTree excludes them)
       expect(queryByText("권한 설정")).toBeNull();
       expect(queryByText("사용자 목록")).toBeNull();
     });

package/tests/components/features/shared-data/SharedDataSelect.spec.tsx

@@ -3,11 +3,11 @@ import { render, cleanup } from "@solidjs/testing-library";
 import { createSignal, type Accessor } from "solid-js";
 import {
   SharedDataSelect,
-  type InjectedSelectProps,
+  type SelectDialogBaseProps,
 } from "@simplysm/solid";
-import { type SharedDataAccessor } from "../../../../src/providers/shared-data/SharedDataContext";
-import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { type SharedDataAccessor } from "../../../../src/providers/shared-data/SharedDataProvider";
+import { DialogProvider } from "../../../../src/components/disclosure/Dialog";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 interface TestItem {
@@ -24,21 +24,21 @@ const testItems: TestItem[] = [
 function createMockAccessor(itemsSignal: Accessor<TestItem[]>): SharedDataAccessor<TestItem> {
   return {
     items: itemsSignal,
-    get: (key) => itemsSignal().find((item) => item.id === key),
+    get: (key: string | number | undefined) => itemsSignal().find((item: TestItem) => item.id === key),
     emit: vi.fn(async () => {}),
-    getKey: (item) => item.id,
-    getSearchText: (item) => item.name,
+    getKey: (item: TestItem) => item.id,
+    itemSearchText: (item: TestItem) => item.name,
   };
 }
 
-function TestDialogComponent(props: { confirmKeys: number[] } & InjectedSelectProps) {
+function TestDialogComponent(props: SelectDialogBaseProps & { confirmKeys: number[] }) {
   return (
     <div data-testid="dialog-content">
-      <div data-testid="select-mode">{props.selectMode}</div>
+      <div data-testid="select-mode">{props.selectionMode}</div>
       <div data-testid="selected-keys">{JSON.stringify([...props.selectedKeys])}</div>
       <button
         data-testid="dialog-confirm"
-        onClick={() => props.onSelect({ keys: props.confirmKeys })}
+        onClick={() => props.close?.({ selectedKeys: props.confirmKeys })}
       >
         confirm
       </button>
@@ -109,11 +109,9 @@ describe("SharedDataSelect", () => {
         data={accessor}
         value={1}
         onValueChange={onValueChange}
-        dialog={{
-          component: TestDialogComponent,
-          props: { confirmKeys: [2] },
-          option: { header: "Select Item" },
-        }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [2] }}
+        dialogOptions={{ header: "Select Item" }}
       >
         <SharedDataSelect.ItemTemplate>
           {(item: TestItem) => <span>{item.name}</span>}
@@ -147,10 +145,8 @@ describe("SharedDataSelect", () => {
         data={accessor}
         value={3}
         onValueChange={() => {}}
-        dialog={{
-          component: TestDialogComponent,
-          props: { confirmKeys: [] },
-        }}
+        dialog={TestDialogComponent}
+        dialogProps={{ confirmKeys: [] }}
       >
         <SharedDataSelect.ItemTemplate>
           {(item: TestItem) => <span>{item.name}</span>}

package/tests/components/features/shared-data/SharedDataSelectList.spec.tsx

@@ -2,16 +2,16 @@ import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@solidjs/testing-library";
 import { createSignal } from "solid-js";
 import { SharedDataSelectList } from "@simplysm/solid";
-import { DialogProvider } from "../../../../src/components/disclosure/DialogProvider";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { DialogProvider } from "../../../../src/components/disclosure/Dialog";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // SharedDataAccessor mock factory
 function createMockAccessor<T>(
   items: T[],
   options?: {
-    getIsHidden?: (item: T) => boolean;
-    getSearchText?: (item: T) => string;
+    isItemHidden?: (item: T) => boolean;
+    itemSearchText?: (item: T) => string;
   },
 ) {
   const [itemsSignal] = createSignal(items);
@@ -20,8 +20,8 @@ function createMockAccessor<T>(
     get: (key: string | number | undefined) => items.find((_, i) => i === Number(key)),
     emit: vi.fn(),
     getKey: (item: T) => items.indexOf(item),
-    getIsHidden: options?.getIsHidden,
-    getSearchText: options?.getSearchText,
+    isItemHidden: options?.isItemHidden,
+    itemSearchText: options?.itemSearchText,
   };
 }
 
@@ -48,20 +48,6 @@ describe("SharedDataSelectList", () => {
   // ─── Item Rendering ─────────────────────────────────────
 
   describe("item rendering", () => {
-    it("items are rendered as List.Item", () => {
-      const accessor = createMockAccessor(["Apple", "Banana", "Cherry"]);
-
-      renderWithDialog(() => (
-        <SharedDataSelectList data={accessor} required>
-          <SharedDataSelectList.ItemTemplate>{(item) => <>{item}</>}</SharedDataSelectList.ItemTemplate>
-        </SharedDataSelectList>
-      ));
-
-      expect(screen.getByText("Apple")).toBeTruthy();
-      expect(screen.getByText("Banana")).toBeTruthy();
-      expect(screen.getByText("Cherry")).toBeTruthy();
-    });
-
     it("children render function receives item and index", () => {
       const accessor = createMockAccessor(["A", "B"]);
 
@@ -278,9 +264,9 @@ describe("SharedDataSelectList", () => {
   // ─── Filtering ────────────────────────────────────────────
 
   describe("filtering", () => {
-    it("items hidden by getIsHidden are not displayed", () => {
+    it("items hidden by isItemHidden are not displayed", () => {
       const accessor = createMockAccessor(["Apple", "Banana", "Cherry"], {
-        getIsHidden: (item) => item === "Banana",
+        isItemHidden: (item) => item === "Banana",
       });
 
       renderWithDialog(() => (
@@ -298,7 +284,7 @@ describe("SharedDataSelectList", () => {
       const accessor = createMockAccessor(["Apple", "Banana", "Cherry"]);
 
       renderWithDialog(() => (
-        <SharedDataSelectList data={accessor} filterFn={(item) => item.startsWith("B")} required>
+        <SharedDataSelectList data={accessor} filterFn={(item: string) => item.startsWith("B")} required>
           <SharedDataSelectList.ItemTemplate>{(item) => <>{item}</>}</SharedDataSelectList.ItemTemplate>
         </SharedDataSelectList>
       ));
@@ -312,9 +298,9 @@ describe("SharedDataSelectList", () => {
   // ─── Search ────────────────────────────────────────────
 
   describe("search", () => {
-    it("search input is shown when getSearchText is provided", () => {
+    it("search input is shown when itemSearchText is provided", () => {
       const accessor = createMockAccessor(["Apple", "Banana"], {
-        getSearchText: (item) => item,
+        itemSearchText: (item) => item,
       });
 
       renderWithDialog(() => (
@@ -326,7 +312,7 @@ describe("SharedDataSelectList", () => {
       expect(document.querySelector("[data-shared-data-select-list] input")).toBeTruthy();
     });
 
-    it("search input is hidden when getSearchText is not provided", () => {
+    it("search input is hidden when itemSearchText is not provided", () => {
       const accessor = createMockAccessor(["Apple", "Banana"]);
 
       renderWithDialog(() => (
@@ -338,9 +324,9 @@ describe("SharedDataSelectList", () => {
       expect(document.querySelector("[data-shared-data-select-list] input")).toBeNull();
     });
 
-    it("typing in search input filters items by getSearchText", async () => {
+    it("typing in search input filters items by itemSearchText", async () => {
       const accessor = createMockAccessor(["Apple", "Banana", "Cherry"], {
-        getSearchText: (item) => item,
+        itemSearchText: (item) => item,
       });
 
       renderWithDialog(() => (
@@ -361,7 +347,7 @@ describe("SharedDataSelectList", () => {
 
     it("search is case-insensitive", async () => {
       const accessor = createMockAccessor(["Apple", "Banana"], {
-        getSearchText: (item) => item,
+        itemSearchText: (item) => item,
       });
 
       renderWithDialog(() => (
@@ -381,7 +367,7 @@ describe("SharedDataSelectList", () => {
 
     it("multiple space-separated terms must all match", async () => {
       const accessor = createMockAccessor(["Red Apple", "Green Apple", "Red Banana"], {
-        getSearchText: (item) => item,
+        itemSearchText: (item) => item,
       });
 
       renderWithDialog(() => (
@@ -406,7 +392,7 @@ describe("SharedDataSelectList", () => {
   describe("custom filter", () => {
     it("search input is hidden when Filter compound is provided", () => {
       const accessor = createMockAccessor(["Apple", "Banana"], {
-        getSearchText: (item) => item,
+        itemSearchText: (item) => item,
       });
 
       renderWithDialog(() => (
@@ -444,17 +430,4 @@ describe("SharedDataSelectList", () => {
 
   // ─── header ────────────────────────────────────────────
 
-  describe("header", () => {
-    it("header text is displayed when header is provided", () => {
-      const accessor = createMockAccessor(["Apple"]);
-
-      renderWithDialog(() => (
-        <SharedDataSelectList data={accessor} header="과일 목록" required>
-          <SharedDataSelectList.ItemTemplate>{(item) => <>{item}</>}</SharedDataSelectList.ItemTemplate>
-        </SharedDataSelectList>
-      ));
-
-      expect(screen.getByText("과일 목록")).toBeTruthy();
-    });
-  });
 });

package/tests/components/feedback/busy/BusyContainer.spec.tsx

@@ -5,15 +5,6 @@ import { BusyContainer } from "../../../../src/components/feedback/busy/BusyCont
 
 describe("BusyContainer", () => {
   describe("basic rendering", () => {
-    it("renders children", () => {
-      const { getByText } = render(() => (
-        <BusyContainer>
-          <span>Content</span>
-        </BusyContainer>
-      ));
-      expect(getByText("Content")).toBeTruthy();
-    });
-
     it("does not show overlay when busy is false", () => {
       const { container } = render(() => (
         <BusyContainer busy={false}>
@@ -77,4 +68,19 @@ describe("BusyContainer", () => {
       expect(queryByText("Content")).toBeTruthy();
     });
   });
+
+  describe("bar variant", () => {
+    it("bar variant: renders two animated indicator bars", async () => {
+      const { container } = render(() => (
+        <BusyContainer busy variant="bar">
+          <span>Content</span>
+        </BusyContainer>
+      ));
+      // createMountTransition uses double rAF
+      await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+
+      const bars = container.querySelectorAll(".origin-left");
+      expect(bars.length).toBe(2);
+    });
+  });
 });

package/tests/components/feedback/notification/LiveRegion.spec.tsx

@@ -2,27 +2,14 @@ import { render, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, beforeEach } from "vitest";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { ConfigContext } from "../../../../src/providers/ConfigContext";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
-import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
+import { useNotification } from "../../../../src/components/feedback/notification/NotificationProvider";
 
 describe("Notification Live Region", () => {
   beforeEach(() => {
     localStorage.setItem("testApp.i18n-locale", JSON.stringify("en"));
   });
 
-  it("Provider has live region with role=status", () => {
-    render(() => (
-      <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <I18nProvider>
-          <NotificationProvider>content</NotificationProvider>
-        </I18nProvider>
-      </ConfigContext.Provider>
-    ));
-
-    const liveRegion = document.querySelector('[role="status"][aria-live="polite"]');
-    expect(liveRegion).not.toBeNull();
-  });
-
   it("updates live region text when notification occurs", async () => {
     let notification: ReturnType<typeof useNotification>;
 
@@ -48,16 +35,4 @@ describe("Notification Live Region", () => {
     });
   });
 
-  it("live region is visually hidden (sr-only)", () => {
-    render(() => (
-      <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <I18nProvider>
-          <NotificationProvider>content</NotificationProvider>
-        </I18nProvider>
-      </ConfigContext.Provider>
-    ));
-
-    const liveRegion = document.querySelector('[role="status"]');
-    expect(liveRegion?.classList.contains("sr-only")).toBe(true);
-  });
 });

package/tests/components/feedback/notification/NotificationBanner.spec.tsx

@@ -2,9 +2,9 @@ import { render, fireEvent, waitFor } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { ConfigContext } from "../../../../src/providers/ConfigContext";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { NotificationBanner } from "../../../../src/components/feedback/notification/NotificationBanner";
-import { useNotification } from "../../../../src/components/feedback/notification/NotificationContext";
+import { useNotification } from "../../../../src/components/feedback/notification/NotificationProvider";
 
 describe("NotificationBanner", () => {
   beforeEach(() => {
@@ -84,31 +84,6 @@ describe("NotificationBanner", () => {
     });
   });
 
-  it("has role=alert attribute", async () => {
-    let notification: ReturnType<typeof useNotification>;
-
-    render(() => (
-      <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <I18nProvider>
-          <NotificationProvider>
-            {(() => {
-              notification = useNotification();
-              return null;
-            })()}
-            <NotificationBanner />
-          </NotificationProvider>
-        </I18nProvider>
-      </ConfigContext.Provider>
-    ));
-
-    notification!.info("Test");
-
-    await waitFor(() => {
-      const banner = document.querySelector("[data-notification-banner]");
-      expect(banner?.getAttribute("role")).toBe("alert");
-    });
-  });
-
   it("sets data-theme attribute for each theme", async () => {
     let notification: ReturnType<typeof useNotification>;